/* The Zinit product UI as customers see it at ai.zinit.com.

   Rebuilt from the Head of Product's walkthrough recording of 2026-08-13
   (gs://zinit-ai-marketing-hq-evidence/media/product-demo-pm-walkthrough-2026-08/
   masters/v1/video1234828085.mp4). Every colour below was sampled from that
   recording's frames, and sizes are measured at the recording's own 1440px
   width, which is also this stage's design width, so 1px here is 1px there.

   This palette is the PRODUCT's, not the marketing kit's, on purpose: the demo
   exists so a prospect sees what they will actually log into. It lives in this
   one block so a product reskin is a one-file change, and every hex in it is
   on the `keep` list in brand/color-map.json with that reason. */

.stage {
  /* Neutrals: the product's greys carry a faint lavender cast. */
  --p-surface: #ffffff;
  --p-canvas: #fcfbfe;
  --p-panel: #f7f6fa;
  --p-tint: #efedf6;
  --p-line: #e9e8ec;
  --p-border: #dedde3;
  --p-subtle: #8f8e96;
  --p-muted: #67666d;
  --p-ink-2: #2e2d36;
  --p-ink: #0f0e17;
  /* Indigo and violet: structure, primary actions and everything the AI does. */
  --p-rail: #1c1055;
  --p-primary: #291873;
  --p-indigo-ink: #170f4a;
  --p-rail-active: #4e20b2;
  --p-create: #6650db;
  --p-violet: #7f51ea;
  --p-violet-2: #a249e6;
  --p-violet-soft: #ccb8f8;
  --p-lavender: #8b84b8;
  --p-ai-grad: linear-gradient(135deg, #7f51ea 0%, #a249e6 100%);
  /* Status. */
  --p-green: #2f8a74;
  --p-green-bg: #e6f2ef;
  --p-green-line: #cfe5dc;
  --p-green-bar: #4c9f71;
  --p-sop-bg: #f4fbf6;
  --p-orange: #c5813f;
  --p-orange-bg: #fbf0e6;
  --p-amber: #d9a050;
  --p-red: #d64b4b;
  --p-red-bg: #fcedef;
  --p-red-line: #f1c4c8;
  /* Older token names, kept as aliases so the rules below read naturally. */
  --p-field: var(--p-border);
  --p-tint-line: var(--p-border);
  --p-tint-2: var(--p-tint);
  --p-badge: var(--p-border);
  --p-parsed: var(--p-lavender);
  --p-rail-icon: var(--p-violet-soft);
  --p-primary-hover: var(--p-primary);
  --p-sop: var(--p-green);
  --p-sop-line: var(--p-green-line);
  --p-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --p-shadow-md: 0 10px 28px rgba(0, 0, 0, 0.10);
  --p-shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.18);
  color: var(--p-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  font-feature-settings: "cv11", "ss01";
}

.stage svg { display: block; flex: none; }
.stage .ico { display: inline-flex; align-items: center; justify-content: center; }

/* ---------- App shell ---------- */
.app { display: flex; width: 100%; height: 100%; background: var(--p-canvas); position: relative; }
.side {
  width: 64px; flex: none; background: var(--p-rail);
  display: flex; flex-direction: column; align-items: center;
  padding: 26px 0 16px; gap: 12px;
}
.side .logo { width: 46px; height: auto; margin-bottom: 20px; user-select: none; }
.side .tile {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--p-rail-icon);
}
.side .tile.on { background: var(--p-rail-active); color: var(--p-surface); }
.side .grow { flex: 1; }
.side .me { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 10px; }
.side .me .av {
  width: 34px; height: 34px; border-radius: 50%; background: var(--p-primary); color: var(--p-surface);
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}
.side .me span { color: var(--p-rail-icon); font-size: 11.5px; }
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; overflow: hidden; }

/* ---------- Buttons, badges, chips ---------- */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: 9px;
  border: 1px solid var(--p-border); background: var(--p-surface); color: var(--p-ink-2);
  font: inherit; font-size: 14.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: background 140ms, filter 140ms, box-shadow 140ms;
}
.p-btn:hover { background: var(--p-panel); }
.p-btn.primary { background: var(--p-primary); border-color: var(--p-primary); color: var(--p-surface); font-weight: 600; }
.p-btn.primary:hover { background: var(--p-primary-hover); }
.p-btn.create { background: var(--p-create); border-color: var(--p-create); color: var(--p-surface); font-weight: 600; height: 41px; padding: 0 18px; border-radius: 10px; font-size: 15px; }
.p-btn.pill { border-radius: 999px; }
.p-btn.danger { color: var(--p-red); border-color: var(--p-red-line); }
.p-btn.sm { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.p-btn.ghost { border-color: transparent; background: transparent; color: var(--p-muted); }
.p-btn.ai-out { border-color: var(--p-violet-soft); color: var(--p-indigo-ink); font-weight: 600; font-size: 13.5px; height: 32px; padding: 0 12px; border-radius: 8px; }
.p-btn.ai-out svg { color: var(--p-violet); }
.p-btn.pressed { filter: brightness(0.92); }
.p-btn[disabled] { opacity: 0.45; }

.badge {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 6px;
}
.badge.draft { background: var(--p-orange-bg); color: var(--p-orange); }
.badge.state { background: var(--p-badge); color: var(--p-indigo-ink); border-radius: 999px; padding: 4px 11px; }
.badge.eval { background: var(--p-green-bg); color: var(--p-green); border-radius: 999px; padding: 4px 11px; }
.badge.done { background: var(--p-green-bg); color: var(--p-green); border-radius: 999px; padding: 4px 11px; }
.badge.low { background: var(--p-red-bg); color: var(--p-red); text-transform: none; letter-spacing: 0; font-size: 11.5px; font-weight: 600; padding: 2px 7px; }
.badge.mand { background: var(--p-primary); color: var(--p-surface); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 11px; }
.badge.optional { background: var(--p-panel); color: var(--p-muted); text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 600; border-radius: 999px; padding: 3px 11px; }
.badge.time { background: var(--p-green-bg); color: var(--p-green); border-radius: 999px; padding: 4px 10px; letter-spacing: 0.02em; }
.count { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 19px; padding: 0 7px; border-radius: 999px; background: var(--p-badge); color: var(--p-indigo-ink); font-size: 11.5px; font-weight: 600; }
.dot-count { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--p-primary); color: var(--p-surface); font-size: 11px; font-weight: 600; }

