/* ══════════════════════════════════════════════════════════════════
   BAILEY RAG — Flagship Product Live Demo / Simulation
   (실제 구현 제품의 UI를 인터랙티브하게 재현한 데모 섹션)
   bmw.css 의 디자인 토큰(:root 변수)을 그대로 사용한다.
   ══════════════════════════════════════════════════════════════════ */
.brag-band { position: relative; background: var(--dark-canvas); color: var(--dark-fg); padding: var(--sp-section) 0; overflow: hidden; }
.brag-band::before { content: ""; position: absolute; inset: 0; background:
    radial-gradient(900px 420px at 12% -8%, rgba(244,123,123,0.14), transparent 60%),
    radial-gradient(820px 420px at 92% 8%, rgba(90,134,120,0.16), transparent 60%); pointer-events: none; }
.brag-band .page-wrap { position: relative; z-index: 1; }
.brag-band .section-header { border-bottom-color: var(--dark-hairline); }
.brag-band .section-header h2 { color: var(--dark-fg); }
.brag-band .section-header p { color: var(--dark-fg-soft); }
.brag-eyebrow-row { display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-md); flex-wrap: wrap; }
.brag-eyebrow-row .section-eyebrow { margin-bottom: 0; }
.brag-pill { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--cb-lime); background: rgba(184,198,106,0.12); border: 1px solid rgba(184,198,106,0.32); border-radius: 999px; padding: 4px 11px; }
.brag-pill .d { width: 7px; height: 7px; border-radius: 50%; background: var(--cb-lime); box-shadow: 0 0 8px var(--cb-lime); animation: liveBlink 1.4s ease-in-out infinite; }
.brag-pill.gray { color: var(--dark-fg-muted); background: rgba(255,255,255,0.05); border-color: var(--dark-hairline); }
.brag-pill.gray .d { background: var(--dark-fg-muted); box-shadow: none; animation: none; }

/* App window shell */
.brag-shell { margin-top: var(--sp-xxl); background: #1f1f1f; border: 1px solid #383838; border-radius: 14px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7); }
.brag-titlebar { display: flex; align-items: center; gap: var(--sp-sm); padding: 11px 16px; background: #161616; border-bottom: 1px solid #2c2c2c; }
.brag-titlebar .dot { width: 12px; height: 12px; border-radius: 50%; }
.brag-titlebar .dot.red { background: #ff5f57; } .brag-titlebar .dot.yellow { background: #febc2e; } .brag-titlebar .dot.green { background: #28c941; }
.brag-titlebar .url { flex: 1; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #7a7a7a; }
.brag-titlebar .url b { color: #b7b7b7; font-weight: 600; }
.brag-titlebar .badge100 { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; color: var(--cb-lime); border: 1px solid rgba(184,198,106,0.4); border-radius: 5px; padding: 2px 7px; }

/* Tabs */
.brag-tabs { display: flex; gap: 0; background: #1a1a1a; border-bottom: 1px solid #2c2c2c; overflow-x: auto; }
.brag-tab { flex-shrink: 0; background: none; border: none; border-bottom: 2px solid transparent; color: #8a8a8a; font-family: inherit; font-size: 13px; font-weight: 600; padding: 13px 20px; display: inline-flex; align-items: center; gap: 8px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.brag-tab .ic { font-size: 14px; }
.brag-tab:hover { color: #d8d8d8; background: rgba(255,255,255,0.03); }
.brag-tab.active { color: #fff; border-bottom-color: var(--cb-coral); background: rgba(244,123,123,0.06); }

/* Stage / panels */
.brag-stage { background: #202020; min-height: 460px; }
.brag-panel { display: none; padding: var(--sp-lg); }
.brag-panel.active { display: block; animation: bragFade 0.35s ease; }
@keyframes bragFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Walkthrough — 각 기능 화면을 세로로 펼쳐 나열 (탭 없이 전부 노출) */
.brag-walkthrough { margin-top: var(--sp-xxl); display: flex; flex-direction: column; gap: var(--sp-xxl); }
.brag-screen { scroll-margin-top: 90px; }
.brag-screen-head { display: flex; align-items: flex-start; gap: var(--sp-md); margin-bottom: var(--sp-md); }
.brag-screen-num { flex-shrink: 0; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 800; color: var(--cb-coral); background: rgba(244,123,123,0.1); border: 1px solid rgba(244,123,123,0.32); border-radius: 9px; }
.brag-screen-meta { flex: 1; min-width: 0; }
.brag-screen-meta h3 { display: flex; align-items: center; gap: 9px; font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.3px; margin: 3px 0 5px; }
.brag-screen-meta h3 .ic { font-size: 19px; line-height: 1; }
.brag-screen-meta p { font-size: 13px; line-height: 1.65; color: var(--dark-fg-soft); max-width: 780px; }
.brag-screen-tag { flex-shrink: 0; align-self: center; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px; color: #b3a6ff; background: rgba(154,138,255,0.1); border: 1px solid rgba(154,138,255,0.28); border-radius: 6px; padding: 4px 11px; white-space: nowrap; }
.brag-screen .brag-shell { margin-top: 0; }
.brag-screen-body { background: #202020; padding: var(--sp-lg); }
@media (max-width: 720px) {
  .brag-screen-tag { display: none; }
  .brag-screen-num { width: 32px; height: 32px; font-size: 12px; }
  .brag-screen-meta h3 { font-size: 16px; }
}

/* QA panel — two columns */
.brag-qa { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--sp-lg); }
.brag-col-h { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: #7a7a7a; margin-bottom: var(--sp-sm); }
.brag-query { display: flex; align-items: center; gap: 8px; background: #171717; border: 1px solid #333; border-radius: 9px; padding: 11px 13px; font-family: 'JetBrains Mono', monospace; font-size: 13px; color: #e6e6e6; min-height: 44px; }
.brag-query .pmt { color: var(--cb-coral); font-weight: 700; }
.brag-query .typed { color: #f0f0f0; }
.brag-query .cur { display: inline-block; width: 8px; height: 16px; background: var(--cb-yellow); margin-left: 1px; vertical-align: -3px; animation: caretBlink 1.1s steps(2) infinite; }
.brag-toggle { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp-sm); font-size: 11.5px; color: #9a9a9a; }
.brag-toggle .sw { width: 30px; height: 17px; border-radius: 999px; background: #3a3a3a; position: relative; transition: background 0.2s; flex-shrink: 0; }
.brag-toggle .sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #ddd; transition: left 0.2s; }
.brag-toggle.on .sw { background: var(--cb-teal); } .brag-toggle.on .sw::after { left: 15px; }

/* Pipeline steps */
.brag-pipe { margin-top: var(--sp-lg); display: flex; flex-direction: column; gap: 7px; }
.brag-step { display: flex; align-items: center; gap: 10px; padding: 9px 11px; background: #191919; border: 1px solid #2b2b2b; border-radius: 8px; opacity: 0.4; transition: opacity 0.3s, border-color 0.3s, background 0.3s; }
.brag-step.run { opacity: 1; border-color: rgba(154,138,255,0.5); background: rgba(154,138,255,0.07); }
.brag-step.ok { opacity: 1; border-color: rgba(184,198,106,0.35); }
.brag-step .si { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; font-family: 'JetBrains Mono', monospace; background: #2a2a2a; color: #888; }
.brag-step.run .si { background: rgba(154,138,255,0.2); color: #b3a6ff; }
.brag-step.ok .si { background: rgba(184,198,106,0.18); color: var(--cb-lime); }
.brag-step .sn { flex: 1; font-size: 12.5px; color: #d2d2d2; font-weight: 600; }
.brag-step .sn small { display: block; font-weight: 400; font-size: 11px; color: #7d7d7d; font-family: 'JetBrains Mono', monospace; margin-top: 1px; }
.brag-step .sl { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #6a6a6a; flex-shrink: 0; }
.brag-step.ok .sl { color: var(--cb-coral); }
.brag-step .spin { width: 13px; height: 13px; border: 2px solid rgba(154,138,255,0.25); border-top-color: #b3a6ff; border-radius: 50%; animation: bragSpin 0.7s linear infinite; flex-shrink: 0; }
.brag-step .chk { color: var(--cb-lime); font-weight: 800; flex-shrink: 0; }
@keyframes bragSpin { to { transform: rotate(360deg); } }

/* Answer side */
.brag-answer-wrap { background: #171717; border: 1px solid #2e2e2e; border-radius: 10px; padding: var(--sp-md); min-height: 200px; }
.brag-answer { font-size: 13.5px; line-height: 1.85; color: #e2e2e2; min-height: 110px; }
.brag-answer .cite { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; margin: 0 1px; vertical-align: 1px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; color: #fff; background: var(--cb-coral); border-radius: 4px; cursor: pointer; transition: transform 0.12s, background 0.12s; }
.brag-answer .cite:hover { transform: translateY(-1px); background: var(--cb-pink); }
.brag-answer .hl { background: rgba(242,201,76,0.22); border-radius: 3px; padding: 0 2px; }
.brag-answer-wait { color: #6a6a6a; font-family: 'JetBrains Mono', monospace; font-size: 12px; display: inline-flex; align-items: center; gap: 8px; }

.brag-fusion { margin-top: var(--sp-md); padding-top: var(--sp-md); border-top: 1px dashed #333; }
.brag-fusion-h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #8a8a8a; margin-bottom: 7px; }
.brag-fbar { height: 10px; border-radius: 999px; overflow: hidden; display: flex; background: #2a2a2a; }
.brag-fbar i { display: block; height: 100%; width: 0; transition: width 1s ease; }
.brag-fbar .dense { background: linear-gradient(90deg, var(--cb-teal), #6fa893); }
.brag-fbar .bm25 { background: linear-gradient(90deg, var(--cb-yellow), #e0b53f); }
.brag-flegend { display: flex; gap: var(--sp-md); margin-top: 7px; font-size: 10.5px; color: #9a9a9a; }
.brag-flegend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: 0; }

.brag-sources { margin-top: var(--sp-md); display: flex; flex-direction: column; gap: 7px; }
.brag-src { display: flex; align-items: center; gap: 9px; background: #1c1c1c; border: 1px solid #2c2c2c; border-radius: 7px; padding: 8px 10px; opacity: 0; transform: translateY(4px); }
.brag-src.show { opacity: 1; transform: none; transition: opacity 0.3s, transform 0.3s; }
.brag-src .sidx { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 800; color: #fff; background: var(--cb-coral); border-radius: 4px; min-width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.brag-src .sdoc { flex: 1; font-size: 11.5px; color: #cfcfcf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brag-src .sgrade { font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 4px; flex-shrink: 0; }
.brag-src .sgrade.pub { color: var(--cb-teal); background: rgba(90,134,120,0.16); }
.brag-src .sgrade.conf { color: var(--cb-coral); background: rgba(244,123,123,0.14); }
.brag-src .sscore { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #7a7a7a; flex-shrink: 0; }

.brag-replay { display: inline-flex; align-items: center; gap: 7px; margin-top: var(--sp-md); background: transparent; border: 1px solid #3a3a3a; color: #cfcfcf; border-radius: 999px; padding: 7px 15px; font-size: 12px; font-weight: 600; transition: border-color 0.15s, color 0.15s; }
.brag-replay:hover { border-color: var(--cb-coral); color: #fff; }

/* Security panel */
.brag-sec { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--sp-lg); }
.brag-flow { display: flex; flex-direction: column; gap: 10px; }
.brag-node { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 9px; border: 1px solid #2c2c2c; background: #191919; }
.brag-node .ni { font-size: 18px; } .brag-node .nt { flex: 1; } .brag-node .nt b { display: block; font-size: 13px; color: #e6e6e6; } .brag-node .nt small { font-size: 11px; color: #888; }
.brag-arrow-d { text-align: center; color: #555; font-size: 14px; line-height: 1; }
.brag-node.blocked { border-color: var(--cb-coral); background: rgba(244,123,123,0.08); animation: bragShake 0.4s ease; }
.brag-node.blocked .ni { color: var(--cb-coral); }
.brag-node.allowed { border-color: rgba(184,198,106,0.4); }
@keyframes bragShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-5px);} 75%{transform:translateX(5px);} }
.brag-audit { background: #141414; border: 1px solid #2a2a2a; border-radius: 9px; padding: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; }
.brag-audit .alog { display: flex; gap: 9px; padding: 6px 0; border-bottom: 1px solid #232323; }
.brag-audit .alog:last-child { border-bottom: none; }
.brag-audit .at { color: #666; flex-shrink: 0; }
.brag-audit .av { font-weight: 700; flex-shrink: 0; }
.brag-audit .av.crit { color: var(--cb-coral); } .brag-audit .av.ok { color: var(--cb-lime); } .brag-audit .av.info { color: var(--cb-teal); }
.brag-audit .am { color: #b8b8b8; }

/* STORM panel */
.brag-storm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.brag-storm-step { background: #191919; border: 1px solid #2b2b2b; border-radius: 9px; padding: 14px; position: relative; }
.brag-storm-step .num { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; color: var(--cb-purple); }
.brag-storm-step h5 { font-size: 13px; color: #e8e8e8; margin: 6px 0 4px; }
.brag-storm-step p { font-size: 11.5px; color: #8d8d8d; line-height: 1.5; }
.brag-storm-step .bar { height: 3px; background: #2a2a2a; border-radius: 2px; margin-top: 10px; overflow: hidden; }
.brag-storm-step .bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--cb-purple), var(--cb-pink)); transform: scaleX(0); transform-origin: left; transition: transform 0.6s ease; }
.brag-storm-step.done .bar i { transform: scaleX(1); }

/* Dashboard panel */
.brag-dash { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.brag-metric { background: #191919; border: 1px solid #2b2b2b; border-radius: 9px; padding: 14px; }
.brag-metric .ml { font-size: 11px; color: #8a8a8a; letter-spacing: 0.4px; }
.brag-metric .mv { font-size: 26px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin-top: 6px; font-family: 'JetBrains Mono', monospace; }
.brag-metric .mv small { font-size: 13px; color: #9a9a9a; font-weight: 600; }
.brag-metric .mtrend { height: 28px; margin-top: 10px; display: flex; align-items: flex-end; gap: 3px; }
.brag-metric .mtrend i { flex: 1; background: linear-gradient(180deg, var(--cb-teal), rgba(90,134,120,0.25)); border-radius: 2px 2px 0 0; }
.brag-dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.brag-svc { background: #191919; border: 1px solid #2b2b2b; border-radius: 9px; padding: 14px; }
.brag-svc h5 { font-size: 12px; color: #9a9a9a; margin-bottom: 10px; letter-spacing: 0.4px; text-transform: uppercase; font-weight: 700; }
.brag-svc-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12px; color: #cfcfcf; }
.brag-svc-item .h { width: 8px; height: 8px; border-radius: 50%; background: var(--cb-lime); box-shadow: 0 0 7px var(--cb-lime); flex-shrink: 0; }
.brag-svc-item .v { margin-left: auto; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #7d7d7d; }

/* Feature grid */
.brag-subhead { margin-top: var(--sp-xxl); }
.brag-subhead h3 { font-size: 22px; font-weight: 800; color: #fff; margin: 8px 0 6px; letter-spacing: -0.3px; }
.brag-subhead p { font-size: 13.5px; color: var(--dark-fg-muted); line-height: 1.65; max-width: 720px; }
.brag-subhead + .brag-features { margin-top: var(--sp-lg); }
.brag-features { margin-top: var(--sp-xxl); display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.brag-feat { background: rgba(255,255,255,0.03); border: 1px solid var(--dark-hairline); border-radius: 12px; padding: var(--sp-lg); transition: border-color 0.2s, transform 0.2s, background 0.2s; }
.brag-feat:hover { border-color: rgba(244,123,123,0.5); transform: translateY(-3px); background: rgba(255,255,255,0.05); }
.brag-feat .fic { font-size: 22px; line-height: 1; }
.brag-feat-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.brag-feat h4 { font-size: 14.5px; color: #fff; margin: 0; letter-spacing: -0.2px; }
.brag-feat p { font-size: 12.5px; color: var(--dark-fg-muted); line-height: 1.6; }

/* Architecture strip */
.brag-arch { margin-top: var(--sp-xxl); border: 1px solid var(--dark-hairline); border-radius: 14px; overflow: hidden; }
.brag-arch-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-md); padding: 14px 20px; background: rgba(255,255,255,0.03); border-bottom: 1px solid var(--dark-hairline); flex-wrap: wrap; }
.brag-arch-head .t { font-size: 13px; font-weight: 700; color: #fff; letter-spacing: 0.3px; }
.brag-arch-head .stack { display: flex; gap: 7px; flex-wrap: wrap; }
.brag-arch-head .stack span { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: #b3a6ff; background: rgba(154,138,255,0.1); border: 1px solid rgba(154,138,255,0.28); border-radius: 5px; padding: 3px 8px; }
.brag-layers { display: grid; grid-template-columns: repeat(4, 1fr); }
.brag-layer { padding: var(--sp-lg); border-right: 1px solid var(--dark-hairline); }
.brag-layer:last-child { border-right: none; }
.brag-layer .lt { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 800; color: var(--cb-coral); }
.brag-layer-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.brag-layer h5 { font-size: 13.5px; color: #eaeaea; margin: 0; }
.brag-layer p { font-size: 11.5px; color: var(--dark-fg-muted); line-height: 1.55; }

.brag-cta { margin-top: var(--sp-xxl); display: flex; align-items: center; justify-content: center; gap: var(--sp-md); flex-wrap: wrap; }
.brag-band .btn-primary { background: var(--cb-coral); border-color: var(--cb-coral); color: #fff; }
.brag-band .btn-primary:hover { background: var(--cb-pink); border-color: var(--cb-pink); }
.brag-band .btn-secondary { color: var(--dark-fg); border-color: #555; }
.brag-band .btn-secondary:hover { background: var(--dark-fg); color: var(--dark-canvas); border-color: var(--dark-fg); }
.brag-note { text-align: center; margin-top: var(--sp-md); font-size: 11.5px; color: var(--dark-fg-muted); }

/* ── Files tab · dropzone + document table ─────────────────────── */
.brag-dropzone { display: flex; align-items: center; gap: 14px; padding: 14px 16px; margin-bottom: 14px; border: 1.5px dashed #3a3a3a; border-radius: 11px; background: repeating-linear-gradient(135deg, #181818, #181818 10px, #1b1b1b 10px, #1b1b1b 20px); }
.brag-dropzone .dz-ic { width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 17px; color: var(--cb-teal); background: rgba(90,134,120,0.14); border: 1px solid rgba(90,134,120,0.34); border-radius: 9px; }
.brag-dropzone .dz-t { flex: 1; min-width: 0; }
.brag-dropzone .dz-t b { display: block; font-size: 13px; color: #eaeaea; font-weight: 700; }
.brag-dropzone .dz-t small { display: block; margin-top: 3px; font-size: 11px; color: #7d7d7d; }
.brag-dropzone .dz-btn { flex-shrink: 0; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--cb-coral); border-radius: 7px; padding: 8px 14px; }
.brag-filetable { background: #191919; border: 1px solid #2b2b2b; border-radius: 10px; overflow: hidden; }
.brag-filetable .ft-head, .brag-filetable .ft-row { display: grid; grid-template-columns: 1fr 64px 64px 62px 64px 132px; align-items: center; gap: 10px; padding: 10px 14px; }
.brag-filetable .ft-head { font-size: 10px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: #7a7a7a; background: #161616; border-bottom: 1px solid #2b2b2b; }
.brag-filetable .ft-row { border-top: 1px solid #232323; font-size: 12px; color: #cfcfcf; }
.brag-filetable .ft-row:first-of-type { border-top: none; }
.brag-filetable .ft-name { display: flex; align-items: center; gap: 8px; overflow: hidden; }
.brag-filetable .ft-name i { color: #8a8a8a; font-style: normal; flex-shrink: 0; }
.brag-filetable .ft-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brag-filetable .ft-type { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; color: #b3a6ff; background: rgba(154,138,255,0.1); border: 1px solid rgba(154,138,255,0.26); border-radius: 5px; padding: 2px 6px; text-align: center; justify-self: start; }
.brag-filetable .ft-grade { font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 4px; justify-self: start; }
.brag-filetable .ft-grade.pub { color: var(--cb-teal); background: rgba(90,134,120,0.16); }
.brag-filetable .ft-grade.conf { color: var(--cb-coral); background: rgba(244,123,123,0.14); }
.brag-filetable .ft-num { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #9a9a9a; }
.brag-filetable .ft-stat { display: flex; align-items: center; gap: 6px; font-size: 11px; }
.brag-filetable .ft-stat.done { color: var(--cb-lime); }
.brag-filetable .ft-stat.done::before { content: "✓"; font-weight: 800; }
.brag-filetable .ft-prog { flex: 1; height: 5px; border-radius: 3px; background: #2c2c2c; overflow: hidden; }
.brag-filetable .ft-prog i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--cb-teal), var(--cb-lime)); }
.brag-filetable .ft-stat.run { color: var(--cb-yellow); }

/* ── Vector DB tab · embedding scatter map ─────────────────────── */
.brag-vec { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 12px; align-items: stretch; }
.brag-vecmap { position: relative; background: radial-gradient(circle at 50% 45%, #1d1d1d, #161616 70%); border: 1px solid #2b2b2b; border-radius: 10px; overflow: hidden; min-height: 270px; }
.brag-vecmap .vm-grid { position: absolute; inset: 0; background-image: linear-gradient(#ffffff08 1px, transparent 1px), linear-gradient(90deg, #ffffff08 1px, transparent 1px); background-size: 34px 34px; }
.brag-vecmap .vm-cap { position: absolute; top: 10px; left: 12px; font-size: 11px; color: #8a8a8a; letter-spacing: 0.3px; z-index: 3; }
.brag-vecmap .vm-cap b { color: #d8d8d8; font-weight: 700; }
.brag-vmdot { position: absolute; width: 9px; height: 9px; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; animation: vmPop 0.5s forwards; }
.brag-vmdot.c1 { background: var(--cb-teal);   box-shadow: 0 0 8px rgba(90,134,120,0.7); }
.brag-vmdot.c2 { background: var(--cb-coral);  box-shadow: 0 0 8px rgba(244,123,123,0.6); }
.brag-vmdot.c3 { background: var(--cb-yellow); box-shadow: 0 0 8px rgba(242,201,76,0.55); }
.brag-vmdot.c4 { background: var(--cb-purple); box-shadow: 0 0 8px rgba(167,139,202,0.55); }
.brag-vmdot.q { width: 15px; height: 15px; background: #fff; box-shadow: 0 0 0 4px rgba(255,255,255,0.14), 0 0 14px #fff; z-index: 4; }
.brag-vmline { position: absolute; height: 1px; background: linear-gradient(90deg, rgba(255,255,255,0.5), rgba(255,255,255,0)); transform-origin: 0 50%; z-index: 2; opacity: 0.55; }
.brag-vecmap .vm-legend { position: absolute; bottom: 10px; left: 12px; right: 12px; display: flex; flex-wrap: wrap; gap: 12px; z-index: 3; }
.brag-vecmap .vm-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #b3b3b3; }
.brag-vecmap .vm-legend i { width: 8px; height: 8px; border-radius: 50%; }
.brag-vec-side { display: flex; flex-direction: column; gap: 12px; }
.brag-vec-side .brag-svc { flex: 1; }
@keyframes vmPop { from { opacity: 0; transform: translate(-50%, -50%) scale(0.2); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ── Workspaces tab · collection card grid ─────────────────────── */
.brag-wsgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.brag-wscard { background: #191919; border: 1px solid #2b2b2b; border-radius: 11px; padding: 14px; transition: border-color 0.2s, transform 0.2s; }
.brag-wscard:hover { border-color: rgba(90,134,120,0.5); transform: translateY(-2px); }
.brag-wscard .ws-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.brag-wscard .ws-ic { font-size: 19px; line-height: 1; }
.brag-wscard .ws-lock { font-size: 9px; font-weight: 700; letter-spacing: 0.4px; padding: 2px 7px; border-radius: 4px; }
.brag-wscard .ws-lock.pub { color: var(--cb-teal); background: rgba(90,134,120,0.16); }
.brag-wscard .ws-lock.conf { color: var(--cb-coral); background: rgba(244,123,123,0.14); }
.brag-wscard h5 { font-size: 13px; color: #fff; margin: 0 0 4px; letter-spacing: -0.2px; }
.brag-wscard .ws-stats { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8a8a8a; display: flex; gap: 6px; }
.brag-wscard .ws-bar { height: 4px; border-radius: 2px; background: #2c2c2c; overflow: hidden; margin: 11px 0 10px; }
.brag-wscard .ws-bar i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, var(--cb-teal), var(--cb-lime)); }
.brag-wscard .ws-foot { display: flex; align-items: center; justify-content: space-between; }
.brag-wscard .ws-avatars { display: flex; }
.brag-wscard .ws-avatars i { width: 21px; height: 21px; border-radius: 50%; margin-left: -6px; border: 1.5px solid #191919; display: inline-flex; align-items: center; justify-content: center; font-size: 9.5px; font-weight: 700; font-style: normal; color: #fff; background: var(--cb-teal); }
.brag-wscard .ws-avatars i:first-child { margin-left: 0; }
.brag-wscard .ws-avatars i.n2 { background: var(--cb-coral); }
.brag-wscard .ws-avatars i.n3 { background: var(--cb-purple); }
.brag-wscard .ws-avatars i.more { background: #333; color: #b3b3b3; }
.brag-wscard .ws-idx { font-size: 10px; color: #7a7a7a; }
.brag-wscard.add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; border-style: dashed; border-color: #3a3a3a; color: #8a8a8a; background: transparent; }
.brag-wscard.add:hover { color: var(--cb-teal); border-color: rgba(90,134,120,0.5); transform: none; }
.brag-wscard.add .pl { font-size: 24px; line-height: 1; }
.brag-wscard.add span { font-size: 12px; }

@media (max-width: 980px) {
  .brag-qa, .brag-sec { grid-template-columns: 1fr; }
  .brag-features { grid-template-columns: 1fr 1fr; }
  .brag-storm-steps, .brag-dash { grid-template-columns: 1fr 1fr; }
  .brag-layers { grid-template-columns: 1fr 1fr; }
  .brag-layer { border-bottom: 1px solid var(--dark-hairline); }
  .brag-vec { grid-template-columns: 1fr; }
  .brag-wsgrid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .brag-features, .brag-storm-steps, .brag-dash, .brag-layers, .brag-dash-row { grid-template-columns: 1fr; }
  .brag-wsgrid { grid-template-columns: 1fr; }
  .brag-stage { min-height: 0; }
  .brag-filetable .ft-head, .brag-filetable .ft-row { grid-template-columns: 1fr 56px 90px; }
  .brag-filetable .ft-type, .brag-filetable .ft-num { display: none; }
  .brag-dropzone .dz-t small { display: none; }
}