@font-face {
  font-family: pplxSans;
  src: url("/static/fonts/pplxSans.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "tatva-family-season";
  src: url("/static/fonts/SeasonMix-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "tatva-family-season";
  src: url("/static/fonts/SeasonMix-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "tatva-family-season";
  src: url("/static/fonts/SeasonMix-Heavy.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
:root {
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel2: #f7f8fa;
  --border: #e6e8ee;
  --text: #1c1f26;
  --muted: #6b7280;
  --accent: #ff6a00;
  --accent-soft: #fff1e6;
  --green: #12a150;
  --green-soft: #e8f8ef;
  --red: #e11d48;
  --amber: #d97706;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.55 pplxSans, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
button, input, textarea, select { font-family: inherit; }
#app.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
#app.app-shell.hidden { display: none; }
.sidenav {
  width: 220px; flex: none; background: var(--panel);
  border-right: 1px solid var(--border);
  padding: 18px 12px; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 0; height: 100vh;
}
.sidenav .nav-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; background: transparent; color: var(--text);
  border: none; border-radius: 8px; padding: 10px 12px; font-size: 14px; font-weight: 400;
  text-decoration: none;
}
.sidenav .nav-icon {
  width: 18px; height: 18px; flex: none;
  stroke: currentColor; fill: none; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}
.sidenav .nav-item:hover { background: var(--panel2); }
.sidenav .nav-item.active,
.sidenav .nav-item.active:hover { background: var(--accent-soft); color: var(--accent); }
.sidenav .nav-profile { margin-top: auto; }
.app-body { flex: 1; min-width: 0; }
.app-body .header-row { max-width: none; }
header { padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--panel); }
.header-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1280px; margin: 0 auto;
}
.brand { display: flex; align-items: center; gap: 12px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-link { color: var(--accent); font-weight: 650; font-size: 14px; text-decoration: none; white-space: nowrap; }
.account { display: flex; align-items: center; gap: 8px; }
.account img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--panel2); }
.account span { font-size: 13px; font-weight: 650; }
.account button { padding: 6px 12px; font-size: 13px; }
/* The sign-in screen is black because the video is. Sampled at its corners the
   source is #000000 exactly, so the page matches it exactly: anything near but
   not equal leaves a visible rectangle where the video sits, which is the one
   thing this layout is trying to avoid. Scoped to .sign-in so the signed-in app
   stays light. */
.sign-in {
  min-height: 100vh; background: #000; display: flex;
  align-items: center; justify-content: center; padding: 24px 20px;
}
.sign-in-pane {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center;
}
/* 9:16, the ratio the video was composed in, so nothing is cropped. Rounded
   because the frame's own edges are the only part a viewer can see against the
   black; no shadow, which would be invisible on it. */
.sign-in-media {
  /* Sized off the viewport HEIGHT, not a fixed width, because a 9:16 frame is
     always constrained by height first: pick a width and a short laptop screen
     pushes the sign-in button below the fold. 80vh is as large as this goes
     while still leaving room for the name, the tagline and the button
     underneath. The max stops it going silly on a tall monitor, and the min
     keeps it from collapsing to a stamp. */
  height: min(80vh, 840px); min-height: 360px;
  aspect-ratio: 9 / 16; margin-bottom: 20px;
  border-radius: 26px; overflow: hidden; background: #000;
}
.sign-in-media video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Light type on black. Only inside .sign-in: the dashboard is unchanged. */
.sign-in .tagline { color: #9aa1ad; }
.sign-in .sign-in-error { color: #ff7a90; }
/* The height clamp above does most of the work, but below this there is simply
   not enough room for a frame and a sign-in button, so the frame goes. */
@media (max-height: 560px) { .sign-in-media { display: none; } }
/* Narrow phones: height would otherwise make the frame wider than the screen. */
@media (max-width: 480px) {
  .sign-in-media { height: auto; width: min(68vw, 300px); min-height: 0; }
}
/* An autoplaying loop is genuinely unpleasant for some people, and the poster
   carries the same image without the motion. */
@media (prefers-reduced-motion: reduce) {
  .sign-in-media video { display: none; }
  .sign-in-media {
    background: #000 url(/static/signin-poster.jpg?v=20261008a) center / cover no-repeat;
  }
}
.sign-in h1 { margin-top: 8px; }
.sign-in .tagline { margin-bottom: 8px; }
#google-btn { min-height: 44px; }
.sign-in-error { color: var(--red); font-size: 13.5px; max-width: 360px; }
.header-link:hover { text-decoration: underline; }
.logo { height: 58px; width: auto; display: block; }
h1 { font-size: 22px; color: var(--accent); letter-spacing: -0.03em; font-weight: 750; }
.product-name { font-family: "tatva-family-season", pplxSans, sans-serif; font-weight: 700; }
.tagline { color: var(--muted); font-size: 13px; }
main { max-width: 1280px; margin: 22px auto 80px; padding: 0 28px; }
.app-body main { max-width: none; }
.view-title { font-size: 22px; letter-spacing: -0.03em; margin-bottom: 4px; }
.past-item {
  display: block; width: 100%; text-align: left; margin-top: 10px;
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.past-item:hover { border-color: var(--accent); }
.past-query {
  font-weight: 650; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.past-meta { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
#past-back { margin-bottom: 4px; }
#past-query { white-space: pre-wrap; }
.profile-card { max-width: 480px; }
.profile-photo {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  background: var(--panel2); margin-bottom: 12px;
}
.profile-card h2 { margin-bottom: 4px; }
.profile-card #sign-out { margin-top: 16px; }
@media (max-width: 800px) {
  #app.app-shell { flex-direction: column; }
  .sidenav {
    width: auto; height: auto; position: static; flex-direction: row;
    overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border);
    padding: 8px;
  }
  .sidenav .nav-item { width: auto; white-space: nowrap; }
  .sidenav .nav-profile { margin-top: 0; }
}

.query-box {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.query-box textarea {
  width: 100%; padding: 12px 14px; font-size: 15px; resize: vertical;
  background: var(--panel2); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; outline: none;
}
.query-box textarea:focus { border-color: var(--accent); }
.controls { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.speed {
  display: flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
}
.speed label {
  position: relative; color: var(--muted); font-size: 13px; font-weight: 600;
  padding: 7px 14px; cursor: pointer;
}
.speed input { position: absolute; opacity: 0; pointer-events: none; }
.speed label:has(input:checked) { background: var(--accent); color: #fff; }
.speed label:has(input:disabled) { cursor: not-allowed; }
.verifier-label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.sites-label {
  color: var(--muted); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 8px;
}
#sites {
  width: min(280px, 70vw);
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font: inherit; font-size: 13px;
}
#sites:focus { border-color: var(--accent); outline: none; }
#sites:disabled { cursor: not-allowed; opacity: 0.7; }
.relax-label {
  color: var(--muted); font-size: 13px; font-weight: 600;
  display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none;
}
.relax-label input {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  margin: 0;
  flex: 0 0 15px;
  border: 1.5px solid #c8ccd4;
  border-radius: 4px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px 13px;
  cursor: pointer;
}
.relax-label input:checked {
  background-color: var(--accent);
  border-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M3.2 7.7 6.1 10.5 11.8 4.5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.relax-label input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.relax-label input:disabled { cursor: not-allowed; opacity: 0.45; }
select, input[type="number"] {
  background: var(--panel); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 10px; font-size: 13px;
}
input[type="number"] { width: 70px; }
.round-banner {
  margin-top: 22px; padding: 8px 14px; border-radius: 8px; font-size: 13px;
  background: var(--panel2); border: 1px solid var(--accent); color: var(--accent);
  font-weight: 600;
}
.progress-line { color: var(--muted); font-size: 13px; margin-top: 8px; }
.target-warn { color: var(--amber); font-size: 13px; margin-top: 8px; }
button {
  background: var(--accent); border: none; color: #fff; font-weight: 600;
  padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px;
}
button:disabled { opacity: 0.45; cursor: not-allowed; }
button.secondary, #stop {
  background: #fff; color: var(--text); border: 1px solid var(--border);
}

.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  padding: 20px 22px; margin-top: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.card h2 { font-size: 16px; margin-bottom: 8px; }
.muted { color: var(--muted); font-size: 13.5px; }
.hidden { display: none; }

.plan-step {
  display: flex; gap: 12px; padding: 10px 12px; margin-top: 8px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
}
.plan-step .num {
  flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
}
.plan-step .yield { font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-left: 8px; }
.yield-high { background: var(--green-soft); color: var(--green); }
.yield-medium { background: #fff6e8; color: var(--amber); }
.yield-low { background: #fff1f2; color: var(--red); }
.plan-step h3 { font-size: 14px; }
.plan-step p { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.sq-status { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; margin: 10px 0 4px; }
.spinner {
  width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent);
  border-radius: 50%; display: inline-block; animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.steps-log { margin-top: 8px; }
.steps-log li {
  list-style: none; font-size: 12.5px; color: var(--muted);
  padding: 3px 0 3px 20px; position: relative;
}
.steps-log li::before { content: "›"; position: absolute; left: 6px; color: var(--accent); }
.steps-log li.warn::before { content: "⚠"; color: var(--amber); }
.steps-log li.query-line { padding-left: 20px; }
.steps-log li.query-line::before { content: "⌕"; }
.query-who { color: var(--text); font-weight: 600; margin-right: 6px; }
.steps-log code {
  display: inline-block; margin: 2px 4px 2px 0; padding: 1px 6px;
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
  color: var(--text); font-size: 12px;
}

table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13.5px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
tr:hover td { background: #fff8f3; }
td.name, .lead-name { font-weight: 650; color: var(--accent); white-space: nowrap; }
.type-pill {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  background: var(--panel2); border: 1px solid var(--border); color: var(--muted);
}
.badge { font-size: 11px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.badge-verified { background: var(--green-soft); color: var(--green); }
.badge-replacement-verified, .badge-recheck-verified { background: #e8f6fb; color: #0e7490; }
.badge-hallucinated, .badge-unverifiable { background: #fff1f2; color: var(--red); }
a { color: var(--accent); }
td.sources a, .sources a { color: var(--accent); font-size: 12.5px; display: block; text-decoration: none; word-break: break-all; }
td.sources a:hover, .sources a:hover { text-decoration: underline; }
.funnel-scroll td.lead .who { color: var(--accent); font-weight: 650; }
.rationale { color: var(--text); font-size: 13px; }
.verif-note { color: var(--muted); font-size: 12px; margin-top: 4px; font-style: italic; }

.failed-block { margin-top: 10px; padding: 10px 12px; border: 1px dashed var(--red); border-radius: 8px; }
.failed-block h4 { font-size: 12.5px; color: var(--red); margin-bottom: 4px; }
.failed-block p { font-size: 12.5px; color: var(--muted); }

.workspace {
  margin-top: 20px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
#tab-steps .card:first-of-type { margin-top: 12px; }
#funnel-board .card:first-child { margin-top: 0; }
.final-header .panel-actions { margin-top: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--border); gap: 4px; padding: 0 8px; }
.tabs .tab {
  flex: none; background: transparent; color: var(--muted); border: none; border-radius: 0;
  padding: 14px 16px; font-size: 14px; font-weight: 600; cursor: pointer;
  border-bottom: 2px solid transparent;
}
.tabs .tab.active { color: var(--text); border-bottom-color: var(--accent); }
.tab-count {
  background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 11px; padding: 1px 7px; margin-left: 4px;
}
.tab-count:empty { display: none; }
.tab-body { padding: 16px 18px 20px; }
.panel-actions { display: flex; gap: 8px; margin-top: 12px; }
.panel-actions button { flex: 1; padding: 8px 10px; font-size: 13px; }

.lead-item {
  background: var(--panel2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; margin-bottom: 8px;
}
.lead-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lead-name { font-weight: 600; font-size: 13.5px; }
.lead-sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.lead-rationale { color: var(--text); }
.lead-src { color: var(--accent); font-size: 12px; text-decoration: none; word-break: break-all; display: block; margin-top: 4px; }
.lead-src:hover { text-decoration: underline; }

.matrix-scroll { overflow-x: auto; }
.matrix-scroll table { min-width: 900px; }
.matrix-scroll th { min-width: 150px; }
.matrix-scroll th:first-child { min-width: 180px; }

@media (max-width: 980px) {
  .tabs { overflow-x: auto; }
}

.usage-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.usage-block { background: var(--panel2); border: 1px solid var(--border); border-radius: 8px; padding: 12px; }
.usage-block h3 { font-size: 14px; margin-bottom: 6px; }
.usage-block p { font-size: 13px; color: var(--muted); }
.usage-block strong { color: var(--text); font-variant-numeric: tabular-nums; }
.usage-block details { margin-top: 8px; }
.usage-block summary { cursor: pointer; color: var(--accent); font-size: 12.5px; }
.usage-scroll { max-height: 280px; overflow: auto; }
@media (max-width: 800px) { .usage-grid { grid-template-columns: 1fr; } }
.policy-card { border-color: #ffd0b0; }
.policy-card h2 { font-size: 15px; }
.policy-where { margin-top: 6px; font-size: 14px; }
.policy-why, .policy-sep { color: var(--muted); font-size: 13px; margin-top: 4px; }
.policy-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.policy-lists h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.policy-lists ul { margin: 4px 0 0; padding-left: 18px; }
.policy-lists li { font-size: 13px; }
.policy-lists code, .policy-queries code {
  display: inline-block; margin: 2px 4px 0 0; padding: 1px 6px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 4px; font-size: 12px;
}
.arm-follow { color: var(--green); }
.arm-avoid { color: var(--red); }
.arm-probe { color: var(--amber); }
.policy-choke { margin-top: 8px; font-size: 13px; }
.policy-choke code { margin-right: 4px; }
.policy-drops { display: flex; flex-wrap: wrap; gap: 6px 16px; list-style: none; padding: 0; margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.policy-drops .drop-choke { color: var(--red); font-weight: 600; }

.funnel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.funnel-count { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.funnel-scroll { overflow: auto; max-height: 68vh; margin-top: 8px; border: 1px solid var(--border); border-radius: 8px; }
.funnel-scroll table { margin: 0; }
.funnel-scroll th {
  position: sticky; top: 0; background: #fff; z-index: 2;
  min-width: 320px; text-transform: none; letter-spacing: 0;
  font-size: 12.5px; line-height: 1.35; white-space: normal;
}
.funnel-scroll th.lead, .funnel-scroll td.lead {
  position: sticky; left: 0; min-width: 220px; max-width: 260px; background: #fff; z-index: 1;
}
.funnel-scroll th.lead { z-index: 3; }
.funnel-scroll th .crit { display: block; color: var(--text); font-weight: 650; }
.funnel-scroll th .crit-sub {
  display: block; color: var(--muted); font-weight: 400; font-size: 11.5px; margin-top: 2px;
  white-space: normal;
}
.funnel-scroll th.col-active { box-shadow: inset 0 -2px 0 var(--accent); }
.funnel-scroll th.col-done { box-shadow: inset 0 -2px 0 var(--green); }
.funnel-scroll th.col-relaxed { box-shadow: inset 0 -2px 0 var(--amber); }
.badge-relaxed { background: #fff6e8; color: var(--amber); margin-left: 4px; }
.funnel-scroll td { font-size: 12.5px; min-width: 320px; white-space: normal; vertical-align: top; }
.funnel-scroll th.pages, .funnel-scroll td.pages { min-width: 220px; }
.funnel-scroll td.pages a { display: block; margin-top: 4px; }
.cell-pass { color: var(--text); line-height: 1.45; }
.funnel-scroll td.lead .who { font-weight: 650; }
.funnel-scroll td.lead .sub { color: var(--muted); font-size: 12px; margin-top: 3px; }
.cell-pending { color: var(--muted); }
.cell-run { color: var(--accent); font-style: italic; }
tr.row-leave td { animation: rowOut 0.45s ease forwards; background: rgba(248, 81, 73, 0.12); }
@keyframes rowOut { to { opacity: 0; } }
.funnel-empty { padding: 14px; color: var(--muted); font-size: 13px; }
@media (max-width: 800px) { .policy-lists { grid-template-columns: 1fr; } }

.final-header { display: flex; justify-content: space-between; align-items: center; }
#final-card { border-color: var(--green); }
.cost-total {
  margin-top: 12px; font-size: 40px; font-weight: 700; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
#cost-stage { margin-top: 4px; }

#global-status {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 999px;
  padding: 9px 18px; display: flex; align-items: center; gap: 10px; font-size: 13px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}
.error-banner, .warn-banner, .notice-banner {
  margin-top: 16px; padding: 12px 16px; border-radius: 8px;
  border: 1px solid transparent; font-size: 13.5px;
}
.error-banner { background: #fff1f2; color: var(--red); border-color: #fecdd3; }
/* A run that ended early but kept its results is neither a failure nor a
   success, so it reads in the warning register rather than the error one. */
.warn-banner { background: #fff8ec; color: var(--amber); border-color: #fde3b3; }
.notice-banner { background: var(--accent-soft); color: var(--text); border-color: #ffd0b0; }
.banner-hint { margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.banner-action { margin-top: 10px; padding: 7px 14px; font-size: 13px; }

.doc { max-width: 860px; }
.doc h2 { font-size: 22px; margin: 36px 0 10px; letter-spacing: -0.02em; }
.doc h3 { font-size: 16px; margin: 22px 0 8px; }
.doc p, .doc li { font-size: 15px; }
.doc p + p { margin-top: 10px; }
.doc ul, .doc ol { margin: 8px 0 0 1.2em; }
.doc li + li { margin-top: 4px; }
.doc a { color: var(--accent); }
.doc code, .doc pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}
.doc code { background: var(--panel2); border-radius: 4px; padding: 1px 5px; }
.doc pre {
  background: #1c1f26; color: #f4f5f7; border-radius: 10px;
  padding: 14px 16px; overflow: auto; margin-top: 10px; line-height: 1.5;
  white-space: pre-wrap;
}
.doc pre code { background: transparent; color: inherit; padding: 0; }
.doc table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13.5px; }
.doc th, .doc td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); padding: 8px 10px; }
.doc th { color: var(--muted); font-weight: 650; font-size: 12px; letter-spacing: 0.02em; }
.doc .toc { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 14px; }
.doc .callout {
  margin-top: 14px; padding: 12px 14px; border-radius: 10px;
  background: var(--accent-soft); border: 1px solid #ffd7b8;
}
.prompt-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 8px; }
.prompt-bar p { margin: 0; }

/* ----------------------------------------------------------------- api keys */
#key-name {
  width: min(360px, 76vw); font-size: 15px; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--panel); color: var(--text);
}
#key-name:focus { border-color: var(--accent); outline: none; }
#key-name:disabled { cursor: not-allowed; opacity: 0.7; }
#key-pending-hint { margin-top: 10px; }

/* The one-time reveal. Louder than anything else on the page on purpose: this is
   the only moment the key exists outside the client that will hold it. */
.key-reveal {
  border: 2px solid var(--accent); background: var(--accent-soft);
  box-shadow: 0 6px 20px rgba(255, 106, 0, 0.14);
}
.key-reveal h2 { font-size: 18px; color: var(--accent); }
.key-warn { color: var(--red); font-size: 13.5px; font-weight: 650; margin-bottom: 4px; }
.key-plain-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.key-plain {
  flex: 1 1 420px; min-width: 0; padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.5; word-break: break-all; user-select: all;
  background: var(--panel); color: var(--text);
  border: 1px dashed var(--accent); border-radius: 8px;
}
#key-copy { padding: 10px 18px; }
#key-copied { margin-top: 8px; }
.key-ack { margin-top: 14px; }
#key-dismiss { display: block; margin-top: 12px; }

.keys-table { min-width: 720px; }
.keys-table td { vertical-align: middle; }
.keys-table button { padding: 7px 14px; font-size: 13px; }
.keys-table .key-name { font-weight: 650; }
.key-mask {
  display: inline-block; padding: 2px 6px; white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; color: var(--muted);
  background: var(--panel2); border: 1px solid var(--border); border-radius: 4px;
}
.key-unused { color: var(--muted); }
.key-actions { white-space: nowrap; }
.key-confirm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.key-confirm-warn { color: var(--red); font-size: 12.5px; max-width: 240px; white-space: normal; }
button.danger { background: var(--red); color: #fff; border: none; }