.toggle {
  width: 42px; height: 24px; border-radius: 999px; background: var(--p-border); position: relative; flex: none;
  transition: background 200ms;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--p-surface); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 200ms;
}
.toggle.on { background: var(--p-primary); }
.toggle.on::after { transform: translateX(18px); }

.ai-ico {
  width: 26px; height: 26px; border-radius: 50%; background: var(--p-ai-grad); color: var(--p-surface);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.ai-ico.sq { border-radius: 10px; }

.spin { animation: pspin 0.9s linear infinite; }
@keyframes pspin { to { transform: rotate(360deg); } }

.p-toast {
  position: absolute; right: 28px; bottom: 26px; z-index: 40;
  display: flex; align-items: center; gap: 10px;
  background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 10px;
  padding: 13px 18px; font-size: 14.5px; color: var(--p-ink); box-shadow: var(--p-shadow-md);
}
.p-toast .tick { width: 20px; height: 20px; border-radius: 50%; background: var(--p-ink); color: var(--p-surface); display: flex; align-items: center; justify-content: center; }

.sim-tip {
  position: absolute; z-index: 88; pointer-events: none; transform: translateX(-50%);
  background: var(--p-ink); color: var(--p-surface); font-size: 13px; font-weight: 600;
  padding: 6px 11px; border-radius: 8px; white-space: nowrap; box-shadow: var(--p-shadow-md);
}

/* ---------- Zinit Assistant panel ---------- */
.asst {
  width: 385px; flex: none; background: var(--p-panel); border-right: 1px solid var(--p-line);
  display: flex; flex-direction: column; min-height: 0;
}
.asst.wide { width: 440px; }
.asst-head {
  height: 68px; flex: none; display: flex; align-items: center; gap: 12px;
  padding: 0 18px 0 20px; border-bottom: 1px solid var(--p-line);
}
.asst-head .ai-ico { width: 36px; height: 36px; }
.asst-head .t { font-size: 15px; font-weight: 600; color: var(--p-ink); }
.asst-head .s { font-size: 12.5px; color: var(--p-muted); margin-top: 1px; }
.asst-head .grow { flex: 1; }
.asst-body { flex: 1; min-height: 0; overflow: hidden; padding: 22px 20px 10px; display: flex; flex-direction: column; gap: 16px; position: relative; }
/* A chat stays pinned to its newest message: when it overflows, the oldest
   messages leave through the top, as they do in the product. */
.asst-body.end { justify-content: flex-start; }
.chat { display: flex; flex-direction: column; gap: 16px; flex: none; }
.asst-empty { margin-top: 70px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.asst-empty .ai-ico { width: 48px; height: 48px; border-radius: 12px; }
.asst-empty .t { font-size: 15.5px; font-weight: 600; }
.asst-empty .s { font-size: 14.5px; color: var(--p-muted); line-height: 1.45; max-width: 300px; }
.asst-chips { margin-top: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-bottom: 6px; }
.a-chip {
  display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--p-violet-soft); background: var(--p-surface);
  color: var(--p-ink-2); border-radius: 999px; padding: 5px 12px; font-size: 13.5px; font-weight: 500;
}
.a-chip.fill { background: var(--p-ai-grad); border-color: transparent; color: var(--p-surface); font-weight: 600; }
.asst-input {
  flex: none; margin: 10px 20px 18px; height: 50px; border: 1px solid var(--p-border); border-radius: 12px;
  background: var(--p-surface); display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px;
  color: var(--p-subtle); font-size: 14.5px;
}
.asst-input .ph-text { flex: 1; }
.asst-input .send { width: 32px; height: 32px; border-radius: 50%; background: var(--p-violet-soft); color: var(--p-surface); display: flex; align-items: center; justify-content: center; }
.asst-input .send.on { background: var(--p-violet); }

.msg-user { align-self: flex-end; max-width: 340px; background: var(--p-primary); color: var(--p-surface); border-radius: 14px; padding: 12px 16px; font-size: 14.5px; line-height: 1.45; }
.msg-user .file { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, 0.14); border-radius: 999px; padding: 3px 10px; font-size: 12.5px; margin-bottom: 7px; }
.msg-ai { display: flex; gap: 10px; align-items: flex-start; }
.msg-ai .card { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 12px; padding: 14px 16px; font-size: 14.5px; line-height: 1.5; color: var(--p-ink-2); max-width: 330px; }
.msg-ai .card b { color: var(--p-ink); font-weight: 600; }
.steps { display: flex; flex-direction: column; gap: 8px; min-width: 250px; }
.steps .st { display: flex; align-items: center; gap: 9px; color: var(--p-subtle); font-size: 13.5px; background: var(--p-panel); border-radius: 8px; padding: 9px 12px; }
.steps .st.done { color: var(--p-muted); }
.steps .st.done svg { color: var(--p-ink-2); }
.steps .st.now { color: var(--p-ink-2); }
.parsed-head { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); text-transform: uppercase; margin-top: 4px; }
.parsed-desc { font-size: 13.5px; color: var(--p-muted); line-height: 1.45; margin-top: -8px; }
.parsed { border-left: 3px solid var(--p-parsed); padding: 4px 4px 4px 13px; display: flex; flex-direction: column; gap: 6px; transition: opacity 300ms, max-height 400ms; }
.parsed .row { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--p-ink-2); min-width: 0; }
.parsed .row b { font-weight: 600; color: var(--p-ink); flex: none; }
.parsed .row .v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; }
.parsed .why { font-size: 13px; font-style: italic; color: var(--p-muted); line-height: 1.45; }
.parsed .acts { display: flex; gap: 8px; }
.parsed .keep { height: 30px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--p-indigo-ink); color: var(--p-indigo-ink); font-size: 13px; font-weight: 600; display: inline-flex; align-items: center; background: transparent; }
.parsed .dismiss { height: 30px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--p-border); color: var(--p-muted); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; background: transparent; }
.parsed.kept { border-left-color: var(--p-green); }
.parsed.kept .acts { display: none; }
.parsed.kept .why::after { content: "  Kept"; font-style: normal; font-weight: 600; color: var(--p-green); }
.parsed.gone { opacity: 0; }

/* ---------- Requests list ---------- */
.rl { flex: 1; min-height: 0; overflow: hidden; padding: 32px 0 0; }
.rl-in { width: 1086px; margin: 0 auto; display: flex; flex-direction: column; gap: 22px; }
.asst + .main .rl-in { width: 915px; }
.rl-top { display: flex; align-items: center; justify-content: space-between; }
.seg { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--p-line); background: var(--p-panel); border-radius: 12px; }
.seg .s-tab { display: inline-flex; align-items: center; gap: 8px; height: 31px; padding: 0 14px; border-radius: 9px; font-size: 14px; color: var(--p-muted); border: 1px solid transparent; }
.seg .s-tab.on { background: var(--p-surface); color: var(--p-ink); border-color: var(--p-line); box-shadow: var(--p-shadow-sm); font-weight: 500; }
.rl-search { display: flex; gap: 10px; align-items: center; margin-top: -2px; }
.p-search { flex: 1; height: 37px; border: 1px solid var(--p-border); border-radius: 9px; background: var(--p-surface); display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--p-muted); font-size: 15px; }
.p-search svg { color: var(--p-violet); }
.p-search .q.typed { color: var(--p-ink); }
.rl-search .p-btn { height: 37px; font-size: 15px; }
.rl-search .of { color: var(--p-muted); font-size: 13.5px; white-space: nowrap; }

.rq-card { background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 14px; display: grid; grid-template-columns: 1fr 330px; box-shadow: var(--p-shadow-sm); }
.asst + .main .rq-card { grid-template-columns: 1fr 308px; }
.rq-card .l { padding: 22px 24px 18px; min-width: 0; }
.rq-card .r { border-left: 1px solid var(--p-line); padding: 20px; }
.rq-status { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; color: var(--p-indigo-ink); }
.rq-status .left { color: var(--p-green); display: inline-flex; align-items: center; gap: 5px; }
.rq-status .grow { flex: 1; }
.org { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--p-border); border-radius: 999px; padding: 4px 12px 4px 5px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--p-ink); }
.org i { width: 24px; height: 24px; border-radius: 50%; background: var(--p-primary); color: var(--p-surface); font-style: normal; font-size: 12px; display: flex; align-items: center; justify-content: center; }
.why-chip { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; background: var(--p-tint); border: 1px solid var(--p-tint-line); border-radius: 999px; padding: 5px 13px; font-size: 13px; font-weight: 600; color: var(--p-indigo-ink); }
.why-chip svg { color: var(--p-violet); }
.rq-title { font-size: 20px; font-weight: 700; color: var(--p-ink); margin-top: 12px; letter-spacing: -0.01em; }
.rq-sub { font-size: 14.5px; color: var(--p-muted); margin-top: 4px; }
.rq-fields { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); margin-top: 18px; padding: 16px 0; }
.rq-fields > div { padding: 0 16px; border-left: 1px solid var(--p-line); }
.rq-fields > div:first-child { padding-left: 0; border-left: none; }
.rq-fields .k { font-size: 13px; color: var(--p-muted); }
.rq-fields .v { font-size: 14.5px; font-weight: 600; color: var(--p-ink); margin-top: 6px; line-height: 1.35; }
.funnel { border: 1px solid var(--p-line); border-radius: 10px; padding: 12px 14px 12px; margin-top: 16px; }
.funnel .hd { display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--p-muted); }
.funnel .warn { display: inline-flex; align-items: center; gap: 5px; color: var(--p-red); background: var(--p-red-bg); border: 1px solid var(--p-red-line); border-radius: 6px; padding: 2px 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; }
.funnel .warn.ok { color: var(--p-green); background: var(--p-green-bg); border-color: var(--p-green-line); }
.funnel .stats { display: grid; grid-template-columns: repeat(6, 1fr); margin-top: 10px; }
.funnel .stats .k { font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--p-muted); text-transform: uppercase; }
.funnel .stats .v { font-size: 17px; font-weight: 700; margin-top: 3px; color: var(--p-ink); }
.funnel .stats .v small { font-size: 11px; font-weight: 500; color: var(--p-muted); margin-left: 3px; }
.funnel .track { height: 6px; border-radius: 999px; background: var(--p-line); margin-top: 10px; overflow: hidden; }
.funnel .track i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p-violet-soft), var(--p-violet)); }
.rq-ai { border: 1px solid var(--p-line); border-radius: 12px; padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.rq-ai .note { background: var(--p-tint-2); border: 1px solid var(--p-border); border-radius: 10px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; color: var(--p-ink-2); display: flex; gap: 10px; }
.rq-ai .note .ai-ico { width: 20px; height: 20px; margin-top: 1px; }
.rq-ai .note b { color: var(--p-indigo-ink); font-weight: 600; }
.rq-ai .p-btn { width: 100%; border-radius: 999px; height: 36px; font-size: 14px; }
.rq-ai .more { text-align: center; color: var(--p-muted); font-size: 13.5px; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 5px; margin-top: 2px; }

/* ---------- Settings / SOP ---------- */
.sopp { flex: 1; min-height: 0; overflow: hidden; padding: 34px 0 0; }
.sop-in { width: 831px; margin: 0 auto; }
.sopp h1 { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.sopp .sub { font-size: 15px; color: var(--p-muted); margin-top: 8px; }
.sop-card { margin-top: 24px; background: var(--p-surface); border: 1px solid var(--p-border); border-radius: 16px; padding: 22px 24px; }
.sop-card .hd { display: flex; gap: 12px; align-items: flex-start; }
.sop-card .hd .t { font-size: 15px; font-weight: 600; }
.sop-card .hd .d { font-size: 14.5px; color: var(--p-muted); margin-top: 6px; line-height: 1.45; max-width: 600px; }
.sop-card .hd .grow { flex: 1; }
.sop-meta { display: flex; align-items: center; gap: 10px; margin-top: 18px; font-size: 13px; color: var(--p-muted); }
.sop-meta .pillc { border: 1px solid var(--p-border); border-radius: 999px; padding: 3px 10px; color: var(--p-ink); font-weight: 600; }
.sop-meta .grow { flex: 1; }
.sop-meta .rm { color: var(--p-red); display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; }
.sop-proc { margin-top: 18px; border: 1px solid var(--p-line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sop-proc .hd2 { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--p-ink-2); }
.sop-proc .f { display: flex; align-items: center; gap: 9px; background: var(--p-panel); border-radius: 8px; padding: 9px 12px; font-size: 13.5px; color: var(--p-ink-2); position: relative; overflow: hidden; }
.sop-proc .f .st { margin-left: auto; color: var(--p-subtle); font-size: 12.5px; }
.sop-proc .f.ok .st { color: var(--p-green); font-weight: 600; }
.sop-proc .f.run::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.8) 50%, transparent 70%); transform: translateX(-100%); animation: pshim 1.3s infinite; }
@keyframes pshim { to { transform: translateX(100%); } }
.rules { margin-top: 16px; border: 1px solid var(--p-line); border-radius: 12px; padding: 12px; max-height: 492px; overflow: hidden; display: flex; flex-direction: column; gap: 8px; }
.rules .grp { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); padding: 2px 2px 2px; }
.rules .grp span { font-weight: 500; letter-spacing: 0; color: var(--p-subtle); margin-left: 4px; }
.rule { border: 1px solid var(--p-border); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 22px 1fr auto 24px; gap: 4px 10px; align-items: start; }
.rule .rd { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--p-subtle); margin-top: 2px; }
.rule .tx { font-size: 14.5px; line-height: 1.4; color: var(--p-ink); }
.rule .meta { grid-column: 2 / 5; font-size: 12.5px; color: var(--p-muted); }
.rule .meta b { font-weight: 500; color: var(--p-ink-2); }
.rule .del { color: var(--p-subtle); margin-top: 2px; }

/* ---------- Request (draft and published) ---------- */
.rq { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--p-canvas); }
.rq-head { flex: none; padding: 20px 32px 0; background: var(--p-canvas); }
.rq-h1 { display: flex; align-items: center; gap: 14px; min-width: 0; }
.rq-h1 .back { display: inline-flex; align-items: center; gap: 7px; color: var(--p-muted); font-size: 15px; flex: none; }
.rq-h1 .ttl { font-size: 19px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: -0.01em; }
.rq-h1 .id { color: var(--p-muted); font-size: 15px; white-space: nowrap; flex: none; }
.rq-h1 .grow { flex: 1; }
.rq-h2 { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 8px; }
.saved { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--p-green-line); border-radius: 8px; padding: 0 10px; height: 30px; color: var(--p-green); font-size: 13px; }
.stepper { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-bottom: 14px; }
.stp { display: inline-flex; align-items: center; gap: 9px; font-size: 14px; color: var(--p-muted); white-space: nowrap; }
.stp .c { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--p-border); background: var(--p-surface); display: flex; align-items: center; justify-content: center; color: var(--p-muted); }
.stp.on { color: var(--p-ink); font-weight: 600; }
.stp.on .c { box-shadow: 0 0 0 3px var(--p-tint); border-color: var(--p-violet-soft); color: var(--p-indigo-ink); }
.stp.ok { color: var(--p-ink-2); }
.stp.ok .c { background: var(--p-primary); border-color: var(--p-primary); color: var(--p-surface); }
.stp-line { flex: 1; height: 1px; background: var(--p-border); min-width: 20px; }
.stp-line.ok { height: 2px; background: var(--p-primary); }
.rq-tabs { display: flex; gap: 30px; border-bottom: 1px solid var(--p-line); margin: 0 -32px; padding: 0 48px; }
.rq-tab { padding: 10px 2px 12px; font-size: 15px; color: var(--p-muted); position: relative; display: inline-flex; align-items: center; gap: 7px; }
.rq-tab.on { color: var(--p-ink); font-weight: 600; }
.rq-tab.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--p-primary); border-radius: 2px; }
.rq-scroll { flex: 1; min-height: 0; overflow: hidden; position: relative; border-top: 1px solid var(--p-line); }
.rq-scroll.notop { border-top: none; }
.rq-body { padding: 16px 32px 40px; display: flex; flex-direction: column; gap: 16px; transition: transform 900ms cubic-bezier(0.45, 0.05, 0.25, 1); }

.ai-banner { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 16px; background: var(--p-tint); border: 1px solid var(--p-tint-line); border-radius: 999px; font-size: 13.5px; color: var(--p-indigo-ink); transition: opacity 400ms; }
.sec { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 16px; padding: 22px 24px; }
.sec-hd { display: flex; align-items: center; gap: 10px; }
.sec-hd .t { font-size: 17px; font-weight: 600; color: var(--p-ink); }
.sec-hd .bulb { color: var(--p-amber); }
.sec-hd .grow { flex: 1; }
.sec-hd .chev { color: var(--p-muted); }
.sec-d { font-size: 14.5px; color: var(--p-muted); margin-top: 12px; line-height: 1.45; }
.fl { margin-top: 18px; }
.fl .lb { font-size: 12px; font-weight: 500; letter-spacing: 0.06em; color: var(--p-muted); text-transform: uppercase; }
.fl .in { margin-top: 8px; min-height: 40px; border: 1px solid var(--p-field); border-radius: 8px; background: var(--p-canvas); padding: 10px 12px; font-size: 15px; line-height: 1.4; color: var(--p-ink); transition: background 500ms, border-color 500ms; }
.fl .in.ph { color: var(--p-muted); }
.fl .in.area { min-height: 92px; }
.fl .in.flash { background: var(--p-tint-2); border-color: var(--p-violet-soft); }
.fl .row2 { display: flex; gap: 10px; }
.fl .row2 .in { display: flex; align-items: center; gap: 10px; }
.addr { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.addr .a { display: flex; align-items: center; gap: 10px; border: 1px solid var(--p-field); border-radius: 8px; background: var(--p-canvas); padding: 9px 12px; font-size: 14.5px; }
.addr .a .tag { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--p-muted); background: var(--p-line); border-radius: 5px; padding: 2px 6px; }
.tgl-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-top: 1px solid var(--p-line); font-size: 15px; font-weight: 600; color: var(--p-ink-2); }
.tgl-row:first-of-type { margin-top: 18px; }

