.zd-wrap{ position:absolute; inset:0; overflow:hidden; background:#f1f5f9; }
.zd{
  position:absolute; top:0; left:0;
  width:1200px; height:700px;
  transform:translateX(var(--zd-x, 0px)) scale(var(--zd-s, 1));
  transform-origin:top left;
  display:flex;
  background:#f1f5f9;
  color:#0f172a;
  font-family:var(--zr-font);
  font-size:12px; line-height:1.45;
  text-align:left;
  -webkit-font-smoothing:antialiased;
}
.zd *{ box-sizing:border-box; }
.zd svg{ display:block; }

/* ── sidebar ─────────────────────────────────────────────────────────── */
.zd__side{
  width:208px; flex:0 0 208px;
  border-right:1px solid #e2e8f0; background:#fff;
  display:flex; flex-direction:column;
}
.zd__brand{
  display:flex; align-items:center; gap:8px;
  padding:16px; color:#0f172a;
  font-size:17px; font-weight:600; letter-spacing:-.02em;
}
.zd__brand svg{ width:22px; height:20px; }
.zd__ws{
  margin:0 12px;
  display:flex; align-items:center; gap:12px;
  padding:8px 12px;
  border:1px solid #e2e8f0; border-radius:8px;
}
.zd__ws-t{ flex:1; }
.zd__ws-t b{ display:block; font-size:12px; font-weight:500; color:#0f172a; }
.zd__ws-t s{ display:block; text-decoration:none; font-size:12px; color:#64748b; }
/* these two chevrons are direct children with no other rule to size
   them, so without this they render at the SVG default. */
.zd__ws > svg, .zd__user > svg{ width:14px; height:14px; flex:0 0 auto; color:#94a3b8; }
.zd__nav{ padding:16px 12px; display:flex; flex-direction:column; gap:4px; flex:1; }
.zd__nav a{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border-radius:8px;
  font-size:12px; color:#475569; text-decoration:none;
}
.zd__nav a svg{ width:16px; height:16px; color:#94a3b8; flex:0 0 auto; }
.zd__nav a.is-on{ background:#eef2ff; color:#4338ca; font-weight:500; }
.zd__nav a.is-on svg{ color:#4f46e5; }
.zd__nav a span{ flex:1; }
.zd__tag{
  background:#e0e7ff; color:#4338ca;
  border-radius:4px; padding:1px 6px;
  font-size:10px; font-weight:500; text-transform:uppercase; letter-spacing:.04em;
}
.zd__user{
  border-top:1px solid #e2e8f0; padding:12px;
  display:flex; align-items:center; gap:10px;
}
.zd__av{
  width:28px; height:28px; border-radius:50%;
  background:#e2e8f0; color:#475569;
  display:grid; place-items:center;
  font-size:11px; font-weight:500;
}
.zd__user-t{ flex:1; min-width:0; }
.zd__user-t b{ display:block; font-size:12px; font-weight:500; color:#0f172a; }
.zd__user-t s{ display:block; text-decoration:none; font-size:11px; color:#64748b;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── main ────────────────────────────────────────────────────────────── */
.zd__main{ flex:1; min-width:0; display:flex; flex-direction:column; background:#f8fafc;
  min-height:0; }
/* Sources and Workflows run past 700px. The React original scrolls its
   <main>, so this does too — the panel is browsable rather than clipped. */
.zd__views{ flex:1; min-height:0; overflow-y:auto; overflow-x:hidden; }
.zd{ overflow:hidden; }
.zd__top{
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:8px 16px;
  border-bottom:1px solid #e2e8f0; background:#fff;
}
.zd__crumb{ display:flex; align-items:center; gap:8px; font-size:13px; color:#64748b; }
.zd__crumb b{ color:#0f172a; font-weight:500; }
.zd__crumb svg{ width:14px; height:14px; color:#cbd5e1; }
.zd__pills{ display:flex; align-items:center; gap:8px; }
.zd-pill{
  display:flex; align-items:center; gap:6px;
  padding:6px 10px;
  border:1px solid #e2e8f0; border-radius:8px; background:#fff;
  font-size:12px; color:#334155; white-space:nowrap;
}
.zd-pill svg{ width:14px; height:14px; color:#94a3b8; }
.zd-pill--ico{ padding:7px; }

.zd__body{
  flex:1; min-height:0;
  padding:16px;
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px;
  align-content:start;
}

/* ── card ───────────────────────────────────────────────────────────── */
.zd-card{ border:1px solid #e2e8f0; border-radius:12px; background:#fff; overflow:hidden; }
.zd-card__hd{ display:flex; align-items:flex-start; gap:12px; padding:16px 16px 0; }
.zd-card__ico{
  width:28px; height:28px; flex:0 0 auto; margin-top:2px;
  border-radius:6px; background:#eef2ff; color:#4f46e5;
  display:grid; place-items:center;
}
.zd-card__ico svg{ width:14px; height:14px; }
.zd-card__ttl{ flex:1; }
.zd-card__ttl b{ display:block; font-size:13px; font-weight:600; letter-spacing:-.01em; color:#0f172a; }
.zd-card__ttl s{ display:block; text-decoration:none; font-size:11px; color:#64748b; }
.zd-card__all{ display:flex; align-items:center; gap:4px; font-size:11px; font-weight:500; color:#64748b; }
.zd-card__all svg{ width:12px; height:12px; }

/* ── line chart ─────────────────────────────────────────────────────── */
.zd-chart{ padding:14px 12px 0; }
/* the hover readout — drawn in the svg so the panel's scaling carries it */
.zd-chart svg{ pointer-events:auto; }
.zd-hov{ transition:opacity .12s linear; }
.zd-hov__rule{ stroke:#94a3b8; stroke-width:1; stroke-dasharray:3 3; }
.zd-hov__dot{ stroke-width:1.8; }
.zd-hov__card rect:first-child{
  fill:#fff; stroke:rgba(15,23,42,.10); stroke-width:1;
  filter:drop-shadow(0 3px 8px rgba(15,23,42,.14));
}
.zd-hov__h{ font-size:9px; font-weight:600; fill:#0f172a; }
.zd-hov__n{ font-size:8.6px; fill:#475569; }
.zd-hov__v{ font-size:8.6px; font-weight:600; fill:#0f172a; font-variant-numeric:tabular-nums; }
.zd-chart svg{ width:100%; height:auto; }
.zd-grid line{ stroke:#e2e8f0; stroke-dasharray:4 4; }
.zd-axis{ fill:#64748b; font-size:10px; }
.zd-ln{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.zd-legend{
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px;
  padding:8px 16px 12px;
}
.zd-leg{ display:inline-flex; align-items:center; gap:7px; font-size:11px; color:#475569; }
.zd-leg i{ width:18px; height:2px; border-radius:2px; }
.zd-improve{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  border-top:1px solid #f1f5f9; padding:12px 16px;
}
.zd-improve > b{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:500; color:#0f172a; }
.zd-improve > b svg{ width:14px; height:14px; color:#4f46e5; }
.zd-act{
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 10px; border:1px solid #e2e8f0; border-radius:8px;
  font-size:11px; color:#334155;
}
.zd-act svg{ width:13px; height:13px; color:#94a3b8; }

/* ── tables ─────────────────────────────────────────────────────────── */
.zd-tbl{ width:100%; margin-top:8px; border-collapse:collapse; font-size:11px; }

/* ── zd-card--fill ──────────────────────────────────────────────────────────────────────────────────
   POST-VENDOR CHANGE. This file is sliced out of the design comps by scripts/extract-legacy.py in the
   Astro repo and the rest of it is generated; this block is a deliberate correction made after the port,
   so re-vendoring zd.css would drop it. Keep it, or move it into the extractor.

   WHY. .zd-card is display:block with no bottom padding, and the overview grid stretches every card in a
   row to the tallest one — 374px, set by the Visibility chart. A <table> does not grow to fill a stretched
   block parent, so the Brands card sat at 362px with its last row 26px above the card edge, while the
   Visibility card beside it ran flush (measured slack: 1px vs 26px). Making the card a flex column lets
   the table take the remaining height, which is the convention the rest of the panel already follows.

   Scoped to the modifier, not to .zd-card, on purpose: 17 cards use that class across the panel's eight
   views, and several rely on block flow for charts and donuts that are pinned by the pixel-parity suite on
   five other routes. Only the card that carries the modifier changes. */
.zd-card--fill{ display:flex; flex-direction:column; }
.zd-card--fill > .zd-tbl{ flex:1 1 auto; }
.zd-tbl th{
  padding:6px 0; font-weight:400; font-size:11px; color:#64748b; text-align:left;
  border-bottom:1px solid #f1f5f9;
}
.zd-tbl th:first-child{ padding-left:16px; }
.zd-tbl th.zd-ta-r{ text-align:right; }
.zd-tbl th.zd-pr{ padding-right:16px; }
/* 5px not 7: eight brand rows plus the header have to fit the grid row
   height set by the Visibility card, and at 7px the last row (Athena HQ)
   was clipped by a couple of pixels. */
.zd-tbl td{ padding:5px 0; border-bottom:1px solid #f8fafc; vertical-align:middle; }
.zd-tbl tr:last-child td{ border-bottom:0; }
.zd-td-b{ padding-left:16px !important; display:flex; align-items:center; gap:10px; }
.zd-ta-r{ text-align:right; }
.zd-pr{ padding-right:16px !important; }
.zd-nm{ color:#0f172a; font-weight:500; }
.zd-mut{ color:#475569; font-variant-numeric:tabular-nums; }
.zd-str{ color:#0f172a; font-weight:500; font-variant-numeric:tabular-nums; }
.zd-row--you{ background:#eef2ff; }
.zd-you{
  background:#fff; color:#4338ca;
  border-radius:4px; padding:1px 6px; font-size:10px; font-weight:500;
}
.zd-lg{
  width:20px; height:20px; flex:0 0 auto;
  border-radius:6px; color:#fff;
  display:grid; place-items:center;
  font-size:9px; font-weight:600;
}
.zd-lg--zero{ background:#0f172a; }
.zd-lg--zero svg{ width:13px; height:12px; }
.zd-bar{ display:inline-flex; align-items:center; justify-content:flex-end; gap:10px; }
.zd-bar s{
  display:block; width:32px; height:4px; border-radius:999px;
  background:#f1f5f9; overflow:hidden; text-decoration:none;
}
.zd-bar s i{ display:block; height:100%; border-radius:999px; }
.zd-bar b{ width:30px; text-align:right; font-weight:500; color:#0f172a; font-variant-numeric:tabular-nums; }
.zd-sent{ display:inline-flex; align-items:center; gap:6px; color:#334155; font-variant-numeric:tabular-nums; }
.zd-dot{ width:6px; height:6px; border-radius:50%; }
.zd-dot--good{ background:#22b37a; }
.zd-dot--mid { background:#f0a92a; }
.zd-dot--bad { background:#e4483f; }
.zd-badge{ border:1px solid; border-radius:6px; padding:1px 7px; font-size:10px; font-weight:500; }
.zd-badge--ugc      { background:#f0f9ff; color:#0369a1; border-color:#e0f2fe; }
.zd-badge--editorial{ background:#ecfdf5; color:#047857; border-color:#d1fae5; }
.zd-sl{
  width:20px; height:20px; flex:0 0 auto;
  border-radius:6px; color:#fff;
  display:grid; place-items:center;
  font-size:9px; font-weight:600;
}

/* ── donut ──────────────────────────────────────────────────────────── */
.zd-donut{ display:flex; align-items:center; justify-content:space-around; gap:14px; padding:12px 16px; }
.zd-donut__ring{ position:relative; width:150px; height:150px; flex:0 0 auto; }
.zd-donut__ring svg{ width:150px; height:150px; transform:rotate(-90deg); }
.zd-dn{ fill:none; }
.zd-donut__mid{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.zd-donut__mid b{ font-size:20px; font-weight:600; color:#0f172a; font-variant-numeric:tabular-nums; }
.zd-donut__mid s{ text-decoration:none; font-size:11px; color:#64748b; }
.zd-dtl{ list-style:none; margin:0; padding:0; flex:1; max-width:190px; }
.zd-dtl li{
  display:flex; align-items:center; justify-content:space-between;
  padding:5px 10px; border-radius:8px; font-size:12px;
}
.zd-dtn{ display:inline-flex; align-items:center; gap:9px; color:#334155; }
.zd-dn-sw{ width:8px; height:8px; border-radius:50%; }
.zd-dtl b{ font-weight:500; color:#0f172a; font-variant-numeric:tabular-nums; }

/* below the hero breakpoint the frame is short — the dashboard still scales,
   it just crops sooner, which is the same thing a screenshot would do */

.zd-ln--zerorank{ stroke:#111827; }
.zd-sw--zerorank{ background:#111827; }
.zd-bar--zerorank i{ width:100.0%; background:#111827; }
.zd-ln--profound{ stroke:#2f6fed; }
.zd-sw--profound{ background:#2f6fed; }
.zd-bar--profound i{ width:86.7%; background:#2f6fed; }
.zd-ln--peec-ai{ stroke:#7c5cf5; }
.zd-sw--peec-ai{ background:#7c5cf5; }
.zd-bar--peec-ai i{ width:73.3%; background:#7c5cf5; }
.zd-ln--otterly{ stroke:#9b5de5; }
.zd-sw--otterly{ background:#9b5de5; }
.zd-bar--otterly i{ width:60.0%; background:#9b5de5; }
.zd-ln--scrunch-ai{ stroke:#6d5ae0; }
.zd-sw--scrunch-ai{ background:#6d5ae0; }
.zd-bar--scrunch-ai i{ width:50.0%; background:#6d5ae0; }
.zd-ln--brandlight{ stroke:#0ea5a4; }
.zd-sw--brandlight{ background:#0ea5a4; }
.zd-bar--brandlight i{ width:40.0%; background:#0ea5a4; }
.zd-ln--evertune{ stroke:#7cc23d; }
.zd-sw--evertune{ background:#7cc23d; }
.zd-bar--evertune i{ width:36.7%; background:#7cc23d; }
.zd-ln--athena-hq{ stroke:#f07d2a; }
.zd-sw--athena-hq{ background:#f07d2a; }
.zd-bar--athena-hq i{ width:26.7%; background:#f07d2a; }
.zd-sl--reddit-com{ background:#ff4500; }
.zd-sbar--reddit-com i{ width:66.9%; background:#ff4500; }
.zd-sl--youtube-com{ background:#ff0000; }
.zd-sbar--youtube-com i{ width:55.6%; background:#ff0000; }
.zd-sl--g2-com{ background:#ff492c; }
.zd-sbar--g2-com i{ width:46.3%; background:#ff492c; }
.zd-sl--capterra-com{ background:#ff9d28; }
.zd-sbar--capterra-com i{ width:36.7%; background:#ff9d28; }
.zd-sl--quora-com{ background:#b92b27; }
.zd-sbar--quora-com i{ width:31.6%; background:#b92b27; }
.zd-dn--corporate{ stroke:#f07d2a; stroke-dasharray:138.48 100.28; stroke-dashoffset:-0.00; }
.zd-dn--editorial{ stroke:#22b37a; stroke-dasharray:54.92 183.85; stroke-dashoffset:-138.48; }
.zd-dn--other{ stroke:#64748b; stroke-dasharray:26.26 212.50; stroke-dashoffset:-193.40; }
.zd-dn--ugc{ stroke:#38bdf8; stroke-dasharray:16.71 222.05; stroke-dashoffset:-219.66; }
.zd-dn--reference{ stroke:#7c5cf5; stroke-dasharray:2.39 236.37; stroke-dashoffset:-236.37; }
.zd-dn--institutional{ stroke:#2f6fed; stroke-dasharray:0.96 237.81; stroke-dashoffset:-238.76; }
.zd-dn-sw--corporate{ background:#f07d2a; }
.zd-dn-sw--editorial{ background:#22b37a; }
.zd-dn-sw--other{ background:#64748b; }
.zd-dn-sw--ugc{ background:#38bdf8; }
.zd-dn-sw--reference{ background:#7c5cf5; }
.zd-dn-sw--institutional{ background:#2f6fed; }

/* ==========================================================================
   DASHBOARD — the other five views, and the interaction layer
   --------------------------------------------------------------------------
   The React original switches views from the sidebar, so this does too: one
   `.zd-view` per nav item, `.is-on` shows it. Hover states are CSS, which is
   all the original used them for.
   ========================================================================== */
.zd-view{ display:none; padding:16px; }
.zd-view.is-on{ display:block; }
.zd-view--grid.is-on{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-content:start;
}
.zd-view > .zd-card + .zd-card{ margin-top:12px; }

/* the whole thing is clickable now, so it needs real affordances */
.zd__nav a, .zd-seg span, .zd-chips span, .zd-dc, .zd-cl, .zd-tpl,
.zd-q, .zd-opp, .zd-pill, .zd-btn-p, .zd-ico-btn, .zd-card__all,
.zd-act, .zd-grp__b, .zd-addtag{ cursor:pointer; }
.zd__nav a:hover{ background:#f1f5f9; color:#0f172a; }
.zd__nav a.is-on:hover{ background:#e0e7ff; }
.zd-pill:hover, .zd-act:hover{ background:#f8fafc; border-color:#cbd5e1; }
.zd-ico-btn:hover{ background:#f1f5f9; color:#334155; }
.zd-card__all:hover{ color:#0f172a; }
.zd-tbl tbody tr:hover{ background:#f8fafc; }
.zd-tbl tbody tr.zd-row--you:hover{ background:#e0e7ff; }
.zd-tbl--p tbody tr:hover{ background:#eef2ff; }
.zd-cl:hover{ background:#f8fafc; }
.zd-tpl:hover{ background:#eef2ff; }
.zd-q:hover, .zd-opp:hover{ border-color:#a5b4fc; background:#eef2ff; }
.zd-dc:hover, .zd-chips span:hover{ background:#f1f5f9; }
.zd-addtag:hover{ border-color:#a5b4fc; color:#4f46e5; }
.zd-grp:hover{ background:#f1f5f9; }

/* ── shared bits ────────────────────────────────────────────────────── */
.zd-bar2{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid #f1f5f9; flex-wrap:wrap;
}
.zd-bar2--pad{ border-bottom:0; }
.zd-bar2--free{ padding:0 0 12px; border-bottom:0; }
.zd-bar2__l{ display:flex; align-items:center; gap:16px; }
/* the counts beside a card title carry their own mark; nothing else in a
   .zd-mut does, so both the box and the size are scoped here rather than
   put on .zd-mut itself */
.zd-bar2__l .zd-mut{ display:inline-flex; align-items:center; gap:6px; }
.zd-bar2__l .zd-mut svg{ width:12px; height:12px; color:#94a3b8; }
.zd-bar2__r{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.zd-ttl2{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#0f172a; }
.zd-ttl2 svg{ width:15px; height:15px; color:#4f46e5; }

.zd-seg{ display:flex; align-items:center; gap:4px; background:#f1f5f9; border-radius:8px; padding:4px; }
.zd-seg span{
  display:flex; align-items:center; gap:7px;
  padding:4px 10px; border-radius:6px; font-size:11px; color:#475569;
}
.zd-seg span svg{ width:13px; height:13px; }
.zd-seg span.is-on{ background:#fff; color:#4338ca; font-weight:500; box-shadow:0 1px 2px rgba(15,23,42,.08); }

.zd-chips{ display:flex; align-items:center; gap:8px; }
.zd-chips span{
  padding:4px 10px; border:1px solid #e2e8f0; border-radius:999px;
  font-size:11px; color:#475569;
}
.zd-chips span.is-on{ border-color:#c7d2fe; background:#eef2ff; color:#4338ca; font-weight:500; }

.zd-inp{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border:1px solid #e2e8f0; border-radius:8px;
  font-size:11px; color:#94a3b8;
}
.zd-inp svg{ width:13px; height:13px; color:#94a3b8; }
.zd-btn-p{
  display:flex; align-items:center; gap:7px;
  padding:6px 10px; border-radius:8px; background:#4f46e5; color:#fff;
  font-size:11px; font-weight:500;
}
.zd-btn-p svg{ width:13px; height:13px; }
.zd-btn-p:hover{ background:#4338ca; }
.zd-ico-btn{
  width:26px; height:26px; display:inline-grid; place-items:center;
  border-radius:6px; color:#94a3b8; vertical-align:middle;
}
.zd-ico-btn svg{ width:15px; height:15px; }
.zd-tagf{
  display:flex; align-items:center; gap:8px;
  padding:6px 11px; border:1px solid #c7d2fe; border-radius:8px;
  background:#eef2ff; color:#4338ca; font-size:11px;
}
.zd-tagf svg{ width:13px; height:13px; }
.zd-2col{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:12px; margin-bottom:12px; }
.zd-na{ color:#cbd5e1; }
.zd-sub{ display:block; text-decoration:none; font-size:10px; color:#64748b; }
.zd-badge--reference{ background:#f5f3ff; color:#6d28d9; border-color:#ede9fe; }
.zd-badge--other    { background:#f8fafc; color:#475569; border-color:#e2e8f0; }
.zd-badge--ind      { background:#eef2ff; color:#4338ca; border:0; }
.zd-badge--mut      { background:#f1f5f9; color:#475569; border:0; }
.zd-dot--off{ background:#94a3b8; }
.zd-sl--lg{ width:26px; height:26px; font-size:10px; }

/* ── prompts ────────────────────────────────────────────────────────── */
.zd-tbl--p{ font-size:10.5px; }
.zd-tbl--p th + th, .zd-tbl--p td + td{ padding-left:9px; }
.zd-pl{ padding-left:16px !important; }
.zd-cb{
  display:inline-block; width:14px; height:14px;
  border:1px solid #cbd5e1; border-radius:3px; background:#fff; vertical-align:middle;
}
.zd-grp{ background:#f8fafc; }
.zd-grp__b{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:500; color:#0f172a; background:none; border:0; padding:0;
}
.zd-grp__b svg{ width:13px; height:13px; color:#94a3b8; }
.zd-grp__b svg:nth-of-type(2){ color:#6366f1; }
.zd-cnt{ background:#e2e8f0; color:#475569; border-radius:4px; padding:1px 6px; font-size:10px; }
.zd-prompt{ color:#334155; max-width:300px; padding-right:12px; }
.zd-ment{ white-space:nowrap; }
.zd-chip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid #e2e8f0; border-radius:6px; background:#fff;
  padding:1px 7px 1px 2px; margin-right:5px;
  font-size:10px; color:#334155;
}
.zd-chip .zd-lg{ width:14px; height:14px; font-size:7px; border-radius:4px; }
.zd-chip .zd-lg--zero svg{ width:9px; height:8px; }
.zd-more{ color:#94a3b8; font-style:normal; }
.zd-more2{
  border:1px solid #e2e8f0; border-radius:6px; padding:1px 7px;
  font-size:10px; color:#64748b;
}
.zd-addtag{
  border:1px dashed #cbd5e1; border-radius:6px; padding:3px 8px;
  font-size:10px; color:#64748b;
}

/* ── sources ────────────────────────────────────────────────────────── */
.zd-dtbl{ list-style:none; margin:0; padding:14px 16px; display:flex; flex-direction:column; gap:8px; }
.zd-dtb{ position:relative; border-radius:8px; overflow:hidden; }
.zd-dtb i{ position:absolute; inset:0 auto 0 0; border-radius:8px; opacity:.15; }
.zd-dtb .zd-dtn, .zd-dtb b{ position:relative; }
.zd-dtb{ display:flex; align-items:center; justify-content:space-between; padding:6px 11px; font-size:11.5px; }
.zd-dtb b{ font-weight:500; color:#0f172a; font-variant-numeric:tabular-nums; }

/* ── workflows ──────────────────────────────────────────────────────── */
.zd-tpls{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:#f1f5f9; border-top:1px solid #f1f5f9; margin-top:16px;
}
.zd-tpl{ display:flex; align-items:center; gap:11px; background:#fff; padding:14px 16px; min-width:0; }
.zd-tpl b{ display:block; font-size:11.5px; font-weight:500; color:#0f172a;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zd-tpl s{ display:block; text-decoration:none; font-size:10px; color:#64748b; }
.zd-tplm{
  width:30px; height:30px; flex:0 0 auto; border-radius:8px;
  display:grid; place-items:center; color:#fff; font-size:12px; font-weight:600;
}
.zd-tplm--zero{ background:#fff; border:1px solid #e2e8f0; color:#0f172a; }
.zd-tplm--zero svg{ width:18px; height:17px; }
.zd-st{ display:inline-flex; align-items:center; gap:7px; color:#475569; }
.zd-by{ display:inline-flex; align-items:center; gap:8px; color:#475569; }
.zd-by em{
  width:22px; height:22px; border-radius:50%; background:#e2e8f0; color:#475569;
  display:grid; place-items:center; font-size:10px; font-weight:500; font-style:normal;
}
.zd-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; font-size:11.5px; color:#64748b;
}
.zd-foot b{ color:#0f172a; font-weight:500; }
.zd-pg{ display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums; }
.zd-pg .zd-ico-btn{ border:1px solid #e2e8f0; width:24px; height:24px; }
.zd-empty{
  display:flex; flex-direction:column; align-items:center; gap:0;
  padding:30px 16px; text-align:center;
}
.zd-empty__ic{
  width:42px; height:42px; border-radius:12px; background:#f1f5f9; color:#94a3b8;
  display:grid; place-items:center; margin-bottom:12px;
}
.zd-empty__ic svg{ width:19px; height:19px; }
.zd-empty b{ font-size:12.5px; font-weight:500; color:#0f172a; }
.zd-empty s{ display:block; text-decoration:none; max-width:340px; margin:4px 0 14px;
  font-size:11.5px; color:#64748b; }

/* ── copilot ────────────────────────────────────────────────────────── */
.zd-view[data-zd-view="copilot"].is-on{ display:flex; padding:0; height:100%; }
.zd-cp{ flex:1; min-width:0; display:flex; flex-direction:column; }
.zd-cp__main{ flex:1; min-height:0; overflow:hidden; padding:22px 16px; }
.zd-cp__hero{ text-align:center; max-width:640px; margin:0 auto; }
.zd-cp__mark{
  width:46px; height:46px; margin:0 auto; border-radius:14px;
  background:#0f172a; color:#fff; display:grid; place-items:center;
}
.zd-cp__mark svg{ width:26px; height:24px; }
.zd-cp__hero b{ display:block; margin-top:14px; font-size:14px; font-weight:600; color:#0f172a; }
.zd-cp__hero s{ display:block; text-decoration:none; margin-top:3px; font-size:11.5px; color:#64748b; }
.zd-cp__lbl{
  display:flex; align-items:center; gap:8px;
  max-width:720px; margin:26px auto 10px; font-size:11px; font-weight:500; color:#64748b;
}
.zd-cp__lbl svg{ width:12px; height:12px; }
.zd-opps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:720px; margin:0 auto; }
.zd-opp{ border:1px solid #e2e8f0; border-radius:12px; background:#fff; padding:11px; }
.zd-opp__t{ display:flex; align-items:center; justify-content:space-between; }
.zd-opp__hi, .zd-opp__off{ display:inline-flex; align-items:center; gap:6px; font-size:10px; font-style:normal; }
.zd-opp__hi{ color:#059669; font-weight:500; }
.zd-opp__off{ color:#64748b; }
.zd-opp__t svg{ width:12px; height:12px; }
.zd-opp b{ display:block; margin-top:8px; font-size:11px; font-weight:500; color:#0f172a; }
.zd-opp s{ display:block; text-decoration:none; margin-top:4px; font-size:10.5px; line-height:1.5; color:#64748b; }
.zd-cp__row{ display:flex; justify-content:space-between; max-width:720px; margin:10px auto 0; font-size:11.5px; }
.zd-cp__row em{ font-style:normal; color:#4f46e5; }
.zd-qs{ display:flex; flex-direction:column; gap:8px; max-width:720px; margin:20px auto 0; }
.zd-q{
  display:flex; align-items:center; gap:11px;
  border:1px solid #e2e8f0; border-radius:12px; background:#fff;
  padding:8px 11px; font-size:11px; color:#334155;
}
.zd-q svg{ width:13px; height:13px; color:#94a3b8; }
.zd-cp__bar{ border-top:1px solid #e2e8f0; background:#fff; padding:12px 16px; }
.zd-cp__acts{ display:flex; align-items:center; gap:16px; max-width:720px; margin:0 auto 8px;
  font-size:11.5px; color:#475569; }
.zd-cp__acts em{ display:inline-flex; align-items:center; gap:7px; font-style:normal; }
.zd-cp__acts svg{ width:13px; height:13px; }
.zd-cp__acts .zd-r{ margin-left:auto; }
.zd-cp__inp{
  display:flex; align-items:center; justify-content:space-between;
  max-width:720px; margin:0 auto;
  border:1px solid #e2e8f0; border-radius:12px; padding:7px 8px 7px 15px;
  font-size:12px; color:#94a3b8;
}
.zd-cp__send{
  width:30px; height:30px; border-radius:8px; background:#4f46e5; color:#fff;
  display:grid; place-items:center;
}
.zd-cp__send svg{ width:15px; height:15px; }
.zd-cp__side{ width:212px; flex:0 0 212px; border-left:1px solid #e2e8f0; background:#fff; padding:16px; }
.zd-cp__sh{ display:flex; align-items:center; justify-content:space-between; }
.zd-cp__sh b{ display:flex; align-items:center; gap:8px; font-size:12px; font-weight:500; color:#0f172a; }
.zd-cp__sh b svg{ width:14px; height:14px; color:#94a3b8; }
.zd-cp__sh b em{ color:#94a3b8; font-style:normal; }
.zd-cp__sh > span{ display:flex; gap:4px; color:#94a3b8; }
.zd-cp__sh > span svg{ width:15px; height:15px; }
.zd-cp__st{ display:block; margin-top:24px; font-size:12px; font-weight:500; color:#0f172a; }
.zd-cp__ss{ display:block; text-decoration:none; margin-top:4px; font-size:11.5px; line-height:1.55; color:#64748b; }

/* ── chats ──────────────────────────────────────────────────────────────
   Two panes: the tracked prompts on the left, the answers one of them drew
   on the right, grouped by day. The day chips filter the groups, the
   grid/list pair changes the card layout and an answer opens the chat
   preview — the three things the screen actually does in the app. */
.zd-chat{ display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); }
.zd-chat__l{ border-right:1px solid #f1f5f9; max-height:468px; overflow:hidden; }
.zd-cl{
  display:flex; align-items:flex-start; gap:10px;
  border-bottom:1px solid #f8fafc; padding:8px 12px; cursor:pointer;
}
.zd-cl > em{
  width:26px; height:26px; flex:0 0 auto; margin-top:2px; border-radius:8px;
  background:#f1f5f9; color:#64748b; display:grid; place-items:center;
}
.zd-cl > em svg{ width:13px; height:13px; }
.zd-cl:hover{ background:#f8fafc; }
.zd-cl.is-on, .zd-cl.is-on:hover{ background:#eef2ff; }
.zd-cl.is-on > em{ background:#fff; color:#4f46e5; }
.zd-cl span{ min-width:0; flex:1; }
.zd-cl b{ display:block; font-size:10.5px; font-weight:400; color:#0f172a; }
.zd-cl.is-on b{ color:#4338ca; font-weight:500; }
.zd-cl s{
  display:flex; align-items:center; gap:5px; text-decoration:none;
  margin-top:2px; font-size:10px; color:#64748b;
}
.zd-cl s svg{ width:11px; height:11px; flex:0 0 auto; color:#94a3b8; }
.zd-cl > svg{
  width:13px; height:13px; margin-top:7px; flex:0 0 auto; color:#cbd5e1;
  transition:transform .18s var(--zr-ease, ease);
}
/* the open prompt's caret points at its own timeline, as in the app */
.zd-cl.is-on > svg{ transform:rotate(90deg); color:#818cf8; }

.zd-chat__r{ background:#f8fafc; max-height:468px; overflow:hidden; padding-bottom:16px; }
.zd-chat__rh{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px 12px; }
.zd-chat__rh em{ display:inline-flex; align-items:center; gap:8px; font-style:normal; font-size:11.5px; }
.zd-chat__rh svg{ width:13px; height:13px; color:#94a3b8; }
.zd-chat__rh s{ text-decoration:none; color:#94a3b8; }
.zd-chat__rt{ display:flex; align-items:center; gap:6px; flex:0 0 auto; }
/* the layout pair — one control, two halves, so it reads as a toggle */
.zd-seg2{ display:flex; border:1px solid #e2e8f0; border-radius:8px; background:#fff; overflow:hidden; }
.zd-seg2 span{ width:26px; height:24px; display:grid; place-items:center; color:#94a3b8; cursor:pointer; }
.zd-seg2 span + span{ border-left:1px solid #e2e8f0; }
.zd-seg2 span:hover{ color:#475569; }
.zd-seg2 span.is-on{ background:#eef2ff; color:#4f46e5; }
.zd-seg2 svg{ width:13px; height:13px; }

/* day chips: the label with its chat count under it */
.zd-dcs{ display:flex; flex-wrap:wrap; gap:5px; padding:0 16px 12px; }
.zd-dc{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-width:40px; border:1px solid #e2e8f0; border-radius:8px; background:#fff;
  padding:4px 8px; font-size:10.5px; color:#475569; cursor:pointer;
}
.zd-dc:hover{ border-color:#c7d2fe; }
.zd-dc b{ font-weight:400; }
.zd-dc i{ font-style:normal; font-size:9.5px; color:#94a3b8; font-variant-numeric:tabular-nums; }
.zd-dc.is-on{ border-color:#4f46e5; background:#4f46e5; color:#fff; }
.zd-dc.is-on b{ font-weight:500; }
.zd-dc.is-on i{ color:rgba(255,255,255,.75); }

.zd-tls{ max-height:330px; overflow:hidden; }
.zd-tlg{ padding:0 16px 16px; }
.zd-tlg[hidden]{ display:none; }
.zd-tlg__h{ display:flex; align-items:center; gap:8px; margin-bottom:8px; font-size:10.5px; }
.zd-tlg__h .zd-mut{ display:inline-flex; align-items:center; gap:6px; }
.zd-tlg__h .zd-mut svg{ width:12px; height:12px; color:#94a3b8; }
.zd-badge--dk{ background:#0f172a; color:#fff; border:0; }
.zd-tlgd{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; align-items:start; }
.zd-tls.is-list .zd-tlgd{ grid-template-columns:minmax(0,1fr); }
.zd-tlc{
  border:1px solid #e2e8f0; border-radius:12px; background:#fff; padding:11px; cursor:pointer;
  transition:border-color .16s var(--zr-ease, ease), box-shadow .16s var(--zr-ease, ease);
}
.zd-tlc:hover{ border-color:#c7d2fe; }
.zd-tlc.is-on{ border-color:#4f46e5; box-shadow:0 0 0 3px rgba(79,70,229,.13); }
.zd-tlc__h{ display:flex; align-items:center; gap:8px; }
.zd-tlc__h b{ display:flex; align-items:center; gap:7px; min-width:0; font-size:11.5px; font-weight:500; color:#0f172a; }
.zd-tlc__t{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  text-decoration:none; font-size:10.5px; color:#64748b; font-variant-numeric:tabular-nums;
}
.zd-tlc__t img{ width:15px; height:11px; border-radius:2px; }
/* the answer engine's own mark, so a card is placeable at a glance */
.zd-mdl{
  width:20px; height:20px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  border:1px solid #e2e8f0; background:#fff; color:#0f172a;
  display:grid; place-items:center; font-style:normal;
}
.zd-mdl svg{ width:11px; height:11px; }
.zd-mdl--gpt{ background:#0f172a; border-color:#0f172a; color:#fff; }
.zd-mdl--goog svg{ width:12px; height:12px; }
.zd-mdl--pplx{ background:#20808d; border-color:#20808d; color:#fff; }
.zd-mdl--gem{ color:#3f7ef4; }
.zd-mdl--claude{ background:#d97757; border-color:#d97757; color:#fff; }
/* the card shows the opening of the answer; the preview shows all of it */
.zd-tlc p{
  margin:8px 0 0; font-size:10.5px; line-height:1.6; color:#475569;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;
}
.zd-tlc__l{
  display:block; text-decoration:none; margin-top:12px;
  font-size:9px; font-weight:500; letter-spacing:.07em; text-transform:uppercase; color:#94a3b8;
}
.zd-tlc__b{ display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.zd-tlc__f{
  display:flex; align-items:center; gap:14px;
  border-top:1px solid #f1f5f9; margin-top:12px; padding-top:9px;
  font-size:10.5px; color:#64748b;
}
.zd-tlc__f em{ display:inline-flex; align-items:center; gap:6px; font-style:normal; }
.zd-tlc__f svg{ width:12px; height:12px; }
.zd-tlc__x{ margin-left:auto; display:inline-flex; color:#cbd5e1; }
.zd-tlc__x:hover{ color:#94a3b8; }
.zd-tlc__go{ display:none; color:#4f46e5; }
.zd-tlc.is-on .zd-tlc__go{ display:inline-flex; }

/* ── chat preview ───────────────────────────────────────────────────────
   The answer in full, with what it mentioned and what it cited beside it.
   It reuses the add-prompt modal's scrim and box; only the inside differs. */
.zd-modal--cpv .zd-modal__box{
  width:min(88%, 820px); max-height:88%; background:#fff;
}
.zd-cpv__hd{
  display:flex; align-items:center; gap:8px;
  padding:13px 16px; border-bottom:1px solid #eef2f6;
}
.zd-cpv__hd > b{ flex:1; min-width:0; font-size:13px; font-weight:600; color:#0f172a; }
.zd-cpv__hd .zd-pill{ background:#fff; }
/* The box is capped at 88% of the panel, and a long answer or a wide brand
   list passes that — so the two columns carry the overflow themselves. It
   is the one scroll area in the panel, and it only exists while a dialog
   the reader opened is open. */
.zd-cpv__bd{
  display:grid; grid-template-columns:minmax(0,1fr) 224px;
  flex:1 1 auto; min-height:0; overflow:hidden;
}
.zd-cpv__conv{ min-width:0; padding:16px 18px 20px; overflow-y:auto; }
.zd-cpv__ch{ display:flex; align-items:center; gap:7px; }
.zd-cpv__ch s{ flex:1; min-width:0; text-decoration:none; font-size:12px; font-weight:500; color:#0f172a; }
.zd-cpv__ch .zd-pill img{ width:15px; height:11px; border-radius:2px; }
.zd-cpv__ch .zd-mdl{ width:16px; height:16px; }
.zd-cpv__ch .zd-mdl svg{ width:9px; height:9px; }
.zd-cpv__q{ display:flex; align-items:flex-start; justify-content:flex-end; gap:8px; margin-top:16px; }
.zd-cpv__q p{
  margin:0; border:1px solid #e2e8f0; border-radius:12px; background:#fff;
  padding:8px 13px; font-size:11.5px; line-height:1.5; color:#0f172a;
}
.zd-cpv__av{
  width:24px; height:24px; flex:0 0 auto; border-radius:50%;
  border:1px solid #e2e8f0; background:#fff; display:grid; place-items:center;
}
.zd-cpv__av svg{ width:13px; height:13px; }
.zd-cpv__av--u{ background:#4f46e5; border-color:#4f46e5; color:#fff; }
.zd-cpv__av .zd-mdl{ width:100%; height:100%; border:0; }
.zd-cpv__a{ display:flex; align-items:flex-start; gap:8px; margin-top:12px; }
.zd-cpv__ab{
  flex:1; min-width:0; border:1px solid #e2e8f0; border-radius:12px;
  background:#fff; padding:12px 14px;
}
.zd-cpv__ab p{ margin:0; font-size:11px; line-height:1.75; color:#334155; }
.zd-cpv__side{ border-left:1px solid #eef2f6; padding:16px; overflow-y:auto; }
.zd-cpv__sh{ display:block; font-size:11.5px; font-weight:500; color:#0f172a; }
.zd-cpv__sh em{ font-style:normal; color:#94a3b8; }
.zd-cpv__sh + div + .zd-cpv__sh{ margin-top:20px; }
.zd-cpv__r{
  display:flex; align-items:center; gap:8px;
  border:1px solid #e2e8f0; border-radius:10px; padding:8px 10px; margin-top:8px;
  font-size:11px;
}
.zd-cpv__r > b{ flex:1; min-width:0; font-weight:500; color:#0f172a; }
.zd-cpv__r > b s{ display:block; text-decoration:none; margin-top:1px; font-size:10px; font-weight:400; color:#94a3b8; }
.zd-cpv__r .zd-sent{ flex:0 0 auto; font-size:10.5px; }

.zd-sln--reddit-com{ stroke:#ff4500; }
.zd-sln-sw--reddit-com{ background:#ff4500; }
.zd-sln--youtube-com{ stroke:#e4483f; }
.zd-sln-sw--youtube-com{ background:#e4483f; }
.zd-sln--g2-com{ stroke:#7c5cf5; }
.zd-sln-sw--g2-com{ background:#7c5cf5; }
.zd-sln--capterra-com{ stroke:#f0a92a; }
.zd-sln-sw--capterra-com{ background:#f0a92a; }
.zd-sln--quora-com{ stroke:#0ea5a4; }
.zd-sln-sw--quora-com{ background:#0ea5a4; }
.zd-sl--reddit-com{ background:#ff4500; }
.zd-sbar--reddit-com i{ width:98.3%; background:#ff4500; }
.zd-sl--youtube-com{ background:#ff0000; }
.zd-sbar--youtube-com i{ width:90.0%; background:#ff0000; }
.zd-sl--g2-com{ background:#ff492c; }
.zd-sbar--g2-com i{ width:43.0%; background:#ff492c; }
.zd-sl--capterra-com{ background:#ff9d28; }
.zd-sbar--capterra-com i{ width:42.9%; background:#ff9d28; }
.zd-sl--quora-com{ background:#b92b27; }
.zd-sbar--quora-com i{ width:34.9%; background:#b92b27; }
.zd-sl--wikipedia-org{ background:#1f2937; }
.zd-sbar--wikipedia-org i{ width:28.6%; background:#1f2937; }
.zd-sl--medium-com{ background:#111827; }
.zd-sbar--medium-com i{ width:20.4%; background:#111827; }
.zd-sl--linkedin-com{ background:#0a66c2; }
.zd-sbar--linkedin-com i{ width:17.3%; background:#0a66c2; }
.zd-sl--trustpilot-com{ background:#00b67a; }
.zd-sbar--trustpilot-com i{ width:14.0%; background:#00b67a; }
.zd-sl--producthunt-com{ background:#da552f; }
/* zerorank.ai cites itself often enough to need its own tile */
.zd-sl--zero{ background:#0f172a; }
.zd-sl--zero svg{ width:12px; height:11px; }
.zd-sbar--producthunt-com i{ width:10.6%; background:#da552f; }
.zd-dtb--corporate i{ width:58.0%; background:#f07d2a; }
.zd-dtb--editorial i{ width:23.0%; background:#22b37a; }
.zd-dtb--other i{ width:11.0%; background:#64748b; }
.zd-dtb--ugc i{ width:7.0%; background:#38bdf8; }
.zd-dtb--reference i{ width:2.0%; background:#7c5cf5; }
.zd-dtb--institutional i{ width:2.0%; background:#2f6fed; }
.zd-tplm--faq-block-for-ai-answers{ background:#2f6fed; }
.zd-tplm--product-page-faq-builder{ background:#22b37a; }
.zd-tplm--blog-post-from-a-video{ background:#ff0000; }
.zd-tplm--forum-reply-drafter{ background:#ff4500; }
.zd-tplm--refresh-suggestions{ background:#7c5cf5; }

/* ==========================================================================
   DASHBOARD — RESPONSIVE
   --------------------------------------------------------------------------
   It used to be a fixed 1200x700 canvas scaled with transform. That keeps the
   proportions but it is not responsive: at a wide frame everything inflates,
   at a narrow one the text shrinks to mush. It now simply fills the frame and
   reflows, with container queries on the frame width — not the viewport, so
   it reflows correctly wherever the panel is placed.
   ========================================================================== */
/* The panel is positioned against the frame, so the frame has to be the
   containing block. Without this it sized against a distant ancestor and
   came out 1118x694 inside a 1102x643 box. */
.zr-shot__frame{ position:relative; }
.zd-wrap{ container-type:inline-size; }

/* ── under desktop the panel becomes a picture of itself ────────────────
   The panel is a 1200x700 application UI. It reflows all the way down, but
   a phone-width column of an app's own chrome is not readable, and it is
   still a thousand nodes of hover-and-click nobody can drive with a thumb.
   A still of the same screen says the same thing in one request, and it is
   the picture the page was always standing in for. The breakpoint is the
   site's own desktop one, so the panel is live exactly where the desktop
   hero is. */
.zr-shot__still{ display:none; }
@media (max-width:1024px){
  .zr-shot__frame .zd-wrap{ display:none; }
  .zr-shot__still{ display:block; }
}
.zd{
  position:absolute; inset:0;
  width:100%; height:100%;
  transform:none;
}

/* ── 1040 · cards stack ─────────────────────────────────────────────── */
@container (max-width:1040px){
  .zd-view--grid.is-on{ grid-template-columns:minmax(0,1fr); }
  .zd-2col{ grid-template-columns:minmax(0,1fr); }
  .zd-tpls{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .zd-opps{ grid-template-columns:minmax(0,1fr); }
  .zd-donut{ justify-content:flex-start; gap:24px; }
}

/* The three steps below this one only fire on a frame narrower than the
   narrowest the panel is now shown in: under 1025px viewport it is swapped
   for a still (see .zr-shot__still), and the frame never gets that small
   above it. They are kept because they are the panel's own responsive
   story, and they come back the moment that breakpoint moves. */
/* ── 900 · the widest prompt columns go ─────────────────────────────── */
@container (max-width:900px){
  .zd-tbl--p th:nth-child(n+7), .zd-tbl--p td:nth-child(n+7){ display:none; }
  .zd-prompt{ max-width:none; }
}

/* ── 820 · sidebar collapses to icons ───────────────────────────────── */
@container (max-width:820px){
  .zd__side{ width:56px; flex-basis:56px; }
  .zd__brand{ font-size:0; justify-content:center; padding:16px 0; }
  .zd__brand svg{ font-size:12px; }
  .zd__ws{ display:none; }
  .zd__nav{ padding:12px 8px; }
  .zd__nav a{ justify-content:center; padding:8px 0; }
  .zd__nav a span, .zd__tag{ display:none; }
  .zd__user{ justify-content:center; padding:12px 0; }
  .zd__user-t, .zd__user > svg{ display:none; }
  .zd-chat{ grid-template-columns:minmax(0,1fr); }
  .zd-chat__l{ max-height:190px; border-right:0; border-bottom:1px solid #f1f5f9; }
  .zd-cp__side{ display:none; }
  .zd-cpv__bd{ grid-template-columns:minmax(0,1fr); }
  .zd-cpv__side{ display:none; }
}

/* ── 620 · sidebar out, topbar trims ────────────────────────────────── */
@container (max-width:620px){
  .zd__side{ display:none; }
  .zd__pills .zd-pill:nth-child(2),
  .zd__pills .zd-pill:nth-child(3){ display:none; }
  .zd-tpls{ grid-template-columns:minmax(0,1fr); }
  .zd-bar2{ gap:8px; }
  .zd-bar2__r .zd-inp{ display:none; }
  .zd-tlgd{ grid-template-columns:minmax(0,1fr); }
  .zd-view{ padding:12px; }
  .zd-donut{ flex-direction:column; align-items:flex-start; }
}

/* ── 460 · last trims ───────────────────────────────────────────────── */
@container (max-width:460px){
  .zd__top{ padding:8px 12px; }
  .zd__pills .zd-pill:first-child{ display:none; }
  .zd-tbl th:nth-child(3), .zd-tbl td:nth-child(3){ display:none; }
  .zd-card__all{ display:none; }
}

/* ==========================================================================
   DASHBOARD — PROMPT RESEARCH, THE PROMPT DETAIL, AND THE ADD-PROMPT MODAL
   --------------------------------------------------------------------------
   Three additions to the panel, all still inside .zd's 1200x700 box so they
   scale with it. Nothing here needs a runtime beyond the panel's own script:
   the modal is a hidden sibling, the detail is one more .zd-view.
   ========================================================================== */

/* the source tiles take a real mark where one exists (Simple Icons, CC0),
   painted white on the domain's own colour — the letter stays as the
   fallback for the domains that have no published icon. */
/* [hidden] on an <svg> is not honoured everywhere, and the crumb's back
   step and the modal both rely on it */
.zd [hidden]{ display:none !important; }

/* the crumb's middle step, shown only on a prompt's own view */
.zd__crumb-up{ color:#64748b; cursor:pointer; }
.zd__crumb-up:hover{ color:#4338ca; text-decoration:underline; }
.zd__crumb-sep{ width:14px; height:14px; color:#cbd5e1; }

.zd-sl svg{ width:12px; height:12px; color:#fff; }
.zd-sl--lg svg{ width:13px; height:13px; }

/* a prompt row opens its own view, so it has to look like it will */
.zd-prompt{ cursor:pointer; }
.zd-tbl--p tbody tr:not(.zd-grp):hover{ background:#f8fafc; }
.zd-tbl--p tbody tr:not(.zd-grp):hover .zd-prompt{ color:#4338ca; }

/* ── the prompt detail header ─────────────────────────────────────────── */
.zd-phd{
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; margin-bottom:12px;
  border:1px solid #e2e8f0; border-radius:12px; background:#fff;
}
.zd-phd__ico{
  width:28px; height:28px; flex:0 0 auto;
  border-radius:6px; background:#eef2ff; color:#4f46e5;
  display:grid; place-items:center;
}
.zd-phd__ico svg{ width:15px; height:15px; }
.zd-phd__t{ flex:1; min-width:0; }
.zd-phd__t b{ display:block; font-size:14px; font-weight:500; color:#0f172a;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.zd-phd__t s{ display:flex; align-items:center; gap:4px; margin-top:2px;
  text-decoration:none; font-size:11px; color:#64748b; }
.zd-phd__t s svg{ width:12px; height:12px; }
.zd-phd__on{
  border:1px solid #d1fae5; background:#ecfdf5; color:#047857;
  border-radius:6px; padding:3px 9px; font-size:11px; font-weight:500; font-style:normal;
}
.zd-card__all--mut{ color:#94a3b8; font-weight:400; white-space:nowrap; }

/* The detail's top row is an even split: the brands table needs the room the
   overview gives it, not the 2fr/1fr the sources row below wants. And the
   panel's tables carry no column gutters — fine at full width, a collision
   inside a half-width card — so the detail adds them. */
.zd-2col--even{ grid-template-columns:repeat(2,minmax(0,1fr)); }
[data-zd-view="prompt"] .zd-tbl th + th,
[data-zd-view="prompt"] .zd-tbl td + td{ padding-left:10px; }

/* ── prompt research ──────────────────────────────────────────────────── */
.zd-rsh{ padding:16px; }
.zd-rsh__hd{ display:flex; align-items:center; gap:10px; }
.zd-rsh__hd b{ flex:1; font-size:15px; font-weight:500; color:#0f172a; }
.zd-rsh__sub{ margin:10px 0 14px; font-size:12px; color:#64748b; max-width:74ch; }
.zd-rsh__row{ display:flex; align-items:center; gap:8px; }
.zd-inp--lg{ flex:1; height:36px; font-size:12.5px; color:#0f172a; }
.zd-inp--lg svg{ width:15px; height:15px; }
.zd-geo{
  display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 12px;
  border:1px solid #e2e8f0; border-radius:8px; background:#fff;
  font-size:12px; color:#334155; white-space:nowrap;
}
.zd-geo img{ width:18px; height:13px; border-radius:2px; box-shadow:0 0 0 1px rgba(15,23,42,.08); }
.zd-geo svg{ width:13px; height:13px; color:#94a3b8; }
.zd-btn-p--lg{ height:36px; padding:0 16px; font-size:12.5px; }
.zd-btn-p--lg svg{ width:14px; height:14px; }
.zd-rsh__count{ display:flex; align-items:center; gap:7px; font-size:12.5px; font-weight:500; color:#0f172a; }
.zd-rsh__count img{ width:16px; height:12px; border-radius:2px; box-shadow:0 0 0 1px rgba(15,23,42,.08); }
.zd-rsh__count s{ text-decoration:none; font-weight:400; color:#64748b; }
.zd-chips--src{ padding:12px 16px; border-bottom:1px solid #f1f5f9; flex-wrap:wrap; }

/* ── the ideas table ──────────────────────────────────────────────────── */
.zd-tbl--r td{ vertical-align:top; padding-top:12px; padding-bottom:12px; }
.zd-idea{ max-width:290px; }
.zd-idea b{ font-weight:500; color:#0f172a; }
.zd-idea s{ display:block; margin-top:3px; text-decoration:none; font-size:11px; color:#64748b; }
.zd-seed, .zd-aio{
  display:inline-block; margin-left:8px; vertical-align:middle;
  border-radius:5px; padding:1px 7px; font-size:10px; font-weight:500; font-style:normal;
}
.zd-seed{ background:#334155; color:#fff; }
.zd-aio{ background:#eef2ff; color:#4338ca; }
.zd-vol b{ display:block; font-weight:500; color:#0f172a; }
.zd-vol s{ display:block; margin-top:3px; text-decoration:none; font-size:11px; color:#94a3b8; }
.zd-trend{ display:flex; align-items:center; gap:10px; white-space:nowrap; }
.zd-spk{ width:72px; height:22px; flex:0 0 auto; }
.zd-spk path{ fill:none; stroke:#2f6fed; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.zd-dl{ font-style:normal; font-size:11px; font-weight:500; color:#15803d; }
.zd-dl.is-down{ color:#dc2626; }
.zd-sig{
  display:inline-block; border-radius:6px; padding:2px 8px;
  background:#f5f3ff; color:#6d28d9; font-size:10.5px; font-weight:500;
}
.zd-ico-btn--add{ color:#475569; }

/* ── the add-prompts modal ────────────────────────────────────────────── */
.zd-modal{ position:absolute; inset:0; z-index:5; display:grid; place-items:center; }
.zd-modal[hidden]{ display:none; }
.zd-modal__scrim{ position:absolute; inset:0; background:rgba(15,23,42,.42); }
.zd-modal__box{
  position:relative; width:560px; max-height:620px;
  display:flex; flex-direction:column;
  border-radius:14px; background:#f8fafc;
  box-shadow:0 30px 70px -20px rgba(15,23,42,.45), 0 0 0 1px rgba(15,23,42,.06);
}
.zd-modal__hd{ display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid #e2e8f0; }
.zd-modal__ico{
  width:34px; height:34px; flex:0 0 auto;
  border-radius:9px; background:#eef2ff; color:#4f46e5;
  display:grid; place-items:center;
}
.zd-modal__ico svg{ width:18px; height:18px; }
.zd-modal__t{ flex:1; min-width:0; }
.zd-modal__t b{ display:block; font-size:15px; font-weight:600; color:#0f172a; }
.zd-modal__t s{ display:block; margin-top:1px; text-decoration:none; font-size:12px; color:#64748b; }
.zd-modal__x{ width:28px; height:28px; display:grid; place-items:center; border-radius:7px; color:#475569; cursor:pointer; }
.zd-modal__x:hover{ background:#eef2f6; }
.zd-modal__x svg{ width:17px; height:17px; }
.zd-modal__bd{ padding:18px 20px 20px; overflow-y:auto; }
.zd-modal__ft{
  display:flex; align-items:center; justify-content:flex-end; gap:10px;
  padding:14px 20px; border-top:1px solid #e2e8f0;
}
.zd-fld{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.zd-fld__lb{
  display:flex; align-items:center; gap:7px; margin:16px 0 8px;
  font-size:12.5px; font-weight:500; color:#334155;
}
.zd-fld .zd-fld__lb{ margin:0; }
.zd-fld__lb svg{ width:15px; height:15px; color:#4f46e5; }
.zd-fld--foot{ margin:8px 0 0; }
.zd-fld--foot s{ text-decoration:none; font-size:11.5px; color:#64748b; }
.zd-fld--foot em{ font-style:normal; font-size:11.5px; font-weight:500; color:#4f46e5; }
.zd-upl{
  display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px;
  border:1px solid #e2e8f0; border-radius:8px; background:#fff;
  font-size:12px; font-weight:500; color:#334155; cursor:pointer;
}
.zd-upl:hover{ background:#f8fafc; }
.zd-upl svg{ width:14px; height:14px; }
.zd-ta{
  display:block; width:100%; height:130px; resize:none;
  padding:12px 14px; border:1px solid #e2e8f0; border-radius:10px; background:#fff;
  font-family:inherit; font-size:12.5px; line-height:1.6; color:#0f172a;
}
.zd-ta::placeholder{ color:#94a3b8; }
.zd-ta:focus{ outline:none; border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.zd-sel{
  display:flex; align-items:center; gap:10px; height:42px; padding:0 14px;
  border:1px solid #e2e8f0; border-radius:10px; background:#fff;
  font-size:12.5px; color:#0f172a; cursor:pointer;
}
.zd-sel img{ width:20px; height:15px; border-radius:2px; box-shadow:0 0 0 1px rgba(15,23,42,.08); }
.zd-sel u{ flex:1; text-decoration:none; color:#94a3b8; }
.zd-sel > svg{ width:15px; height:15px; color:#94a3b8; margin-left:auto; }
.zd-sel__ic{
  width:24px; height:24px; flex:0 0 auto; display:grid; place-items:center;
  border-radius:6px; background:#f1f5f9; color:#64748b;
}
.zd-sel__ic svg{ width:13px; height:13px; }
.zd-btn-g{
  display:inline-flex; align-items:center; height:36px; padding:0 18px;
  border:1px solid #e2e8f0; border-radius:8px; background:#fff;
  font-size:12.5px; font-weight:500; color:#334155; cursor:pointer;
}
.zd-btn-g:hover{ background:#f8fafc; }
.zd-btn-p.is-off{ background:#c7d2fe; cursor:default; }

/* ── brand marks (ADR-15) ──────────────────────────────────────────────
   The source and rival tiles carry a real mark from logo.dev, committed as
   public/assets/logos/<domain>.webp by scripts/fetch-logos.mjs; the coloured
   letter/glyph tile underneath is the fallback when the image is missing. */
.zd-sl,.zd-lg{ position:relative; overflow:hidden; }
.zd-logo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }