/* ══════════════════════════════════════════════════════════
   AskVio dashboard v3 — design system
   Sections 1–7 follow the Claude Design v3 handoff (dash, intel, views,
   customization, build, ship, dock). Section 8 maps it onto the app's
   existing element IDs. Loaded after app.css.
   ══════════════════════════════════════════════════════════ */


/* ───────────── dash.css ───────────── */
/* ══════════════════════════════════════════════════════════
   AskVio dashboard — v2 palette
   Soft Structuralism: white surfaces, true-neutral greys,
   diffused ambient shadows, colour reserved for data.
   Self-contained — deliberately does NOT import brand.css,
   whose warm/paper tokens are being replaced here.
   ══════════════════════════════════════════════════════════ */

:root {
  /* Surfaces — cool white, no warmth */
  --canvas: #f7f8fa;
  --surface: #ffffff;
  --surface-2: #fbfcfd;
  --surface-3: #f3f5f8;
  --surface-4: #eef1f5;

  /* Text — every small-text token clears 4.5:1 on white */
  --text: #14161a;      /* 16.8:1 */
  --text-2: #464e5c;    /* 8.3:1  */
  --text-3: #6b7280;    /* 4.9:1  */
  --icon: #98a0ad;      /* decorative / icons only */

  /* Hairlines */
  --line: #e6e9ee;
  --line-soft: #eff1f5;
  --line-strong: #d7dce4;

  /* Accent — one calm blue, used for active state and primary series */
  --blue: #2e6be6;
  --blue-deep: #1d4fbf;
  --blue-wash: #eef3fd;
  --blue-line: #d3e0fa;

  /* Semantic data ramps — never brand accents */
  --red: #b42318;
  --red-wash: #fef3f2;
  --amber: #b54708;
  --amber-wash: #fffaeb;
  --green: #067647;
  --green-wash: #ecfdf3;
  --violet: #5925dc;
  --violet-wash: #f4f3ff;

  /* Ambient, highly diffused. No harsh dark drops. */
  --sh-1: 0 1px 2px rgba(20, 22, 26, 0.03);
  --sh-2: 0 1px 2px rgba(20, 22, 26, 0.04), 0 4px 12px -2px rgba(20, 22, 26, 0.05);
  --sh-3: 0 1px 2px rgba(20, 22, 26, 0.04), 0 12px 28px -6px rgba(20, 22, 26, 0.08);
  --sh-key: 0 1px 2px rgba(20, 22, 26, 0.16);

  /* Crisp radii — 10px ceiling, no pills on containers */
  --r-lg: 10px;
  --r-md: 8px;
  --r-sm: 6px;
  --r-xs: 4px;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Geist', -apple-system, 'Segoe UI', sans-serif;
  font-optical-sizing: auto;
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
}

a { color: var(--blue); text-decoration: none; transition: color 0.35s var(--ease); }
a:hover { color: var(--blue-deep); }

.mono { font-family: 'Geist Mono', ui-monospace, monospace; }

/* ══ Shell ══ */
.dsh { display: grid; grid-template-rows: auto 1fr; height: 100dvh; }
.dsh-main { display: grid; grid-template-columns: 208px 202px minmax(0, 1fr); min-height: 0; }

/* ══ Top bar ══ */
.bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--surface); border-bottom: 1px solid var(--line); z-index: 6; }
.lockup { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.94rem; letter-spacing: -0.02em; color: var(--text); flex-shrink: 0; }
.lockup:hover { color: var(--text); }
.lockup img { width: 24px; height: 24px; object-fit: contain; }
.sep { width: 1px; height: 20px; background: var(--line); }

.acct { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-md); padding: 4px 7px 4px 8px; cursor: pointer; transition: background 0.4s var(--ease), border-color 0.4s var(--ease); }
.acct:hover { background: var(--surface-3); border-color: var(--line-strong); }
.acct-av { width: 19px; height: 19px; border-radius: var(--r-xs); background: var(--text); color: #fff; display: grid; place-items: center; font-size: 8.5px; font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; }
.acct-n { font-size: 0.83rem; font-weight: 500; letter-spacing: -0.01em; }
.acct i { font-size: 12px; color: var(--icon); }

.env { display: flex; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.env button { border: none; background: none; font-family: inherit; font-size: 0.78rem; font-weight: 500; padding: 4px 12px; border-radius: var(--r-sm); cursor: pointer; color: var(--text-3); transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.env button:hover { color: var(--text); }
.env button.on { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }

.bar-r { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.pending { display: inline-flex; align-items: center; gap: 6px; font-size: 0.79rem; font-weight: 500; color: var(--amber); background: var(--amber-wash); border: 1px solid rgba(181, 71, 8, 0.16); padding: 5px 10px; border-radius: var(--r-md); }
.pending .n { font-family: 'Geist Mono', monospace; }

/* Buttons — near-black primary, crisp radius, no shadow bloom */
.btn { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-md); border: 1px solid transparent; font-family: inherit; font-size: 0.83rem; font-weight: 500; letter-spacing: -0.008em; cursor: pointer; background: var(--text); color: #fff; box-shadow: var(--sh-key); transition: background 0.4s var(--ease), transform 0.4s var(--ease); }
.btn:hover { background: #2b2f38; color: #fff; }
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.btn i { font-size: 13px; }

.btn.q { background: var(--surface); color: var(--text-2); border-color: var(--line); box-shadow: var(--sh-1); }
.btn.q:hover { background: var(--surface-3); color: var(--text); border-color: var(--line-strong); }
.btn.q i { color: var(--icon); }

.iconbtn { width: 30px; height: 30px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--text-2); cursor: pointer; font-size: 15px; box-shadow: var(--sh-1); transition: background 0.4s var(--ease); }
.iconbtn:hover { background: var(--surface-3); }
.me { width: 28px; height: 28px; border-radius: var(--r-md); background: var(--blue); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; cursor: pointer; flex-shrink: 0; }

/* ══ Primary nav ══ */
.nav { background: var(--surface-2); border-right: 1px solid var(--line); padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.nav-g { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 14px 9px 5px; }
.nav-g:first-child { padding-top: 2px; }
.nav a { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: var(--r-sm); font-size: 0.845rem; font-weight: 450; color: var(--text-2); letter-spacing: -0.01em; transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.nav a i { font-size: 15px; color: var(--icon); width: 16px; flex-shrink: 0; transition: color 0.35s var(--ease); }
.nav a:hover { background: var(--surface-4); color: var(--text); }
.nav a:hover i { color: var(--text-3); }
.nav a.on { background: var(--blue-wash); color: var(--blue-deep); font-weight: 500; }
.nav a.on i { color: var(--blue); }

.nav-foot { margin-top: auto; padding-top: 12px; }
.usage { padding: 9px 10px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); }
.usage-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 0.73rem; color: var(--text-3); margin-bottom: 6px; }
.usage-h b { font-family: 'Geist Mono', monospace; font-weight: 500; color: var(--text); font-size: 0.74rem; }
.usage-t { height: 3px; background: var(--surface-4); border-radius: 999px; overflow: hidden; }
.usage-t div { height: 100%; background: var(--blue); border-radius: 999px; }
.usage-p { font-size: 0.71rem; color: var(--text-3); margin: 7px 0 0; line-height: 1.4; }

/* ══ Secondary rail ══ */
.rail { background: var(--surface); border-right: 1px solid var(--line); padding: 10px 8px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.rail-g { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 14px 9px 5px; }
.rail-g:first-child { padding-top: 2px; }
.rail a { display: flex; align-items: center; gap: 9px; padding: 5px 9px; border-radius: var(--r-sm); font-size: 0.83rem; font-weight: 450; color: var(--text-2); transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.rail a i { font-size: 14px; color: var(--icon); width: 15px; flex-shrink: 0; }
.rail a:hover { background: var(--surface-3); color: var(--text); }
.rail a.on { background: var(--surface-4); color: var(--text); font-weight: 500; }
.rail a.on i { color: var(--blue); }
.ct { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 0.71rem; color: var(--text-3); }
.badge-new { margin-left: auto; font-size: 8.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: var(--blue-wash); color: var(--blue-deep); padding: 2px 5px; border-radius: var(--r-xs); }

/* ══ Canvas ══ */
.canvas { overflow-y: auto; padding: 18px 20px 56px; min-width: 0; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }
.head h1 { font-size: 1.34rem; font-weight: 550; letter-spacing: -0.03em; margin: 0; }
.head p { font-size: 0.84rem; color: var(--text-3); margin: 4px 0 0; }
.head-c { display: flex; align-items: center; gap: 7px; }

/* Section label */
.slab { display: flex; align-items: baseline; gap: 10px; margin: 0 0 9px; }
.slab h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.slab span { font-size: 0.78rem; color: var(--text-3); }

/* ══ Brief ══ */
.brief { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 18px; margin-bottom: 14px; box-shadow: var(--sh-1); }
.brief-h { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.brief-i { width: 24px; height: 24px; border-radius: var(--r-sm); background: var(--blue-wash); color: var(--blue); display: grid; place-items: center; font-size: 13px; flex-shrink: 0; }
.brief-l { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--text-2); }
.brief-w { font-size: 0.75rem; color: var(--text-3); font-family: 'Geist Mono', monospace; }
.brief-r { margin-left: auto; width: 26px; height: 26px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); display: grid; place-items: center; color: var(--text-2); cursor: pointer; font-size: 13px; transition: background 0.4s var(--ease), transform 0.6s var(--ease); }
.brief-r:hover { background: var(--surface-3); transform: rotate(90deg); }
.brief-b { font-size: 0.9rem; line-height: 1.68; color: var(--text-2); margin: 0; max-width: 92ch; text-wrap: pretty; }
.brief-b strong { font-weight: 550; color: var(--text); }
.brief-b em { font-style: normal; font-family: 'Geist Mono', monospace; font-size: 0.84rem; background: var(--surface-3); border: 1px solid var(--line-soft); padding: 1px 5px; border-radius: var(--r-xs); color: var(--text); }

/* ══ Insight cards ══ */
.ins { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
.ins-c { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 14px 15px; display: flex; flex-direction: column; gap: 8px; cursor: pointer; box-shadow: var(--sh-1); transition: box-shadow 0.45s var(--ease), transform 0.45s var(--ease), border-color 0.45s var(--ease); }
.ins-c:hover { box-shadow: var(--sh-3); transform: translateY(-2px); border-color: var(--line-strong); }
.ins-h { display: flex; align-items: center; gap: 6px; font-size: 0.77rem; font-weight: 500; color: var(--text-3); }
.ins-h i { font-size: 14px; color: var(--ia); }
.ins-n { font-size: 1.62rem; font-weight: 400; letter-spacing: -0.045em; line-height: 1; color: var(--text); }
.ins-n span { font-size: 0.8rem; font-weight: 450; letter-spacing: -0.01em; color: var(--text-3); margin-left: 4px; }
.ins-b { font-size: 0.79rem; color: var(--text-3); line-height: 1.5; flex: 1; text-wrap: pretty; }
.ins-b b { font-weight: 500; color: var(--text-2); }
.ins-cta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.77rem; font-weight: 500; color: var(--ia); }
.ins-cta i { font-size: 11px; transition: transform 0.45s var(--ease); }
.ins-c:hover .ins-cta i { transform: translateX(3px); }

/* ══ Panels ══ */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--sh-1); }
.panel-h { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); }
.panel-h h3 { font-size: 0.85rem; font-weight: 550; letter-spacing: -0.012em; margin: 0; }
.panel-h i { font-size: 15px; color: var(--icon); }
.panel-h .big { margin-left: auto; font-family: 'Geist Mono', monospace; font-size: 1rem; font-weight: 500; }

.kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--line-soft); }
.kpi { padding: 12px 15px; border-right: 1px solid var(--line-soft); cursor: pointer; position: relative; transition: background 0.4s var(--ease); }
.kpi:last-child { border-right: none; }
.kpi:hover { background: var(--surface-2); }
.kpi.on { background: var(--surface-2); }
.kpi.on::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--blue); }
.kpi-v { font-size: 1.4rem; font-weight: 400; letter-spacing: -0.045em; line-height: 1.1; }
.kpi-v sub { font-size: 0.68rem; font-weight: 450; letter-spacing: 0; color: var(--text-3); vertical-align: baseline; }
.kpi-l { font-size: 0.745rem; color: var(--text-3); margin-top: 3px; display: flex; align-items: center; gap: 5px; }
.kpi-d { font-family: 'Geist Mono', monospace; font-size: 0.695rem; padding: 1px 4px; border-radius: 3px; }
.kpi-d.up { color: var(--green); background: var(--green-wash); }
.kpi-d.dn { color: var(--red); background: var(--red-wash); }
.chart { padding: 14px 15px; }

.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 20px; }

/* ══ Confidence bar ══ */
.conf { display: flex; height: 20px; border-radius: var(--r-sm); overflow: hidden; gap: 2px; margin-bottom: 11px; }
.conf div { display: grid; place-items: center; font-size: 10px; font-weight: 600; color: #fff; font-family: 'Geist Mono', monospace; }
.key { display: flex; gap: 16px; flex-wrap: wrap; font-size: 0.77rem; color: var(--text-3); }
.key span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 7px; height: 7px; border-radius: 2px; flex-shrink: 0; }

/* ══ Tables ══ */
.tbl { width: 100%; border-collapse: collapse; font-size: 0.825rem; }
.tbl th { text-align: left; font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 600; padding: 8px 14px; background: var(--surface-2); border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.tbl th.r, .tbl td.r { text-align: right; width: 1%; white-space: nowrap; }
.tbl td { padding: 8px 14px; border-bottom: 1px solid var(--line-soft); color: var(--text-2); vertical-align: middle; }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr:hover td { background: var(--surface-2); }
.tbl .q { font-family: 'Geist Mono', monospace; font-size: 0.8rem; color: var(--text); white-space: nowrap; }
.tbl .num { font-family: 'Geist Mono', monospace; }
.tbl .idx { font-family: 'Geist Mono', monospace; color: var(--text-3); width: 26px; }
.tbl .none { color: var(--text-3); }

.pill { display: inline-flex; align-items: center; gap: 4px; font-size: 0.715rem; font-weight: 500; padding: 2px 7px; border-radius: 999px; letter-spacing: 0.02em; white-space: nowrap; }
.pill.r { background: var(--red-wash); color: var(--red); }
.pill.a { background: var(--amber-wash); color: var(--amber); }
.pill.g { background: var(--green-wash); color: var(--green); }
.pill.n { background: var(--surface-3); color: var(--text-3); }
.delta { font-family: 'Geist Mono', monospace; font-size: 0.755rem; }
.delta.up { color: var(--green); }
.delta.dn { color: var(--red); }
.delta.warn { color: var(--red); }

/* ══ Funnel ══ */
.fn { display: flex; flex-direction: column; }
.fn-r { display: grid; grid-template-columns: 168px minmax(0, 1fr) 88px; gap: 14px; align-items: center; padding: 7px 0; }
.fn-l { font-size: 0.82rem; color: var(--text-2); }
.fn-b { height: 22px; background: var(--surface-3); border-radius: var(--r-sm); overflow: hidden; }
.fn-b div { height: 100%; background: var(--blue); border-radius: var(--r-sm); display: flex; align-items: center; padding: 0 8px; font-size: 10px; font-weight: 600; color: #fff; font-family: 'Geist Mono', monospace; }
.fn-p { font-family: 'Geist Mono', monospace; font-size: 0.79rem; color: var(--text-3); text-align: right; }
.fn-p b { color: var(--text); font-weight: 500; }

/* ══ Quiet mount stagger — transform/opacity only ══ */
.rise { opacity: 0; transform: translateY(10px); animation: rise 0.62s var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 55ms); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rise { animation: none; opacity: 1; transform: none; }
  .ins-c:hover { transform: none; }
}

@media (max-width: 1320px) { .ins { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1240px) { .g3 { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .g2 { grid-template-columns: 1fr; } .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .dsh-main { grid-template-columns: 1fr; } .nav, .rail { display: none; } }

/* ───────────── dash-intel.css ───────────── */
/* Channel filter — the one new control on the overview */
.chbar{display:flex;align-items:center;gap:6px;margin-bottom:12px}
.chbar .lab{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);font-weight:600;margin-right:4px}
.ch{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:.8rem;font-weight:450;color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:5px 12px;cursor:pointer;transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease)}
.ch i{font-size:12px;color:var(--icon)}
.ch:hover{background:var(--surface-3);color:var(--text)}
.ch[aria-pressed="true"]{background:var(--text);border-color:var(--text);color:#fff}
.ch[aria-pressed="true"] i{color:rgba(255,255,255,.7)}
.ch:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.muted-out{display:none!important}

/* WebMCP setup notice */
.notice{display:flex;align-items:flex-start;gap:11px;background:var(--blue-wash);border:1px solid var(--blue-line);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:14px}
.notice i.lead{color:var(--blue);font-size:15px;margin-top:1px;flex-shrink:0}
.notice strong{display:block;font-size:.83rem;font-weight:550;color:var(--blue-deep);margin-bottom:2px}
.notice p{font-size:.81rem;color:var(--text-2);margin:0;line-height:1.55;max-width:96ch}
.notice button{margin-left:auto;background:none;border:none;color:var(--icon);cursor:pointer;font-size:14px;padding:0;flex-shrink:0}
.notice button:hover{color:var(--text-2)}

/* Single merged sidebar — analytics reports live as a subnav under Intelligence */
.dsh-main{grid-template-columns:242px minmax(0,1fr)}
.subnav{display:flex;flex-direction:column;gap:1px;margin:3px 0 4px 17px;padding-left:9px;border-left:1px solid var(--line)}
.subnav-g{font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:9px 9px 4px}
.subnav-g:first-child{padding-top:3px}
.nav .subnav a{font-size:.805rem;padding:4px 9px}
.nav .subnav a i{font-size:13px;width:14px}
.nav .subnav a.on{background:var(--surface-4);color:var(--text);font-weight:500}
.nav .subnav a.on i{color:var(--blue)}

/* Agent panel bits */
.agrid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:10px;margin-bottom:20px}
.abody{padding:14px 15px;display:flex;flex-direction:column;gap:12px}
.arow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:8px 10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md)}
.aq{font-family:'Geist Mono',monospace;font-size:.795rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.an{font-family:'Geist Mono',monospace;font-size:.75rem;color:var(--text-3);white-space:nowrap}
.split{display:flex;flex-direction:column;gap:11px;padding:14px 15px}
.srow{display:grid;grid-template-columns:132px minmax(0,1fr) 52px;gap:11px;align-items:center}
.sl{font-size:.8rem;color:var(--text-2)}
.st{height:5px;background:var(--surface-3);border-radius:999px;overflow:hidden}
.st div{height:100%;border-radius:999px;background:var(--blue)}
.sv{font-family:'Geist Mono',monospace;font-size:.755rem;color:var(--text-3);text-align:right}
.tool-chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 15px 14px}
.tchip{font-family:'Geist Mono',monospace;font-size:.735rem;color:var(--blue-deep);background:var(--blue-wash);border:1px solid var(--blue-line);border-radius:var(--r-sm);padding:4px 8px}
@media(max-width:1240px){.agrid{grid-template-columns:1fr}}

/* Intelligence overview — intent layer (Sep 2026) */
.ins{grid-template-columns:repeat(5,minmax(0,1fr))}
.rec{margin-top:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;border:1px solid var(--blue-line);background:var(--blue-wash);border-radius:var(--r-md)}
.rec-l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue-deep)}
.rec-t{font-size:.95rem;font-weight:550;color:var(--text);margin:3px 0 2px;letter-spacing:-.01em}
.rec-m{font-size:.78rem;color:var(--text-2)}
.rec-a{display:flex;gap:6px;flex-wrap:wrap}
.verif{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:.8rem;color:var(--text-2)}
.verif i{color:var(--green);font-size:15px}
.verif b{font-weight:550;color:var(--text)}
.il-panel{margin-bottom:20px}
.il-hk{margin-left:auto;display:flex;gap:22px}
.il-k{display:flex;flex-direction:column;align-items:flex-end;gap:1px}
.il-k b{font-family:'Geist Mono',monospace;font-size:1rem;font-weight:500;color:var(--text)}
.il-k b small{font-size:.72rem;color:var(--green);margin-left:5px}
.il-k span{font-size:.7rem;color:var(--text-3)}
.il{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:clamp(26px,5.5cqw,88px);row-gap:10px;padding:16px 18px 20px}
.il-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.il-svg path{transition:opacity .4s var(--ease)}
.il-svg path.muted-out{opacity:.07}
.il-cap{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-3)}
.il-col{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px;justify-content:center}
.il-n{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--sh-1);min-height:52px;transition:opacity .4s var(--ease)}
.il-n>i{font-size:16px;color:var(--icon);flex-shrink:0}
.il-n b{display:block;font-size:.8rem;font-weight:550;color:var(--text)}
.il-n span{display:block;font-family:'Geist Mono',monospace;font-size:.72rem;color:var(--text-3);margin-top:1px}
.il-n.tall{min-height:96px}
.il-n.off{border-style:dashed;background:var(--surface-2);box-shadow:none}
.il-n.off b{color:var(--text-2)}
.il-cn{margin-left:auto;font:inherit;font-size:.72rem;font-weight:500;color:var(--blue);background:none;border:0;cursor:pointer;padding:0}
.il-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--c)}
.il-ok{margin-left:auto;width:6px;height:6px;border-radius:50%;background:var(--green);flex-shrink:0}
.il .il-n.muted-out{display:flex!important;opacity:.35;filter:grayscale(1)}
.il-svg path.muted-out{display:inline!important}
.pfoot{padding:10px 15px;border-top:1px solid var(--line-soft);font-size:.75rem;color:var(--text-3);text-wrap:pretty}
.pfoot b{font-weight:500;color:var(--text-2)}
.seg{margin-left:auto;display:flex;gap:2px;padding:2px;background:var(--surface-3);border-radius:var(--r-md)}
.seg button{border:0;background:none;font:inherit;font-size:.76rem;padding:4px 10px;border-radius:6px;color:var(--text-2);cursor:pointer;display:flex;gap:6px;align-items:center}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.seg .n{font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--text-3)}
.pill.b{background:var(--blue-wash);color:var(--blue-deep)}
.pill.v{background:var(--violet-wash);color:var(--violet)}
.tbl td .sub{display:block;font-size:.72rem;color:var(--text-3);margin-top:1px}
.tbl td.gt{color:var(--text);font-weight:500}
.lnk{font:inherit;font-size:.78rem;font-weight:500;color:var(--blue);background:none;border:0;cursor:pointer;display:inline-flex;gap:4px;align-items:center;white-space:nowrap;padding:0}
.lnk:hover{color:var(--blue-deep)}
.gaps tr[hidden]{display:none}
.cmp{padding:16px 15px 6px;display:flex;flex-direction:column;gap:10px}
.cmp-r{display:grid;grid-template-columns:132px minmax(0,1fr) 44px;gap:11px;align-items:center}
.cmp-r .st{height:10px}
.cmp-x{display:flex;align-items:baseline;gap:8px;padding:2px 15px 12px;font-size:.8rem;color:var(--text-2)}
.cmp-x b{font-family:'Geist Mono',monospace;font-size:1.35rem;font-weight:500;color:var(--text)}
.split-h{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-3);padding:12px 15px 0;border-top:1px solid var(--line-soft)}
.panel-h .pill{margin-left:auto}
.muted-out{opacity:.3;filter:grayscale(1);transition:opacity .4s var(--ease)}
@media(max-width:1480px){.ins{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.ins{grid-template-columns:1fr 1fr}.rec{grid-template-columns:1fr}}

/* ───────────── dash-views.css ───────────── */
/* Intelligence subsections */
.view[hidden]{display:none}
.kpis.k4{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:0}
.kpi.static{cursor:default}.kpi.static:hover{background:none}
.kpi-l a{color:var(--blue);text-decoration:none}
a{color:var(--blue)}a:hover{color:var(--blue-deep)}
.g21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:10px;margin-bottom:20px}
.expl{display:flex;align-items:flex-start;gap:11px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 14px;margin-bottom:14px;box-shadow:var(--sh-1)}
.expl>i{color:var(--blue);font-size:16px;margin-top:1px}
.expl p{margin:0;font-size:.81rem;line-height:1.55;color:var(--text-2);max-width:96ch;text-wrap:pretty}
.expl b{font-weight:550;color:var(--text)}
.expl code{font-family:'Geist Mono',monospace;font-size:.76rem;background:var(--surface-3);padding:1px 4px;border-radius:4px}
.expl a{margin-left:auto;white-space:nowrap;font-size:.78rem;font-weight:500;text-decoration:none}
.lg{margin-left:auto;display:flex;gap:12px;font-size:.75rem;color:var(--text-3)}
.lg span{display:flex;align-items:center;gap:5px}
.sw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:7px;vertical-align:0}
.tbar{margin-left:auto;display:flex;gap:8px;align-items:center}
.tbar .seg{margin-left:0}
.srch{display:flex;align-items:center;gap:7px;border:1px solid var(--line);border-radius:var(--r-md);padding:4px 9px;background:var(--surface);font-size:.8rem;width:220px;color:var(--icon)}
.srch:focus-within{border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-wash)}
.srch input{border:0;outline:0;font:inherit;background:none;flex:1;min-width:0;color:var(--text)}
.spk{display:inline-block;width:56px;height:18px;vertical-align:middle}
.spk.w{display:block;width:100%;height:30px;margin-top:10px}
.spk svg{display:block;width:100%;height:100%}
.area svg{display:block;width:100%}
.delta{color:var(--text-3)}.delta.dn{color:var(--red)}
.mb{display:inline-block;width:56px;height:5px;background:var(--surface-3);border-radius:999px;overflow:hidden;vertical-align:middle}
.mb i{display:block;height:100%;background:var(--amber);border-radius:999px}
.mbv{font-size:.75rem;color:var(--text-3);margin-left:8px}
tr.xp{cursor:pointer}
.car{font-size:11px;color:var(--icon);margin-right:6px;transition:transform .35s var(--ease);display:inline-block}
tr.xp[aria-expanded="false"] .car{transform:rotate(-90deg)}
tr.xd td{background:var(--surface-2);padding:12px 14px 14px 32px}
tr.xd:hover td{background:var(--surface-2)!important}
.qa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
.qa-l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-3);margin-bottom:6px}
.qa ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.qa li,.qa p{font-size:.8rem;color:var(--text-2);margin:0;line-height:1.5;text-wrap:pretty}
.qa li{padding:6px 9px;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-sm)}
.dg{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:10px;margin-bottom:12px}
.dc{padding:14px 15px;display:flex;flex-direction:column;gap:8px}
.dc-h{display:flex;align-items:center;gap:8px;justify-content:space-between}
.dc-h b{font-size:.9rem;font-weight:550;letter-spacing:-.01em}
.dc-n{display:flex;align-items:baseline;gap:6px;font-size:.8rem;color:var(--text-3);padding-bottom:6px;border-bottom:1px solid var(--line-soft)}
.dc-n b{font-family:'Geist Mono',monospace;font-size:1.35rem;font-weight:500;color:var(--text)}
.dc-n span{margin-left:auto;color:var(--text-2)}
.dc-m{display:flex;justify-content:space-between;align-items:center;font-size:.78rem;color:var(--text-3)}
.dc-m span:last-child{color:var(--text-2)}
.dc-m .mb{width:90px}.dc-m .mb i{background:var(--blue)}
.dc-a{display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:4px}
.note{font-size:.76rem;color:var(--text-3);margin:0 0 20px;max-width:96ch;text-wrap:pretty}
.note b{font-weight:500;color:var(--text-2)}
.mvs{display:flex;flex-direction:column}
.mv{display:grid;grid-template-columns:minmax(0,1fr) 56px 88px 58px;gap:12px;align-items:center;padding:10px 15px;border-bottom:1px solid var(--line-soft);font-size:.82rem}
.mv:last-child{border-bottom:0}
.mv-t{color:var(--text);display:flex;align-items:center;gap:8px}
.mv-v{font-size:.76rem;color:var(--text-3);text-align:right}
.mv .delta{text-align:right}
.fn{padding:14px 15px;display:flex;flex-direction:column;gap:4px}
.fn-r{display:grid;grid-template-columns:200px minmax(0,1fr) 64px 48px;gap:12px;align-items:center;padding:6px 8px;border-radius:var(--r-sm);font-size:.82rem;color:var(--text-2)}
.fn-r .num{text-align:right;color:var(--text)}
.fn-r .fn-d{color:var(--text-3);font-size:.75rem}
.fn-b{height:20px;background:var(--surface-2);border-radius:4px;overflow:hidden}
.fn-b i{display:block;height:100%;background:#a8c3f5;border-radius:4px;min-width:3px}
.fn-r.hl{background:var(--blue-wash)}
.fn-r.hl .fn-b i{background:var(--blue)}
.fn-r.hl .fn-l{color:var(--blue-deep);font-weight:500}
.rag{display:grid;grid-template-columns:auto minmax(0,1fr);gap:28px;padding:18px}
.ring{display:flex;flex-direction:column;align-items:center;gap:6px}
.ring-l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-3)}
.rag-m{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.rm{border:1px solid var(--line-soft);border-radius:var(--r-md);padding:13px 14px}
.rm.p{border-color:var(--line);border-radius:var(--r-lg)}
.rm-l{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-3)}
.rm-v{font-family:'Geist Mono',monospace;font-size:1.55rem;font-weight:500;color:var(--text);margin-top:6px}
.rm-v sub{font-size:.8rem;vertical-align:baseline;color:var(--text-3)}
.rm-s{font-size:.76rem;color:var(--text-3);margin-top:2px}
.callout{display:flex;gap:9px;align-items:flex-start;margin:0 15px 15px;padding:10px 12px;background:var(--red-wash);border-radius:var(--r-md)}
.callout i{color:var(--red);font-size:15px;margin-top:1px}
.callout p{margin:0;font-size:.8rem;line-height:1.5;color:var(--text-2)}
.callout b{font-weight:550;color:var(--text)}
.view-empty{padding:40px;text-align:center;color:var(--text-3);font-size:.85rem}
@media(max-width:1240px){.g21{grid-template-columns:1fr}.rag-m{grid-template-columns:1fr}.qa{grid-template-columns:1fr}}
@media(max-width:1100px){.kpis.k4{grid-template-columns:1fr 1fr}.tbar .srch{width:160px}.fn-r{grid-template-columns:140px minmax(0,1fr) 56px 44px}}

.ag{margin-bottom:12px}
.ag-p{font-size:.75rem;color:var(--text-3)}
.ag .seg{margin-left:auto}
.ag .seg i{font-size:12px}
.ag-b{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);align-items:stretch}
.ag-t{border-right:1px solid var(--line-soft)}
.ag-t td{padding:9px 14px}
.tc{position:relative;padding:14px 16px 8px;min-height:190px}
.tc svg{display:block;width:100%;overflow:visible}
.tc-x{display:flex;justify-content:space-between;font-family:'Geist Mono',monospace;font-size:.66rem;color:var(--text-3);margin-top:6px}
.tc-tip{position:absolute;pointer-events:none;background:var(--text);color:#fff;border-radius:var(--r-sm);padding:7px 9px;font-size:.72rem;line-height:1.5;box-shadow:var(--sh-3);white-space:nowrap;opacity:0;transition:opacity .2s;z-index:3}
.tc-tip b{font-weight:500;display:block;margin-bottom:2px;color:rgba(255,255,255,.7)}
.tc-tip i{display:inline-block;width:7px;height:7px;border-radius:2px;margin-right:6px}
.tc-hot{fill:transparent;cursor:crosshair}
@media(max-width:1100px){.ag-b{grid-template-columns:1fr}.ag-t{border-right:0;border-bottom:1px solid var(--line-soft)}}

/* Monday Brief */
.brief-w a{color:var(--blue);text-decoration:none}
.bf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:10px;align-items:start;margin-bottom:20px}
.bf-l{display:flex;flex-direction:column;gap:10px}
.bf-last{margin-left:auto;font-size:.75rem;color:var(--text-3)}
.bf-tg{display:flex;gap:11px;align-items:flex-start;padding:14px 15px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.bf-tg input{position:absolute;opacity:0;pointer-events:none}
.sw-t{width:30px;height:18px;border-radius:999px;background:var(--line-strong,#d0d4db);position:relative;flex-shrink:0;margin-top:1px;transition:background .3s var(--ease)}
.sw-t::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.15);transition:transform .3s var(--ease)}
.bf-tg input:checked+.sw-t{background:var(--blue)}
.bf-tg input:checked+.sw-t::after{transform:translateX(12px)}
.bf-tg input:focus-visible+.sw-t{outline:2px solid var(--blue);outline-offset:2px}
.bf-tg b{display:block;font-size:.84rem;font-weight:550;color:var(--text)}
.bf-tg small{display:block;font-size:.76rem;color:var(--text-3);margin-top:1px}
.bf-f{padding:14px 15px 0}
.bf-lab{display:flex;align-items:baseline;gap:8px;font-size:.8rem;font-weight:550;color:var(--text);margin-bottom:8px}
.bf-lab span{font-weight:400;font-size:.75rem;color:var(--text-3)}
.bf-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bf-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;background:var(--blue-wash);border:1px solid var(--blue-line);color:var(--blue-deep);font-size:.76rem}
.bf-chip button{border:0;background:none;color:var(--blue);cursor:pointer;font-size:14px;line-height:1;padding:0 5px}
.bf-add{display:flex;gap:6px}
.bf-add input,.bf-when select{font:inherit;font-size:.8rem;color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:6px 9px;background:var(--surface);min-width:0}
.bf-add input{flex:1}
.bf-add input:focus,.bf-when select:focus{outline:0;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-wash)}
.bf-when{display:flex;gap:6px;flex-wrap:wrap}
.bf-hint{font-size:.75rem;color:var(--text-3);margin:7px 0 0}
.bf-act{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:16px 15px 15px}
.bf-st{font-size:.76rem;color:var(--text-3)}
.bf-st.err{color:var(--red)}
.bf-tier{list-style:none;margin:0;padding:12px 15px;display:flex;flex-direction:column;gap:8px}
.bf-tier li{display:flex;gap:8px;font-size:.8rem;color:var(--text-2);line-height:1.45}
.bf-tier i{color:var(--green);font-size:13px;margin-top:2px}
.bf-subj{padding:10px 15px;border-bottom:1px solid var(--line-soft);font-size:.8rem;color:var(--text);display:flex;gap:10px}
.bf-subj span{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-3);padding-top:2px}
.bf-mail{background:var(--surface-3);padding:20px}
.em{max-width:520px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px 24px}
.em-lock{display:flex;align-items:center;gap:7px;font-weight:600;font-size:.95rem;margin-bottom:16px}
.em-lock img{width:24px;height:24px}
.em-k{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue)}
.em-h{font-size:1.1rem;font-weight:600;letter-spacing:-.015em;line-height:1.3;margin:5px 0 12px}
.em-p{margin:0 0 12px;padding:12px 14px;background:var(--blue-wash);border:1px solid var(--blue-line);border-radius:8px;font-size:.82rem;line-height:1.6;color:var(--text);text-wrap:pretty}
.em-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.em-stats div{border:1px solid var(--line-soft);border-radius:8px;padding:9px 6px;text-align:center}
.em-stats b{display:block;font-family:'Geist Mono',monospace;font-size:1.05rem;font-weight:500}
.em-stats span{display:block;font-size:.72rem;color:var(--text-2)}
.em-stats small{display:block;font-size:.68rem;color:var(--text-3);margin-top:2px}
.em-sec{margin-top:16px}
.em-t{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:4px}
.em-r{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:.82rem;color:var(--text)}
.em-r>span:last-child{text-align:right;white-space:nowrap}
.em-r b{font-weight:600}
.em-r em{display:block;font-style:normal;font-size:.7rem;color:var(--text-3)}
.em-r em.g,.em-f .g{color:var(--green)}
.em-new{font-style:normal;display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;background:var(--amber-wash);color:var(--amber);font-size:.62rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;vertical-align:1px}
.em-f{padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:.82rem}
.em-f b{display:block;font-weight:500}
.em-f span{display:block;font-size:.74rem;color:var(--text-3);margin-top:1px}
.em-btn{display:inline-block;margin-top:18px;padding:9px 16px;background:var(--blue);color:#fff!important;border-radius:8px;text-decoration:none;font-size:.82rem;font-weight:550}
.em-foot{font-size:.7rem;color:var(--text-3);line-height:1.5;margin:18px 0 0}
.em-foot a{color:var(--text-3)}
@media(max-width:1240px){.bf{grid-template-columns:1fr}}

/* ───────────── custom-v3.css ───────────── */
/* Customization — single scrolling page */
.btn:disabled{opacity:.45;cursor:default;pointer-events:none}
.cz{position:relative;scroll-behavior:smooth;scroll-padding-top:84px}
.cz-head{position:sticky;top:-1px;z-index:6;background:rgba(255,255,255,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);margin:0 -4px 12px;padding:10px 4px;border-bottom:1px solid transparent;transition:border-color .3s}
.cz-head.stuck{border-bottom-color:var(--line-soft)}
.cz-head{flex-wrap:wrap;gap:12px}.cz-head .btn{white-space:nowrap}
.cz-st{font-size:.76rem;color:var(--text-3);margin-right:4px}
.cz-st.dirty{color:var(--amber)}
.cz-body{max-width:880px;display:flex;flex-direction:column;gap:26px;padding-bottom:40vh}
.cs-h{display:flex;align-items:baseline;gap:10px;margin:0 0 9px;flex-wrap:wrap}
.cs-h h2{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0}
.cs-h p{font-size:.78rem;color:var(--text-3);margin:0}
.sr{display:grid;grid-template-columns:168px minmax(0,1fr);gap:16px;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line-soft)}
.panel>.sr:last-child,.panel>div:last-child>.sr:last-child,.pair-c .sr{border-bottom:0}
.sr.full{grid-template-columns:1fr;gap:10px}
.sr-l{font-size:.8rem;color:var(--text);font-weight:500}
.sr-l small{display:block;font-size:.72rem;font-weight:400;color:var(--text-3);margin-top:2px;line-height:1.4;text-wrap:pretty}
.sr-c{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.sr-c .seg,.sr .seg{margin-left:0}
.inl{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.stack-v{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%}
[data-show][hidden]{display:none!important}
/* colour field */
.cf{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cf-sw{width:28px;height:28px;border-radius:var(--r-sm);background:var(--c,#fff);border:1px solid var(--line);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);cursor:pointer;position:relative;flex-shrink:0}
.cf-sw input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;border:0;padding:0}
.cf-hex{width:86px;font-family:'Geist Mono',monospace;font-size:.76rem;color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:5px 8px;background:var(--surface);text-transform:lowercase}
.cf-hex.bad{border-color:var(--red)}
.cf-hex:focus,.tx:focus,.rf-n input:focus,.cr input:focus{outline:0;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-wash)}
.cf-pre{display:flex;gap:5px;padding-left:8px;border-left:1px solid var(--line-soft)}
.cf-pre:empty{display:none}
.cf-pre button{width:18px;height:18px;border-radius:50%;background:var(--c);border:1px solid rgba(0,0,0,.12);cursor:pointer;padding:0;transition:transform .25s var(--ease)}
.cf-pre button:hover{transform:scale(1.15)}
.cf-pre button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--blue)}
/* text */
.tx-w{position:relative;width:min(340px,100%)}
.tx{font:inherit;font-size:.82rem;color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:7px 44px 7px 10px;background:var(--surface);width:100%}
.tx-n{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-family:'Geist Mono',monospace;font-size:.68rem;color:var(--text-3)}
/* range with ticks */
.rf{display:flex;align-items:flex-start;gap:12px}
.rf-t{display:flex;flex-direction:column;gap:2px;width:220px}
.rf-t input{width:100%;accent-color:var(--blue);margin:6px 0 0}
.ticks{display:flex;justify-content:space-between}
.ticks button{border:0;background:none;padding:0 2px;font-family:'Geist Mono',monospace;font-size:.66rem;color:var(--text-3);cursor:pointer}
.ticks button:hover,.ticks button[aria-pressed="true"]{color:var(--blue)}
.rf-n{display:flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:var(--r-md);padding:0 8px 0 0;background:var(--surface)}
.rf-n input{width:52px;border:0;border-radius:var(--r-md);font-family:'Geist Mono',monospace;font-size:.76rem;padding:5px 0 5px 8px;background:none;color:var(--text)}
.rf-n input::-webkit-inner-spin-button{opacity:.4}
.rf-n span{font-size:.7rem;color:var(--text-3)}
/* stepper */
.stp{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);overflow:hidden}
.stp button{width:28px;height:28px;border:0;background:none;color:var(--text-2);cursor:pointer;display:grid;place-items:center}
.stp button:hover{background:var(--surface-3)}
.stp button:disabled{opacity:.3;pointer-events:none}
.stp output{min-width:22px;text-align:center;font-family:'Geist Mono',monospace;font-size:.8rem;color:var(--text)}
.stp span{font-size:.7rem;color:var(--text-3);margin-right:4px}
/* toggle */
.tg{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.tg input{position:absolute;opacity:0;pointer-events:none}
.tg input:checked+.sw-t{background:var(--blue)}
.tg input:checked+.sw-t::after{transform:translateX(12px)}
.tg input:focus-visible+.sw-t{outline:2px solid var(--blue);outline-offset:2px}
.tg-s{font-size:.78rem;color:var(--text-3)}
.seg.ico button{gap:6px}
.seg.sq button{min-width:36px;justify-content:center;font-size:.9rem}
.seg.sq button i{font-size:14px}
.rd{display:inline-block;width:15px;height:11px;border:1.5px solid currentColor;opacity:.75}
.el{display:inline-block;width:14px;height:10px;border-radius:3px;background:var(--surface);border:1px solid var(--line-strong,#c9ced6)}
.el.on{box-shadow:0 3px 6px rgba(15,23,42,.25)}
/* shared card-option */
.th,.lc button,.pos button,.bs button,.fill button,.sendi button{font:inherit;cursor:pointer;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);transition:border-color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);color:var(--text-2)}
.th:hover,.lc button:hover,.pos button:hover,.bs button:hover,.fill button:hover,.sendi button:hover{border-color:var(--line-strong,#c9ced6)}
.th[aria-pressed="true"],.lc button[aria-pressed="true"],.pos button[aria-pressed="true"],.bs button[aria-pressed="true"],.fill button[aria-pressed="true"],.sendi button[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);color:var(--text)}
/* themes */
.th-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;padding:14px 15px}
.th{display:flex;flex-direction:column;padding:0;overflow:hidden;text-align:left;border-radius:var(--r-lg)}
.th:hover{transform:translateY(-1px);box-shadow:var(--sh-3)}
.th-pv{position:relative;height:100px;display:block;border-bottom:1px solid var(--line-soft)}
.th-b{position:absolute;height:12px;border-radius:7px}
.th-b.ai{left:12px;top:14px;width:58%}
.th-b.us{right:12px;top:32px;width:36%}
.th-row{position:absolute;left:12px;bottom:36px;display:flex;gap:4px}
.th-row span{width:30px;height:8px;border-radius:999px}
.th-bar{position:absolute;left:12px;right:12px;bottom:12px;height:18px;border-radius:999px;box-shadow:0 1px 3px rgba(0,0,0,.1)}
.th-bar i{position:absolute;right:3px;top:3px;width:12px;height:12px;border-radius:50%}
.th-m{display:flex;flex-direction:column;gap:1px;padding:9px 11px 10px}
.th-m b{font-size:.82rem;font-weight:550;color:var(--text)}
.th-m span{font-size:.72rem;color:var(--text-3)}
/* fill */
.fill{display:flex;gap:8px}
.fill button{display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;font-size:.8rem}
.fl-t{width:26px;height:26px;border-radius:6px;border:1px solid var(--line);background:var(--cz-bg,#fff)}
.fl-t.gr{background:linear-gradient(var(--cz-ang,135deg),var(--cz-g1,#fff),var(--cz-g2,#eef3ff))}
.gp{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.gp-bar{width:100%;height:14px;border-radius:999px;border:1px solid var(--line);background:linear-gradient(90deg,var(--cz-g1,#fff),var(--cz-g2,#eef3ff))}
.gp-arr{color:var(--icon)}
.dial-w{display:flex;align-items:center;gap:14px}
.dial{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--surface);position:relative;flex-shrink:0}
.dial i{position:absolute;left:50%;top:50%;width:13px;height:2px;background:var(--blue);border-radius:2px;transform-origin:0 50%;transform:translateY(-50%) rotate(calc(var(--cz-ang-n,135deg) - 90deg))}
.dial::after{content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:var(--blue)}
/* layout cards */
.lc{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.lc button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:8px 8px 10px;text-align:left}
.lc b{font-size:.8rem;font-weight:550;color:var(--text);margin-top:5px}
.lc span:last-child{font-size:.7rem;color:var(--text-3);line-height:1.35}
.lc-t{width:100%;height:62px;border-radius:6px;background:#f3f1ec;display:flex;align-items:flex-end;gap:4px;padding:9px;position:relative}
.lc-t i{display:block;font-style:normal}
.lc-t em{font-style:normal;font-size:8.5px;color:#8a8f98;margin-left:2px;align-self:center}
.lc-t .p{width:22px;height:9px;border-radius:999px;background:#dfe2e8;flex-shrink:0;align-self:center}
.lc-t .p.f{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.lc-t .p.o{background:transparent;border:1px solid #c9ced6}
.lc-t .p.bl{background:var(--w-user,#2563eb)}
.lc-standard{flex-direction:column;align-items:stretch;gap:4px}
.lc-standard .b1{width:62%;height:7px;border-radius:4px;background:#e3e1db}
.lc-standard .b2{width:40%;height:7px;border-radius:4px;background:var(--w-user,#2563eb);opacity:.7;align-self:flex-end}
.lc-standard .in{height:13px;border-radius:999px;background:#fff;border:1px solid #d6d9df}
.lc-A,.lc-B,.lc-C,.lc-D{align-items:center}
.lc-A .cap{flex:1;height:18px;border-radius:999px;background:#fff;border:1px solid #d6d9df;display:flex;align-items:center;gap:3px;padding:0 4px}
.lc-A .cap .p{width:16px;height:8px}
.lc-A .dv{width:1px;height:10px;background:#d6d9df}
.lc-t .ask{flex:1;height:16px;border-radius:999px;background:#fff;border:1px solid #d6d9df}
.lc-t .br{flex:1;height:16px;border-radius:999px;background:var(--d-in,#eef3ff);border:1px solid #c9d7f5}
/* corner editor */
.cr-box{position:relative;width:250px;height:120px}
.cr-sh{position:absolute;left:56px;right:56px;top:22px;bottom:22px;border:1.5px solid var(--blue);background:var(--blue-wash);border-radius:var(--w-r-raw,16px);transition:border-radius .3s var(--ease)}
.cr label{position:absolute;display:flex;align-items:center;gap:4px;font-family:'Geist Mono',monospace;font-size:.64rem;color:var(--text-3)}
.cr input{width:48px;font-family:'Geist Mono',monospace;font-size:.74rem;border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 5px;color:var(--text);background:var(--surface)}
.cr .tl{left:0;top:0}.cr .tr{right:0;top:0;flex-direction:row-reverse}.cr .bl{left:0;bottom:0}.cr .br{right:0;bottom:0;flex-direction:row-reverse}
/* position */
.pos{display:flex;gap:8px}
.pos button{display:flex;flex-direction:column;align-items:center;gap:5px;padding:6px 6px 5px;font-size:.72rem}
.pos-t{width:70px;height:42px;border-radius:5px;background:#f3f1ec;display:flex;align-items:flex-end;padding:6px;position:relative}
.pos-t i{display:block;height:9px;width:42%;border-radius:999px;background:#fff;border:1px solid #c9ced6}
.pos-t.box i{height:22px;border-radius:5px;width:46%}
.pos-t.btn i{height:9px;width:36%;border-color:var(--f-bd,#da291c)}
.pos-t.center{justify-content:center}.pos-t.right{justify-content:flex-end}
/* border style */
.bs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.bs button{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 8px 8px;font-size:.74rem}
.bs-t{width:100%;height:34px;border-radius:6px;background:#f6f5f2;display:grid;place-items:center}
.bs-t i{display:block;width:78%;height:14px;border-radius:999px;background:#fff}
.bs-solid i{border:1.5px solid #c9ced6}
.bs-static i{box-shadow:0 0 8px var(--glow-c,#6366f1)}
.bs-animated i{animation:wpglow 3s ease-in-out infinite;--aglow:8px}
.bs-none i{border:1px dashed transparent}
/* send icon tiles */
.sendi{display:flex;gap:8px}
.sendi button{padding:6px;border-radius:999px}
.sendi .wp-send{pointer-events:none}
/* inline mini previews */
.pair{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:18px;align-items:center}
.pair-c{display:flex;flex-direction:column}
.pair-c .sr{grid-template-columns:84px minmax(0,1fr);padding:6px 0}
.pair-c .sr-l{font-weight:400;color:var(--text-2)}
.mini-chat,.mini-row{background:#f6f5f2;border-radius:var(--r-md);padding:14px 12px;display:flex;flex-direction:column;gap:6px;font-family:ui-sans-serif,system-ui,sans-serif}
.mini-row{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px;min-height:74px}
.mini-row .wp-prod,.mini-row .wp-link{width:100%;max-width:210px}
.mini-row .wp-fn{display:flex}
@container cv (max-width:720px){.sr{grid-template-columns:1fr;gap:8px}.pair{grid-template-columns:1fr}.bs{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ───────────── build-v3.css ───────────── */
/* Data · Functions · Agents */
.bd{position:relative;scroll-behavior:smooth}
.bd .head{margin-bottom:14px}
.bd-body{display:flex;flex-direction:column;gap:26px;max-width:1080px;padding-bottom:30vh;flex-shrink:0}
.bd-body>*,.bd>*{flex-shrink:0}
.hstat{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-2);padding:5px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.hstat b{font-family:'Geist Mono',monospace;font-weight:500;color:var(--text)}
.legend{display:inline-flex;align-items:center;gap:6px;font-size:.74rem;color:var(--text-3)}
.tdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 0 2px var(--amber-wash);flex-shrink:0}
.tbl-bar{display:flex;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line-soft)}
.tbl-bar .srch{width:240px}
.tbl-bar .btn{margin-left:auto}
.tbl-bar .seg{margin-left:0}
.cs .panel:has(.rt){overflow-x:auto}
.rt{min-width:620px}
.rt tbody tr{cursor:pointer}
.rt tbody tr.sel td{background:var(--blue-wash)!important}
.rt tbody tr.del td{color:var(--text-3)}
.rt tbody tr.del .rn{text-decoration:line-through}
.rn{display:flex;align-items:center;gap:9px;color:var(--text);font-weight:500}
.rn>i{font-size:16px;color:var(--icon);flex-shrink:0}
.rn small{display:block;font-weight:400;font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--text-3);margin-top:1px}
.rt td.pv{max-width:320px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-3)}
.ag-chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;color:var(--text-2);background:var(--surface-3);padding:2px 8px;border-radius:999px;white-space:nowrap}
.ag-chip i{font-size:12px}
.st-p{display:inline-flex;align-items:center;gap:5px}
.st-p .spin{width:10px;height:10px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.empty-r td{text-align:center;color:var(--text-3);padding:26px!important;cursor:default}
/* suggestions */
.sg-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:0}
.sg-l{padding:14px 15px;border-right:1px solid var(--line-soft)}
.sg-r{padding:14px 15px;display:flex;flex-direction:column;gap:10px}
.sg-h{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.sg-h b{font-size:.84rem;font-weight:550}
.sg-h span{margin-left:auto;font-family:'Geist Mono',monospace;font-size:.74rem;color:var(--text-3)}
.sg-list{display:flex;flex-direction:column;gap:6px;margin-bottom:10px}
.sg-it{display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-size:.82rem;cursor:grab;transition:box-shadow .2s,opacity .2s}
.sg-it.drag{opacity:.4}
.sg-it.over{box-shadow:0 -2px 0 var(--blue)}
.sg-it .ph-dots-six-vertical{color:var(--icon)}
.sg-it span{flex:1}
.sg-it button{border:0;background:none;color:var(--text-3);cursor:pointer;padding:2px;display:grid;place-items:center}
.sg-it button:hover{color:var(--red)}
.sg-add{display:flex;gap:6px}
.sg-add input{flex:1;font:inherit;font-size:.8rem;border:1px solid var(--line);border-radius:var(--r-md);padding:6px 9px;min-width:0}
.sg-add input:focus{outline:0;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-wash)}
.sg-r p{margin:0;font-size:.78rem;color:var(--text-3);line-height:1.5}
.sg-r .tgl{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.sg-r .tgl b{display:block;font-size:.84rem;font-weight:550;margin-bottom:2px}
/* rag eval */
.re{padding:14px 15px;display:flex;flex-direction:column;gap:10px}
.re-top{display:flex;align-items:baseline;justify-content:space-between}
.re-top b{font-size:.84rem;font-weight:550}
.re-top output{font-family:'Geist Mono',monospace;font-size:1.1rem;color:var(--blue)}
.re-tr{position:relative}
.re-tr input{width:100%;accent-color:var(--blue)}
.re-max{position:absolute;top:-4px;width:2px;height:22px;background:var(--amber);border-radius:2px;pointer-events:none}
.re-sc{display:flex;justify-content:space-between;font-size:.7rem;color:var(--text-3)}
.re-sc .m{color:var(--amber);font-weight:500}
.re p{margin:0;font-size:.78rem;color:var(--text-2)}
.re-a{display:flex;align-items:center;gap:10px}
/* danger */
.dz{border-color:#f3c9c4}
.dz-b{padding:14px 15px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dz-b p{margin:0;flex:1;min-width:240px;font-size:.8rem;color:var(--text-2);line-height:1.5}
.btn.danger{background:var(--surface);color:var(--red);border-color:#f3c9c4}
.btn.danger:hover{background:var(--red-wash)}
.btn.danger.solid{background:var(--red);color:#fff;border-color:var(--red)}
.dz-c{display:flex;gap:8px;align-items:center;width:100%;padding-top:10px;border-top:1px dashed #f3c9c4}
.dz-c input{flex:1;font-family:'Geist Mono',monospace;font-size:.78rem;border:1px solid var(--line);border-radius:var(--r-md);padding:6px 9px}
/* resource panel (inside dock) */
.rp-h{display:flex;gap:10px;align-items:flex-start;padding:4px 2px 2px}
.rp-ic{width:34px;height:34px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:17px;color:var(--blue);flex-shrink:0}
.rp-h h4{margin:0;font-size:.95rem;font-weight:550;letter-spacing:-.01em;line-height:1.3;word-break:break-word}
.rp-h p{margin:2px 0 0;font-size:.74rem;color:var(--text-3);font-family:'Geist Mono',monospace;word-break:break-all}
.rp-h .pill{margin-left:auto;flex-shrink:0}
.dk-panel>*{flex-shrink:0}
.rn .rnm{white-space:nowrap}
.rp-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);overflow:hidden}
.rp-t{font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--text-3);padding:10px 12px 0}
.rp-st{display:grid;grid-template-columns:repeat(3,1fr)}
.rp-st div{padding:10px 12px;border-right:1px solid var(--line-soft)}
.rp-st div:last-child{border-right:0}
.rp-st b{display:block;font-family:'Geist Mono',monospace;font-size:1.05rem;font-weight:500}
.rp-st span{font-size:.7rem;color:var(--text-3)}
.rp-prog{padding:10px 12px;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:6px;font-size:.76rem;color:var(--text-2)}
.rp-bar{height:5px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.rp-bar i{display:block;height:100%;background:var(--blue);border-radius:999px;transition:width .6s var(--ease)}
.kv{display:grid;grid-template-columns:104px minmax(0,1fr);gap:4px 10px;padding:10px 12px;font-size:.78rem}
.kv dt{color:var(--text-3)}
.kv dd{margin:0;color:var(--text);word-break:break-word}
.kv dd.m{font-family:'Geist Mono',monospace;font-size:.74rem}
.rp-ls{display:flex;flex-direction:column}
.rp-ls .srch{margin:8px 12px;width:auto}
.rp-li{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:8px;align-items:center;padding:7px 12px;border-top:1px solid var(--line-soft);font-size:.76rem}
.rp-li i{color:var(--icon)}
.rp-li span{font-family:'Geist Mono',monospace;font-size:.72rem;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp-li em{font-style:normal;color:var(--text-3);font-size:.7rem;white-space:nowrap}
.rp-li.warn em{color:var(--amber)}
.rp-more{padding:8px 12px;border-top:1px solid var(--line-soft);font-size:.74rem;color:var(--text-3)}
.chunk{margin:8px 12px;padding:8px 10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-sm);font-size:.76rem;line-height:1.5;color:var(--text-2)}
.chunk b{display:block;font-family:'Geist Mono',monospace;font-size:.66rem;font-weight:500;color:var(--text-3);margin-bottom:3px}
.rp-note{display:flex;gap:8px;align-items:flex-start;padding:9px 11px;border-radius:var(--r-md);background:var(--amber-wash);font-size:.76rem;color:var(--text-2);line-height:1.45}
.rp-note i{color:var(--amber);margin-top:2px}
.rp-note.b{background:var(--blue-wash)}.rp-note.b i{color:var(--blue)}
.rp-a{position:sticky;bottom:-12px;margin:auto -12px -12px;padding:10px 12px;background:linear-gradient(to top,var(--surface-2) 70%,transparent);display:flex;gap:6px;flex-wrap:wrap}
.rp-a .btn.grow{flex:1;justify-content:center}
/* forms */
.fm{display:flex;flex-direction:column;gap:12px;padding:12px}
.fm label.f{display:flex;flex-direction:column;gap:5px;font-size:.76rem;font-weight:500;color:var(--text)}
.fm label.f small{font-weight:400;color:var(--text-3)}
.fm input[type=text],.fm input[type=url],.fm input[type=number],.fm textarea,.fm select,.ed input[type=text],.ed textarea{font:inherit;font-size:.8rem;color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:7px 9px;background:var(--surface);width:100%}
.fm textarea,.ed textarea{resize:vertical;line-height:1.5}
.fm input:focus,.fm textarea:focus,.fm select:focus,.ed input:focus,.ed textarea:focus{outline:0;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-wash)}
.fm .m,.ed .m{font-family:'Geist Mono',monospace;font-size:.76rem}
.fm-2{display:grid;grid-template-columns:1fr 110px;gap:10px}
.fm-seg{display:flex;flex-direction:column;gap:8px}
.fm-seg .seg{margin:0;align-self:flex-start}
.sm-row{display:flex;gap:6px;align-items:center}
.sm-row input{flex:1}
.sm-ok{font-size:.7rem;white-space:nowrap}
.fm-tg{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 12px;border-top:1px solid var(--line-soft)}
.fm-tg b{display:block;font-size:.8rem;font-weight:550}
.fm-tg span{font-size:.74rem;color:var(--text-3);line-height:1.4}
.fm-sch{display:flex;align-items:center;gap:6px;padding:0 12px 12px;font-size:.78rem;color:var(--text-2)}
.fm-sch input{width:64px!important}
.fm-sch select{width:auto!important}
.drop{margin:12px;border:1.5px dashed var(--line-strong,#c9ced6);border-radius:var(--r-lg);padding:22px 14px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.drop:hover,.drop.over{border-color:var(--blue);background:var(--blue-wash)}
.drop>i{font-size:24px;color:var(--blue)}
.drop b{font-size:.84rem;font-weight:550}
.drop span{font-size:.74rem;color:var(--text-3)}
.drop .fn{font-family:'Geist Mono',monospace;font-size:.74rem;color:var(--text);margin-top:4px}
/* list + editor (functions, agents) */
.le{display:grid;grid-template-columns:250px minmax(0,1fr);gap:12px;align-items:start}
.le-l{display:flex;flex-direction:column}
.le-it{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--line-soft);cursor:pointer;background:none;border-left:0;border-right:0;border-top:0;font:inherit;text-align:left;width:100%}
.le-it:hover{background:var(--surface-2)}
.le-it[aria-current="true"]{background:var(--blue-wash);box-shadow:inset 2px 0 0 var(--blue)}
.le-it>i{font-size:16px;color:var(--icon);width:18px}
.le-it[aria-current="true"]>i{color:var(--blue)}
.le-it b{display:block;font-size:.82rem;font-weight:500;color:var(--text)}
.le-it small{display:block;font-family:'Geist Mono',monospace;font-size:.68rem;color:var(--text-3);margin-top:1px}
.le-it .tdot{margin-left:auto}
.le-new{display:flex;align-items:center;gap:8px;padding:10px 12px;font:inherit;font-size:.8rem;color:var(--blue);background:none;border:0;cursor:pointer;width:100%;text-align:left}
.le-new:hover{background:var(--blue-wash)}
.ed-h{display:flex;align-items:center;gap:10px;padding:12px 15px;border-bottom:1px solid var(--line-soft)}
.ed-h h3{margin:0;font-size:.95rem;font-weight:550;letter-spacing:-.01em}
.ed-h .ed-a{margin-left:auto;display:flex;gap:6px}
.ed-sec{padding:4px 0 6px;border-bottom:1px solid var(--line-soft)}
.ed-sec:last-child{border-bottom:0}
.ed-sec>.rp-t{padding:12px 15px 2px}
.ed .sr{padding:10px 15px;border-bottom:0}
.ed .sr-c>input,.ed .sr-c>textarea{max-width:460px}
.how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:10px 15px 6px;border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.how div{padding:9px 11px;font-size:.75rem;color:var(--text-2);line-height:1.4;border-right:1px solid var(--line-soft);background:var(--surface-2)}
.how div:last-child{border-right:0}
.how b{display:flex;align-items:center;gap:6px;font-size:.76rem;font-weight:550;color:var(--text);margin-bottom:2px}
.how b i{color:var(--blue)}
.inval{font-size:.72rem;color:var(--red)}
.okv{font-size:.72rem;color:var(--green)}
.pt{width:100%;border-collapse:collapse;font-size:.78rem}
.pt th{text-align:left;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-weight:600;padding:6px 8px;border-bottom:1px solid var(--line-soft)}
.pt td{padding:5px 6px;border-bottom:1px solid var(--line-soft)}
.pt input,.pt select{font:inherit;font-size:.76rem;border:1px solid transparent;border-radius:var(--r-sm);padding:4px 6px;width:100%;background:none;color:var(--text)}
.pt input:hover,.pt select:hover{border-color:var(--line)}
.pt input:focus,.pt select:focus{outline:0;border-color:var(--blue-line);background:var(--surface)}
.pt .m{font-family:'Geist Mono',monospace}
.pt td.x{width:28px}
.pt td.x button{border:0;background:none;color:var(--text-3);cursor:pointer}
.pt td.x button:hover{color:var(--red)}
.pt td.c{width:60px;text-align:center}
.json{font-family:'Geist Mono',monospace;font-size:.74rem;line-height:1.6;min-height:150px;background:var(--surface-2)!important}
.snip{margin:0;font-family:'Geist Mono',monospace;font-size:.72rem;line-height:1.55;background:#0f1115;color:#d7dae0;border-radius:var(--r-md);padding:10px 12px;overflow:auto;max-width:520px}
.snip .k{color:#9fb8f2}.snip .s{color:#6fcf97}.snip .c{color:#7d8490}
.fn-usage{display:flex;gap:18px;padding:10px 15px 12px;font-size:.78rem;color:var(--text-2)}
.fn-usage b{font-family:'Geist Mono',monospace;font-weight:500;color:var(--text);font-size:.95rem;margin-right:4px}
.ic-t{display:flex;gap:6px}
.ic-t button{width:36px;height:36px;border-radius:var(--r-md);border:1px solid var(--line);background:var(--surface);display:grid;place-items:center;font-size:17px;color:var(--text-2);cursor:pointer}
.ic-t button[aria-pressed="true"]{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash);color:var(--blue)}
.idc{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',monospace;font-size:.74rem;color:var(--text-2);background:var(--surface-2);border:1px solid var(--line-soft);padding:4px 4px 4px 9px;border-radius:var(--r-md)}
.idc button{border:0;background:var(--surface);border-radius:5px;padding:3px 6px;cursor:pointer;color:var(--text-2);font-size:12px}
.res-g{padding:4px 15px 10px}
.res-g h5{margin:10px 0 4px;font-size:.74rem;font-weight:500;color:var(--text-3);display:flex;align-items:center;gap:6px}
.res-it{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--line-soft);font-size:.8rem}
.res-it:last-child{border-bottom:0}
.res-it i{color:var(--icon);font-size:15px}
.res-it span{flex:1}
.res-it small{font-family:'Geist Mono',monospace;font-size:.7rem;color:var(--text-3)}
.res-h{display:flex;align-items:center;gap:8px;padding:0 15px;font-size:.76rem;color:var(--text-3)}
.res-h .lnk{margin-left:auto}
.ci{display:flex;flex-direction:column;gap:6px;padding:8px 15px 12px}
.ci-it{display:flex;gap:8px;align-items:flex-start}
.ci-it textarea{flex:1;min-height:38px}
.ci-it button{border:0;background:none;color:var(--text-3);cursor:pointer;padding:8px 4px}
.ci-it button:hover{color:var(--red)}
.lock{display:flex;gap:8px;align-items:center;margin:10px 15px;padding:9px 11px;border-radius:var(--r-md);background:var(--surface-2);font-size:.78rem;color:var(--text-2)}
.lock i{color:var(--icon)}
@container cv (max-width:760px){.le{grid-template-columns:1fr}.sg-wrap{grid-template-columns:1fr}.sg-l{border-right:0;border-bottom:1px solid var(--line-soft)}.how{grid-template-columns:1fr}.how div{border-right:0;border-bottom:1px solid var(--line-soft)}}

/* ───────────── ship-v3.css ───────────── */
/* Integrations · Installation · Security · Version Control · Team · Billing · Reach us */
.btn.danger{background:var(--surface);color:var(--red);border-color:#f3c9c4}
.btn.danger:hover{background:var(--red-wash)}
.btn.danger.solid{background:var(--red);color:#fff;border-color:var(--red)}
.m{font-family:'Geist Mono',monospace;font-size:.92em}
.note{font-size:.76rem;color:var(--text-3);margin:12px 0 0}
.note a{color:var(--text-2)}
/* integrations */
.ig{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px;max-width:1080px}
.ig-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 15px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);text-align:left;font:inherit;color:inherit}
button.ig-c{cursor:pointer;transition:box-shadow .3s var(--ease),transform .3s var(--ease),border-color .3s}
button.ig-c:hover{box-shadow:var(--sh-3);transform:translateY(-1px);border-color:var(--line-strong,#c9ced6)}
.ig-c.soon{box-shadow:none;background:var(--surface-2)}
.ig-c.soon .ig-m b{color:var(--text-2)}
.ig-lg{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-size:19px;background:var(--surface-3);color:var(--icon)}
.ig-lg.ga{background:#fff4e5;color:#e37400}
.ig-m b{display:block;font-size:.88rem;font-weight:550;margin-bottom:2px}
.ig-m span{font-size:.78rem;color:var(--text-3);line-height:1.45}
.ig-s{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.72rem;color:var(--text-3)}
.ig-f{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;padding-top:10px;border-top:1px solid var(--line-soft);font-size:.76rem;color:var(--text-3)}
.ig-f b{font-family:'Geist Mono',monospace;font-weight:500;color:var(--text)}
.ev{display:flex;flex-direction:column}
.ev-i{padding:9px 12px;border-top:1px solid var(--line-soft);font-size:.76rem;color:var(--text-2);line-height:1.45}
.ev-i code{font-family:'Geist Mono',monospace;font-size:.74rem;color:var(--blue-deep);background:var(--blue-wash);padding:1px 5px;border-radius:4px}
.ev-i .pl-d{display:block;font-family:'Geist Mono',monospace;font-size:.68rem;color:var(--text-3);margin-top:3px}
/* code blocks */
.cb{position:relative;margin:0 15px 14px}
.cb pre{margin:0;font-family:'Geist Mono',monospace;font-size:.75rem;line-height:1.65;background:#0f1115;color:#d7dae0;border-radius:var(--r-md);padding:12px 14px;overflow:auto;white-space:pre}
.cb .k{color:#9fb8f2}.cb .s{color:#6fcf97}.cb .c{color:#7d8490}
.cb-cp{position:absolute;right:8px;top:8px;display:flex;align-items:center;gap:5px;font:inherit;font-size:.7rem;color:#c3c7cf;background:#1c2029;border:1px solid #2b3040;border-radius:6px;padding:3px 8px;cursor:pointer;z-index:1}
.cb-cp:hover{color:#fff;border-color:#4d84ec}
.steps .cb{margin:6px 0}
.cb-h{display:flex;align-items:center;gap:12px;padding:0 15px 10px;flex-wrap:wrap}
.cb-h .seg{margin:0}
.ap{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--text-2)}
.ap select{font:inherit;font-size:.78rem;border:1px solid var(--line);border-radius:var(--r-md);padding:5px 8px;background:var(--surface);color:var(--text)}
.pc{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:14px 15px;border:1px solid var(--line-soft);border-radius:var(--r-md);overflow:hidden}
.pc div{padding:9px 12px;font-size:.78rem;color:var(--text-2);line-height:1.45;background:var(--surface-2)}
.pc div+div{border-left:1px solid var(--line-soft)}
.pc b{display:flex;align-items:center;gap:6px;font-size:.74rem;font-weight:550;color:var(--text);margin-bottom:2px}
.pc b i{color:var(--icon)}
.steps{list-style:none;counter-reset:s;margin:0;padding:4px 15px 14px;display:flex;flex-direction:column;gap:10px}
.steps li{counter-increment:s;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:10px;font-size:.8rem;color:var(--text-2);line-height:1.5}
.steps li::before{content:counter(s);grid-row:span 3;width:22px;height:22px;border-radius:50%;background:var(--blue-wash);color:var(--blue-deep);font-size:.72rem;font-weight:600;display:grid;place-items:center}
.steps li>b:first-of-type{display:block;color:var(--text);font-weight:550}
.lockb{display:flex;align-items:center;gap:12px;padding:11px 14px;margin-bottom:10px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface-2)}
.lockb>i{font-size:18px;color:var(--icon)}
.lockb b{display:block;font-size:.84rem;font-weight:550}
.lockb span{font-size:.76rem;color:var(--text-3)}
.lockb .btn{margin-left:auto}
.ak{display:flex;align-items:center;gap:10px;padding:0 15px 14px;flex-wrap:wrap}
.ak-v{padding:6px 10px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:var(--r-md);font-size:.76rem;color:var(--text-2)}
/* security */
.ol{display:flex;flex-direction:column;gap:6px;padding:10px 15px 8px}
.sr .ol{padding:0 0 8px}
.ol-i{display:flex;align-items:center;gap:8px;padding:6px 8px 6px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);font-family:'Geist Mono',monospace;font-size:.76rem}
.ol-i i.ph-globe-simple{color:var(--icon)}
.ol-i span{flex:1}
.ol-i button{border:0;background:none;color:var(--text-3);cursor:pointer;display:grid;place-items:center;padding:2px}
.ol-i button:hover{color:var(--red)}
.ol-add{display:flex;gap:6px;padding:0 15px 12px;flex-wrap:wrap}
.ol-add input{flex:1;min-width:200px;border:1px solid var(--line);border-radius:var(--r-md);padding:6px 9px;font-size:.76rem;color:var(--text)}
.ol-add input:focus{outline:0;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-wash)}
.ol-add input.bad{border-color:var(--red)}
.ol-err{flex-basis:100%;font-size:.72rem;color:var(--red)}
.off{opacity:.45;pointer-events:none}
.rp-a.svb{position:static;margin:0;background:none;border-top:1px solid var(--line-soft);align-items:center;padding:12px 15px}
.rp-a.svb .cz-st{display:inline-flex;align-items:center;gap:5px}
.tools{display:flex;flex-direction:column;border-top:1px solid var(--line-soft)}
.tool{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:12px;align-items:center;padding:10px 15px;border-bottom:1px solid var(--line-soft)}
.tool:last-child{border-bottom:0}
.tool .tchip{justify-self:start;font-size:.7rem}
.tool b{display:block;font-size:.8rem;font-weight:550}
.tool span:not(.tchip):not(.sw-t){font-size:.74rem;color:var(--text-3)}
details.tst{border-top:1px solid var(--line-soft)}
details.tst summary{list-style:none;display:flex;align-items:center;gap:8px;padding:12px 15px;cursor:pointer;font-size:.82rem;font-weight:550}
details.tst summary::-webkit-details-marker{display:none}
details.tst summary>i:first-child{color:var(--blue)}
details.tst summary span{font-weight:400;font-size:.76rem;color:var(--text-3)}
details.tst summary .car{margin-left:auto;transition:transform .3s}
details.tst[open] summary .car{transform:rotate(180deg)}
.tr-sc{position:relative;padding-top:10px}
.tr-dist{height:8px;border-radius:999px;background:linear-gradient(90deg,#fde0dc 0%,#fde0dc 50%,#fff0c7 50%,#fff0c7 75%,#d6f2e1 75%);border:1px solid var(--line-soft)}
.tr-sc input{position:absolute;left:0;right:0;top:4px;width:100%;margin:0;accent-color:var(--blue);background:none}
.tr-v{display:flex;align-items:center;gap:12px;font-size:.78rem;color:var(--text-2)}
.tr-v .rf-n input{width:62px}
.tr-v b{font-weight:550;color:var(--text)}
/* version control */
.vp{display:flex;flex-direction:column}
.vp-i{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:11px 15px;border-bottom:1px solid var(--line-soft)}
.vp-i:last-child{border-bottom:0}
.vp-i>i{font-size:16px;color:var(--amber);margin-top:1px}
.vp-i b{display:block;font-size:.84rem;font-weight:550}
.vp-i ul{margin:4px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:2px;font-size:.76rem;color:var(--text-2)}
.vp-i ul li::before{content:"· ";color:var(--text-3)}
.vp-e{padding:22px 15px;display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--text-2)}
.vp-e i{color:var(--green);font-size:18px}
tr.vd td{background:var(--surface-2)!important;padding:10px 14px 12px 40px;font-size:.78rem;color:var(--text-2)}
tr.vd ul{margin:0;padding-left:16px}
.vn{font-family:'Geist Mono',monospace;font-weight:500;color:var(--text)}
.vc-cur{margin-left:6px}
/* team */
.mbr{display:flex;align-items:center;gap:10px}
.av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.72rem;font-weight:600;color:#fff;flex-shrink:0}
.mbr b{display:block;font-size:.82rem;font-weight:500;color:var(--text)}
.mbr small{display:block;font-size:.72rem;color:var(--text-3)}
.rsel{font:inherit;font-size:.78rem;border:1px solid var(--line);border-radius:var(--r-md);padding:4px 8px;background:var(--surface);color:var(--text)}
.rsel:disabled{background:var(--surface-2);color:var(--text-3)}
.dz{border-color:#f3c9c4}
.dz-b{padding:14px 15px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dz-b p{margin:0;flex:1;min-width:240px;font-size:.8rem;color:var(--text-2);line-height:1.5}
.dz-b p b{color:var(--text);font-weight:550}
.roles{display:flex;flex-direction:column;gap:6px}
.role{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r-md);cursor:pointer;font-size:.78rem;color:var(--text-2);line-height:1.4}
.role:has(input:checked){border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.role input{accent-color:var(--blue);margin-top:2px}
.role b{display:block;color:var(--text);font-weight:550;font-size:.8rem}
/* billing */
.us{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.us-g{padding:14px 15px;border-right:1px solid var(--line-soft)}
.us-nav{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.us-nav b{font-size:.84rem;font-weight:550;min-width:110px;text-align:center}
.us-nav .iconbtn:disabled{opacity:.3;pointer-events:none}
.us-ch svg{display:block;width:100%}
.us-ch .ax{display:flex;justify-content:space-between;font-family:'Geist Mono',monospace;font-size:.64rem;color:var(--text-3);margin-top:4px}
.us-s{padding:14px 15px;display:flex;flex-direction:column;gap:8px}
.us-big{display:flex;align-items:baseline;gap:8px}
.us-big b{font-family:'Geist Mono',monospace;font-size:1.7rem;font-weight:500;letter-spacing:-.02em}
.us-big span{font-size:.8rem;color:var(--text-3)}
.gz{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line-soft)}
.gzi{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.gz-r{width:46px;height:46px;border-radius:50%;background:conic-gradient(var(--blue) calc(var(--p)*1%),var(--surface-3) 0);display:grid;place-items:center;position:relative}
.gz-r::before{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--surface)}
.gz-r i{position:relative;font-size:15px;color:var(--icon)}
.gzi b{font-size:.72rem;font-weight:500}
.gzi span{font-family:'Geist Mono',monospace;font-size:.68rem;color:var(--text-3)}
.pl{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.plc{display:flex;flex-direction:column;gap:8px;padding:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-1);position:relative}
.plc.cur{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-wash)}
.plc .cur-t{position:absolute;top:-9px;left:12px;font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--blue);color:#fff;padding:2px 7px;border-radius:999px}
.plc h3{margin:0;font-size:.9rem;font-weight:600;display:flex;align-items:center;gap:6px}
.plc h3 i{color:var(--icon)}
.plc .pr{font-family:'Geist Mono',monospace;font-size:1.35rem;font-weight:500}
.plc .pr span{font-size:.72rem;color:var(--text-3)}
.plc p{margin:0;font-size:.76rem;color:var(--text-3);line-height:1.4;min-height:2.8em}
.plc ul{list-style:none;margin:0;padding:8px 0 0;border-top:1px solid var(--line-soft);display:flex;flex-direction:column;gap:5px;font-size:.75rem;color:var(--text-2);flex:1}
.plc li{display:flex;gap:6px;align-items:flex-start;line-height:1.35}
.plc li i{color:var(--green);margin-top:2px;font-size:12px}
.plc li.no{color:var(--text-3)}.plc li.no i{color:var(--text-3)}
.plc .btn{justify-content:center;margin-top:6px}
/* reach us */
.ru{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;max-width:1000px}
.ru-c{padding:16px;display:flex;flex-direction:column;gap:8px}
.ru-c h3{margin:6px 0 0;font-size:.95rem;font-weight:600}
.ru-c p{margin:0;font-size:.8rem;color:var(--text-2);line-height:1.5;flex:1}
.ru-a{display:flex;gap:6px;align-items:center;margin-top:6px}
.ru-a .btn{text-decoration:none;font-size:.76rem}
.toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--text);color:#fff;font-size:.8rem;padding:8px 14px;border-radius:999px;box-shadow:var(--sh-3);z-index:120;animation:mdlIn .2s}
@container cv (max-width:760px){.pc,.us{grid-template-columns:1fr}.pc div+div{border-left:0;border-top:1px solid var(--line-soft)}.us-g{border-right:0;border-bottom:1px solid var(--line-soft)}.tool{grid-template-columns:1fr auto}.tool .tchip{display:none}}

/* ───────────── preview-dock.css ───────────── */
/* Shared preview dock — present on every app page */
.dsh-main.has-dock{grid-template-columns:242px minmax(0,1fr) var(--dock-w,400px)}
.canvas{container-type:inline-size;container-name:cv}
.dock{position:relative;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--line);background:var(--surface-2);overflow:hidden}
.dk-rs{position:absolute;left:-3px;top:0;bottom:0;width:7px;cursor:col-resize;z-index:5}
.dk-rs::after{content:"";position:absolute;left:3px;top:50%;width:1px;height:36px;margin-top:-18px;background:var(--line-strong,#c9ced6);opacity:0;transition:opacity .3s}
.dk-rs:hover::after,.dock.drag .dk-rs::after{opacity:1}
.dock.drag{user-select:none}
.dk-in{display:flex;flex-direction:column;gap:9px;padding:12px 12px 10px;min-height:0;flex:1;overflow-y:auto}
.dk-h{display:flex;align-items:center;gap:8px}
.dk-h h3{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0}
.dk-h .seg{margin-left:auto}
.dk-h .seg i{font-size:12px}
.dk-open{display:none}
.dock.col .dk-in,.dock.col .dk-rs{display:none}
.dock.col .dk-open{display:flex;flex-direction:column;align-items:center;gap:10px;border:0;background:none;padding:14px 0;cursor:pointer;color:var(--text-2);font:inherit;font-size:.72rem;font-weight:500;width:100%}
.dock.col .dk-open span{writing-mode:vertical-rl;letter-spacing:.08em}
.dock.col .dk-open i{font-size:17px;color:var(--blue)}
.dock.col .dk-open:hover{background:var(--surface-3)}
.pv-bar{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:4px 4px 4px 10px;box-shadow:var(--sh-1)}
.pv-bar>i{color:var(--icon);font-size:14px}
.pv-bar input{flex:1;min-width:0;border:0;outline:0;font-family:'Geist Mono',monospace;font-size:.72rem;color:var(--text-2);background:none}
.pv-bar .btn{padding:4px 9px}
.pv-img{cursor:pointer}
.pv-stage{position:relative;flex:1;min-height:240px;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#f6f5f2 center/cover no-repeat;box-shadow:var(--sh-1)}
.pv-stage.img .pv-site{display:none}
.pv-site{position:absolute;inset:0;padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.ps-nav{display:flex;align-items:center;gap:8px}
.ps-nav b{font-size:.66rem;letter-spacing:.2em;color:#6b6760;font-weight:600;margin-right:auto}
.ps-nav i{width:28px;height:6px;border-radius:3px;background:#e2dfd8}
.ps-hero{height:28%;border-radius:8px;background:#ebe8e1}
.ps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;flex:1}
.ps-grid i{border-radius:8px;background:#efece6}
.dk-f{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:.75rem;color:var(--text-2)}
.dk-sel{display:flex;align-items:center;gap:6px}
.dk-sel select{font:inherit;font-size:.75rem;border:1px solid var(--line);border-radius:var(--r-sm);padding:3px 6px;background:var(--surface);color:var(--text)}
.dk-f .ck{font-size:.75rem}
.dk-reset{margin-left:auto;font-size:.75rem}
.ck{display:inline-flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-2);cursor:pointer}
.ck input{accent-color:var(--blue)}
/* agent console */
.ac{position:absolute;inset:0;display:flex;flex-direction:column;background:#0f1115;color:#d7dae0;font-family:'Geist Mono',monospace;font-size:.72rem}
.ac[hidden]{display:none}
.ac-h{display:flex;gap:6px;align-items:center;padding:10px 12px;border-bottom:1px solid #22262e;flex-wrap:wrap}
.ac-h .tchip{background:#1a1f2b;border-color:#2b3445;color:#9fb8f2}
.ac-n{margin-left:auto;color:#7d8490;font-size:.68rem}
.ac-log{flex:1;overflow:auto;padding:10px 12px;display:flex;flex-direction:column;gap:12px}
.ac-e{display:flex;flex-direction:column;gap:4px}
.ac-req{color:#9fb8f2}
.ac-res.ok{color:#6fcf97}.ac-res.no{color:#f28b82}
.ac-ans{font-family:ui-sans-serif,system-ui,sans-serif;font-size:.78rem;line-height:1.5;color:#e7e9ee}
.ac-src{color:#7d8490}
.ac-in{display:flex;gap:6px;align-items:center;padding:8px;border-top:1px solid #22262e}
.ac-in span{color:#7d8490}
.ac-in input{flex:1;min-width:0;background:#171a21;border:1px solid #2b3040;border-radius:6px;padding:6px 8px;color:#e7e9ee;font:inherit;outline:0}
.ac-in input:focus{border-color:#4d84ec}
.ac-in .btn{padding:5px 10px;background:#2e6be6;border-color:#2e6be6;color:#fff}
.ac .wm-log{font-family:inherit}
/* widget — tokens mirror public/widget.css defaults */
.wp{position:absolute;left:12px;right:12px;bottom:12px;top:12px;display:flex;align-items:flex-end;justify-content:var(--w-justify,center);font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--w-tx,#111);pointer-events:none}
.wp[hidden]{display:none}
.wp-box{pointer-events:auto;width:100%;max-width:var(--w-maxw,none);max-height:100%;background:var(--w-bgfill,#fff);border:var(--w-bw,1px) solid var(--w-bc,#cbd5e1);border-radius:var(--w-r,28px);box-shadow:var(--w-shadow,0 12px 32px rgba(15,23,42,.14));padding:12px;display:flex;flex-direction:column;gap:10px;backdrop-filter:var(--w-blur,none);-webkit-backdrop-filter:var(--w-blur,none);transition:border-radius .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,background .35s,max-width .35s}
.wp-chat{display:flex;flex-direction:column;gap:7px;padding:4px 4px 0;overflow:auto;min-height:0;flex:1}
.wm{display:flex}.wm.us{justify-content:flex-end}
.wm span{max-width:84%;font-size:12.5px;line-height:1.45;padding:8px 11px;border-radius:14px;text-wrap:pretty}
.wm.us span{background:var(--w-user,#2563eb);color:var(--w-user-tx,#fff);border-bottom-right-radius:4px}
.wm.ai span{background:var(--w-ai,#f1f0f0);color:var(--w-ai-tx,#111);border-bottom-left-radius:4px}
.wm-typ{display:inline-flex!important;gap:3px;align-items:center}
.wm-typ i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.4;animation:typ 1s infinite}
.wm-typ i:nth-child(2){animation-delay:.15s}.wm-typ i:nth-child(3){animation-delay:.3s}
@keyframes typ{50%{opacity:1}}
.wm-log{align-self:flex-start;display:inline-flex;align-items:center;gap:5px;font-family:'Geist Mono',monospace;font-size:10.5px;padding:3px 7px;border-radius:5px;border:1px dashed currentColor;text-decoration:none;margin:-2px 0 2px}
.wm-log.g{color:#067647}.wm-log.r{color:#b42318}.wm-log.a{color:#b54708}
.wp-prod{display:flex;gap:9px;align-items:center;width:210px;padding:7px;border-radius:10px;background:var(--p-bg,#fff);border:1px solid var(--p-bd,#ddd);color:var(--p-tx,#111);flex-shrink:0}
.wp-img{width:38px;height:38px;border-radius:7px;background:linear-gradient(135deg,#e9e3d6,#d8cfbd);flex-shrink:0}
.wp-prod b{display:block;font-size:12px;font-weight:600}
.wp-price{font-size:12px;font-weight:600;color:var(--p-price,#da291c)}
.wp-link{display:flex;gap:8px;align-items:center;width:230px;padding:7px 9px;border-radius:10px;background:var(--l-bg,#fff);border:1px solid var(--l-bd,#ddd);color:var(--l-tx,#111);text-decoration:none;flex-shrink:0}
.wp-link i{font-size:13px;opacity:.6}
.wp-link b{display:block;font-size:11.5px;font-weight:600}
.wp-link span span{display:block;font-size:10.5px;opacity:.6}
.wp-fn{display:flex;justify-content:var(--f-justify,flex-start);flex-shrink:0}
.wp-fn button{font:inherit;font-size:12px;font-weight:500;padding:6px 13px;background:var(--f-bg,#fff);border:var(--f-bw,1px) solid var(--f-bd,#da291c);color:var(--f-tx,#da291c);border-radius:var(--f-r,999px);cursor:pointer}
.wp-in{display:flex;flex-direction:column-reverse;gap:8px;align-items:var(--s-align,center);flex-shrink:0}
.wp-sugs{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.wp-sugs button,.chip-demo{font:inherit;font-size:11.5px;padding:5px 10px;border-radius:999px;border:0;background:var(--sg,#f3f3f3);color:var(--sg-tx,#111);cursor:pointer;transition:background .2s}
.wp-sugs button:hover,.chip-demo.h{background:var(--sg-h,#e3e3e3)}
.wp-sugs button[hidden]{display:none}
.wp-search{display:flex;align-items:center;gap:8px;width:100%;max-width:var(--s-maxw,640px);padding:5px 5px 5px 14px;background:var(--s-bg,#fff);border-radius:var(--s-r,999px);border:var(--s-bw,1px) solid var(--s-bd,#d6d9df);box-shadow:var(--s-shadow,0 2px 8px rgba(15,23,42,.08));color:var(--s-tx,#111);margin:0}
.wp-search.glow{border-color:transparent}
.wp-search.anim{animation:wpglow 3s ease-in-out infinite}
@keyframes wpglow{0%,100%{box-shadow:0 0 var(--aglow,14px) var(--w-send,#2563eb)}50%{box-shadow:0 0 var(--aglow,14px) var(--w-user,#2563eb)}}
.wp-sym:empty{display:none}
.wp-sym{font-size:13px}
.wp-q{flex:1;min-width:0;border:0;outline:0;background:none;font:inherit;font-size:12.5px;color:inherit}
.wp-q::placeholder{color:inherit;opacity:.5}
.wp-send{width:30px;height:30px;border-radius:50%;border:0;background:var(--w-send,#2563eb);color:var(--w-send-tx,#fff);display:grid;place-items:center;font-size:13px;flex-shrink:0;cursor:pointer}
.wp-brand{font-size:10px;text-align:center;opacity:.5}
.wp-brand b{font-weight:600}
/* compact layouts: chat collapses until the visitor asks */
.wp:not([data-layout="standard"]):not(.open) .wp-chat,.wp:not([data-layout="standard"]):not(.open) .wp-brand{display:none}
.wp:not([data-layout="standard"]):not(.open) .wp-box{padding:8px}
.wp:not([data-layout="standard"]):not(.open) .wp-in{flex-direction:row;align-items:center;flex-wrap:nowrap}
.wp:not([data-layout="standard"]):not(.open) .wp-sugs{flex-wrap:nowrap;overflow:hidden;flex-shrink:1;min-width:0}
.wp:not([data-layout="standard"]):not(.open) .wp-sugs button{background:var(--pill,#f1f3f7);white-space:nowrap}
.wp:not([data-layout="standard"]):not(.open) .wp-sugs button:nth-child(n+3){display:none}
.wp[data-layout="A"]:not(.open) .wp-box{background:var(--s-bg,#fff)}
.wp[data-layout="A"]:not(.open) .wp-search{box-shadow:none;border:0;padding-left:10px;border-left:1px solid #e3e5ea;border-radius:0}
.wp[data-layout="B"]:not(.open) .wp-box{background:transparent;border:0;box-shadow:none;padding:0;backdrop-filter:none}
.wp[data-layout="B"]:not(.open) .wp-sugs button{box-shadow:0 2px 8px rgba(15,23,42,.1)}
.wp[data-layout="C"]:not(.open) .wp-sugs button{background:transparent;border:1px solid #d6d9df}
.wp[data-layout="C"]:not(.open) .wp-search{border:0;box-shadow:none;background:transparent}
.wp[data-layout="D"]:not(.open) .wp-sugs button{background:var(--w-user,#2563eb);color:var(--w-user-tx,#fff)}
.wp[data-layout="D"]:not(.open) .wp-search{background:var(--d-in,#eef3ff);border-color:transparent;box-shadow:none}
/* page grids respond to the canvas width, not the viewport, so the dock never crowds them */
@media(max-width:1480px){.ins{grid-template-columns:repeat(5,minmax(0,1fr))}}
@container cv (max-width:1180px){.ins{grid-template-columns:repeat(3,minmax(0,1fr))}.g21,.agrid,.bf{grid-template-columns:1fr}}
@container cv (max-width:960px){.g2,.g3{grid-template-columns:1fr}.kpis.k4{grid-template-columns:1fr 1fr}.rag-m,.ag-b,.qa{grid-template-columns:1fr}.ag-t{border-right:0;border-bottom:1px solid var(--line-soft)}}
@container cv (max-width:760px){.il-hk{display:none}.il-n{padding:8px 9px;gap:8px}.il-n b{font-size:.76rem}}
@container cv (max-width:620px){.il{column-gap:22px;padding:14px 12px 16px}.il-n{padding:7px 8px;min-height:46px}.il-n>i,.il-n .il-dot{display:none}.il-n b{font-size:.72rem;line-height:1.25}.il-n span{font-size:.66rem;white-space:normal}.il-n.tall{min-height:80px}.il-n.off span,.il-n.off .pill{display:none}.il-n.off{min-height:34px}}
/* Phone width: the flow runs top to bottom, ribbons drop between stages. */
@container cv (max-width:480px){
  .il{--il-dir:v;grid-template-columns:minmax(0,1fr);row-gap:0;padding:10px 12px 16px}
  .il-cap{position:relative;z-index:1;justify-self:start;padding:3px 8px;margin:0 0 8px;background:var(--surface);border-radius:var(--r-sm)}
  .il-cap:nth-of-type(1){grid-row:1}.il-cap:nth-of-type(2){grid-row:3}.il-cap:nth-of-type(3){grid-row:5}.il-cap:nth-of-type(4){grid-row:7}
  .il-col{flex-direction:row;flex-wrap:wrap;gap:8px;margin-bottom:34px}
  .il-col:last-child{margin-bottom:0}
  .il-col>.il-n{flex:1 1 calc(50% - 4px);min-width:0}
  .il-col>.il-n.off{display:none}
  .il-n.tall{min-height:46px}
}
@container cv (max-width:720px){.ins{grid-template-columns:1fr 1fr}.rec{grid-template-columns:1fr}}
@media(max-width:900px){.dsh-main.has-dock{grid-template-columns:1fr}.dock{display:none}}

/* dock tabs + resource panel */
.dk-tabs{display:flex;gap:2px;padding:2px;background:var(--surface-3);border-radius:var(--r-md)}
.dk-tabs[hidden]{display:none}
.dk-tab{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;border:0;background:none;font:inherit;font-size:.76rem;color:var(--text-2);padding:5px 8px;border-radius:6px;cursor:pointer}
.dk-tab[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--sh-1)}
.dk-tab .dk-tt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dk-tc{display:grid;place-items:center;width:18px;height:18px;border-radius:4px;color:var(--text-3);margin-left:2px}
.dk-tc:hover{background:var(--surface-3);color:var(--text)}
.dk-pv{display:flex;flex-direction:column;gap:9px;flex:1;min-height:0}
.dk-pv[hidden],.dk-panel[hidden]{display:none}
.dk-panel{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:0 -12px -10px;padding:0 12px 12px}
.dock.ov{position:absolute;right:0;top:0;bottom:0;width:min(380px,calc(100vw - 60px));z-index:30;box-shadow:-12px 0 32px rgba(15,23,42,.14)}
.dsh-main.has-dock{position:relative}
/* shell modal */
.mdl{position:fixed;inset:0;z-index:100;background:rgba(15,17,21,.32);display:grid;place-items:center;padding:20px;animation:mdlIn .2s ease}
.mdl.out{opacity:0;transition:opacity .2s}
@keyframes mdlIn{from{opacity:0}}
.mdl-c{width:min(440px,100%);background:var(--surface);border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.24);padding:20px;display:flex;flex-direction:column;gap:6px;animation:mdlUp .3s cubic-bezier(.2,.7,.2,1)}
@keyframes mdlUp{from{transform:translateY(8px) scale(.98)}}
.mdl-i{width:36px;height:36px;border-radius:10px;background:var(--blue-wash);color:var(--blue);display:grid;place-items:center;font-size:18px;margin-bottom:6px}
.mdl-i.ok{background:var(--green-wash);color:var(--green)}.mdl-i.warn{background:var(--amber-wash);color:var(--amber)}.mdl-i.err{background:var(--red-wash);color:var(--red)}
.mdl-c h4{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.mdl-s{margin:0;font-size:.82rem;color:var(--text-2);line-height:1.5}
.mdl-b{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.mdl-b:empty{display:none}
.mdl-f{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:500}
.mdl-f small{font-weight:400;color:var(--text-3)}
.mdl-f input,.mdl-f textarea,.mdl-f select{font:inherit;font-size:.82rem;border:1px solid var(--line);border-radius:var(--r-md);padding:8px 10px;resize:vertical}
.mdl-f input:focus,.mdl-f textarea:focus{outline:0;border-color:var(--blue-line);box-shadow:0 0 0 3px var(--blue-wash)}
.mdl-f input.bad{border-color:var(--red)}
.mdl-st{display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--text-2);padding:8px 0}
.mdl-st .spin,.spin{width:14px;height:14px;border:2px solid var(--blue);border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}
.mdl-a{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
.mdl-a:empty{display:none}
.pending.zero{background:var(--green-wash);border-color:#b7e4c7;color:var(--green)}

/* ══════════════════════════════════════════════════════════
   8. App mapping — shell
   ══════════════════════════════════════════════════════════ */
body { display: flex; flex-direction: column; height: 100dvh; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
button { font-family: inherit; }

/* Top bar */
#dashboard-navbar { flex-shrink: 0; position: relative; }
.bar .nav-tg { display: none; }
.lockup { white-space: nowrap; }
.acct { position: relative; margin: 0; }
.acct select { appearance: none; -webkit-appearance: none; border: 0; background: none; font: inherit; font-size: 0.83rem; font-weight: 500; letter-spacing: -0.01em; color: var(--text); padding: 0 20px 0 0; margin-right: -18px; cursor: pointer; max-width: 240px; text-overflow: ellipsis; }
.acct select:focus { outline: none; }
.acct:focus-within { border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-wash); }
.acct i { pointer-events: none; }
.acct-av { text-transform: uppercase; }
.pending { position: relative; cursor: default; }
.pending .pending-l { margin-left: -2px; }
.pending:not(.zero) .pending-l::before { content: "pending in test"; }
.pending.zero .n { display: none; }
.pending-tip { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; white-space: pre-line; background: var(--text); color: #fff; font-size: 0.74rem; line-height: 1.5; font-weight: 400; padding: 8px 10px; border-radius: var(--r-md); box-shadow: var(--sh-3); opacity: 0; transform: translateY(-3px); pointer-events: none; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); z-index: 40; }
.pending:hover .pending-tip, .pending:focus .pending-tip { opacity: 1; transform: none; }
.btn:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
a.iconbtn { color: var(--text-2); }
.me { border: 0; font-family: inherit; }
.me-w { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 230px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-3); padding: 5px; display: none; z-index: 60; transform-origin: top right; }
.menu.open { display: block; animation: menuIn 0.28s var(--ease-out); }
@keyframes menuIn { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.menu-h { padding: 8px 10px 9px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px; }
.menu-h b { display: block; font-size: 0.8rem; font-weight: 550; }
.menu-h span { display: block; font-size: 0.75rem; color: var(--text-3); margin-top: 1px; word-break: break-all; }
.menu-i { display: flex; align-items: center; gap: 9px; width: 100%; border: 0; background: none; font-size: 0.82rem; color: var(--text-2); padding: 7px 10px; border-radius: var(--r-sm); cursor: pointer; text-align: left; transition: background 0.3s var(--ease); }
.menu-i i { font-size: 15px; color: var(--icon); }
.menu-i:hover { background: var(--surface-3); color: var(--text); }
.menu-i.danger { color: var(--red); }
.menu-i.danger i { color: var(--red); }

/* Shell grid */
#app { display: grid; grid-template-columns: 242px minmax(0, 1fr); flex: 1; min-height: 0; background: var(--canvas); }
#dashboard-shell { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
#dashboard-body { flex: 1; min-height: 0; display: flex; }
#content.canvas { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; display: block; padding: 18px 20px 56px; background: var(--canvas); scroll-behavior: smooth; }
#content .page { overflow: visible; min-height: auto; flex: none; }

/* Sidebar — li hooks styled as the design's links */
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.nav .sidebar-item-label { display: flex; align-items: center; gap: 9px; padding: 6px 9px; border-radius: var(--r-sm); font-size: 0.845rem; font-weight: 450; color: var(--text-2); letter-spacing: -0.01em; cursor: pointer; user-select: none; transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.nav .sidebar-item-label i { font-size: 15px; color: var(--icon); width: 16px; flex-shrink: 0; transition: color 0.35s var(--ease); }
.nav .sidebar-item-label:hover { background: var(--surface-4); color: var(--text); }
.nav .sidebar-item-label:hover i { color: var(--text-3); }
.nav li.active > .sidebar-item-label { background: var(--blue-wash); color: var(--blue-deep); font-weight: 500; }
.nav li.active > .sidebar-item-label i { color: var(--blue); }
.nav .nl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav li > .subnav { display: none; }
.nav li.active > .subnav { display: flex; animation: subIn 0.45s var(--ease-out); }
@keyframes subIn { from { opacity: 0; transform: translateY(-4px); } }
.nav .subnav-g { list-style: none; }
.nav .sidebar-subnav-item { display: flex; align-items: center; gap: 9px; padding: 4px 9px; border-radius: var(--r-sm); font-size: 0.805rem; font-weight: 450; color: var(--text-2); cursor: pointer; user-select: none; transition: background 0.35s var(--ease), color 0.35s var(--ease); }
.nav .sidebar-subnav-item i { font-size: 13px; width: 14px; color: var(--icon); flex-shrink: 0; transition: color 0.35s var(--ease); }
.nav .sidebar-subnav-item:hover { background: var(--surface-4); color: var(--text); }
.nav .sidebar-subnav-item.active { background: var(--surface-4); color: var(--text); font-weight: 500; }
.nav .sidebar-subnav-item.active i { color: var(--blue); }
.nav .sidebar-subnav-item.danger:hover, .nav .sidebar-subnav-item.danger.active { color: var(--red); }
.nav .sidebar-subnav-item.danger.active i { color: var(--red); }
.nav .ct:empty { display: none; }
.nav .ct + .badge-new, .nav .badge-new + .ct { margin-left: 6px; }
.unsynced-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--amber-wash); flex-shrink: 0; margin-left: auto; }
.nav .ct ~ .unsynced-dot, .nav .badge-new ~ .unsynced-dot { margin-left: 6px; }
.nav .sidebar-item-label .unsynced-dot { margin-left: auto; }
.usage-t div { transition: width 0.9s var(--ease-out); }
.usage-t div.over { background: var(--red); }

/* Preview dock */
#preview.dock { width: var(--dock-w, 400px); flex: 0 0 var(--dock-w, 400px); min-width: 0; padding: 0; transition: flex-basis 0.45s var(--ease), width 0.45s var(--ease); }
#preview.dock.drag { transition: none; }
.dock.col > :not(.dk-open) { display: none !important; }
.dock .dk-in { gap: 9px; }
.dk-h .info-icon { position: relative; display: inline-grid; place-items: center; color: var(--icon); cursor: help; font-size: 14px; }
.dk-h .info-icon .tooltip { position: absolute; left: -8px; top: 22px; width: 240px; background: var(--text); color: #fff; padding: 8px 10px; border-radius: var(--r-md); font-size: 0.74rem; line-height: 1.45; opacity: 0; pointer-events: none; transform: translateY(-3px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); z-index: 20; text-transform: none; letter-spacing: 0; font-weight: 400; }
.dk-h .info-icon:hover .tooltip, .dk-h .info-icon:focus .tooltip { opacity: 1; transform: none; }
.dk-h .dk-x { margin-left: auto; width: 26px; height: 26px; font-size: 13px; }
.pv-bar .btn { padding: 4px 9px; box-shadow: none; }
.pv-bar .pv-img { padding: 4px 7px; }
.pv-bar .pv-img.remove { color: var(--red); border-color: #f3c9c4; background: var(--red-wash); }
.pv-bar .pv-img.remove i { color: var(--red); }
.pv-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#site-frame { z-index: 1; background: #fff; }
#widget-frame { z-index: 2; background: transparent; }
#site-screenshot, #preview-static { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; display: none; }
#site-screenshot { object-position: top; }
.loading-overlay { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.spinner { width: 20px; height: 20px; border: 2px solid var(--blue); border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.dk-f .dk-sel select { max-width: 220px; }

/* Narrow screens: the sidebar becomes a drawer; the dock opens as a sheet */
.bar .pv-tg { display: none; }
@media (max-width: 900px) {
  #app { grid-template-columns: minmax(0, 1fr); }
  .nav { display: flex; position: fixed; z-index: 70; left: 0; top: 0; bottom: 0; width: min(280px, 86vw); transform: translateX(-102%); transition: transform 0.45s var(--ease); box-shadow: 12px 0 32px rgba(15, 23, 42, 0.12); }
  .nav.open { transform: none; }
  .nav-scrim { position: fixed; inset: 0; z-index: 65; background: rgba(15, 17, 21, 0.28); animation: mdlIn 0.25s ease; }
  .nav-scrim[hidden] { display: none; }
  .bar .nav-tg { display: grid; }
  .bar { gap: 8px; padding: 8px 10px; }
  .bar .sep, .bar .lockup { display: none; }
  .bar-lbl { display: none; }
  .bar .btn { padding: 6px 9px; }
  .acct select { max-width: 120px; }
  .pending .pending-l { display: none; }
  #preview.dock:not(.ov) { display: none; }
  .bar .pv-tg { display: grid; }
  #content.canvas { padding: 14px 16px 48px; }
}
@keyframes dockSheet { from { transform: translateX(24px); opacity: 0; } }
@media (max-width: 520px) {
  .pending { display: none; }
  #release-revert-btn { display: none; }
}
#dashboard-body { position: relative; }
#preview.dock.ov { position: absolute; right: 0; top: 0; bottom: 0; width: min(380px, calc(100vw - 60px)); z-index: 30; box-shadow: -12px 0 32px rgba(15, 23, 42, 0.14); }
.nav ul.subnav { margin: 3px 0 4px 17px; padding-left: 9px; border-left: 1px solid var(--line); }

/* ══════════════════════════════════════════════════════════
   9. Charts (charts.js)
   ══════════════════════════════════════════════════════════ */
.avc { position: relative; width: 100%; }
.avc-svg { display: block; overflow: visible; outline: none; }
.avc-svg:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }
.avc-ax { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 10px; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.avc-empty { height: 100%; display: grid; place-items: center; font-size: 0.8rem; color: var(--text-3); background: repeating-linear-gradient(135deg, transparent 0 7px, var(--surface-2) 7px 8px); border-radius: var(--r-md); }
.avc-x, .avc-hd { opacity: 0; transition: opacity 0.2s var(--ease); pointer-events: none; }
.avc-x.on, .avc-hd.on { opacity: 1; }
.avc-col path { transition: opacity 0.25s var(--ease); }
.avc-col.dim path { opacity: 0.32; }
.avc-hit { cursor: crosshair; }
.avc-tip { position: absolute; top: 8px; left: 0; z-index: 4; pointer-events: none; background: var(--text); color: #fff; border-radius: var(--r-md); padding: 8px 10px 7px; min-width: 132px; box-shadow: var(--sh-3); font-size: 0.74rem; line-height: 1.45; opacity: 0; transform: translateY(3px); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), left 0.12s linear; }
.avc-tip.on { opacity: 1; transform: none; }
.avc-h { font-size: 0.7rem; color: rgba(255, 255, 255, 0.62); margin-bottom: 4px; white-space: nowrap; }
.avc-r { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.avc-r i { width: 10px; height: 2px; border-radius: 2px; flex-shrink: 0; }
.avc-r b { font-family: 'Geist Mono', ui-monospace, monospace; font-weight: 500; min-width: 3ch; }
.avc-r span { color: rgba(255, 255, 255, 0.66); }
.avc-r.tot { padding-bottom: 3px; margin-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.avc-r.tot b { margin-left: 17px; }
/* entry animations */
.avc-in .avc-line[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: avcDraw 1.1s var(--ease-out) forwards; animation-delay: var(--d, 0ms); }
.avc-in .avc-area { opacity: 0; animation: avcFade 0.9s var(--ease-out) 0.25s forwards; }
.avc-in .avc-dot { opacity: 0; transform-box: fill-box; transform-origin: center; animation: avcPop 0.5s var(--ease-out) 0.85s forwards; }
.avc-in .avc-col { transform-box: fill-box; transform-origin: 50% 100%; animation: avcGrow 0.75s var(--ease-out) both; animation-delay: var(--d, 0ms); }
@keyframes avcDraw { to { stroke-dashoffset: 0; } }
@keyframes avcFade { to { opacity: 1; } }
@keyframes avcPop { from { opacity: 0; transform: scale(0.2); } to { opacity: 1; transform: none; } }
@keyframes avcGrow { from { transform: scaleY(0); } }
.avc-arc { transition: stroke-dasharray 1.2s var(--ease-out); }
/* sparklines */
.avc-spk { display: inline-block; width: 56px; height: 18px; vertical-align: middle; }
.avc-spk.w { display: block; width: 100%; height: 30px; margin-top: 10px; }
.avc-spk svg { display: block; overflow: visible; }
.avc-spk-none { color: var(--text-3); font-size: 0.75rem; }
@media (prefers-reduced-motion: reduce) {
  .avc-in .avc-line[pathLength], .avc-in .avc-area, .avc-in .avc-dot, .avc-in .avc-col { animation: none; opacity: 1; stroke-dashoffset: 0; transform: none; }
}

/* ══════════════════════════════════════════════════════════
   10. Intelligence (app mapping)
   ══════════════════════════════════════════════════════════ */
#analytics .head { margin-bottom: 14px; }
#analytics-rail-body > .data-section { display: none; }
#analytics-rail-body > .data-section.rail-active { display: block; }
#analytics-rail-body { transition: opacity 0.35s var(--ease); }
#analytics-rail-body.loading { opacity: 0.55; pointer-events: none; }
.page-rail { display: none !important; }
/* date range: two flatpickr inputs dressed as one button */
.dr-w { position: relative; display: inline-flex; }
.dr { gap: 7px; min-width: 9.5em; }
.dr #date-range-label { flex: 1; text-align: left; font-variant-numeric: tabular-nums; }
.dr .dr-c { font-size: 11px; color: var(--text-3); transition: transform 0.3s var(--ease); }
.dr.on { background: var(--surface-3); }
.dr.on .dr-c { transform: rotate(180deg); }
.dr-in { position: absolute; inset: auto 0 0 auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; }
.ex-w { position: relative; display: inline-flex; }
.ex-st { position: absolute; right: 0; top: calc(100% + 6px); font-size: 0.72rem; color: var(--green); white-space: nowrap; opacity: 0; transition: opacity 0.3s var(--ease); }
.ex-st.visible { opacity: 1; }
.ph-sub { font-size: 0.76rem; color: var(--text-3); }
.tbl-w { overflow-x: auto; }
.tbl td.cl { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tbl .q a { color: var(--text); }
.tbl .q a:hover { color: var(--blue); }
.tbl td.gt .name { color: var(--text); }
.tbl td.gt .sub { font-weight: 400; overflow: hidden; text-overflow: ellipsis; max-width: 52ch; white-space: nowrap; }
.tbl tr.empty-r td { text-align: center; color: var(--text-3); padding: 26px 18px; font-size: 0.8rem; line-height: 1.55; }
.tbl tr.empty-r td b { color: var(--text-2); font-weight: 550; }
.ra { display: inline-flex; align-items: center; gap: 12px; justify-content: flex-end; flex-wrap: wrap; }
.lnk.muted { color: var(--text-3); }
.lnk.muted:hover { color: var(--text-2); }
.lnk:disabled { opacity: 0.5; cursor: default; }
.view-empty b { color: var(--text-2); font-weight: 550; }
/* brief */
.brief-w a { margin-left: 2px; }
.brief-ld { display: inline-flex; align-items: center; gap: 9px; color: var(--text-3); }
.brief-ld.err { color: var(--red); }
.brief-r:disabled { opacity: 0.5; }
.rec { animation: rise 0.6s var(--ease-out) both; }
.verif[hidden], .rec[hidden] { display: none; }
/* insight cards */
.ins-c:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.ins-n { min-height: 1.62rem; }
.ins-b { overflow-wrap: anywhere; }
/* intent layer */
.il-link { cursor: pointer; transition: border-color 0.35s var(--ease), box-shadow 0.35s var(--ease), opacity 0.4s var(--ease); }
.il-link:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); }
.il-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.il-n > div { min-width: 0; }
.il-n b, .il-n span { overflow: hidden; text-overflow: ellipsis; }
.il-ok[hidden] { display: none; }
.il-svg .il-flow { stroke-dasharray: 1; stroke-dashoffset: 1; animation: avcDraw 1.2s var(--ease-out) forwards; animation-delay: calc(250ms + var(--d, 0ms)); }
.il-svg .il-out { opacity: 0; animation: avcFade 0.8s var(--ease-out) 1.1s forwards; }
/* bars that grow in */
.st > div[style*="--w"], .mb i[style*="--w"], .fn-b i[style*="--w"] { width: var(--w); animation: wGrow 0.9s var(--ease-out) both; }
.fn-b i[style*="--w"] { animation-delay: calc(var(--k, 0) * 80ms); }
.fn-r { --k: 0; }
.fn-r .fn-b i { animation-delay: calc(var(--k) * 80ms); }
@keyframes wGrow { from { width: 0; } }
.conf div { transition: width 0.9s var(--ease-out); min-width: 0; overflow: hidden; }
.key .key-v { font-family: 'Geist Mono', monospace; font-weight: 500; color: var(--text-2); margin-left: 4px; font-size: 0.74rem; }
.conf-trend { margin-top: 14px; }
/* gap list */
.gaps td .spk { width: 56px; }
/* failed clusters */
tr.xp:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.tbl .none { color: var(--text-3); }
/* unmet demand */
.nb { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nb .bf-tg { border-bottom: 0; flex: 1; min-width: 280px; }
.nb-a { display: flex; align-items: center; gap: 10px; padding: 0 15px; }
.nb-t { font-size: 0.76rem; color: var(--text-3); }
.nb-st { flex-basis: 100%; padding: 0 15px 12px; }
.nb-st:empty { display: none; }
.dc-sim { display: inline-flex; align-items: center; gap: 8px; }
.dc-sim .num { font-size: 0.74rem; color: var(--text-2); }
.dc-a { justify-content: flex-start; flex-wrap: wrap; gap: 12px; }
.dg .view-empty { padding: 34px 20px; line-height: 1.6; }
/* trends */
.mvs .view-empty { padding: 30px 16px; }
.mv-t .pill { margin-left: 2px; }
/* RAG */
#rag-ring { width: 124px; height: 124px; }
.rag-ev { margin-bottom: 20px; }
.rag-ev .lockb { margin-bottom: 10px; }
.rm-v sub { font-size: 0.8rem; color: var(--text-3); vertical-align: baseline; margin-left: 1px; }
.kpi-v sub { margin-left: 1px; }
/* audience */
.ag-t tbody tr { cursor: pointer; }
.ag-t tbody tr.sel td { background: var(--blue-wash) !important; }
.ag-t tbody tr:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.ag-t .sw { margin-right: 8px; }
.tc { min-height: 0; padding: 14px 16px 12px; }
/* KPI tabs are buttons */
button.kpi { font: inherit; text-align: left; border: 0; border-right: 1px solid var(--line-soft); background: none; color: inherit; width: 100%; }
button.kpi:last-child { border-right: none; }
button.kpi:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
button.kpi.on { background: var(--surface-2); }
/* Monday Brief */
.bf-pv .em-btn { cursor: default; }
.em-u { text-decoration: underline; }
.bf-subj b { font-weight: 500; }
.bf-l .panel-h .pill[hidden] { display: none; }
.lockb[style*="flex"] { display: flex; }
.bf-tier li span { flex: 1; }
/* flatpickr, restyled to the v3 surface */
/* Date range picker: presets, two months, range summary and Apply. */
.flatpickr-calendar.avdp { font-family: 'Geist', sans-serif; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--sh-3); background: var(--surface); padding: 0; margin-top: 4px; box-sizing: content-box; }
.flatpickr-calendar.avdp::before, .flatpickr-calendar.avdp::after { display: none; }
.flatpickr-calendar.avdp.open { animation: dpIn 0.22s var(--ease-out); }
@keyframes dpIn { from { opacity: 0; transform: translateY(-4px) scale(0.985); } to { opacity: 1; transform: none; } }
.avdp .dp-pre { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.avdp .dp-pre button { font: inherit; font-size: 0.76rem; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: 4px 11px; cursor: pointer; transition: background 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease); }
.avdp .dp-pre button:hover { background: var(--surface-3); color: var(--text); }
.avdp .dp-pre button.on { background: var(--blue-wash); border-color: var(--blue-line); color: var(--blue-deep); }
.avdp .flatpickr-months { position: relative; padding-top: 10px; }
.avdp .flatpickr-innerContainer { padding-bottom: 8px; }
.avdp .dayContainer { padding: 0 6px; }
.avdp .dayContainer + .dayContainer { box-shadow: -1px 0 0 var(--line); }
.avdp .flatpickr-months .flatpickr-month { height: 34px; color: var(--text); }
.avdp .flatpickr-current-month { font-size: 0.86rem; font-weight: 550; padding-top: 8px; letter-spacing: -0.01em; }
.avdp .flatpickr-current-month .cur-month { font-weight: 550; }
.avdp .flatpickr-current-month input.cur-year { font-weight: 400; color: var(--text-3); }
.avdp .numInputWrapper span { display: none; }
.avdp .flatpickr-current-month .numInputWrapper { pointer-events: none; }
.avdp .flatpickr-months .flatpickr-prev-month, .avdp .flatpickr-months .flatpickr-next-month { top: 10px; height: 30px; width: 30px; padding: 8px; border-radius: var(--r-md); fill: var(--text-2); transition: background 0.25s var(--ease); }
.avdp .flatpickr-months .flatpickr-prev-month { left: 12px; }
.avdp .flatpickr-months .flatpickr-next-month { right: 12px; }
.avdp .flatpickr-months .flatpickr-prev-month:hover, .avdp .flatpickr-months .flatpickr-next-month:hover { background: var(--surface-3); }
.avdp .flatpickr-months .flatpickr-prev-month:hover svg, .avdp .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--text); }
.avdp .flatpickr-prev-month.flatpickr-disabled, .avdp .flatpickr-next-month.flatpickr-disabled { display: block; opacity: 0.25; pointer-events: none; }
.avdp .flatpickr-weekdays { height: 26px; }
.avdp span.flatpickr-weekday { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.avdp .flatpickr-day { max-width: 38px; height: 34px; line-height: 32px; margin-top: 2px; border-radius: var(--r-md); border: 1px solid transparent; color: var(--text); font-size: 0.8rem; font-variant-numeric: tabular-nums; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.avdp .flatpickr-day:hover, .avdp .flatpickr-day:focus { background: var(--surface-3); border-color: transparent; }
.avdp .flatpickr-day.today { border-color: transparent; font-weight: 600; position: relative; }
.avdp .flatpickr-day.today::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--blue); }
.avdp .flatpickr-day.today:hover { background: var(--surface-3); color: var(--text); }
.avdp .flatpickr-day.prevMonthDay, .avdp .flatpickr-day.nextMonthDay { color: var(--text-3); opacity: 0.45; }
.avdp .flatpickr-day.flatpickr-disabled, .avdp .flatpickr-day.flatpickr-disabled:hover { color: var(--text-3); opacity: 0.35; background: none; cursor: default; }
.avdp .flatpickr-day.inRange, .avdp .flatpickr-day.inRange:hover { background: var(--blue-wash); border-color: var(--blue-wash); border-radius: 0; box-shadow: -5px 0 0 var(--blue-wash), 5px 0 0 var(--blue-wash); color: var(--blue-deep); }
.avdp .flatpickr-day.selected, .avdp .flatpickr-day.startRange, .avdp .flatpickr-day.endRange,
.avdp .flatpickr-day.selected:hover, .avdp .flatpickr-day.startRange:hover, .avdp .flatpickr-day.endRange:hover { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 550; box-shadow: none; }
.avdp .flatpickr-day.startRange:not(.endRange) { border-radius: var(--r-md) 0 0 var(--r-md); }
.avdp .flatpickr-day.endRange:not(.startRange) { border-radius: 0 var(--r-md) var(--r-md) 0; }
.avdp .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .avdp .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .avdp .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { box-shadow: -10px 0 0 var(--blue); }
.avdp .flatpickr-day.startRange:not(.endRange) + .inRange, .avdp .flatpickr-day.inRange + .endRange:not(.startRange) { box-shadow: -5px 0 0 var(--blue-wash), 5px 0 0 var(--blue-wash); }
.avdp .flatpickr-day.endRange:not(.startRange) { box-shadow: -5px 0 0 var(--blue-wash); }
.avdp .flatpickr-day.today.startRange::after, .avdp .flatpickr-day.today.endRange::after, .avdp .flatpickr-day.today.selected::after { background: #fff; }
.avdp .dp-foot { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.avdp .dp-sum { margin-right: auto; display: flex; align-items: baseline; gap: 8px; font-size: 0.8rem; color: var(--text-3); }
.avdp .dp-sum b { font-weight: 550; color: var(--text); }
.avdp .dp-foot .btn:disabled { opacity: 0.45; cursor: default; }

.fp-buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 8px; border-top: 1px solid var(--line-soft); }
.fp-buttons button { font: inherit; font-size: 0.78rem; border-radius: var(--r-md); padding: 5px 12px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text-2); }
.fp-buttons button:last-child { background: var(--text); color: #fff; border-color: var(--text); }
@media (prefers-reduced-motion: reduce) {
  .il-svg .il-flow, .il-svg .il-out, .st > div, .mb i, .fn-b i { animation: none !important; opacity: 1; stroke-dashoffset: 0; }
}
#analytics-rail-body { padding: 0; overflow: visible; }
#analytics-rail-body > .data-section { border: 0; background: none; border-radius: 0; }
.ra.nw { flex-wrap: nowrap; white-space: nowrap; }
.iconbtn.sm { width: 24px; height: 24px; font-size: 12px; box-shadow: none; color: var(--text-3); transition: background 0.3s var(--ease), color 0.3s var(--ease), border-color 0.3s var(--ease); }
.iconbtn.sm:hover { color: var(--green); border-color: #b7e4c7; background: var(--green-wash); }
.iconbtn:disabled { opacity: 0.5; }
/* the label column absorbs width; its examples truncate instead of pushing the table wider */
.tbl td.gt { max-width: 0; width: 100%; min-width: 180px; }
.tbl td.gt .sub { max-width: 100%; display: block; }
.tbl td.gt .car + .name { vertical-align: middle; }
#intel-failed-table td.gt { white-space: normal; }
#intel-failed-table td:last-child .ra { justify-content: flex-end; max-width: 210px; margin-left: auto; row-gap: 4px; }
#intel-failed-table.noconf th:nth-child(4), #intel-failed-table.noconf tr:not(.xd) > td:nth-child(4) { display: none; }
/* narrow canvas (dock open on a laptop): secondary columns step aside */
@container cv (max-width: 760px) {
  #intel-failed-table th:nth-child(4), #intel-failed-table tr:not(.xd) > td:nth-child(4),
  #intel-failed-table th:nth-child(5), #intel-failed-table tr:not(.xd) > td:nth-child(5),
  .gaps th:nth-child(5), .gaps td:nth-child(5),
  #fixes-table th:nth-child(2), #fixes-table td:nth-child(2) { display: none; }
  .tbl td.gt { min-width: 140px; }
}
@container cv (max-width: 560px) {
  #intel-top-table th:nth-child(4), #intel-top-table td:nth-child(4),
  #intel-sources-table th:nth-child(4), #intel-sources-table td:nth-child(4),
  .gaps th:nth-child(3), .gaps td:nth-child(3),
  #fixes-table th:nth-child(3), #fixes-table td:nth-child(3) { display: none; }
  .tbl th, .tbl td { padding-left: 11px; padding-right: 11px; }
}

/* ══════════════════════════════════════════════════════════
   11. Shared form controls (app markup → design components)
   ══════════════════════════════════════════════════════════ */
/* toggle */
.switch { position: relative; display: inline-flex; width: 30px; height: 18px; flex-shrink: 0; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line-strong); transition: background 0.3s var(--ease); }
.switch .slider::before { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); transition: transform 0.3s var(--ease); }
.switch input:checked + .slider { background: var(--blue); }
.switch input:checked + .slider::before { transform: translateX(12px); }
.switch input:focus-visible + .slider { outline: 2px solid var(--blue); outline-offset: 2px; }
.switch input:disabled + .slider { opacity: 0.5; cursor: default; }
/* colour field */
.color-field { position: relative; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.color-preview { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--line); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.5); flex-shrink: 0; background-image: linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%), linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%); background-size: 8px 8px; background-position: 0 0, 4px 4px; }
.color-picker { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; opacity: 0; cursor: pointer; border: 0; padding: 0; }
.color-field:has(.color-swatches) .color-picker, .color-field:has(.alpha-control) .color-picker { top: 0; transform: none; }
.color-hex { width: 150px; font-family: 'Geist Mono', monospace; font-size: 0.74rem; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 8px; background: var(--surface); text-transform: lowercase; }
.color-hex:focus { outline: 0; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-wash); }
.color-swatches { display: flex; gap: 5px; padding-left: 8px; border-left: 1px solid var(--line-soft); }
.color-swatch-btn { width: 18px; height: 18px; border-radius: 50%; background: var(--swatch); border: 1px solid rgba(0, 0, 0, 0.12); cursor: pointer; padding: 0; transition: transform 0.25s var(--ease); }
.color-swatch-btn:hover { transform: scale(1.15); }
.alpha-control { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; border-left: 1px solid var(--line-soft); }
.alpha-label { font-family: 'Geist Mono', monospace; font-size: 0.66rem; color: var(--text-3); }
.alpha-range { width: 72px; accent-color: var(--blue); }
.color-field.compact .alpha-control { display: none; }
/* segmented choices */
.mode-tabs, .number-switch, .icon-options { display: inline-flex; gap: 2px; padding: 2px; background: var(--surface-3); border-radius: var(--r-md); }
.mode-tab, .number-switch label, .icon-options label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 34px; border: 0; background: none; font: inherit; font-size: 0.76rem; padding: 4px 10px; border-radius: 6px; color: var(--text-2); cursor: pointer; transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.mode-tab:hover, .number-switch label:hover, .icon-options label:hover { color: var(--text); }
.mode-tab.active, .number-switch label:has(input:checked), .icon-options label:has(input:checked) { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.number-switch input, .icon-options input, .align-options input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.number-switch label:has(input:focus-visible), .icon-options label:has(input:focus-visible), .align-options label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 1px; }
.radius-demo { display: inline-block; width: 15px; height: 11px; border: 1.5px solid currentColor; opacity: 0.75; }
.radius-demo-label { font-size: 0.74rem; }
.icon-options i, .icon-options .emoji-icon { font-size: 14px; line-height: 1; }
.widget-corner-radius-inputs { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.widget-corner-radius-inputs[hidden] { display: none; }
.widget-corner-radius-inputs label { display: inline-flex; align-items: center; gap: 4px; font-family: 'Geist Mono', monospace; font-size: 0.66rem; color: var(--text-3); }
.widget-corner-radius-inputs input { width: 58px; font-family: 'Geist Mono', monospace; font-size: 0.74rem; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 6px; color: var(--text); background: var(--surface); }
/* range + number */
.range-field { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.range-field input[type="range"] { width: 200px; accent-color: var(--blue); }
.range-field input[type="number"] { width: 64px; font-family: 'Geist Mono', monospace; font-size: 0.76rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 8px; color: var(--text); background: var(--surface); }
.range-field input:disabled { opacity: 0.45; }
.range-field .unit, .unit { font-size: 0.7rem; color: var(--text-3); margin-left: -6px; }
.checkbox-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--text-2); cursor: pointer; }
.checkbox-pill input { accent-color: var(--blue); margin: 0; }
/* position cards */
.align-options { display: flex; gap: 8px; }
.align-options label { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 7px 12px 6px; min-width: 64px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; color: var(--text-2); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.align-options label:hover { border-color: var(--line-strong); }
.align-options label.active, .align-options label:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); color: var(--text); }
.align-icon { font-size: 16px; color: var(--icon); line-height: 1; }
.align-options label.active .align-icon { color: var(--blue); }
.align-label { font-size: 0.72rem; }
/* text inputs inside settings */
.setting-control > input[type="text"], .setting-control > input[type="url"], .setting-control > input[type="email"] { font: inherit; font-size: 0.82rem; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 10px; background: var(--surface); width: min(340px, 100%); }
.setting-control > input:focus { outline: 0; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-wash); }
.text-muted { font-size: 0.78rem; color: var(--text-3); }

/* ══════════════════════════════════════════════════════════
   12. Customization
   ══════════════════════════════════════════════════════════ */
#customization .cz-head { position: sticky; top: -18px; z-index: 6; background: rgba(247, 248, 250, 0.88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); margin: -18px -20px 12px; padding: 18px 20px 12px; border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease); align-items: center; }
#customization .cz-head.stuck { border-bottom-color: var(--line); }
.cz-st.dirty::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--amber-wash); margin-right: 7px; vertical-align: 1px; }
.cz-lay { display: block; }
.cz-body { max-width: 880px; display: flex; flex-direction: column; gap: 26px; padding-bottom: 40vh; }
.custom-group { scroll-margin-top: 90px; }
.custom-group-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 9px; }
.custom-group-header h3 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); margin: 0; }
.group-subtitle { font-size: 0.78rem; color: var(--text-3); margin: 0; }
.settings-table, .custom-group > .setting-row { position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.settings-table::after, .custom-group > .setting-row::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--surface); }
.setting-name { display: flex; align-items: center; padding: 12px 15px; font-size: 0.8rem; font-weight: 500; color: var(--text); border-bottom: 1px solid var(--line-soft); }
.setting-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-width: 0; padding: 10px 15px; border-bottom: 1px solid var(--line-soft); }
.setting-control.gradient-control { flex-direction: column; align-items: flex-start; }
.gradient-builder { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gradient-arrow { color: var(--icon); }
.gradient-angle { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 0.74rem; color: var(--text-2); }
.gradient-angle input { width: 140px; accent-color: var(--blue); }
.gradient-preview { width: 100%; min-width: 220px; height: 14px; border-radius: 999px; border: 1px solid var(--line); }
/* theme cards */
.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; padding: 14px 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.theme-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; font: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.theme-card:hover { transform: translateY(-1px); box-shadow: var(--sh-3); border-color: var(--line-strong); }
.theme-card.active { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.theme-preview { position: relative; height: 100px; background: var(--theme-widget); border-bottom: 1px solid var(--line-soft); }
.theme-preview-bubbles { position: absolute; inset: 0; }
.theme-preview-bubble { position: absolute; height: 12px; border-radius: 7px; }
.theme-preview-bubble.ai { left: 12px; top: 14px; width: 58%; background: var(--theme-ai); }
.theme-preview-bubble.user { right: 12px; top: 32px; width: 36%; background: var(--theme-user); }
.theme-preview-row { position: absolute; left: 12px; bottom: 36px; display: flex; gap: 4px; }
.theme-preview-pill { width: 30px; height: 8px; border-radius: 999px; background: var(--theme-ai); }
.theme-preview-bar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 18px; border-radius: 999px; background: var(--theme-chat); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); }
.theme-preview-bar::after { content: ""; position: absolute; right: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--theme-user); }
.theme-meta { display: flex; flex-direction: column; gap: 1px; padding: 9px 11px 10px; }
.theme-title { font-size: 0.82rem; font-weight: 550; color: var(--text); }
.theme-desc { font-size: 0.72rem; color: var(--text-3); }
/* compact layout cards */
.compact-layout-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; width: 100%; }
.compact-layout-option { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 8px 8px 9px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.compact-layout-option:hover { border-color: var(--line-strong); }
.compact-layout-option:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.compact-layout-option input { position: absolute; opacity: 0; pointer-events: none; }
.compact-layout-option .compact-layout-thumb { width: 100%; }
.compact-layout-label { font-size: 0.8rem; font-weight: 550; color: var(--text); }
/* inline previews */
.cz-pv { grid-column: 1 / -1; padding: 12px 15px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.mini-chat, .mini-row { background: #f6f5f2; border-radius: var(--r-md); padding: 14px 12px; display: flex; flex-direction: column; gap: 6px; font-family: ui-sans-serif, system-ui, sans-serif; max-width: 420px; }
.mini-row { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 64px; }
.mc { display: flex; }
.mc.us { justify-content: flex-end; }
.mc span { max-width: 84%; font-size: 12.5px; line-height: 1.45; padding: 8px 11px; border-radius: 14px; transition: background 0.3s, color 0.3s; }
.mc.us span { background: var(--mp-user, #2563eb); color: var(--mp-user-tx, #fff); border-bottom-right-radius: 4px; }
.mc.ai span { background: var(--mp-ai, #f1f0f0); color: var(--mp-ai-tx, #111); border-bottom-left-radius: 4px; }
.mc-in { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 5px 5px 5px 12px; background: #fff; border: 1px solid #d6d9df; border-radius: 999px; font-size: 12.5px; color: #8a8f98; }
.mc-ph { flex: 1; }
.mc-sym:empty { display: none; }
.mc-send { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--mp-send, #2563eb); color: var(--mp-send-tx, #fff); font-size: 12px; transition: background 0.3s; }
.chip-demo { font-size: 11.5px; padding: 5px 10px; border-radius: 999px; background: var(--mp-sg, #f3f3f3); color: var(--mp-sg-tx, #111); transition: background 0.3s; }
.chip-demo.h { background: var(--mp-sg-h, #e3e3e3); }
.mp-prod { display: flex; gap: 9px; align-items: center; width: 210px; padding: 7px; border-radius: 10px; background: var(--mp-p-bg, #fff); border: 1px solid var(--mp-p-bd, #ddd); color: var(--mp-p-tx, #111); }
.mp-img { width: 38px; height: 38px; border-radius: 7px; background: linear-gradient(135deg, #e9e3d6, #d8cfbd); flex-shrink: 0; }
.mp-prod b { display: block; font-size: 12px; font-weight: 600; }
.mp-price { font-size: 12px; font-weight: 600; color: var(--mp-p-price, #da291c); }
.mp-fn { display: flex; width: 100%; justify-content: var(--mp-f-justify, flex-start); }
.mp-fn button { font: inherit; font-size: 12px; font-weight: 500; padding: 6px 13px; background: var(--mp-f-bg, #fff); border: var(--mp-f-bw, 1px) solid var(--mp-f-bd, #da291c); color: var(--mp-f-tx, #da291c); border-radius: var(--mp-f-r, 999px); cursor: default; }
.mp-link { display: flex; gap: 8px; align-items: center; width: 230px; padding: 7px 9px; border-radius: 10px; background: var(--mp-l-bg, #fff); border: 1px solid var(--mp-l-bd, #ddd); color: var(--mp-l-tx, #111); }
.mp-link > i { font-size: 13px; opacity: 0.6; }
.mp-link b { display: block; font-size: 11.5px; font-weight: 600; }
.mp-link span span { display: block; font-size: 10.5px; opacity: 0.6; }
#cg-branding .upgrade-note { margin-top: 10px; }
@container cv (max-width: 720px) {
  .settings-table, .custom-group > .setting-row { grid-template-columns: 1fr; }
  .setting-name { border-bottom: 0; padding-bottom: 2px; }
}
.custom-group > .mode-tabs { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════
   13. Data + dock resource panels
   ══════════════════════════════════════════════════════════ */
#data .head, #functions .head, #agents .head { margin-bottom: 14px; }
#data-rail-body { padding: 0; overflow: visible; }
#data-rail-body > .data-section { display: block; border: 0; background: none; border-radius: 0; scroll-margin-top: 18px; }
.test-dot, .tdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 2px var(--amber-wash); flex-shrink: 0; margin-left: 7px; vertical-align: 1px; }
.legend .tdot { margin-left: 0; }
.rt tbody tr.del .rnm { text-decoration: line-through; color: var(--text-3); }
.rt td { white-space: nowrap; }
.rt td:first-child { white-space: normal; }
.rn > div { min-width: 0; }
.rn .rnm { overflow-wrap: anywhere; }
.rn small { max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt th.sortable { cursor: pointer; user-select: none; }
.rt th.sortable:hover { color: var(--text-2); }
.rt th.sort-asc::after { content: " ↑"; } .rt th.sort-desc::after { content: " ↓"; }
.rt tr.empty-table-row td { text-align: center; color: var(--text-3); padding: 26px; cursor: default; font-size: 0.8rem; }
.rt tr.empty-table-row:hover td { background: none; }
.st-p { display: inline-flex; align-items: center; gap: 6px; }
.st-p .iconbtn.sm:hover { color: var(--red); border-color: #f3c9c4; background: var(--red-wash); }
.pill .spin { width: 9px; height: 9px; border-width: 1.5px; }
.pill i { font-size: 11px; }
.ag-chip.more { padding: 2px 7px; }
.tbl-empty { padding: 4px 12px 16px; text-align: center; }
.tbl-empty[style*="none"] + * { }
.hint-text { font-size: 0.76rem; color: var(--text-3); margin: 0; }
/* suggestions */
.sg-list { min-height: 8px; }
.suggestion-pill { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); font-size: 0.82rem; cursor: grab; transition: box-shadow 0.2s, opacity 0.2s, border-color 0.2s; }
.suggestion-pill:hover { border-color: var(--line-strong); }
.suggestion-pill.is-dragging { opacity: 0.4; }
.suggestion-pill.is-drop-target { box-shadow: 0 -2px 0 var(--blue); }
.pill-drag-handle { color: var(--icon); display: grid; place-items: center; }
.pill-label { flex: 1; }
.pill-remove { border: 0; background: none; color: var(--text-3); cursor: pointer; padding: 2px; display: grid; place-items: center; }
.pill-remove:hover { color: var(--red); }
.sg-add button { flex-shrink: 0; }
.sg-r .suggestion-card { display: flex; flex-direction: column; gap: 8px; }
/* RAG eval */
.re-top output { font-family: 'Geist Mono', monospace; }
.re-sc .m { color: var(--amber); font-weight: 500; font-family: inherit; }
/* dock panel (data + GA) */
#data-sidebar { display: none; flex-direction: column; flex: 1; min-height: 0; }
#data-sidebar .dk-tab { cursor: pointer; }
#data-sidebar .dk-tab[aria-selected="true"] { cursor: default; }
#data-sidebar .dk-tc { border: 0; background: none; cursor: pointer; padding: 0; font-size: 12px; }
.dk-panel-wrap .dk-panel { margin: 0 -12px -10px; }
#data-sidebar-body > div { display: flex; flex-direction: column; gap: 10px; }
#data-sidebar-body > div[style*="none"] { display: none !important; }
.rp-h > div { min-width: 0; flex: 1; }
.rp-c .kv dd .ag-chip { margin: 0 3px 3px 0; }
a.rp-li { text-decoration: none; color: inherit; }
a.rp-li:hover { background: var(--surface-2); }
a.rp-li:hover span { color: var(--blue); }
.rp-li em i { font-size: 11px; opacity: 0; transition: opacity 0.2s; }
a.rp-li:hover em i { opacity: 1; }
.rp-more .lnk { font-size: 0.74rem; }
.rp-more:empty { display: none; }
.fm label.f { margin: 0; }
.fm .f { font-size: 0.76rem; font-weight: 500; color: var(--text); }
.fm-seg .tab-content { display: flex; flex-direction: column; gap: 5px; }
.fm-seg .tab-content[style*="none"] { display: none !important; }
.fm small.tg-s, .fm .tg-s { font-size: 0.72rem; font-weight: 400; color: var(--text-3); }
.seg.tab-buttons { margin: 0; align-self: flex-start; }
.seg .tab-btn { border: 0; background: none; font: inherit; font-size: 0.76rem; padding: 4px 10px; border-radius: 6px; color: var(--text-2); cursor: pointer; }
.seg .tab-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
#sitemaps-container { display: flex; flex-direction: column; gap: 6px; }
.sitemap-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sitemap-row input { flex: 1; min-width: 160px; }
.sitemap-row .icon-btn { width: 30px; height: 30px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); cursor: pointer; display: grid; place-items: center; color: var(--text-2); font-size: 14px; }
.sitemap-status { flex-basis: 100%; font-size: 0.72rem; color: var(--text-3); }
.sitemap-status:empty { display: none; }
#add-sitemap { align-self: flex-start; font-size: 0.76rem; }
.fm-sch input[type=number] { width: 64px; font: inherit; font-size: 0.8rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 8px; }
.fm-sch select { font: inherit; font-size: 0.8rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: 5px 8px; background: var(--surface); }
.fm-sch[style*="block"] { display: flex !important; }
.drop.is-dragging { border-color: var(--blue); background: var(--blue-wash); }
.btn.danger { background: var(--surface); color: var(--red); border-color: #f3c9c4; box-shadow: none; }
.btn.danger:hover { background: var(--red-wash); color: var(--red); }
.btn.danger.solid { background: var(--red); color: #fff; border-color: var(--red); }
.btn.grow { flex: 1; justify-content: center; }
.rp-a .btn { white-space: nowrap; }
.srch:has(input[style*="none"]) { display: none; }
.panel:has(.tbl-empty[style*="block"]) .rt tbody .empty-table-row { display: none; }
.panel:has(.tbl-empty[style*="block"]) .tbl-w { display: none; }
.tbl-empty { padding: 22px 12px; }
@container cv (max-width: 760px) {
  .rt { min-width: 0; }
  #crawlers-table th:nth-child(4), #crawlers-table td:nth-child(4),
  #crawlers-table th:nth-child(6), #crawlers-table td:nth-child(6),
  #documents-table th:nth-child(3), #documents-table td:nth-child(3),
  #instructions-table th:nth-child(3), #instructions-table td:nth-child(3) { display: none; }
  .rt td.pv { max-width: 180px; }
}
.seg .tab-btn, .seg button { white-space: nowrap; }

/* ══════════════════════════════════════════════════════════
   14. Functions + Agents (list + editor)
   ══════════════════════════════════════════════════════════ */
#functions-rail-body > .data-section, #agents-rail-body > .data-section { display: none; border: 0; background: none; border-radius: 0; }
#functions-rail-body > .data-section.rail-active, #agents-rail-body > .data-section.rail-active { display: block; animation: rise 0.45s var(--ease-out); }
#functions-rail-body > .ed-empty.rail-active, #agents-rail-body > .ed-empty.rail-active { display: flex; }
.ed-empty { flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 300px; padding: 30px 24px; text-align: center; }
.ed-empty > i { font-size: 26px; color: var(--blue); width: 52px; height: 52px; border-radius: 14px; background: var(--blue-wash); display: grid; place-items: center; margin-bottom: 4px; }
.ed-empty b { font-size: 0.95rem; font-weight: 550; }
.ed-empty p { margin: 0 0 8px; max-width: 46ch; font-size: 0.8rem; color: var(--text-3); line-height: 1.55; text-wrap: pretty; }
.le-it[disabled] { cursor: default; opacity: 0.6; }
.le-it > div { min-width: 0; flex: 1; }
.le-it b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-it .test-dot { margin-left: auto; }
.le-none { margin: 0; padding: 14px 12px; font-size: 0.78rem; color: var(--text-3); }
.ed .sr-c.fcol { flex-direction: column; align-items: stretch; gap: 6px; }
.ed .sr-c > input[type=text], .ed .sr-c > textarea, .ed .fcol > input[type=text], .ed .fcol > textarea { width: 100%; max-width: 480px; }
.ed .sr.full .fcol > textarea { max-width: none; }
.ed-h .ed-a .btn[hidden] { display: none; }
.rp-ts { text-transform: none; letter-spacing: 0; font-weight: 400; }
.fn-pv { width: auto; }
.mp-fn.fn-pv button { font-family: ui-sans-serif, system-ui, sans-serif; }
.snip { width: 100%; }
.ic-t button { transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease); }
.idc #agent-id-display { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
label.res-it { cursor: pointer; }
.res-it .switch { margin-left: 4px; }
.res-g h5:first-child { margin-top: 4px; }
.ci-it input { flex: 1; font: inherit; font-size: 0.8rem; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px 9px; background: var(--surface); }
.ci-it input:focus { outline: 0; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-wash); }
.ci-it button { padding: 6px 4px; }
#agent-custom-list { display: flex; flex-direction: column; gap: 6px; }
#agents .lockb { margin-bottom: 12px; }
.res-it span.switch, .res-it .slider { flex: 0 0 auto; }
.res-it span.switch { width: 30px; }
.res-h .lnk + .lnk { margin-left: 0; }

/* ══════════════════════════════════════════════════════════
   15. Ship + Account pages
   ══════════════════════════════════════════════════════════ */
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; margin: -1px; }
#integrations .head, #installation .head, #security .head, #version-control .head, #team .head, #billing .head, #reach-us .head { margin-bottom: 14px; }
#integrations .lockb, #installation .lockb, #security .lockb { margin-bottom: 10px; }
button.ig-c { width: 100%; }
.ig-s .pill i { font-size: 7px; }
.ig-s .m { font-size: 0.74rem; }
/* installation */
#installation-rail-body > .data-section, #security-rail-body > .data-section { display: block; border: 0; background: none; border-radius: 0; scroll-margin-top: 18px; }
.ap select { min-width: 150px; }
.cb pre .client-id, .cb pre .agent-id { color: inherit; }
#api-block.ro .ak { opacity: 0.55; }
.ak-v #client-api-key[style*="inline"] + .ak-mask { display: none; }
.ak .tg { gap: 6px; }
#api-snippet { white-space: pre-wrap; word-break: break-all; }
/* security */
.allowlist-fields--disabled, .webmcp-settings-fields--disabled { opacity: 0.45; pointer-events: none; transition: opacity 0.3s var(--ease); }
.ol:empty { display: none; }
.ol .tg-s { padding: 2px 0; }
#webmcp-settings-feedback.is-error, #origin-allowlist-feedback.is-error { color: var(--red); }
#webmcp-settings-feedback.is-success { color: var(--green); }
.trust-level-switch .trust-level-option { border: 0; background: none; font: inherit; font-size: 0.76rem; padding: 4px 12px; border-radius: 6px; color: var(--text-2); cursor: pointer; }
.trust-level-switch .trust-level-option.active, .trust-level-switch .trust-level-option[aria-checked="true"] { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
#trust-presets-panel.is-disabled .seg { opacity: 0.55; }
#trust-custom-panel.is-disabled .rf { opacity: 0.55; }
#trust-custom-panel.is-locked .rf { opacity: 0.4; pointer-events: none; }
#trust-controls-content[style*="block"] { display: block !important; }
/* version control */
.vp { list-style: none; margin: 0; padding: 0; }
li.vp-i { grid-template-columns: 22px minmax(0, 1fr); }
li.vp-e { list-style: none; }
.vt { color: var(--text); }
tr.vd td p { margin: 0 0 6px; }
.release-action-btn:disabled { opacity: 0.4; }
/* billing */
.us-nav b { min-width: 140px; }
.us-nav .iconbtn:disabled { opacity: 0.3; pointer-events: none; }
.us-ch { min-height: 150px; }
.rp-bar i.warn { background: var(--amber); }
.rp-bar i.over { background: var(--red); }
.gz-r { background: conic-gradient(var(--blue) calc(var(--pct, 0) * 100%), var(--surface-3) 0); transition: --pct 0.6s; }
.gz-r.gold { background: conic-gradient(var(--green) 100%, var(--surface-3) 0); }
.plc .cur-t { display: none; }
.plc.current-plan { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-wash); }
.plc.current-plan .cur-t { display: block; }
.plc .btn:disabled { opacity: 0.6; }
.plc .pr span { margin-left: 2px; }
/* team */
.mbr .av { width: 30px; height: 30px; font-size: 0.68rem; }
.mbr b { display: flex; align-items: center; gap: 6px; }
.rsel { text-transform: capitalize; }
#member-table td span:not(.av):not(.pill) { text-transform: capitalize; }
#danger-zone .btn:disabled { opacity: 0.45; }
/* reach us */
.ru-a .btn { text-decoration: none; }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); background: var(--text); color: #fff; font-size: 0.8rem; padding: 8px 14px; border-radius: 999px; box-shadow: var(--sh-3); z-index: 200; animation: toastIn 0.3s var(--ease-out); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 6px); } }

/* ══════════════════════════════════════════════════════════
   16. Dialogs (publish, revert, confirmations, plan limits)
   ══════════════════════════════════════════════════════════ */
.modal { position: fixed; inset: 0; z-index: 100; background: rgba(15, 17, 21, 0.32); display: none; align-items: center; justify-content: center; padding: 20px; animation: mdlIn 0.2s ease; }
.modal[style*="flex"], .modal[style*="block"] { display: flex !important; }
.modal-content { position: relative; width: min(440px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; background: var(--surface); border-radius: 14px; box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24); padding: 20px; display: flex; flex-direction: column; gap: 8px; animation: mdlUp 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); text-align: left !important; }
.modal-content h3, .modal-content h4 { margin: 0 !important; font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--text); }
.modal-subtitle { margin: 0 !important; font-size: 0.82rem; color: var(--text-2); line-height: 1.5; text-align: left !important; }
.modal-content p { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; margin: 0; }
.modal-content label { display: flex; flex-direction: column; gap: 5px; font-size: 0.78rem; font-weight: 500; color: var(--text); margin-top: 6px; }
.modal-content input, .modal-content textarea, .modal-content select { font: inherit; font-size: 0.82rem; color: var(--text); border: 1px solid var(--line); border-radius: var(--r-md); padding: 8px 10px; background: var(--surface); width: 100%; resize: vertical; }
.modal-content input:focus, .modal-content textarea:focus { outline: 0; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-wash); }
.modal-top-icon, .modal-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--blue-wash); color: var(--blue); display: grid; place-items: center; font-size: 17px; margin: 0 0 4px; }
.modal-top-icon.success { background: var(--green-wash); color: var(--green); }
.modal-top-icon.error { background: var(--red-wash); color: var(--red); }
.modal-header { display: flex; gap: 12px; align-items: flex-start; }
.modal-x-btn { position: absolute; top: 12px; right: 12px; width: 28px; height: 28px; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 16px; line-height: 1; }
.modal-x-btn:hover { background: var(--surface-3); }
.modal-buttons { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px !important; flex-wrap: wrap; }
.confirm-btn, .cancel-btn, .danger-btn, .modal-buttons button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 14px; border-radius: var(--r-md); border: 1px solid transparent; font-family: inherit; font-size: 0.83rem; font-weight: 500; cursor: pointer; transition: background 0.3s var(--ease), transform 0.3s var(--ease); width: auto !important; }
.confirm-btn { background: var(--text); color: #fff; box-shadow: var(--sh-key); }
.confirm-btn:hover { background: #2b2f38; }
.cancel-btn { background: var(--surface); color: var(--text-2); border-color: var(--line); }
.cancel-btn:hover { background: var(--surface-3); color: var(--text); }
.danger-btn { background: var(--red); color: #fff; border-color: var(--red); }
.danger-btn:hover { background: #9b1d14; }
.confirm-btn:disabled, .cancel-btn:disabled, .danger-btn:disabled { opacity: 0.45; cursor: default; }
.confirm-btn:active, .cancel-btn:active, .danger-btn:active { transform: scale(0.98); }
.release-modal-status { display: flex; align-items: center; gap: 10px; font-size: 0.82rem; color: var(--text-2); padding: 8px 0; }
.release-modal-status p { margin: 0; }
.release-modal-status.success { color: var(--green); }
.release-status-check { color: var(--green); }
.upgrade-note { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin-top: 10px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); font-size: 0.8rem; color: var(--text-2); }
.upgrade-note .confirm-btn { margin-left: auto; }
.upgrade-note[style*="none"] { display: none !important; }
/* quota banner */
.quota-banner { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 11px 14px; border-radius: var(--r-lg); border: 1px solid rgba(181, 71, 8, 0.2); background: var(--amber-wash); color: var(--amber); font-size: 0.8rem; }
.quota-banner[hidden] { display: none; }
.quota-banner.blocked { border-color: #f3c9c4; background: var(--red-wash); color: var(--red); }
.quota-banner-text { flex: 1; display: flex; flex-direction: column; gap: 2px; color: var(--text-2); }
.quota-banner-text strong { color: var(--text); font-weight: 550; }
.quota-banner-close { border: 0; background: none; color: var(--text-3); cursor: pointer; font-size: 18px; }
#content .page { display: none; flex-direction: column; }
.bd-body { padding-top: 0; }
@container cv (max-width: 760px) {
  #release-versions-table th:nth-child(4), #release-versions-table td:nth-child(4) { display: none; }
  #release-versions-table .ra { flex-direction: column; align-items: flex-end; gap: 4px; }
}
#save-custom.saved { background: var(--green); border-color: var(--green); color: #fff; }
.steps .st-b { min-width: 0; }
.steps .st-b b { color: var(--text); font-weight: 550; }
.steps .st-b .cb { margin: 7px 0 6px; }
.steps .st-x { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 0.78rem; color: var(--text-2); line-height: 1.5; }
.steps .st-x > span:first-child { flex-shrink: 0; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--green); padding: 1px 6px; border-radius: 4px; background: var(--green-wash); }
.steps .st-x code { font-family: 'Geist Mono', monospace; font-size: 0.72rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 5px; padding: 1px 6px; overflow-wrap: anywhere; }

/* ══ 17. Welcome dialog ══ */
.modal-content.wl { width: min(560px, 100%); padding: 26px 26px 20px; gap: 0; }
.wl-h { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-bottom: 18px; }
.wl-mark { width: 40px; height: 40px; border-radius: 11px; background: var(--text); display: grid; place-items: center; box-shadow: var(--sh-key); margin-bottom: 6px; }
.wl-mark img { width: 22px; height: 22px; filter: brightness(0) invert(1); }
.wl-h h2 { margin: 0; font-size: 1.3rem; font-weight: 600; letter-spacing: -0.02em; color: var(--text); }
.wl-h p { font-size: 0.86rem; }
.wl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.wl-s { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; column-gap: 14px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line-soft); opacity: 0; transform: translateY(8px); animation: rise 0.5s var(--ease-out) forwards; animation-delay: calc(120ms + var(--i) * 70ms); }
.wl-s:first-child { border-top: 0; padding-top: 4px; }
.wl-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: 'Geist Mono', monospace; font-size: 0.74rem; font-weight: 500; color: var(--blue-deep); background: var(--blue-wash); border: 1px solid var(--blue-line); }
.wl-b { min-width: 0; padding-top: 2px; }
.wl-b > b { display: block; font-size: 0.9rem; font-weight: 550; color: var(--text); letter-spacing: -0.01em; }
.wl-b > p { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-2); line-height: 1.5; }
.wl-go { margin-top: 1px; font-size: 0.78rem; padding: 5px 10px; }
.wl-go i { transition: transform 0.3s var(--ease); }
.wl-go:hover i { transform: translateX(2px); }
.wl-ch { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.wl-o { display: flex; align-items: flex-start; gap: 10px; text-align: left; font: inherit; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); cursor: pointer; transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease); }
.wl-o:hover { border-color: var(--line-strong); box-shadow: var(--sh-2); transform: translateY(-1px); }
.wl-o:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.wl-o > i:first-child { font-size: 18px; color: var(--icon); margin-top: 1px; }
.wl-o span { flex: 1; min-width: 0; }
.wl-o b { display: block; font-size: 0.82rem; font-weight: 550; color: var(--text); }
.wl-o small { display: block; font-size: 0.74rem; color: var(--text-3); line-height: 1.45; margin-top: 2px; }
.wl-o .wl-a { font-size: 13px; color: var(--text-3); margin-top: 3px; transition: transform 0.3s var(--ease), color 0.3s var(--ease); }
.wl-o:hover .wl-a { transform: translateX(2px); color: var(--text); }
.wl-f { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.wl-more { flex: 1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 0.76rem; color: var(--text-3); }
.wl-more .lnk { display: inline-flex; align-items: center; gap: 4px; font-size: 0.76rem; }
@media (max-width: 560px) {
  .modal-content.wl { padding: 22px 18px 16px; }
  .wl-s { grid-template-columns: 26px minmax(0, 1fr); }
  .wl-go { grid-column: 2; justify-self: start; margin-top: 8px; }
  .wl-ch { grid-template-columns: 1fr; }
  .wl-f { flex-direction: column; align-items: stretch; }
  .wl-f .btn { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .wl-s { animation: none; opacity: 1; transform: none; } }

/* ══ 18. Onboarding (no website yet) ══ */
.ob { flex: 1; min-height: 0; overflow-y: auto; }
.ob-in { min-height: 100%; max-width: 1120px; margin: 0 auto; padding: 40px 32px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.ob-l { display: flex; flex-direction: column; align-items: flex-start; max-width: 420px; }
.ob-lk { margin-bottom: 36px; }
.ob-l h1 { margin: 0; font-size: 2.1rem; font-weight: 600; letter-spacing: -0.035em; color: var(--text); }
.ob-l > p { margin: 8px 0 26px; font-size: 0.95rem; color: var(--text-2); line-height: 1.55; }
.ob-f { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.ob-f label { font-size: 0.78rem; font-weight: 550; color: var(--text); }
.ob-row { display: flex; gap: 8px; }
.ob-row input { flex: 1; min-width: 0; font: inherit; font-size: 0.88rem; color: var(--text); padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--sh-1); transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ob-row input:focus { outline: 0; border-color: var(--blue-line); box-shadow: 0 0 0 3px var(--blue-wash); }
.ob-row .btn { padding: 8px 14px; }
.ob-row .btn i { transition: transform 0.3s var(--ease); }
.ob-row .btn:hover i { transform: translateX(2px); }
.ob-note { display: flex; gap: 10px; margin-top: 28px; padding: 12px 14px; width: 100%; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.ob-note > i { font-size: 17px; color: var(--icon); margin-top: 1px; }
.ob-note b { display: block; font-size: 0.82rem; font-weight: 550; color: var(--text); }
.ob-note span { display: block; font-size: 0.78rem; color: var(--text-2); line-height: 1.5; margin-top: 1px; }
.ob-r { border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--sh-3); background: var(--surface); display: flex; flex-direction: column; max-width: 520px; width: 100%; justify-self: center; }
.ob-top { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--line-soft); background: var(--surface-2); }
.ob-top > span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.ob-url { margin: 0 auto; display: inline-flex; align-items: center; gap: 5px; font-family: 'Geist Mono', monospace; font-size: 0.7rem; color: var(--text-3); background: var(--surface); border: 1px solid var(--line-soft); border-radius: 999px; padding: 3px 12px; }
.ob-chat { display: flex; flex-direction: column; gap: 10px; padding: 22px 20px 14px; min-height: 300px; }
.ob-q, .ob-a { opacity: 0; transform: translateY(6px); animation: rise 0.5s var(--ease-out) forwards; animation-delay: var(--d); max-width: 82%; font-size: 0.84rem; line-height: 1.5; }
.ob-q { align-self: flex-end; background: var(--text); color: #fff; padding: 8px 13px; border-radius: 14px 14px 4px 14px; }
.ob-a { align-self: flex-start; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; background: var(--surface-2); border: 1px solid var(--line-soft); color: var(--text); padding: 10px 13px; border-radius: 14px 14px 14px 4px; }
.ob-a p { margin: 0; }
.ob-src, .ob-gap { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 500; border-radius: 999px; padding: 2px 9px; }
.ob-src { color: var(--blue-deep); background: var(--blue-wash); border: 1px solid var(--blue-line); }
.ob-gap { color: var(--amber, #b54708); background: #fef6e7; border: 1px solid #f7dfb0; }
.ob-ask { display: flex; align-items: center; justify-content: space-between; margin: 0 16px 16px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; font-size: 0.84rem; color: var(--text-3); box-shadow: var(--sh-1); }
.ob-ask i { color: var(--text); font-size: 15px; }
@media (prefers-reduced-motion: reduce) { .ob-q, .ob-a { animation: none; opacity: 1; transform: none; } }
@media (max-width: 860px) {
  .ob-in { grid-template-columns: 1fr; gap: 32px; padding: 28px 16px; align-content: start; }
  .ob-lk { margin-bottom: 24px; }
  .ob-l { max-width: none; }
  .ob-l h1 { font-size: 1.7rem; }
}

/* ══ 19. Phone width: drop secondary columns so tables fit without sideways scroll ══ */
@container cv (max-width: 480px) {
  .chbar .lab { display: none; }
  .chbar { gap: 6px; }
  .ch { white-space: nowrap; padding: 5px 10px; }
  .gaps th:nth-child(1), .gaps td:nth-child(1),
  #intel-top-table th:nth-child(1), #intel-top-table td:nth-child(1),
  #intel-sources-table th:nth-child(1), #intel-sources-table td:nth-child(1),
  #intel-failed-table th:nth-child(2), #intel-failed-table tr:not(.xd) > td:nth-child(2),
  #fixes-table th:nth-child(4), #fixes-table td:nth-child(4),
  .ag-t th:nth-child(3), .ag-t td:nth-child(3),
  #crawlers-table th:nth-child(5), #crawlers-table td:nth-child(5),
  #crawlers-table th:nth-child(7), #crawlers-table td:nth-child(7),
  #documents-table th:nth-child(4), #documents-table td:nth-child(4),
  #instructions-table th:nth-child(2), #instructions-table td:nth-child(2),
  #instructions-table th:nth-child(4), #instructions-table td:nth-child(4),
  #release-versions-table th:nth-child(2), #release-versions-table td:nth-child(2) { display: none; }
  .tbl th, .tbl td { padding-left: 9px; padding-right: 9px; }
  .tbl td.gt { min-width: 0; }
  .gaps .ra .lnk { font-size: 0.74rem; }
  .ins-grid, .ins { grid-template-columns: 1fr; }
}
#intel-sources-table td.q { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Tablets and phones: an open dock (preview, details, settings) slides in as a sheet. */
@media (max-width: 900px) {
  #preview.dock.ov { display: flex; position: fixed; top: 0; right: 0; bottom: 0; left: auto; width: min(440px, 100vw); flex: none; z-index: 80; box-shadow: 0 0 0 100vmax rgba(15, 17, 21, 0.28), -12px 0 32px rgba(15, 23, 42, 0.14); animation: dockSheet 0.4s var(--ease-out); }
  #preview.dock.ov #preview-handle { display: none; }
}
.ph-spin { display: inline-block; animation: spin 0.8s linear infinite; }
/* customization rows that don't apply to the selected widget layout */
.layout-hidden{display:none !important}
/* transcript import (Intelligence › Transcript import) */
.ti{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start}
.ti-drop{display:flex;flex-direction:column;align-items:center;gap:4px;margin:14px 15px 0;padding:26px 16px;border:1.5px dashed var(--line-strong);border-radius:var(--r-md);background:var(--surface-2,var(--surface-3));text-align:center;cursor:pointer;transition:border-color .3s var(--ease),background .3s var(--ease)}
.ti-drop:hover,.ti-drop.over{border-color:var(--blue);background:var(--blue-wash)}
.ti-drop[hidden]{display:none}
.ti-drop i{font-size:26px;color:var(--blue)}
.ti-drop b{font-size:.86rem;font-weight:550}
.ti-drop span{font-size:.75rem;color:var(--text-3)}
.ti-pv{margin:14px 15px 0;border:1px solid var(--line);border-radius:var(--r-md)}
.ti-pv[hidden]{display:none}
.ti-pv-h{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line-soft)}
.ti-pv-h i{font-size:20px;color:var(--icon)}
.ti-pv-h b{display:block;font-size:.84rem;font-weight:550;word-break:break-all}
.ti-pv-h span{display:block;font-size:.75rem;color:var(--blue-deep)}
.ti-pv-n{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:6px;padding:12px 14px 0}
.ti-pv-n div{border:1px solid var(--line-soft);border-radius:8px;padding:8px}
.ti-pv-n b{display:block;font-family:'Geist Mono',monospace;font-size:.92rem;font-weight:500}
.ti-pv-n span{display:block;font-size:.7rem;color:var(--text-3)}
.ti-pv-s{margin:10px 14px 0;padding:0;list-style:none}
.ti-pv-s li{font-size:.76rem;color:var(--text-2);padding:4px 0;border-bottom:1px dashed var(--line-soft);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-pv-s li::before{content:'“';color:var(--text-3)}
.ti-pv-s li::after{content:'”';color:var(--text-3)}
.ti-pv .rp-note{margin:10px 14px 0}
.ti-pv .rp-note[hidden]{display:none}
.ti-pv .bf-act{padding:12px 14px}
.ti-fmt{padding:14px 15px}
.ti-chips{display:flex;flex-wrap:wrap;gap:5px}
.ti-chips span{font-size:.72rem;padding:3px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2)}
.ti-how{margin-top:10px;font-size:.76rem;color:var(--text-2)}
.ti-how summary{cursor:pointer;color:var(--blue-deep);font-weight:500}
.ti-how ul{margin:8px 0 0;padding-left:18px;line-height:1.55}
.ti-list{padding:6px 0}
.ti-empty{padding:22px 15px;font-size:.8rem;color:var(--text-3)}
.ti-row{display:flex;gap:10px;align-items:flex-start;padding:11px 15px;border-bottom:1px solid var(--line-soft)}
.ti-row:last-child{border-bottom:0}
.ti-row.on{background:var(--blue-wash)}
.ti-row>i{font-size:18px;color:var(--icon);margin-top:2px}
.ti-row-m{flex:1;min-width:0}
.ti-row-m b{display:block;font-size:.82rem;font-weight:550;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ti-row-m span{display:block;font-size:.73rem;color:var(--text-3);margin-top:1px}
.ti-row-m .ti-top{color:var(--amber)}
.ti-row-m .ti-top b{display:inline;color:inherit}
.ti-row-a{display:flex;align-items:center;gap:6px;flex-shrink:0}
.ti-row-a .btn{padding:4px 9px}
@media(max-width:1240px){.ti{grid-template-columns:1fr}}
@media(max-width:520px){.ti-row{flex-wrap:wrap}.ti-row-a{width:100%;justify-content:flex-end}}