.tbl { margin-top: 16px; border: 1px solid var(--p-line); border-radius: 12px; overflow: hidden; }
.tbl .bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); border-bottom: 1px solid var(--p-line); }
.tbl .bar .x { display: inline-flex; align-items: center; gap: 6px; letter-spacing: 0; font-size: 13.5px; font-weight: 500; color: var(--p-ink-2); }
.tbl .th, .tbl .tr { display: grid; grid-template-columns: 70px 230px 1fr 60px 120px 110px; align-items: start; }
.tbl.tco .th, .tbl.tco .tr { grid-template-columns: 70px 1fr 170px 60px 90px 110px; }
.tbl .th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted); padding: 10px 14px; border-bottom: 1px solid var(--p-line); background: var(--p-panel); }
.tbl .th > div, .tbl .tr > div { padding: 0 8px; }
.tbl .grp { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: var(--p-panel); border-bottom: 1px solid var(--p-line); font-size: 15px; font-weight: 600; }
.tbl .grp .g { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--p-muted); background: var(--p-line); border-radius: 5px; padding: 3px 7px; }
.tbl .grp .n { font-size: 13px; font-weight: 400; color: var(--p-muted); margin-left: auto; }
.tbl .tr { padding: 12px 14px; border-bottom: 1px solid var(--p-line); font-size: 14.5px; line-height: 1.4; color: var(--p-ink-2); }
.tbl .tr .src { color: var(--p-lavender); padding-top: 2px; }
.tbl .tr .src.ai { color: var(--p-violet); }
.pb-note { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 6px 12px; border-radius: 999px; background: var(--p-tint); border: 1px solid var(--p-tint-line); color: var(--p-indigo-ink); font-size: 13.5px; }
.tbl .tr .nm { font-weight: 500; color: var(--p-ink); }
.tbl .tr .ds { color: var(--p-ink-2); }
.tbl .tr.new { animation: rowIn 420ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes rowIn { from { opacity: 0; transform: translateY(6px); background: var(--p-tint-2); } to { opacity: 1; transform: none; } }
.tbl .foot { padding: 10px 14px; font-size: 13.5px; color: var(--p-muted); display: flex; gap: 10px; align-items: center; }

.crit-tabs { display: inline-flex; gap: 2px; padding: 4px; border: 1px solid var(--p-line); background: var(--p-panel); border-radius: 10px; margin-top: 16px; }
.crit-tabs .ct { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px; border-radius: 8px; font-size: 14px; color: var(--p-muted); border: 1px solid transparent; }
.crit-tabs .ct.on { background: var(--p-surface); color: var(--p-ink); border-color: var(--p-line); box-shadow: var(--p-shadow-sm); font-weight: 500; }
.crit-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.crit { display: grid; grid-template-columns: 26px 1fr 42px; gap: 12px; align-items: center; }
.crit .ic { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.crit .ic.ai { background: var(--p-tint); color: var(--p-violet); }
.crit .ic.sop { color: var(--p-sop); }
.crit .ic.doc { color: var(--p-lavender); }
.add-req { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 15px; font-weight: 500; color: var(--p-indigo-ink); }
.adddoc { display: flex; align-items: center; gap: 12px; margin-top: 16px; font-size: 13.5px; color: var(--p-muted); }
.adddoc .p-btn { height: 34px; font-size: 14.5px; font-weight: 500; color: var(--p-ink-2); }
.fl .in .tail { margin-left: auto; color: var(--p-muted); }
.asst-input .send.stop { background: var(--p-violet); }
.app-bar { flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 28px 0 40px; border-bottom: 1px solid var(--p-line); background: var(--p-surface); font-size: 14px; }
.app-bar .num { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--p-border); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--p-muted); }
.app-bar b { font-weight: 600; color: var(--p-ink); }
.app-bar .cur { color: var(--p-muted); font-weight: 500; }
.app-bar .grow { flex: 1; }
.app-bar .vis { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--p-ink-2); }
.sopm { margin-top: 10px; display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); border: 1px solid var(--p-line); border-radius: 10px; padding: 8px 12px; }
.sopm .sc { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--p-orange); background: var(--p-orange-bg); border-radius: 5px; padding: 1px 6px; letter-spacing: 0; }
.sopm .sc.full { color: var(--p-green); background: var(--p-green-bg); }
.sopm .nt { font-weight: 500; letter-spacing: 0; color: var(--p-muted); font-size: 12.5px; }
.crit .in { border: 1px solid var(--p-field); border-radius: 8px; background: var(--p-canvas); padding: 9px 12px; font-size: 14.5px; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crit.new .in { background: var(--p-tint-2); border-color: var(--p-violet-soft); }

.wcrit { border: 1px solid var(--p-line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr 76px; gap: 10px 16px; align-items: center; }
.wcrit .nm { font-size: 14.5px; font-weight: 500; color: var(--p-ink); display: flex; align-items: center; gap: 8px; }
.wcrit .wt { border: 1px solid var(--p-field); border-radius: 8px; height: 34px; display: flex; align-items: center; justify-content: flex-end; padding: 0 10px; gap: 4px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.wcrit .wt small { color: var(--p-muted); font-weight: 500; font-size: 13px; }
.wcrit .sl { grid-column: 1 / 2; height: 6px; border-radius: 999px; background: var(--p-line); position: relative; }
.wcrit .sl i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--p-primary); transition: width 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.wcrit .sl b { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--p-surface); border: 2px solid var(--p-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); transition: left 600ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.wtotal { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); margin-top: 14px; }
.wtotal b { font-size: 14px; color: var(--p-green); letter-spacing: 0; display: inline-flex; align-items: center; gap: 4px; }

.sop-sug { margin-top: 14px; background: var(--p-sop-bg); border: 1px solid var(--p-sop-line); border-radius: 12px; padding: 14px 16px; }
.sop-sug .sug-h { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--p-sop); }
.sop-sug .x { font-size: 14.5px; line-height: 1.45; color: var(--p-ink); margin-top: 8px; }
.sop-sug .src { font-size: 12.5px; color: var(--p-muted); margin-top: 6px; }
.sop-sug .acts { display: flex; gap: 8px; margin-top: 12px; }
.sop-sug.applied { background: var(--p-surface); }
.sop-sug.applied .acts { display: none; }
.terms { margin-top: 14px; border: 1px solid var(--p-line); border-radius: 12px; overflow: hidden; }
.terms .th, .terms .tr { display: grid; grid-template-columns: 70px 220px 1fr; padding: 10px 14px; align-items: start; }
.terms .th { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--p-muted); border-bottom: 1px solid var(--p-line); background: var(--p-panel); }
.terms .tr { font-size: 14.5px; line-height: 1.4; border-bottom: 1px solid var(--p-line); color: var(--p-ink-2); }
.terms .tr:last-child { border-bottom: none; }
.terms .tr .nm { font-weight: 500; color: var(--p-ink); }
.terms .tr .sopi { color: var(--p-sop); }

.modal-veil { position: absolute; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.46); display: flex; align-items: center; justify-content: center; }
.modal { width: 460px; background: var(--p-surface); border-radius: 14px; padding: 24px; box-shadow: var(--p-shadow-lg); }
.modal .t { font-size: 18px; font-weight: 700; }
.modal .d { font-size: 14.5px; line-height: 1.5; color: var(--p-muted); margin-top: 10px; }
.modal .acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- Published request: participants ---------- */
.close-bar { display: flex; align-items: center; gap: 12px; background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 12px; padding: 12px 16px; font-size: 14px; color: var(--p-ink-2); }
.close-bar .grow { flex: 1; }
.close-bar .sm2 { font-size: 13px; color: var(--p-muted); }
.agent { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 14px; padding: 16px 18px; }
.agent .hd { display: flex; align-items: center; gap: 12px; }
.agent .hd .ai-ico { width: 34px; height: 34px; border-radius: 9px; }
.agent .hd .t { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.agent .hd .s { font-size: 13px; color: var(--p-muted); margin-top: 2px; }
.agent .hd .grow { flex: 1; }
.agent .big { font-size: 30px; font-weight: 700; color: var(--p-ink); font-variant-numeric: tabular-nums; text-align: right; line-height: 1; }
.agent .big small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); margin-top: 4px; }
.live { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; color: var(--p-green); background: var(--p-green-bg); border-radius: 999px; padding: 2px 8px; }
.live i { width: 6px; height: 6px; border-radius: 50%; background: var(--p-green); animation: lpulse 1.2s ease-in-out infinite; }
@keyframes lpulse { 50% { opacity: 0.25; } }
.agent .log { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.agent .log .ln { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--p-muted); }
.agent .log .ln svg { color: var(--p-green); }
.agent .log .ln.run svg { color: var(--p-violet); }
.agent .counters { display: flex; gap: 22px; text-align: right; }
.agent .counters div { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.agent .counters small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); }
.found-hd { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.found-hd .t { font-size: 13.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--p-indigo-ink); }
.found-hd .s { font-size: 13px; color: var(--p-muted); }
.found-hd .grow { flex: 1; }
.sup { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 46px 1fr 180px; gap: 14px; align-items: start; }
.sup .mono { width: 46px; height: 46px; border-radius: 9px; background: var(--p-line); color: var(--p-indigo-ink); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sup .nm { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; flex-wrap: wrap; }
.sup .nm .ver { color: var(--p-green); }
.sup .pill2 { font-size: 12px; font-weight: 600; border: 1px solid var(--p-border); border-radius: 999px; padding: 2px 9px; color: var(--p-ink-2); display: inline-flex; align-items: center; gap: 4px; }
.sup .pill2 svg { color: var(--p-violet); }
.sup .score { font-size: 12px; font-weight: 600; background: var(--p-primary); color: var(--p-surface); border-radius: 999px; padding: 3px 10px; }
.sup .meta { font-size: 13px; color: var(--p-muted); margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
.sup .meta span { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--p-line); border-radius: 999px; padding: 3px 10px; }
.sup .acts { display: flex; flex-direction: column; gap: 8px; }
.sup .acts .p-btn { height: 34px; font-size: 13.5px; border-radius: 999px; }
.sup.invited { border-color: var(--p-green-line); }
.sup .inv { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--p-green); background: var(--p-green-bg); border-radius: 999px; padding: 3px 10px; }
.sup .inv.pq { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--p-green-line); }
/* v3: supplier origin on the found list, and the collaborators the buyer
   invites to validate the draft (Team & Permissions). */
.sup .pill2.exist { background: var(--p-panel); }
.sup .pill2.fresh { border-color: var(--p-violet-soft); color: var(--p-indigo-ink); background: var(--p-tint-2); }
.team { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.tm-row { display: grid; grid-template-columns: 36px 1fr auto 150px; gap: 12px; align-items: center; border: 1px solid var(--p-line); border-radius: 10px; padding: 9px 12px; background: var(--p-surface); }
.tm-av { width: 36px; height: 36px; border-radius: 50%; background: var(--p-tint); color: var(--p-indigo-ink); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.tm-av.own { background: var(--p-primary); color: var(--p-surface); }
.tm-name { font-size: 14px; font-weight: 600; color: var(--p-ink); }
.tm-kind { font-size: 12.5px; color: var(--p-muted); margin-top: 1px; }
.tm-perm { font-size: 12.5px; color: var(--p-ink-2); border: 1px solid var(--p-border); border-radius: 999px; padding: 2px 10px; }
.tm-st { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--p-muted); justify-self: end; }
.tm-st.appr { color: var(--p-green); }
#inviteCollab { margin-top: 10px; }
.agent .funnel .track i { transition: width 900ms cubic-bezier(0.2, 0.8, 0.2, 1); }

.drawer-veil { position: absolute; inset: 0; z-index: 45; background: rgba(0, 0, 0, 0.32); }
.drawer { position: absolute; top: 0; right: 0; bottom: 0; width: 520px; z-index: 46; background: var(--p-surface); box-shadow: var(--p-shadow-lg); padding: 24px 26px; display: flex; flex-direction: column; gap: 16px; transform: translateX(100%); transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.drawer.open { transform: none; }
.drawer .hd { display: flex; gap: 14px; align-items: center; }
.drawer .hd .mono { width: 52px; height: 52px; border-radius: 10px; background: var(--p-line); color: var(--p-indigo-ink); font-weight: 700; font-size: 16px; display: flex; align-items: center; justify-content: center; }
.drawer .hd .t { font-size: 19px; font-weight: 700; }
.drawer .hd .s { font-size: 13.5px; color: var(--p-muted); margin-top: 3px; }
.match { border: 1px solid var(--p-border); background: var(--p-tint-2); border-radius: 12px; padding: 14px 16px; }
.match .top { display: flex; align-items: center; gap: 10px; }
.match .lbl { display: inline-flex; align-items: center; gap: 6px; background: var(--p-ai-grad); color: var(--p-surface); border-radius: 999px; padding: 4px 11px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; }
.match .pct { margin-left: auto; font-size: 28px; font-weight: 700; color: var(--p-indigo-ink); }
.match .why { font-size: 13.5px; color: var(--p-ink-2); margin-top: 8px; line-height: 1.45; }
.mrow { display: grid; grid-template-columns: 1fr 52px; gap: 6px 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--p-line); }
.mrow .k { font-size: 14px; font-weight: 600; color: var(--p-ink); }
.mrow .v { font-size: 13.5px; font-weight: 600; text-align: right; color: var(--p-ink-2); }
.mrow .d { grid-column: 1 / 3; font-size: 13px; color: var(--p-muted); }
.mrow .bar { grid-column: 1 / 3; height: 5px; border-radius: 999px; background: var(--p-line); overflow: hidden; }
.mrow .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--p-violet), var(--p-create)); }
/* v2: eight matching parameters have to fit the drawer's 810px, so the list
   runs tighter than v1's four rows did. */
.mlist-hd { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--p-muted); padding-bottom: 2px; }
.mlist .mrow { padding: 6px 0; gap: 3px 12px; }
.mlist .mrow .k { font-size: 13.5px; }
.mlist .mrow .d { font-size: 12.5px; }

/* ---------- Comparison ---------- */
.goal { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--p-muted); }
.goal .k { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); display: inline-flex; align-items: center; gap: 6px; }
.goal .dd { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--p-border); border-radius: 9px; height: 36px; padding: 0 12px; background: var(--p-surface); color: var(--p-ink-2); font-size: 14px; }
.goal .dd svg.s { color: var(--p-violet); }
.goal .dd b { font-weight: 600; color: var(--p-ink); }
.goal .grow { flex: 1; }
.rec { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 14px; overflow: hidden; }
.rec .hd { display: flex; align-items: center; gap: 12px; padding: 16px 18px; background: linear-gradient(90deg, var(--p-surface) 40%, var(--p-tint) 100%); border-bottom: 1px solid var(--p-line); }
.rec .hd .ai-ico { width: 34px; height: 34px; border-radius: 50%; }
.rec .hd .t { font-size: 15.5px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.rec .hd .s { font-size: 13px; color: var(--p-muted); margin-top: 2px; }
.rec .hd .grow { flex: 1; }
.rec .hd .n { text-align: right; font-size: 26px; font-weight: 700; line-height: 1; }
.rec .hd .n small { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); margin-top: 3px; }
.rec .bd { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.rec .line { background: var(--p-panel); border: 1px solid var(--p-line); border-radius: 10px; padding: 11px 14px; font-size: 14px; color: var(--p-ink-2); display: flex; gap: 8px; align-items: center; }
.rec .line svg { color: var(--p-violet); }
.rec .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.opt { border: 1px solid var(--p-line); border-radius: 12px; padding: 16px; }
.opt.pick { border: 2px solid var(--p-lavender); padding: 15px; }
.opt .lh { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); }
.opt .lh .grow { flex: 1; }
.opt .lh .ontab { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--p-ink-2); border: 1px solid var(--p-border); border-radius: 999px; padding: 2px 9px; display: inline-flex; gap: 5px; align-items: center; }
.opt .lh .aipick { font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--p-surface); background: var(--p-primary); border-radius: 999px; padding: 3px 10px; display: inline-flex; gap: 5px; align-items: center; }
.opt .nm { font-size: 17px; font-weight: 700; margin-top: 10px; }
.opt .loc { font-size: 13px; color: var(--p-muted); margin-top: 2px; }
.opt .pr { font-size: 26px; font-weight: 700; color: var(--p-indigo-ink); margin-top: 10px; font-variant-numeric: tabular-nums; }
.opt .dl { font-size: 13.5px; color: var(--p-green); margin-top: 2px; }
.opt .cov { font-size: 13px; color: var(--p-ink-2); margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.opt .cov i { width: 7px; height: 7px; border-radius: 50%; background: var(--p-green); }
.opt .why { margin-top: 12px; border: 1px solid var(--p-line); border-radius: 10px; padding: 10px 12px; }
.opt .why .k { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); }
.opt .why ul { list-style: none; margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.opt .why li { display: flex; gap: 7px; font-size: 13.5px; color: var(--p-ink-2); line-height: 1.4; }
.opt .why li svg { color: var(--p-muted); margin-top: 2px; }
.opt .p-btn.go { margin-top: 12px; width: 100%; border-radius: 999px; }

.sheet { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 14px; overflow: hidden; }
.sheet .cap { padding: 14px 16px; display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--p-line); }
.sheet .cap span { font-size: 13px; font-weight: 400; color: var(--p-muted); }
.sheet .g { display: grid; grid-template-columns: 220px repeat(5, 1fr); }
.sheet .g > div { padding: 10px 12px; border-right: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); min-width: 0; }
.sheet .g > div:nth-child(6n) { border-right: none; }
.sheet .sh { font-size: 13.5px; }
.sheet .sh .who { display: flex; align-items: center; gap: 7px; font-weight: 600; color: var(--p-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .sh .who i { width: 22px; height: 22px; border-radius: 50%; flex: none; background: var(--p-primary); color: var(--p-surface); font-style: normal; font-size: 10.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sheet .sh .tot { font-size: 13px; font-weight: 600; margin-top: 6px; color: var(--p-ink-2); }
.sheet .sh .sub { font-size: 12px; color: var(--p-muted); margin-top: 2px; }
.sheet .sh .sub b { color: var(--p-green); font-weight: 700; font-size: 11px; letter-spacing: 0.04em; }
.sheet .sec2 { grid-column: 1 / -1; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); background: var(--p-panel); }
.sheet .ln .code { font-size: 11px; letter-spacing: 0.04em; color: var(--p-subtle); font-family: ui-monospace, "SF Mono", Menlo, monospace; }
.sheet .ln .nm { font-size: 13.5px; font-weight: 600; color: var(--p-ink); margin-top: 2px; }
.sheet .ln .q { font-size: 12px; color: var(--p-muted); margin-top: 2px; }
.sheet .cell { font-variant-numeric: tabular-nums; }
.sheet .cell .p { font-size: 14px; font-weight: 700; color: var(--p-ink); display: flex; align-items: center; gap: 6px; }
.sheet .cell .p .lo { font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; color: var(--p-green); background: var(--p-green-bg); border-radius: 4px; padding: 1px 5px; }
.sheet .cell .p .ck { color: var(--p-indigo-ink); }
.sheet .cell .s2 { font-size: 12px; color: var(--p-muted); margin-top: 2px; }
.sheet .cell.best { background: var(--p-panel); box-shadow: inset 0 0 0 1.5px var(--p-violet-soft); }
.sheet .np .v { font-size: 14px; font-weight: 700; }
.sheet .np .v small { font-size: 11.5px; font-weight: 500; color: var(--p-muted); }
.sheet .np .v.hi { color: var(--p-green); }
.sheet .np .v.mid { color: var(--p-orange); }
.sheet .np .bar { height: 4px; border-radius: 999px; background: var(--p-line); margin-top: 6px; overflow: hidden; }
.sheet .np .bar i { display: block; height: 100%; border-radius: 999px; }
.sheet .np .bar i.hi { background: var(--p-green-bar); }
.sheet .np .bar i.mid { background: var(--p-amber); }
.sheet .nk { font-size: 13.5px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.sheet .nk small { font-size: 11.5px; font-weight: 600; color: var(--p-muted); border: 1px solid var(--p-line); border-radius: 5px; padding: 1px 5px; }

/* ---------- Final summary ---------- */
.win { background: linear-gradient(100deg, var(--p-tint) 0%, var(--p-surface) 55%, var(--p-tint) 100%); border: 1px solid var(--p-border); border-radius: 16px; padding: 20px 22px; display: flex; align-items: center; gap: 16px; }
.win .tr { width: 52px; height: 52px; border-radius: 12px; background: var(--p-ai-grad); color: var(--p-surface); display: flex; align-items: center; justify-content: center; }
.win .k { font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; color: var(--p-muted); }
.win .nm { font-size: 22px; font-weight: 700; margin-top: 2px; letter-spacing: -0.01em; }
.win .loc { font-size: 13.5px; color: var(--p-muted); margin-top: 2px; }
.win .grow { flex: 1; }
.win .val { text-align: right; }
.win .val .k { text-align: right; }
.win .val .v { font-size: 26px; font-weight: 700; color: var(--p-indigo-ink); font-variant-numeric: tabular-nums; margin-top: 2px; }
.win .val .d { font-size: 13.5px; color: var(--p-green); margin-top: 2px; }
.whyw { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 14px; padding: 16px 18px; }
.whyw .k { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--p-ink); }
.whyw .k .ai-tag { display: inline-flex; align-items: center; gap: 4px; background: var(--p-ai-grad); color: var(--p-surface); border-radius: 999px; padding: 2px 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; }
.whyw ul { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.whyw li { display: flex; gap: 10px; font-size: 14.5px; color: var(--p-ink-2); }
.whyw li::before { content: "•"; color: var(--p-violet); font-weight: 700; }
.hist { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: 14px; overflow: hidden; }
.hist .cap { padding: 14px 16px; font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); border-bottom: 1px solid var(--p-line); }
.hist .r { display: grid; grid-template-columns: 1fr 150px 150px 130px 120px; padding: 11px 16px; border-bottom: 1px solid var(--p-line); font-size: 14px; align-items: center; color: var(--p-ink-2); font-variant-numeric: tabular-nums; }
.hist .r:last-child { border-bottom: none; }
.hist .r.h { font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--p-muted); padding-top: 9px; padding-bottom: 9px; }
.hist .r .w { font-weight: 600; color: var(--p-ink); }
.hist .r .res { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; }
.hist .r .res.win2 { color: var(--p-indigo-ink); }
.hist .r .sv { color: var(--p-green); }
.hist .r.winner { background: var(--p-tint); }