/* TraceProof "Nova" theme – a modern SaaS look.
   Light: white and soft lavender, one indigo-violet accent, rounded cards with soft violet shadows (in the spirit of TaskPro).
   Dark: deep navy with indigo-violet glow, glassy cards and bright numbers (in the spirit of Nexora / Boost dashboards).
   Loaded after theme-calm.css and modern.css, so it only re-colours – layouts stay the same. */

/* ================================================================ light */
:root:not([data-theme="dark"]) {
  --accent: #5b4ef0; --accent-hover: #4a3ddb; --accent-2: #7a6cf6; --accent-soft: #f0eeff; --accent-text: #4a3ddb;
  --bg: #f6f5fc; --surface: #ffffff; --surface-2: #faf9ff; --surface-3: #f2f0fb;
  --border: #e7e4f5; --border-strong: #d6d1ee;
  --text: #17153a; --text-2: #46445f; --muted: #6c6a85; --faint: #a19fb8;
  --info: #5b4ef0; --info-bg: #f0eeff; --ovr: #8b5cf6;
  --heading: #1d1856; --heading-page: #120f3d;
  --click-bg: #f1efff; --click-bg-hover: #e6e2ff; --click-border: #d4ceff; --click-text: #4a3ddb;
  --band: linear-gradient(90deg, #efecff 0%, #f7f6ff 50%, #ffffff 100%);
  --shadow-sm: 0 1px 2px rgba(40,30,110,.05); --shadow: 0 6px 18px -10px rgba(60,40,160,.22);
  --shadow-lg: 0 24px 48px -20px rgba(60,40,160,.35);
  --ins-1: #6c5ce7; --ins-2: #22b8cf;
}
:root:not([data-theme="dark"]) body { background: radial-gradient(1200px 500px at 70% -120px, #ece8ff 0%, rgba(236,232,255,0) 70%), var(--bg); background-attachment: fixed; }
:root:not([data-theme="dark"]) .card { border-radius: 16px; border-color: var(--border); box-shadow: 0 1px 2px rgba(40,30,110,.04), 0 8px 24px -18px rgba(60,40,160,.25); }
:root:not([data-theme="dark"]) .card-head { background: var(--band); box-shadow: inset 4px 0 0 var(--accent); border-bottom-color: #ebe8fb; }
:root:not([data-theme="dark"]) .keys-head, :root:not([data-theme="dark"]) details.fold > summary, :root:not([data-theme="dark"]) .hc-head,
:root:not([data-theme="dark"]) .modal-head { background: var(--band); box-shadow: inset 4px 0 0 var(--accent); border-bottom-color: #ebe8fb; }
:root:not([data-theme="dark"]) details.fold > summary:hover { background: linear-gradient(90deg, #e6e2ff 0%, #f1efff 60%, #ffffff 100%); }
:root:not([data-theme="dark"]) .page-head h1::after { background: linear-gradient(90deg, var(--accent), #a78bfa); width: 48px; }

/* sidebar: white, violet pill for the active page */
:root:not([data-theme="dark"]) .sidebar { background: rgba(255,255,255,.86); backdrop-filter: blur(8px); border-right-color: #ece9f8; }
:root:not([data-theme="dark"]) .brand .logo { background: linear-gradient(135deg, #5b4ef0, #7c6cff); box-shadow: 0 6px 14px -6px rgba(91,78,240,.7); }
:root:not([data-theme="dark"]) .brand b { color: var(--accent); }
:root:not([data-theme="dark"]) .nav-item:hover { background: #f4f2ff; }
:root:not([data-theme="dark"]) .nav-item.active { background: linear-gradient(90deg, #ece9ff, #f5f3ff); box-shadow: inset 3px 0 0 var(--accent); }
:root:not([data-theme="dark"]) .nav-item.active .nav-txt { color: #2c2390; }
:root:not([data-theme="dark"]) .topbar { background: rgba(255,255,255,.78); backdrop-filter: blur(10px); border-bottom-color: #ece9f8; }

/* buttons: violet, pill-rounded primary */
:root:not([data-theme="dark"]) .btn { border-radius: 10px; }
:root:not([data-theme="dark"]) .btn.primary, :root:not([data-theme="dark"]) .run-opt.primary-opt {
  background: linear-gradient(135deg, #5b4ef0, #7468f7); border-color: transparent; box-shadow: 0 8px 18px -10px rgba(91,78,240,.8); }
:root:not([data-theme="dark"]) .btn.primary:hover { background: linear-gradient(135deg, #4a3ddb, #6458ee); }
:root:not([data-theme="dark"]) .btn:hover { color: #3a2fc0; }
:root:not([data-theme="dark"]) .btn.ghost { background: #f7f6ff; border-color: #e3dffc; }
:root:not([data-theme="dark"]) .step.now { background: var(--accent-soft); border-color: #dcd7fd; }
:root:not([data-theme="dark"]) .step.now .l { color: #2c2390; }
:root:not([data-theme="dark"]) .nav-item.active svg, :root:not([data-theme="dark"]) .step.now::before { color: var(--accent); }

/* home */
:root:not([data-theme="dark"]) .home-hero { background: linear-gradient(120deg, #ffffff 0%, #f3f0ff 55%, #e9f7fb 100%); border-color: #e4dffb;
  box-shadow: 0 18px 40px -26px rgba(60,40,160,.4); }
:root:not([data-theme="dark"]) .home-kicker { color: var(--accent); }
:root:not([data-theme="dark"]) .start-card.t-blue { background: linear-gradient(160deg, #efecff 0%, #ffffff 75%); border-color: #d9d3fd; }
:root:not([data-theme="dark"]) .start-card.t-blue:hover { border-color: var(--accent); }
:root:not([data-theme="dark"]) .ic2.i-blue { background: #efecff; color: var(--accent); }

/* pipeline at a glance */
:root:not([data-theme="dark"]) .glance { background: linear-gradient(135deg, #ffffff 0%, #f2efff 55%, #e9f6fb 100%) !important; border-color: #e1dcfa !important; }
:root:not([data-theme="dark"]) .ha-node > rect { fill: #f1efff; stroke: #cfc8fb; }
:root:not([data-theme="dark"]) .ha-node > text { fill: #1d1856; }
:root:not([data-theme="dark"]) .gl-node:hover > rect, :root:not([data-theme="dark"]) .gl-node:focus > rect { fill: #e6e2ff; stroke: var(--accent); }
:root:not([data-theme="dark"]) .gl-lane { fill: #f8f7ff; } :root:not([data-theme="dark"]) .gl-lane.alt { fill: #f2f0fd; }
:root:not([data-theme="dark"]) .ha-node.target > rect { fill: var(--accent); stroke: var(--accent); filter: drop-shadow(0 0 10px rgba(91,78,240,.45)); }
:root:not([data-theme="dark"]) .ha-flow { stroke: var(--accent); } :root:not([data-theme="dark"]) .ha-link { stroke: #b9b2e6; }

/* ================================================================ dark */
[data-theme="dark"] {
  --bg: #090d1f; --surface: #121834; --surface-2: #161d3d; --surface-3: #1c2449;
  --border: #252e57; --border-strong: #343e70;
  --text: #eceefe; --text-2: #b9bddf; --muted: #8e93bd; --faint: #5f6592;
  --accent: #7c6cff; --accent-hover: #9586ff; --accent-2: #8f80ff; --accent-soft: #221d52; --accent-text: #a99dff;
  --ink: #0a0f26; --ink-2: #121a3c;
  --grad: linear-gradient(135deg, #6a5cff 0%, #8b5cf6 100%);
  --pass: #34d399; --pass-bg: #0f2b27; --fail: #fb7185; --fail-bg: #35142a; --warn: #fbbf24; --warn-bg: #33270c;
  --info: #7c6cff; --info-bg: #221d52; --ovr: #a78bfa;
  --heading: #ffffff; --heading-page: #ffffff;
  --shadow-sm: none; --shadow: 0 10px 30px -14px rgba(0,0,0,.7); --shadow-lg: 0 30px 60px -24px rgba(0,0,0,.8);
  --glow: 0 0 0 1px rgba(124,108,255,.35), 0 12px 30px -12px rgba(124,108,255,.55);
  --ins-1: #8b7bff; --ins-2: #22d3ee;
}
[data-theme="dark"] body {
  background: radial-gradient(900px 480px at 85% -10%, rgba(124,108,255,.22) 0%, rgba(124,108,255,0) 70%),
              radial-gradient(700px 420px at 0% 100%, rgba(34,211,238,.10) 0%, rgba(34,211,238,0) 70%), var(--bg);
  background-attachment: fixed; }
[data-theme="dark"] .sidebar { background: rgba(13,18,42,.92); border-right-color: #1e2650; }
[data-theme="dark"] .brand .logo { background: linear-gradient(135deg, #6a5cff, #9b6dff); box-shadow: 0 0 18px -2px rgba(124,108,255,.7); }
[data-theme="dark"] .brand b { color: #a99dff; }
[data-theme="dark"] .nav-group { color: #6a70a0; }
[data-theme="dark"] .nav-item .nav-txt { color: #c4c8ea; }
[data-theme="dark"] .nav-item svg { color: #8e93bd; }
[data-theme="dark"] .nav-item:hover { background: #18204a; }
[data-theme="dark"] .nav-item.active { background: linear-gradient(90deg, rgba(124,108,255,.35), rgba(124,108,255,.12)); box-shadow: inset 3px 0 0 #8f80ff, 0 8px 22px -14px rgba(124,108,255,.9); }
[data-theme="dark"] .nav-item.active .nav-txt { color: #fff; font-weight: 600; } [data-theme="dark"] .nav-item.active svg { color: #c4bcff; }
[data-theme="dark"] .topbar { background: rgba(9,13,31,.72); backdrop-filter: blur(12px); border-bottom-color: #1e2650; }
[data-theme="dark"] .card { background: linear-gradient(180deg, rgba(23,30,64,.92), rgba(17,23,50,.92)); border-color: #252e57; border-radius: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 18px 40px -26px rgba(0,0,0,.9); }
[data-theme="dark"] .card-head { background: linear-gradient(90deg, rgba(124,108,255,.16), rgba(124,108,255,0) 70%); box-shadow: inset 3px 0 0 #8f80ff; border-bottom-color: #252e57; }
[data-theme="dark"] .card-head h3, [data-theme="dark"] .keys-head b, [data-theme="dark"] details.fold > summary, [data-theme="dark"] .modal-head h3 { color: #fff; }
[data-theme="dark"] .page-head h1 { color: #fff; }
[data-theme="dark"] .page-head h1::after { content: ""; display: block; width: 48px; height: 3px; margin-top: 6px; border-radius: 2px; background: linear-gradient(90deg, #7c6cff, #22d3ee); }
[data-theme="dark"] .btn { background: #18204a; border-color: #2d3768; color: #d6d9f7; border-radius: 10px; }
[data-theme="dark"] .btn:hover { background: #20295c; border-color: #7c6cff; color: #fff; }
[data-theme="dark"] .btn.primary, [data-theme="dark"] .run-opt.primary-opt { background: linear-gradient(135deg, #6a5cff, #8b5cf6); border-color: transparent; color: #fff;
  box-shadow: 0 10px 24px -10px rgba(124,108,255,.9); }
[data-theme="dark"] .btn.primary:hover { background: linear-gradient(135deg, #7d70ff, #9b6dff); }
[data-theme="dark"] .btn.ghost { background: transparent; border-color: transparent; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #0e1430; border-color: #2a3462; color: var(--text); }
[data-theme="dark"] input:focus, [data-theme="dark"] select:focus, [data-theme="dark"] textarea:focus { border-color: #7c6cff; box-shadow: 0 0 0 3px rgba(124,108,255,.25); }
[data-theme="dark"] .step.now { background: rgba(124,108,255,.18); border-color: rgba(124,108,255,.45); }
[data-theme="dark"] .step.now .n { background: #7c6cff; color: #fff; }
[data-theme="dark"] .seg-item.active, [data-theme="dark"] .jump.on { background: #7c6cff; color: #fff; }
[data-theme="dark"] table thead th, [data-theme="dark"] .table-wrap th { background: #161d3d; color: #a3a8d4; }
[data-theme="dark"] .modal, [data-theme="dark"] .drawer, [data-theme="dark"] .menu-pop { background: #121834; border-color: #2a3462; }
/* home */
[data-theme="dark"] .home-hero { background: radial-gradient(600px 260px at 85% 50%, rgba(124,108,255,.35), rgba(124,108,255,0) 70%),
  linear-gradient(135deg, #131a3d 0%, #1a1650 60%, #12204a 100%); border-color: #2d3570; box-shadow: 0 30px 60px -30px rgba(80,60,220,.6); }
[data-theme="dark"] .home-hero h2 { color: #fff; } [data-theme="dark"] .home-hero p { color: #c4c8ea; } [data-theme="dark"] .home-kicker { color: #a99dff; }
[data-theme="dark"] .kpi2-v { color: #fff; }
[data-theme="dark"] .start-card.t-blue, [data-theme="dark"] .start-card.t-teal, [data-theme="dark"] .start-card.t-amber, [data-theme="dark"] .start-card.t-indigo {
  background: linear-gradient(160deg, rgba(124,108,255,.16) 0%, rgba(18,24,52,.9) 70%); border-color: #2d3570; }
[data-theme="dark"] .start-card.t-teal { background: linear-gradient(160deg, rgba(34,211,238,.13) 0%, rgba(18,24,52,.9) 70%); }
[data-theme="dark"] .start-card.t-amber { background: linear-gradient(160deg, rgba(251,191,36,.12) 0%, rgba(18,24,52,.9) 70%); }
[data-theme="dark"] .start-card.t-indigo { background: linear-gradient(160deg, rgba(167,139,250,.15) 0%, rgba(18,24,52,.9) 70%); }
[data-theme="dark"] .start-row .start-card:hover { border-color: #7c6cff; box-shadow: var(--glow); }
[data-theme="dark"] .start-card b { color: #fff; }
/* pipeline at a glance */
[data-theme="dark"] .glance { background: radial-gradient(700px 300px at 80% 0%, rgba(124,108,255,.25), rgba(124,108,255,0) 70%), linear-gradient(135deg, #111839, #17154a) !important;
  border: 1px solid #2d3570 !important; }
[data-theme="dark"] .ha-node > rect { fill: #1b2350; stroke: #3a4485; }
[data-theme="dark"] .ha-node.target > rect { fill: #7c6cff; stroke: #9b8fff; filter: drop-shadow(0 0 10px rgba(124,108,255,.8)); }
[data-theme="dark"] .ha-flow { stroke: #8f80ff; }

/* ================================================================ Home insights (both modes) */
.ins-wrap { display: flex; flex-direction: column; gap: 12px; }
.ins-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ins-title h3 { margin: 0; font: 700 var(--fs-xl) var(--font-head, var(--font)); color: var(--heading-page, var(--text)); }
.ins-title span { color: var(--muted); font-size: var(--fs-sm); }
.ins-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ins-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ins-card.span-2 { grid-column: span 2; } .ins-card.span-3 { grid-column: span 3; }
.ins-head { display: flex; flex-direction: column; gap: 2px; }
.ins-head h3 { margin: 0; font: 700 var(--fs-lg) var(--font-head, var(--font)); color: var(--heading, var(--text)); }
.ins-head .sub { color: var(--muted); font-size: var(--fs-xs); }
.ins-empty { color: var(--muted); font-size: var(--fs-sm); padding: 24px 0; text-align: center; }
.ins-big { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.ins-big b { font: 700 30px var(--font-head, var(--font)); color: var(--heading-page, var(--text)); letter-spacing: -.02em; }
.ins-big span { color: var(--muted); font-size: var(--fs-sm); }
.ins-big .ins-delta { font-weight: 700; font-size: var(--fs-xs); padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.ins-big .ins-delta.up { background: var(--pass-bg); color: var(--pass); } .ins-big .ins-delta.down { background: var(--fail-bg); color: var(--fail); }
.ins-svg { width: 100%; height: auto; display: block; }
.ins-grid line.ins-grid, .ins-svg .ins-grid { stroke: var(--border); stroke-dasharray: 3 4; }
.ins-axis { fill: var(--muted); font-size: 11px; }
.ins-line { fill: none; stroke: var(--ins-1); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 8px rgba(108,92,231,.35)); }
.ins-pt { fill: var(--surface); stroke: var(--pass); stroke-width: 3; cursor: pointer; transition: r .15s; }
.ins-pt.warn { stroke: var(--warn); } .ins-pt.bad { stroke: var(--fail); } .ins-pt:hover { r: 7; }
.ins-mix { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ins-donut { width: 150px; height: 150px; flex: none; }
.ins-track { stroke: var(--surface-3); }
.ins-donut-v { fill: var(--heading-page, var(--text)); font: 700 26px var(--font-head, var(--font)); }
.ins-legend { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
.ins-leg { display: grid; grid-template-columns: 10px 1fr auto 38px; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); }
.ins-leg b { color: var(--text); } .ins-leg small { color: var(--muted); text-align: right; }
.ins-sw { width: 10px; height: 10px; border-radius: 3px; }
.ins-bars { display: flex; flex-direction: column; gap: 11px; }
.ins-bar-top { display: flex; justify-content: space-between; gap: 8px; font-size: var(--fs-sm); color: var(--text-2); margin-bottom: 5px; }
.ins-bar-top > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-bar-top b { font-size: var(--fs-xs); white-space: nowrap; } .c-fail { color: var(--fail); } .c-warn { color: var(--warn); }
.ins-track-bar { display: flex; height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.ins-track-bar .f { background: linear-gradient(90deg, var(--fail), #f472b6); } .ins-track-bar .w { background: linear-gradient(90deg, var(--warn), #fcd34d); }
.ins-heat { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.ins-dow { font-size: 10.5px; color: var(--muted); text-align: center; font-weight: 600; }
.ins-cell { aspect-ratio: 1.35; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #fff;
  background: color-mix(in srgb, var(--ins-1) calc(var(--a, 0) * 100%), var(--surface-3)); }
.ins-cell.pad { background: transparent; }
.ins-flow { display: flex; flex-direction: column; gap: 6px; }
.ins-fl { display: grid; grid-template-columns: minmax(120px, 220px) 1fr 64px; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.ins-fl-n { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-fl b { text-align: right; color: var(--text); }
.ins-fl-b { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--ins-1), var(--ins-2)); justify-self: start; }
.ins-fl-b.r-source { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.ins-fl-b.r-target { background: linear-gradient(90deg, var(--accent), #a78bfa); box-shadow: 0 0 12px -2px var(--accent); }
.ins-fl-b.warn { background: linear-gradient(90deg, var(--warn), #fcd34d); } .ins-fl-b.bad { background: linear-gradient(90deg, var(--fail), #f472b6); }
.ins-link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--fs-sm); }
.ins-link svg { width: 14px; height: 14px; }
[data-theme="dark"] .ins-fl-b.r-source { background: linear-gradient(90deg, #4b5585, #6b75a8); }
[data-theme="dark"] .ins-line { filter: drop-shadow(0 0 8px rgba(139,123,255,.7)); }
@media (max-width: 1100px) { .ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ins-card.span-3 { grid-column: span 2; } }
@media (max-width: 720px) { .ins-grid { grid-template-columns: minmax(0, 1fr); } .ins-card.span-2, .ins-card.span-3 { grid-column: auto; } .ins-fl { grid-template-columns: 110px 1fr 52px; } }
[data-theme="dark"] .ha-node.target > text, [data-theme="dark"] .ha-node.target > text.n { fill: #fff; }
[data-theme="dark"] .ha-node > text { fill: #e6e8ff; } [data-theme="dark"] .ha-node > text.n { fill: #a9aee0; }

/* ================================================================ type: Plus Jakarta Sans headings, Inter body (Segoe UI when offline) */
:root {
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Plus Jakarta Sans", "Inter", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-display: var(--font-head);
}
body { font-family: var(--font); font-feature-settings: "cv11", "ss01"; letter-spacing: -.006em; }
.page-head h1, .card-head h3, .keys-head b, details.fold > summary, .modal-head h3, .drawer-head h2, .hc-head b, .hc-big, .glance-target,
.fwin-title, .brand, .kpi2-v, .home-hero h2, .start-card b, .ins-head h3, .ins-title h3, .ins-big b, .wf-head h3, .hf-card b, .st-big, .gl-stat b {
  font-family: var(--font-head); }
.page-head h1 { font-weight: 800; letter-spacing: -.025em; }
.card-head h3, .ins-head h3, .wf-head h3 { font-weight: 700; letter-spacing: -.015em; }
.brand { font-weight: 800; letter-spacing: -.03em; }
.nav-item .nav-txt { font-weight: 500; letter-spacing: -.005em; }
.nav-group { font-size: 10.5px; letter-spacing: .12em; font-weight: 700; }
.btn { font-weight: 600; letter-spacing: -.005em; }
.kpi2-v { font-weight: 800; font-size: 30px; letter-spacing: -.03em; }

/* ================================================================ home hero: chips, gradient headline, live flow */
.home-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; padding: 30px 32px; }
.hero-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.hero-chip { font-size: 12px; font-weight: 600; padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-text); }
.hero-chip.soft { background: transparent; color: var(--muted); border-color: var(--border); }
.home-hero h2 { font: 800 38px/1.12 var(--font-head); letter-spacing: -.035em; margin: 0 0 12px; }
.grad-text { background: linear-gradient(90deg, #4f8cff 0%, #7c6cff 45%, #c06cff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-text.bad { background-image: linear-gradient(90deg, #7c6cff 0%, #c06cff 50%, #ff6b9a 100%); }
.home-hero p { font-size: 15.5px; line-height: 1.6; max-width: 540px; }
.hero-flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; min-width: 0; }
.hf-col { display: flex; flex-direction: column; gap: 8px; position: relative; z-index: 1; min-width: 0; }
.hf-in, .hf-out { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface);
  box-shadow: var(--shadow-sm); min-width: 0; }
.hf-in b, .hf-out b { display: block; font-size: 12.5px; color: var(--text); line-height: 1.2; }
.hf-in small, .hf-out small { display: block; font-size: 11px; color: var(--muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-in > div, .hf-out > div { min-width: 0; }
.hf-ic { flex: none; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.hf-ic svg { width: 15px; height: 15px; }
.hf-out.t-green .hf-ic { background: var(--pass-bg); color: var(--pass); } .hf-out.t-violet .hf-ic { background: color-mix(in srgb, #a78bfa 18%, transparent); color: #a78bfa; }
.hf-mid { position: relative; padding: 0 22px; }
.hf-wire { position: absolute; inset: 0 -4px; } .hf-wire svg { width: 100%; height: 100%; }
.hf-wires path { fill: none; stroke: color-mix(in srgb, var(--accent) 55%, transparent); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-dasharray: 4 4; animation: heroDash 1.4s linear infinite; }
.hf-card { position: relative; z-index: 1; border-radius: 16px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  background: var(--surface); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 18px 40px -20px color-mix(in srgb, var(--accent) 70%, transparent); }
.hf-card-top { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } .hf-card-top b { font-size: 13px; color: var(--text); }
.hf-logo { width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; background: linear-gradient(135deg, #5b4ef0, #8b5cf6); color: #fff; }
.hf-logo svg { width: 12px; height: 12px; }
.hf-live { margin-left: auto; font-size: 10.5px; font-weight: 600; color: var(--pass); display: inline-flex; align-items: center; gap: 4px; }
.hf-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pass) 25%, transparent); }
.hf-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.hf-stats > div { padding: 7px 8px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); min-width: 0; }
.hf-stats small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hf-stats b { font: 800 17px var(--font-head); color: var(--text); letter-spacing: -.02em; } .c-pass { color: var(--pass) !important; }
.hf-mini { margin-top: 8px; color: var(--accent); } .hf-mini .spark { display: block; } .hf-mini .spark svg { width: 100%; height: 44px; }
[data-theme="dark"] .hf-in, [data-theme="dark"] .hf-out { background: rgba(18,24,52,.85); border-color: #2d3570; }
[data-theme="dark"] .hf-card { background: rgba(16,21,48,.95); }
[data-theme="dark"] .hf-stats > div { background: #0e1430; border-color: #252e57; }
@media (max-width: 1250px) { .home-hero { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .hero-flow { grid-template-columns: minmax(0, 1fr); gap: 10px; } .hf-wire { display: none; } .hf-mid { padding: 0; } .home-hero h2 { font-size: 30px; } }

/* ================================================================ KPI cards: tinted glow, sparkline */
.kpi2 { position: relative; overflow: hidden; }
.kpi2-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.kpi2-foot .kpi2-s { flex: 1; min-width: 0; }
.spark { flex: none; display: inline-flex; color: var(--accent); } .spark svg { display: block; }
.spark.t-green { color: var(--pass); } .spark.t-red { color: var(--fail); } .spark.t-teal { color: #14b8a6; } .spark.t-blue { color: var(--accent); } .spark.t-violet { color: #8b7bff; }
.kpi2::after { content: ""; position: absolute; inset: auto -40px -60px auto; width: 140px; height: 140px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 14%, transparent), transparent); }
.kpi2.t-green::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--pass) 14%, transparent), transparent); }
.kpi2.t-red::after { background: radial-gradient(closest-side, color-mix(in srgb, var(--fail) 14%, transparent), transparent); }
.kpi2.t-teal::after { background: radial-gradient(closest-side, rgba(20,184,166,.14), transparent); }

/* ================================================================ end-to-end workflow strip */
.wf-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.wf-head { display: flex; align-items: center; gap: 12px; } .wf-head h3 { margin: 0; font-size: var(--fs-lg); color: var(--heading, var(--text)); }
.wf-head .sub { color: var(--muted); font-size: var(--fs-xs); }
.wf-badge { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: linear-gradient(135deg, #5b4ef0, #8b5cf6); color: #fff;
  box-shadow: 0 8px 18px -10px rgba(91,78,240,.9); } .wf-badge svg { width: 18px; height: 18px; }
.wf-row { display: flex; align-items: stretch; gap: 8px; }
.wf-step { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-2); color: inherit !important; text-decoration: none !important; transition: border-color .15s, transform .15s, box-shadow .15s; }
.wf-step:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--accent) 80%, transparent); }
.wf-step b { display: block; font-size: 13px; color: var(--text); font-weight: 700; } .wf-step small { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.3; }
.wf-step > div { min-width: 0; }
.wf-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.wf-ic svg { width: 18px; height: 18px; }
.wf-arrow { align-self: center; color: var(--faint); display: grid; } .wf-arrow svg { width: 16px; height: 16px; }
[data-theme="dark"] .wf-step { background: rgba(14,20,48,.8); border-color: #252e57; }
@media (max-width: 1100px) { .wf-row { flex-wrap: wrap; } .wf-arrow { display: none; } .wf-step { flex: 1 1 30%; } }

/* ================================================================ insights: period selector, quality score */
.ins-title { justify-content: space-between; align-items: center; } .ins-title > div { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ins-period { display: inline-flex; padding: 3px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); gap: 2px; }
.ins-pb { border: 0; background: transparent; padding: 5px 11px; border-radius: 8px; font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; }
.ins-pb:hover { color: var(--text); } .ins-pb.on { background: var(--accent); color: #fff; box-shadow: 0 6px 14px -8px var(--accent); }
.ins-leg-total { font-size: var(--fs-xs); color: var(--muted); font-weight: 600; margin-bottom: 2px; }
.ins-donut-v { font-weight: 800; letter-spacing: -.03em; }
.home-hero { grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr); }
.home-hero h2 { letter-spacing: -.022em; word-spacing: .04em; }
.start-card b, .kpi2-v, .page-head h1 { letter-spacing: -.018em; }
.hf-live { white-space: nowrap; }
.hf-stats { gap: 5px; } .hf-stats > div { padding: 6px 7px; } .hf-stats b { font-size: 16px; }
.hf-in, .hf-out { padding: 7px 9px; }
.hf-stats small { white-space: normal; overflow: visible; text-overflow: clip; font-size: 10px; line-height: 1.2; }
.hf-mid { padding: 0 16px; }

/* ================================================================ light mode, TaskPro pattern:
   white page with a lavender wash at the top, borderless white cards with big soft shadows, pill buttons,
   one periwinkle-violet accent, solid violet "highlight" cards, navy bold headings, pastel tinted cards. */
:root:not([data-theme="dark"]) {
  --accent: #6c5ce7; --accent-hover: #5a4bd6; --accent-2: #8578f0; --accent-soft: #f1efff; --accent-text: #5a4bd6;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f8f7ff; --surface-3: #f2f1fb;
  --border: #eeedf7; --border-strong: #dedcf0;
  --text: #1b1646; --text-2: #4b4870; --muted: #77748f; --faint: #a8a6bd;
  --heading: #1b1646; --heading-page: #140f3c;
  --click-bg: #ffffff; --click-bg-hover: #f4f2ff; --click-border: #e1ddfb; --click-text: #5a4bd6;
  --band: none;
  --soft-shadow: 0 2px 6px rgba(60,50,150,.04), 0 18px 40px -22px rgba(80,66,200,.28);
  --ins-1: #6c5ce7; --ins-2: #38bdf8;
}
:root:not([data-theme="dark"]) body {
  background: linear-gradient(180deg, #f3f0ff 0px, #f8f6ff 220px, #ffffff 520px) no-repeat, #ffffff; background-attachment: scroll; }
/* cards: no borders, big soft shadow, more rounding */
:root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .stepbar, :root:not([data-theme="dark"]) .glance,
:root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .menu-pop {
  border-color: transparent !important; border-radius: 18px; box-shadow: var(--soft-shadow) !important; }
:root:not([data-theme="dark"]) .card-head, :root:not([data-theme="dark"]) .keys-head, :root:not([data-theme="dark"]) details.fold > summary,
:root:not([data-theme="dark"]) .hc-head, :root:not([data-theme="dark"]) .modal-head {
  background: transparent; box-shadow: none; border-bottom-color: #f0eef9; }
:root:not([data-theme="dark"]) details.fold > summary:hover { background: #f8f7ff; }
:root:not([data-theme="dark"]) .card-head h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 9px;
  vertical-align: 2px; background: linear-gradient(135deg, #6c5ce7, #a78bfa); box-shadow: 0 0 0 4px #f1efff; }
:root:not([data-theme="dark"]) .page-head h1 { color: var(--heading-page); }
:root:not([data-theme="dark"]) .page-head h1::after { background: linear-gradient(90deg, #6c5ce7, #a78bfa); }
:root:not([data-theme="dark"]) table thead th, :root:not([data-theme="dark"]) .table-wrap th { background: #f8f7ff; color: #6b6890; }

/* sidebar and top bar: white; the active page is a solid violet pill */
:root:not([data-theme="dark"]) .sidebar { background: #ffffff; border-right-color: #f0eef9; box-shadow: 4px 0 24px -20px rgba(80,66,200,.35); }
:root:not([data-theme="dark"]) .topbar { background: rgba(255,255,255,.7); border-bottom-color: transparent; }
:root:not([data-theme="dark"]) .brand .logo { background: linear-gradient(135deg, #6c5ce7, #8b7cf6); }
:root:not([data-theme="dark"]) .brand b { color: #6c5ce7; }
:root:not([data-theme="dark"]) .nav-item { border-radius: 12px; }
:root:not([data-theme="dark"]) .nav-item:hover { background: #f4f2ff; }
:root:not([data-theme="dark"]) .nav-item.active { background: linear-gradient(135deg, #6c5ce7, #8073ef); box-shadow: 0 10px 20px -12px rgba(108,92,231,.9); }
:root:not([data-theme="dark"]) .nav-item.active .nav-txt, :root:not([data-theme="dark"]) .nav-item.active svg { color: #fff !important; }

/* buttons: pills – solid violet main action, white outlined for the rest */
:root:not([data-theme="dark"]) .btn { border-radius: 999px; background: #ffffff; border-color: #e1ddfb; color: #5a4bd6; padding-left: 14px; padding-right: 14px; }
:root:not([data-theme="dark"]) .btn svg { color: #6c5ce7; }
:root:not([data-theme="dark"]) .btn:hover { background: #f4f2ff; border-color: #6c5ce7; color: #4a3cc4; }
:root:not([data-theme="dark"]) .btn.primary, :root:not([data-theme="dark"]) .run-opt.primary-opt { background: #6c5ce7; border-color: #6c5ce7; color: #fff;
  box-shadow: 0 10px 22px -12px rgba(108,92,231,.95); }
:root:not([data-theme="dark"]) .btn.primary svg { color: #fff; }
:root:not([data-theme="dark"]) .btn.primary:hover { background: #5a4bd6; border-color: #5a4bd6; color: #fff; }
:root:not([data-theme="dark"]) .btn.ghost { background: transparent; border-color: transparent; }
:root:not([data-theme="dark"]) .btn.icon-btn { border-radius: 12px; }
:root:not([data-theme="dark"]) .jump, :root:not([data-theme="dark"]) .seg { border-radius: 999px; }
:root:not([data-theme="dark"]) .jump { background: #fff; border-color: #e1ddfb; }
:root:not([data-theme="dark"]) .jump.on, :root:not([data-theme="dark"]) .seg-item.active { background: #6c5ce7; color: #fff; }
:root:not([data-theme="dark"]) .seg-item { border-radius: 999px; }
:root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) textarea { border-radius: 12px; border-color: #e6e3f6; }
:root:not([data-theme="dark"]) input:focus, :root:not([data-theme="dark"]) select:focus, :root:not([data-theme="dark"]) textarea:focus {
  border-color: #6c5ce7; box-shadow: 0 0 0 4px #efecff; outline: none; }
:root:not([data-theme="dark"]) .step.now { background: #6c5ce7; border-color: #6c5ce7; box-shadow: 0 10px 22px -14px rgba(108,92,231,.95); }
:root:not([data-theme="dark"]) .step.now .l, :root:not([data-theme="dark"]) .step.now::before { color: #fff; }
:root:not([data-theme="dark"]) .step.now .n { background: #fff; color: #6c5ce7; }

/* home */
:root:not([data-theme="dark"]) .home-hero { background: radial-gradient(520px 260px at 90% 20%, #ece8ff 0%, rgba(236,232,255,0) 70%), #ffffff;
  border-color: transparent; box-shadow: var(--soft-shadow); }
:root:not([data-theme="dark"]) .grad-text { background-image: linear-gradient(90deg, #6c5ce7 0%, #8b7cf6 55%, #b18cff 100%); }
:root:not([data-theme="dark"]) .grad-text.bad { background-image: linear-gradient(90deg, #6c5ce7 0%, #a66cf6 55%, #f0609e 100%); }
:root:not([data-theme="dark"]) .hero-chip { background: #f1efff; border-color: #e1ddfb; color: #5a4bd6; }
:root:not([data-theme="dark"]) .hero-chip.soft { background: #fff; color: #6b6890; border-color: #eceaf7; }
:root:not([data-theme="dark"]) .hf-in, :root:not([data-theme="dark"]) .hf-out { border-color: transparent; box-shadow: 0 8px 22px -14px rgba(80,66,200,.35); border-radius: 14px; }
:root:not([data-theme="dark"]) .hf-card { border-color: transparent; box-shadow: 0 24px 50px -24px rgba(80,66,200,.55); }
:root:not([data-theme="dark"]) .hf-stats > div { background: #f8f7ff; border-color: transparent; }
/* the first KPI is a solid violet highlight card (like TaskPro's "Total Balance") */
:root:not([data-theme="dark"]) .kpi2 { border-color: transparent; }
:root:not([data-theme="dark"]) .kpi2.t-blue { background: linear-gradient(140deg, #6c5ce7 0%, #8576f2 100%); box-shadow: 0 20px 40px -20px rgba(108,92,231,.9) !important; }
:root:not([data-theme="dark"]) .kpi2.t-blue .kpi2-l, :root:not([data-theme="dark"]) .kpi2.t-blue .kpi2-s { color: rgba(255,255,255,.82); }
:root:not([data-theme="dark"]) .kpi2.t-blue .kpi2-v { color: #fff; }
:root:not([data-theme="dark"]) .kpi2.t-blue .ic2 { background: rgba(255,255,255,.2); color: #fff; }
:root:not([data-theme="dark"]) .kpi2.t-blue .spark { color: #fff; }
:root:not([data-theme="dark"]) .kpi2.t-blue::after { background: radial-gradient(closest-side, rgba(255,255,255,.22), transparent); }
/* start cards and feature tiles: pastel tints, no borders */
:root:not([data-theme="dark"]) .start-row .start-card { border-color: transparent; box-shadow: var(--soft-shadow); }
:root:not([data-theme="dark"]) .start-card.t-blue { background: linear-gradient(150deg, #efecff 0%, #ffffff 80%); }
:root:not([data-theme="dark"]) .start-card.t-teal { background: linear-gradient(150deg, #e6f7fb 0%, #ffffff 80%); }
:root:not([data-theme="dark"]) .start-card.t-amber { background: linear-gradient(150deg, #fff4e6 0%, #ffffff 80%); }
:root:not([data-theme="dark"]) .start-card.t-indigo { background: linear-gradient(150deg, #f3eaff 0%, #ffffff 80%); }
:root:not([data-theme="dark"]) .start-row .start-card:hover { box-shadow: 0 24px 44px -22px rgba(80,66,200,.5); border-color: transparent; }
:root:not([data-theme="dark"]) .wf-step { background: #f8f7ff; border-color: transparent; }
:root:not([data-theme="dark"]) .wf-step:hover { background: #fff; box-shadow: 0 16px 30px -18px rgba(80,66,200,.55); }
:root:not([data-theme="dark"]) .ins-period { border-color: transparent; background: #f4f2ff; border-radius: 999px; }
:root:not([data-theme="dark"]) .ins-pb { border-radius: 999px; }
:root:not([data-theme="dark"]) .ins-cell { border-radius: 8px; }
:root:not([data-theme="dark"]) .pl-row:hover { background: #f8f7ff; }
/* pipeline at a glance */
:root:not([data-theme="dark"]) .glance { background: radial-gradient(600px 260px at 85% 0%, #efebff 0%, rgba(239,235,255,0) 70%), #ffffff !important; }
:root:not([data-theme="dark"]) .glance-map-wrap { background: #fbfaff; border-color: transparent; }
:root:not([data-theme="dark"]) .gl-stat, :root:not([data-theme="dark"]) .gl-records { background: #f8f7ff; border-color: transparent; }
.glance-target { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-size: 21px !important; letter-spacing: -.02em; }

/* ================================================================ CTE diagram: tables and CTE steps look different
   tables = database cylinders (curved top and bottom, a lid line) · CTE steps = code cards (folded corner, name in code font) */
.node.ty-input { border-style: solid; border-radius: 50% / 18px; padding-top: 24px; background: linear-gradient(180deg, var(--surface-3), var(--surface-2) 40%, var(--surface-2));
  border-color: var(--border-strong); overflow: hidden; }
.node.ty-input::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 36px; border-radius: 50%; background: var(--surface);
  border-bottom: 1.5px solid var(--border-strong); box-shadow: inset 0 -6px 10px -8px rgba(0,0,0,.18); }
.node.ty-input .k, .node.ty-input .t, .node.ty-input .r, .node.ty-input .bar, .node.ty-input .f { position: relative; z-index: 1; }
.node.ty-input .k { margin-top: 2px; }
.node.ty-input .t { font-family: var(--font-head, var(--font)); }
.node.ty-input:hover { transform: translateY(-1px); }
.node.is-cte { border-radius: 8px 22px 8px 8px; }
.node.is-cte::after { content: ""; position: absolute; top: -1px; right: -1px; width: 22px; height: 22px; border-radius: 0 0 0 7px;
  background: linear-gradient(225deg, var(--bg) 50%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 50%); border-left: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.node.is-cte .t { font-family: var(--mono); font-size: 13.5px; font-weight: 600; letter-spacing: -.01em; }
.node.is-cte .k .st-dot { margin-right: 18px; }
.node.is-cte { background-image: repeating-linear-gradient(0deg, transparent 0 21px, color-mix(in srgb, var(--accent) 4%, transparent) 21px 22px); }
.lg-shape { display: inline-flex; align-items: center; gap: 6px; }
.lg-shape i.cyl { width: 16px; height: 13px; border: 1.5px solid var(--border-strong); border-radius: 50% / 4px; background: var(--surface-2); display: inline-block; }
.lg-shape i.code { width: 16px; height: 13px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 2px 6px 2px 2px; display: inline-block; }

/* the SQL pop-up */
.sql-peek { position: fixed; z-index: 9999; pointer-events: none; opacity: 0; transform: translateY(4px); transition: opacity .14s, transform .14s;
  background: #0f1430; color: #dfe3ff; border: 1px solid #2c3568; border-radius: 14px; box-shadow: 0 24px 50px -18px rgba(10,10,40,.6); overflow: hidden; }
.sql-peek.on { opacity: 1; transform: none; }
.sp-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: linear-gradient(90deg, rgba(124,108,255,.28), rgba(124,108,255,0)); border-bottom: 1px solid #2c3568; }
.sp-head b { font: 600 13px var(--mono); color: #fff; } .sp-kind { margin-left: auto; font-size: 11px; color: #9aa1d6; text-transform: uppercase; letter-spacing: .05em; }
.sp-tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; padding: 1px 7px; border-radius: 999px; background: #7c6cff; color: #fff; }
.sp-code { margin: 0; padding: 10px 12px; font: 12px/1.55 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 360px; overflow: hidden; color: #dfe3ff; }
.sp-foot { padding: 7px 12px; font-size: 11px; color: #9aa1d6; border-top: 1px solid #2c3568; }
.sq-k { color: #b79cff; font-weight: 600; } .sq-s { color: #7ee2b8; } .sq-n { color: #ffcf7a; } .sq-c { color: #7c84b8; font-style: italic; }
.node.ty-input { padding-left: 18px; padding-right: 18px; padding-bottom: 14px; }
.node.ty-input .f { padding-left: 4px; }
.node.is-cte .k { gap: 5px; } .node.is-cte .k .kl { letter-spacing: .02em; } .node.is-cte .cte-tag { padding: 1px 5px; }

/* ================================================================ "release confidence" bands: deep navy, white type, glass chips, a white card on the right.
   Used for Pipeline at a glance, the test-result summary and the "data loaded" card – in both modes. */
:root { --band-bg: radial-gradient(520px 320px at 78% 10%, rgba(99,102,241,.55) 0%, rgba(99,102,241,0) 70%),
  radial-gradient(420px 260px at 100% 100%, rgba(56,189,248,.18) 0%, rgba(56,189,248,0) 70%), linear-gradient(120deg, #0b1435 0%, #142257 55%, #1d2f80 100%); }
.glance, :root:not([data-theme="dark"]) .glance, [data-theme="dark"] .glance {
  background: var(--band-bg) !important; color: #fff !important; border: 0 !important; border-radius: 22px !important;
  box-shadow: 0 30px 60px -32px rgba(20,30,110,.75) !important; padding: 26px 28px !important; gap: 26px !important; align-items: center !important; }
.glance::before { opacity: .08 !important; background-image: radial-gradient(rgba(255,255,255,.9) 1px, transparent 1px) !important; background-size: 22px 22px !important; }
.glance .glance-side { width: 300px; gap: 12px; }
.glance .glance-kicker { color: #a5b4ff !important; font-size: 12px; letter-spacing: .14em; font-weight: 800; }
.glance .glance-target { color: #fff !important; font: 800 30px/1.1 var(--font-head) !important; letter-spacing: -.03em !important; }
.glance .glance-sub { margin: 0; color: rgba(226,232,255,.86); font-size: 14.5px; line-height: 1.55; }
.glance .gl-stat { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 12px; }
.glance .gl-stat b { color: #fff !important; font: 800 20px var(--font-head); } .glance .gl-stat span { color: rgba(226,232,255,.72) !important; }
.glance .gl-bar { background: rgba(255,255,255,.14) !important; }
.glance .gl-bar-legend, .glance .glance-hint { color: rgba(226,232,255,.72) !important; }
.gl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.gl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; cursor: pointer; font: 600 13px var(--font);
  color: #fff; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.22); transition: background .15s, border-color .15s; }
.gl-chip svg { width: 14px; height: 14px; } .gl-chip:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.4); }
/* the map sits in a white card */
.glance .glance-right { gap: 10px; }
.glance .glance-map-wrap, :root:not([data-theme="dark"]) .glance .glance-map-wrap { background: #ffffff !important; border: 0 !important; border-radius: 18px !important;
  padding: 14px !important; box-shadow: 0 24px 50px -24px rgba(5,10,40,.7); }
.glance .glance-legend { color: rgba(226,232,255,.8) !important; }
/* map inside the white card: light boxes, navy text (both modes) */
.glance .gl-lane { fill: #f6f7fd !important; } .glance .gl-lane.alt { fill: #eff1fb !important; }
.glance .gl-lane-t { fill: #5b6390 !important; }
.glance .ha-node > rect { fill: #f1f0ff !important; stroke: #cfcaf6 !important; }
.glance .ha-node > text { fill: #1b1646 !important; } .glance .ha-node > text.n { fill: #59578a !important; }
.glance .gl-node:hover > rect, .glance .gl-node:focus > rect { fill: #e6e2ff !important; stroke: #6c5ce7 !important; }
.glance .gl-node.fail > rect { fill: #fdeeed !important; stroke: #e5484d !important; stroke-width: 2 !important; }
.glance .gl-node.warn > rect { fill: #fff6e6 !important; stroke: #f59e0b !important; stroke-width: 2 !important; }
.glance .ha-node.target > rect { fill: #6c5ce7 !important; stroke: #6c5ce7 !important; filter: drop-shadow(0 0 10px rgba(108,92,231,.5)); }
.glance .ha-node.target.fail > rect { stroke: #e5484d !important; stroke-width: 2.5 !important; }
.glance .ha-node.target > text, .glance .ha-node.target > text.n { fill: #fff !important; }
.glance .ha-link { stroke: #b9b5e3 !important; } .glance .ha-flow { stroke: #6c5ce7 !important; }
.glance .gl-dot { fill: #8f8cb8 !important; } .glance .ha-node.target .gl-dot { fill: #fff !important; }
.glance .gl-badge.grouped rect { fill: #d9d6f3 !important; } .glance .gl-badge.grouped text { fill: #1b1646 !important; }
[data-theme="dark"] .glance .glance-map-wrap { background: #f8f8ff !important; }
@media (max-width: 900px) { .glance .glance-side { width: auto; } }

/* the test-result summary: the verdict row becomes a navy band */
.results-card { overflow: hidden; }
.results-card .verdict, :root:not([data-theme="dark"]) .results-card .verdict, [data-theme="dark"] .results-card .verdict {
  background: var(--band-bg) !important; color: #fff; border: 0 !important; box-shadow: none !important; padding: 22px 26px; border-radius: 0; }
.results-card .verdict h3 { color: #fff !important; font: 800 24px/1.2 var(--font-head); letter-spacing: -.025em; margin: 0 0 4px; }
.results-card .verdict p { color: rgba(226,232,255,.82) !important; }
.results-card .verdict.bad h3::before, .results-card .verdict.warn h3::before, .results-card .verdict.good h3::before {
  content: "TEST RESULT"; display: block; font: 800 11.5px var(--font); letter-spacing: .14em; color: #a5b4ff; margin-bottom: 6px; }
.results-card .verdict .verdict-more { color: #fff !important; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.24); padding: 7px 12px; border-radius: 10px; }
.results-card .verdict .verdict-more svg { color: #fff; }
.results-card .verdict:hover .verdict-more { background: rgba(255,255,255,.18); }
.results-card .verdict .res-ring { background: #fff; border-radius: 50%; padding: 6px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); }
.results-card .verdict .res-ring b { color: #1b1646 !important; } .results-card .verdict .res-ring small { color: #59578a !important; }
.results-card .verdict.bad { box-shadow: inset 5px 0 0 #f87171 !important; } .results-card .verdict.warn { box-shadow: inset 5px 0 0 #fbbf24 !important; }
.results-card .verdict.good { box-shadow: inset 5px 0 0 #34d399 !important; }
.results-card .verdict::before, .results-card .verdict::after { display: none !important; }

/* "data loaded – no tests run yet" */
.card.run-tests, :root:not([data-theme="dark"]) .card.run-tests { background: var(--band-bg) !important; color: #fff; border: 0 !important; border-radius: 20px;
  box-shadow: 0 26px 50px -30px rgba(20,30,110,.75) !important; padding: 20px 24px; }
.card.run-tests h3 { color: #fff !important; font: 800 22px var(--font-head); letter-spacing: -.02em; }
.card.run-tests p { color: rgba(226,232,255,.84) !important; }
.card.run-tests .rt-ic { background: rgba(255,255,255,.12) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.22); }
.card.run-tests .btn:not(.primary) { background: rgba(255,255,255,.09) !important; border-color: rgba(255,255,255,.26) !important; color: #fff !important; }
.card.run-tests .btn:not(.primary) svg { color: #fff !important; }
.card.run-tests .btn.primary { background: #ffffff !important; color: #3b2fc0 !important; border-color: #fff !important; }
.card.run-tests .btn.primary svg { color: #3b2fc0 !important; }
.glance .glance-target { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; font-size: 26px !important; }
.results-card .verdict .res-ring { padding: 0; }

/* ================================================================ one font everywhere: Inter (as on the TraceProof website) – bold, tight headings */
:root { --font-head: "Inter", "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; --font-display: var(--font-head); }
.page-head h1, .home-hero h2, .glance .glance-target, .results-card .verdict h3, .card.run-tests h3 { letter-spacing: -.03em !important; }
.card-head h3, .ins-head h3, .wf-head h3, .start-card b, .kpi2-v, .ins-big b { letter-spacing: -.02em; }

/* ================================================================ dark: a little lighter navy */
[data-theme="dark"] {
  --bg: #10163a; --surface: #182050; --surface-2: #1c2558; --surface-3: #232d66;
  --border: #303b78; --border-strong: #404c8c; --muted: #9aa0cc; --faint: #6a71a3;
}
[data-theme="dark"] body {
  background: radial-gradient(900px 480px at 85% -10%, rgba(124,108,255,.26) 0%, rgba(124,108,255,0) 70%),
              radial-gradient(700px 420px at 0% 100%, rgba(34,211,238,.10) 0%, rgba(34,211,238,0) 70%), var(--bg); }
[data-theme="dark"] .sidebar { background: rgba(20,27,66,.95); border-right-color: #2a346e; }
[data-theme="dark"] .topbar { background: rgba(16,22,58,.75); border-bottom-color: #2a346e; }
[data-theme="dark"] .card { background: linear-gradient(180deg, rgba(31,40,92,.95), rgba(25,33,80,.95)); border-color: #323e7c; }
[data-theme="dark"] .btn { background: #222c66; border-color: #3a4688; }
[data-theme="dark"] .btn:hover { background: #2a3576; }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea { background: #151c48; border-color: #36427f; }
[data-theme="dark"] .hf-in, [data-theme="dark"] .hf-out { background: rgba(28,37,88,.9); border-color: #3a4688; }
[data-theme="dark"] .hf-card { background: rgba(24,32,80,.97); } [data-theme="dark"] .hf-stats > div { background: #151c48; border-color: #323e7c; }
[data-theme="dark"] .wf-step { background: rgba(24,32,80,.85); border-color: #323e7c; }
[data-theme="dark"] .start-card.t-blue, [data-theme="dark"] .start-card.t-teal, [data-theme="dark"] .start-card.t-amber, [data-theme="dark"] .start-card.t-indigo { border-color: #36427f; }
[data-theme="dark"] table thead th, [data-theme="dark"] .table-wrap th { background: #1e275c; }
[data-theme="dark"] .modal, [data-theme="dark"] .drawer, [data-theme="dark"] .menu-pop { background: #182050; border-color: #36427f; }

/* ================================================================ light: clear, darker borders (TaskPro's card outlines) */
:root:not([data-theme="dark"]) { --border: #dcd8ee; --border-strong: #c6c1e3; }
:root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .stepbar, :root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .menu-pop {
  border: 1px solid #d9d5ee !important; box-shadow: 0 1px 2px rgba(40,30,110,.05), 0 14px 32px -24px rgba(80,66,200,.3) !important; }
:root:not([data-theme="dark"]) .start-row .start-card, :root:not([data-theme="dark"]) .kpi2, :root:not([data-theme="dark"]) .hf-in,
:root:not([data-theme="dark"]) .hf-out, :root:not([data-theme="dark"]) .hf-card, :root:not([data-theme="dark"]) .wf-step, :root:not([data-theme="dark"]) .home-hero {
  border: 1px solid #d9d5ee !important; }
:root:not([data-theme="dark"]) .start-card.t-blue { border-color: #cfc8f6 !important; } :root:not([data-theme="dark"]) .start-card.t-teal { border-color: #bfe3ee !important; }
:root:not([data-theme="dark"]) .start-card.t-amber { border-color: #f1d9b3 !important; } :root:not([data-theme="dark"]) .start-card.t-indigo { border-color: #ddcaf6 !important; }
:root:not([data-theme="dark"]) .kpi2.t-blue { border-color: #6c5ce7 !important; }
:root:not([data-theme="dark"]) .start-row .start-card:hover, :root:not([data-theme="dark"]) .wf-step:hover { border-color: #6c5ce7 !important; }
:root:not([data-theme="dark"]) .card-head { border-bottom: 1px solid #e3e0f2; }
:root:not([data-theme="dark"]) .btn { border-color: #cfc9f3; }
:root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) textarea { border-color: #d3cfea; }
:root:not([data-theme="dark"]) .sidebar { border-right: 1px solid #e3e0f2; } :root:not([data-theme="dark"]) .topbar { border-bottom: 1px solid #e9e6f6; }
:root:not([data-theme="dark"]) .node { border-color: #d3cfea; }
:root:not([data-theme="dark"]) .results-card .kpi, :root:not([data-theme="dark"]) .tc { border-color: #dcd8ee; }

/* ================================================================ light: very dark, crisp borders */
:root:not([data-theme="dark"]) { --border: #8f88c4; --border-strong: #5f58a0; --line-dark: #5f58a0; }
:root:not([data-theme="dark"]) .card, :root:not([data-theme="dark"]) .stepbar, :root:not([data-theme="dark"]) .modal, :root:not([data-theme="dark"]) .menu-pop,
:root:not([data-theme="dark"]) .start-row .start-card, :root:not([data-theme="dark"]) .kpi2, :root:not([data-theme="dark"]) .hf-in, :root:not([data-theme="dark"]) .hf-out,
:root:not([data-theme="dark"]) .hf-card, :root:not([data-theme="dark"]) .wf-step, :root:not([data-theme="dark"]) .home-hero,
:root:not([data-theme="dark"]) .start-card.t-blue, :root:not([data-theme="dark"]) .start-card.t-teal, :root:not([data-theme="dark"]) .start-card.t-amber,
:root:not([data-theme="dark"]) .start-card.t-indigo { border: 1.5px solid var(--line-dark) !important; }
:root:not([data-theme="dark"]) .kpi2.t-blue { border-color: #3f32b8 !important; }
:root:not([data-theme="dark"]) .start-row .start-card:hover, :root:not([data-theme="dark"]) .wf-step:hover { border-color: #3f32b8 !important; }
:root:not([data-theme="dark"]) .card-head { border-bottom: 1.5px solid #b9b3df; }
:root:not([data-theme="dark"]) .btn { border: 1.5px solid #6c64ad; }
:root:not([data-theme="dark"]) .btn.ghost { border-color: transparent; }
:root:not([data-theme="dark"]) input, :root:not([data-theme="dark"]) select, :root:not([data-theme="dark"]) textarea { border: 1.5px solid #8f88c4; }
:root:not([data-theme="dark"]) .sidebar { border-right: 1.5px solid #8f88c4; } :root:not([data-theme="dark"]) .topbar { border-bottom: 1.5px solid #b9b3df; }
:root:not([data-theme="dark"]) .node { border: 1.5px solid #7a73b8; }
:root:not([data-theme="dark"]) .results-card .kpi, :root:not([data-theme="dark"]) .tc { border: 1.5px solid #8f88c4; }
:root:not([data-theme="dark"]) .hero-chip.soft, :root:not([data-theme="dark"]) .jump, :root:not([data-theme="dark"]) .ins-period { border: 1.5px solid #8f88c4; }

/* ================================================================ illustrations: page headers, start cards, colourful nav, background shapes */
/* the parts inside every illustration */
.art-card { fill: #ffffff; stroke: #d6d1f2; stroke-width: 1.2; }
.art-card-fill { fill: #ffffff; }
.art-ink { fill: #2a2470; } .art-soft { fill: #d5d1ef; } .art-cell { fill: #eeecfb; } .art-hi { fill: #8b7cf6; }
.art-wire { stroke: #c9c4ea; stroke-width: 2.4; }
.art-flow { stroke-dasharray: 6 8; animation: artDash 1.6s linear infinite; }
.art-pulse { animation: artPulse 2.2s ease-in-out infinite; } .art-pulse.d2 { animation-delay: .7s; }
.art-hand { transform-origin: 222px 96px; animation: artSpin 8s linear infinite; }
.art-label, .art-tag { font: 800 10px var(--font); letter-spacing: .08em; fill: #4b4690; }
.art-chip { font: 700 7.5px var(--mono); fill: #fff; } .art-code { font: 700 12px var(--mono); } .art-bang { font: 900 12px var(--font); fill: #fff; }
@keyframes artDash { to { stroke-dashoffset: -28; } } @keyframes artPulse { 50% { opacity: .3; } } @keyframes artSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .art-flow, .art-pulse, .art-hand { animation: none; } }
[data-theme="dark"] .art-card, [data-theme="dark"] .art-card-fill { fill: #222b66; stroke: #3c4890; }
[data-theme="dark"] .art-ink { fill: #e6e8ff; } [data-theme="dark"] .art-soft { fill: #4a5596; } [data-theme="dark"] .art-cell { fill: #2c3676; }
[data-theme="dark"] .art-wire { stroke: #3f4a8e; } [data-theme="dark"] .art-label, [data-theme="dark"] .art-tag { fill: #c4c8f2; }

/* page header with a picture: a soft gradient band */
.page-head.has-art { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px;
  padding: 20px 26px; margin-bottom: 20px; border-radius: 22px; overflow: hidden; isolation: isolate;
  background: radial-gradient(420px 220px at 88% 30%, rgba(139,124,246,.28), rgba(139,124,246,0) 70%),
              radial-gradient(360px 200px at 70% 110%, rgba(56,189,248,.20), rgba(56,189,248,0) 70%),
              linear-gradient(120deg, #ffffff 0%, #f4f2ff 60%, #eaf6fd 100%); }
.page-head.has-art::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .5;
  background-image: radial-gradient(rgba(108,92,231,.22) 1px, transparent 1px); background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.page-head.has-art .ph-txt { min-width: 0; }
.page-head.has-art h1 { font-size: 30px !important; margin: 0; }
.page-head.has-art p { margin: 8px 0 0; max-width: 680px; font-size: 14.5px; }
.page-head.has-art .actions { margin-top: 14px; display: flex; gap: 8px; flex-wrap: wrap; }
.page-art { width: 300px; height: 140px; margin: -10px -6px -10px 0; } .page-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
:root:not([data-theme="dark"]) .page-head.has-art { border: 1.5px solid var(--line-dark, #8f88c4); }
[data-theme="dark"] .page-head.has-art { border: 1px solid #36427f;
  background: radial-gradient(420px 220px at 88% 30%, rgba(124,108,255,.42), rgba(124,108,255,0) 70%),
              radial-gradient(360px 200px at 70% 110%, rgba(34,211,238,.16), rgba(34,211,238,0) 70%), linear-gradient(120deg, #1a2256 0%, #1d1d5e 60%, #182a66 100%); }
[data-theme="dark"] .page-head.has-art::before { background-image: radial-gradient(rgba(255,255,255,.22) 1px, transparent 1px); }
@media (max-width: 900px) { .page-head.has-art { grid-template-columns: minmax(0, 1fr); } .page-art { display: none; } }

/* start cards: a picture on top instead of the plain icon */
.start-row .start-card.has-art { padding-top: 14px; }
.start-art { width: 140px; height: 90px; margin: -2px 0 0 -4px; } .start-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.start-row .start-card.has-art:hover .start-art { transform: translateY(-2px) scale(1.03); } .start-art { transition: transform .2s; }

/* sidebar: every page gets its own colour tile */
.nav-item svg { width: 26px !important; height: 26px !important; padding: 5px; border-radius: 8px; flex: none; stroke-width: 2.1;
  background: color-mix(in srgb, var(--nc, #6c5ce7) 14%, transparent); color: var(--nc, #6c5ce7) !important; opacity: 1 !important; }
.nk-home { --nc: #6c5ce7; } .nk-pipeline { --nc: #4f6ef7; } .nk-runs { --nc: #0ea5e9; } .nk-rules { --nc: #f59e0b; } .nk-schedule { --nc: #14b8a6; }
.nk-test-models { --nc: #22c55e; } .nk-compare { --nc: #ec4899; } .nk-env { --nc: #8b5cf6; } .nk-files { --nc: #f97316; } .nk-dbt { --nc: #ef4444; } .nk-access { --nc: #64748b; }
.nav-item.active svg { background: rgba(255,255,255,.22) !important; color: #fff !important; }
[data-theme="dark"] .nav-item svg { background: color-mix(in srgb, var(--nc, #8b7cf6) 22%, transparent); color: color-mix(in srgb, var(--nc, #8b7cf6) 70%, #fff) !important; }
[data-theme="dark"] .nav-item.active svg { background: rgba(255,255,255,.18) !important; }

/* background: soft colour shapes behind everything */
.main, .content { position: relative; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(480px 360px at 18% 12%, rgba(139,124,246,.10), transparent 70%),
              radial-gradient(520px 380px at 92% 38%, rgba(56,189,248,.09), transparent 70%),
              radial-gradient(460px 340px at 55% 96%, rgba(244,114,182,.07), transparent 70%); }
[data-theme="dark"] body::before {
  background: radial-gradient(520px 380px at 20% 20%, rgba(124,108,255,.16), transparent 70%),
              radial-gradient(560px 400px at 92% 50%, rgba(34,211,238,.10), transparent 70%),
              radial-gradient(500px 360px at 50% 100%, rgba(236,72,153,.08), transparent 70%); }

/* ================================================================ Quick checks */
.nk-checks { --nc: #e11d48; }
.qc-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 16px; }
@media (max-width: 1100px) { .qc-grid { grid-template-columns: minmax(0, 1fr); } }
.qc-card .card-head { display: flex; align-items: center; gap: 10px; }
.qc-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font); color: #fff; flex: none;
  background: linear-gradient(135deg, #6c5ce7, #8b7cf6); box-shadow: 0 6px 14px -8px rgba(108,92,231,.9); }
.qc-row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 720px) { .qc-row3 { grid-template-columns: minmax(0, 1fr); } }
.qc-info { display: flex; gap: 8px; flex-wrap: wrap; }
.qc-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  background: var(--accent-soft); color: var(--accent-text); } .qc-chip svg { width: 14px; height: 14px; }
/* the check gallery */
.qc-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.qc-tile { --tc: #6c5ce7; text-align: left; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; align-items: center;
  padding: 12px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--text); transition: transform .15s, box-shadow .15s, border-color .15s;
  background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 10%, var(--surface)) 0%, var(--surface) 80%); border: 1.5px solid color-mix(in srgb, var(--tc) 30%, var(--border)); }
.qc-tile .qc-ic { grid-row: 1 / span 2; }
.qc-tile b { font: 700 14px var(--font-head, var(--font)); } .qc-tile small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.qc-tile:hover { transform: translateY(-2px); border-color: var(--tc); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--tc) 80%, transparent); }
.qc-tile.on { border-color: var(--tc); border-width: 2px; background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 20%, var(--surface)) 0%, var(--surface) 85%);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--tc) 16%, transparent); }
.qc-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--tc, #6c5ce7), color-mix(in srgb, var(--tc, #6c5ce7) 60%, #fff)); box-shadow: 0 8px 16px -10px var(--tc, #6c5ce7); }
.qc-ic svg { width: 19px; height: 19px; } .qc-ic.sm { width: 30px; height: 30px; border-radius: 9px; } .qc-ic.sm svg { width: 16px; height: 16px; }
.t-violet { --tc: #7c5cf0; } .t-blue { --tc: #3b82f6; } .t-amber { --tc: #f59e0b; } .t-pink { --tc: #ec4899; } .t-green { --tc: #16a34a; } .t-teal { --tc: #0d9488; } .t-indigo { --tc: #6366f1; }
.qc-settings { border-top: 4px solid var(--tc, #6c5ce7) !important; }
.qc-formula { display: grid; grid-template-columns: minmax(0, .8fr) auto minmax(0, 1.4fr); gap: 10px; align-items: end; }
.qc-eq { font: 800 22px var(--font-head, var(--font)); color: var(--accent); padding-bottom: 8px; }
.qc-note { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-text); font-weight: 500; }
.qc-note svg { width: 16px; height: 16px; flex: none; }
/* the answer */
.qc-result { overflow: hidden; padding: 0 !important; }
.qc-band { display: flex; align-items: center; gap: 16px; padding: 20px 24px; color: #fff; background: var(--band-bg); }
.qc-band.ok { box-shadow: inset 6px 0 0 #34d399; } .qc-band.bad { box-shadow: inset 6px 0 0 #f87171; }
.qc-band-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.qc-band.ok .qc-band-ic { background: #22c55e; box-shadow: 0 0 0 6px rgba(34,197,94,.22); } .qc-band.bad .qc-band-ic { background: #ef4444; box-shadow: 0 0 0 6px rgba(239,68,68,.22); }
.qc-band-ic svg { width: 26px; height: 26px; color: #fff; }
.qc-kicker { font: 800 11.5px var(--font); letter-spacing: .13em; text-transform: uppercase; color: #a5b4ff; }
.qc-band h3 { margin: 4px 0 2px; font: 800 21px/1.25 var(--font-head, var(--font)); letter-spacing: -.02em; color: #fff; }
.qc-band p { margin: 0; color: rgba(226,232,255,.8); font-size: 13.5px; }
.qc-band .btn.primary { background: #fff !important; color: #3b2fc0 !important; border-color: #fff !important; } .qc-band .btn.primary svg { color: #3b2fc0 !important; }
.qc-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.qc-metric { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); }
.qc-metric span { display: block; font-size: 12px; color: var(--muted); font-weight: 600; }
.qc-metric b { font: 800 22px var(--font-head, var(--font)); letter-spacing: -.02em; color: var(--heading-page, var(--text)); }
.qc-sub { padding: 16px 24px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.qc-sub h4 { margin: 0; font: 700 15px var(--font-head, var(--font)); color: var(--heading, var(--text)); }
.qc-result > details { margin: 12px 24px 18px; }
/* missing values: one bar per column */
.qc-missing { display: flex; flex-direction: column; gap: 6px; }
.qc-mrow { display: grid; grid-template-columns: minmax(150px, 230px) 1fr 90px minmax(120px, 190px); gap: 12px; align-items: center; font-size: 13px; }
.qc-mcol b { display: block; font-family: var(--mono); font-size: 12.5px; } .qc-mcol small { color: var(--muted); font-size: 11px; }
.qc-mbar { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.qc-mbar i { display: block; height: 100%; border-radius: 999px; } .qc-mbar i.ok { background: linear-gradient(90deg, #22c55e, #4ade80); }
.qc-mbar i.warn { background: linear-gradient(90deg, #f59e0b, #fcd34d); } .qc-mbar i.bad { background: linear-gradient(90deg, #ef4444, #f472b6); }
.qc-mpct { font-weight: 700; } .qc-mnum { color: var(--muted); font-size: 12px; }
/* allowed values: the values found */
.qc-values { display: flex; flex-wrap: wrap; gap: 8px; }
.qc-val { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; }
.qc-val b { font-family: var(--mono); font-size: 12.5px; } .qc-val small { color: var(--muted); font-size: 11.5px; }
.qc-val.ok { border-color: color-mix(in srgb, var(--pass) 55%, var(--border)); } .qc-val.bad { border-color: color-mix(in srgb, var(--fail) 60%, var(--border)); background: var(--fail-bg); }
.qc-val.warn { border-color: color-mix(in srgb, var(--warn) 60%, var(--border)); }
[data-theme="dark"] .qc-tile { background: linear-gradient(150deg, color-mix(in srgb, var(--tc) 18%, var(--surface)) 0%, var(--surface) 80%); }

/* ================================================================ Quick checks: one flow, scan cards, duplicate differences */
.qc-flow { margin-bottom: 16px; }
.qc-flow .qc-row3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.qc-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qc-tile:first-child { grid-column: span 2; }
@media (max-width: 1100px) { .qc-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .qc-gallery { grid-template-columns: minmax(0, 1fr); } .qc-tile:first-child { grid-column: auto; } }
.t-rose { --tc: #e11d48; }
.qc-tile.t-rose { background: linear-gradient(120deg, color-mix(in srgb, #6c5ce7 14%, var(--surface)) 0%, color-mix(in srgb, #ec4899 10%, var(--surface)) 100%); }
.qc-tile.t-rose .qc-ic { background: linear-gradient(135deg, #6c5ce7, #ec4899); }
/* findings */
.qc-findings { display: flex; flex-direction: column; gap: 8px; }
.qc-find { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); }
.qc-find.bad { border-color: color-mix(in srgb, var(--fail) 45%, var(--border)); background: color-mix(in srgb, var(--fail) 6%, var(--surface)); }
.qc-find.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.qc-find-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: #fff; }
.qc-find.bad .qc-find-ic { background: var(--fail); } .qc-find.warn .qc-find-ic { background: var(--warn); } .qc-find-ic svg { width: 16px; height: 16px; }
.qc-find b { font-family: var(--mono); font-size: 13px; }
.qc-allgood { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--pass-bg); color: var(--pass); font-weight: 600; }
.qc-allgood svg { width: 18px; height: 18px; }
/* one card per column */
.qc-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.qc-colcard { --kc: #6c5ce7; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); display: flex; flex-direction: column; gap: 9px;
  border-top: 4px solid var(--kc); }
.qc-colcard.k-number { --kc: #0ea5e9; } .qc-colcard.k-date { --kc: #14b8a6; } .qc-colcard.k-text { --kc: #8b5cf6; }
.qc-cc-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qc-cc-head b { font: 700 13.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-kind { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 800 11px var(--font); flex: none;
  background: color-mix(in srgb, var(--kc) 15%, transparent); color: var(--kc); }
.qc-star { margin-left: auto; color: #f59e0b; font-size: 16px; }
.qc-cc-fill { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; } .qc-cc-fill small { font-weight: 700; font-size: 12px; }
.qc-cc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.qc-cc-stats span { padding: 6px 8px; border-radius: 9px; background: var(--surface-2); min-width: 0; }
.qc-cc-stats small { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.qc-cc-stats b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-top { display: flex; flex-direction: column; gap: 4px; }
.qc-top-r { display: grid; grid-template-columns: minmax(0, 90px) 1fr 34px; gap: 8px; align-items: center; font-size: 12px; }
.qc-top-r > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); }
.qc-top-bar { height: 7px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.qc-top-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--kc), color-mix(in srgb, var(--kc) 50%, #fff)); }
.qc-top-r small { text-align: right; color: var(--muted); }
/* duplicates: what differs */
.qc-differs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.qc-dcard { border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--fail) 35%, var(--border)); overflow: hidden; background: var(--surface); }
.qc-dhead { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: color-mix(in srgb, var(--fail) 8%, var(--surface)); }
.qc-dhead b { font: 700 13px var(--mono); } .qc-dcopies { margin-left: auto; font: 800 12px var(--font); color: #fff; background: var(--fail); padding: 2px 9px; border-radius: 999px; }
.qc-dbody { padding: 8px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.qc-drow { display: grid; grid-template-columns: minmax(0, 120px) 1fr; gap: 8px; align-items: center; font-size: 12.5px; }
.qc-dcol { font-family: var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.qc-dvals { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.qc-dv { padding: 2px 8px; border-radius: 7px; background: #fff3c4; color: #7a4b00; font-weight: 700; font-family: var(--mono); font-size: 12px; }
[data-theme="dark"] .qc-dv { background: #4a3a0c; color: #ffd76a; }
.qc-dsep { color: var(--faint); }
.qc-dsame { display: flex; gap: 8px; align-items: center; padding: 10px 12px; color: var(--muted); font-size: 12.5px; } .qc-dsame svg { width: 14px; height: 14px; }

/* ================================================================ table Overview: everything on one page */
.ov { display: flex; flex-direction: column; gap: 16px; }
/* the verdict band */
.ov-band { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 22px; align-items: center; padding: 22px 24px;
  border-radius: 20px; color: #fff; overflow: hidden; isolation: isolate; background: var(--band-bg); box-shadow: 0 26px 50px -30px rgba(20,30,110,.8); }
.ov-band::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .08; background-image: radial-gradient(#fff 1px, transparent 1px); background-size: 20px 20px; }
.ov-band.t-bad { box-shadow: inset 6px 0 0 #f87171, 0 26px 50px -30px rgba(20,30,110,.8); } .ov-band.t-warn { box-shadow: inset 6px 0 0 #fbbf24, 0 26px 50px -30px rgba(20,30,110,.8); }
.ov-band.t-ok { box-shadow: inset 6px 0 0 #34d399, 0 26px 50px -30px rgba(20,30,110,.8); }
.ov-score { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; text-align: center; background: #fff; color: #1b1646;
  box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 18px 30px -16px rgba(0,0,0,.6); position: relative; }
.ov-score::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 5px solid var(--sc, #22c55e); border-right-color: transparent; transform: rotate(-30deg); }
.ov-score.t-warn { --sc: #f59e0b; } .ov-score.t-bad { --sc: #ef4444; } .ov-score.t-na { --sc: #cbd5e1; }
.ov-score b { font: 800 28px/1 var(--font-head, var(--font)); letter-spacing: -.03em; } .ov-score small { font-size: 9.5px; line-height: 1.15; color: #6c6a85; font-weight: 600; }
.ov-kicker { font: 800 11px var(--font); letter-spacing: .14em; text-transform: uppercase; color: #a5b4ff; }
.ov-say h3 { margin: 4px 0 6px; font: 800 23px/1.2 var(--font-head, var(--font)); letter-spacing: -.025em; color: #fff; }
.ov-say p { margin: 0; color: rgba(226,232,255,.86); font-size: 13.5px; line-height: 1.55; max-width: 720px; }
.ov-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ov-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; font: 600 12.5px var(--font); color: #fff; cursor: pointer;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.26); transition: background .15s, transform .15s; }
.ov-chip:hover { background: rgba(255,255,255,.2); transform: translateY(-1px); } .ov-chip svg { width: 14px; height: 14px; }
.ov-glass { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px); }
.ov-glass.col { flex-direction: column; align-items: flex-start; gap: 6px; }
.ov-glass span { display: block; font-size: 11px; color: #c7cdf7; } .ov-glass b { font: 800 28px var(--font-head, var(--font)); letter-spacing: -.03em; }
.ov-glass .ov-arrow { font-size: 20px; color: #a5b4ff; }
.ov-badges { display: flex; gap: 6px; flex-wrap: wrap; } .ov-badges i { font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; color: #fff; }
.ov-badges .f { background: #ef4444; } .ov-badges .w { background: #f59e0b; } .ov-badges .p { background: #22c55e; }
@media (max-width: 1100px) { .ov-band { grid-template-columns: auto minmax(0, 1fr); } .ov-glass { grid-column: span 1; } }
/* cards */
.ov-row3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.ov-card { padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--line-dark, var(--border)); background: var(--surface); display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 14px 30px -26px rgba(60,40,160,.5); min-width: 0; }
.ov-head { display: flex; align-items: center; gap: 10px; } .ov-head h4 { margin: 0; font: 800 15.5px var(--font-head, var(--font)); letter-spacing: -.015em; color: var(--heading, var(--text)); }
.ov-dot { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, #6c5ce7, #a78bfa); box-shadow: 0 0 0 4px color-mix(in srgb, #6c5ce7 14%, transparent); flex: none; }
.ov-more { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font: 700 12.5px var(--font); color: var(--accent-text); padding: 4px 6px; border-radius: 8px; }
.ov-more:hover { background: var(--accent-soft); } .ov-more svg { width: 13px; height: 13px; }
.ov-wf { display: flex; flex-direction: column; gap: 8px; }
.ov-wr { display: grid; grid-template-columns: minmax(90px, 130px) 1fr 56px; gap: 10px; align-items: center; font-size: 12.5px; }
.ov-wr > span:first-child { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; overflow: hidden; } .ov-wr small { color: var(--muted); font-weight: 400; font-size: 11px; }
.ov-wr.out > span:first-child { font-weight: 800; }
.ov-wb { position: relative; height: 22px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.ov-wb i { position: absolute; top: 0; bottom: 0; border-radius: 8px; } .ov-wb .in { background: linear-gradient(90deg, #94a3b8, #cbd5e1); }
.ov-wb .base { background: color-mix(in srgb, #6c5ce7 14%, var(--surface-3)); } .ov-wb .loss { background: linear-gradient(90deg, #ef4444, #f87171); }
.ov-wb .gain { background: linear-gradient(90deg, #f59e0b, #fbbf24); } .ov-wb .grp { background: #a5b4fc; } .ov-wb .out { background: linear-gradient(90deg, #6c5ce7, #a78bfa); box-shadow: 0 0 14px -4px #6c5ce7; }
.ov-wr b { text-align: right; font-weight: 800; } .ov-wr b.up, em.up { color: var(--warn); } .ov-wr b.dn, em.dn { color: var(--fail); } em { font-style: normal; font-weight: 700; }
.ov-why { font-size: 12px; color: var(--muted); background: var(--surface-2); border-radius: 10px; padding: 8px 10px; line-height: 1.45; }
.ov-fix { display: flex; flex-direction: column; gap: 8px; }
.ov-fixrow { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 9px 11px; border-radius: 12px; cursor: pointer; font: inherit; color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--fail) 35%, var(--border)); background: color-mix(in srgb, var(--fail) 5%, var(--surface)); transition: transform .15s; }
.ov-fixrow.w { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.ov-fixrow:hover { transform: translateX(3px); } .ov-fixrow b { display: block; font-size: 12.5px; } .ov-fixrow span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.ov-fi { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff; font-weight: 800; font-size: 12px; background: var(--fail); }
.ov-fixrow.w .ov-fi { background: var(--warn); }
.ov-good { display: flex; gap: 8px; align-items: center; padding: 12px; border-radius: 12px; background: var(--pass-bg); color: var(--pass); font-weight: 600; } .ov-good svg { width: 16px; height: 16px; }
.ov-dims { display: flex; flex-direction: column; gap: 9px; }
.ov-dim { display: grid; grid-template-columns: 108px 1fr 30px; gap: 10px; align-items: center; font: 500 12.5px var(--font); color: var(--text); border: 0; background: none; padding: 3px 4px;
  border-radius: 8px; cursor: pointer; text-align: left; } .ov-dim:hover { background: var(--surface-2); } .ov-dim b { text-align: right; }
.ov-bar { display: block; height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .ov-bar i { display: block; height: 100%; border-radius: 999px; }
.ov-bar .t-ok { background: linear-gradient(90deg, #22c55e, #4ade80); } .ov-bar .t-warn { background: linear-gradient(90deg, #f59e0b, #fcd34d); }
.ov-bar .t-bad { background: linear-gradient(90deg, #ef4444, #f472b6); } .ov-bar .t-na { background: transparent; }
/* how it is built */
.ov-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); } .ov-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ov-legend i.cyl { width: 16px; height: 13px; border: 1.5px solid var(--border-strong); border-radius: 50% / 4px; background: var(--surface-2); }
.ov-legend i.code { width: 16px; height: 13px; border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--border)); border-radius: 2px 6px 2px 2px; }
.ov-strip { display: flex; align-items: center; overflow-x: auto; padding: 22px 2px 6px; }
.ov-ins { display: flex; flex-direction: column; gap: 6px; flex: none; }
.ov-cyl { width: 128px; height: 58px; border: 1.5px solid var(--border-strong); border-radius: 50% / 12px; background: linear-gradient(180deg, var(--surface-3), var(--surface-2));
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding-bottom: 8px; position: relative; overflow: hidden; }
.ov-cyl::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 22px; border-radius: 50%; border-bottom: 1.5px solid var(--border-strong); background: var(--surface); }
.ov-cyl b { position: relative; font: 600 11px var(--mono); max-width: 112px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-cyl small { position: relative; font-size: 10.5px; color: var(--muted); }
.ov-arr { position: relative; flex: 1 0 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 9px); }
.ov-arr span { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font: 700 10.5px var(--font); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 0 6px; }
.ov-cte { position: relative; flex: none; width: 140px; min-height: 74px; text-align: left; padding: 9px 11px; border-radius: 8px 18px 8px 8px; cursor: pointer; font: inherit; color: var(--text);
  border: 1.5px solid var(--border-strong); background: var(--surface); display: flex; flex-direction: column; gap: 2px; transition: transform .15s, box-shadow .15s; }
.ov-cte::after { content: ""; position: absolute; top: -1.5px; right: -1.5px; width: 18px; height: 18px; border-radius: 0 0 0 6px;
  background: linear-gradient(225deg, var(--bg) 50%, color-mix(in srgb, var(--accent) 22%, var(--surface)) 50%); border-left: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  border-bottom: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--border)); }
.ov-cte:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--accent) 80%, transparent); }
.ov-cte.bad { border-color: #ef4444; box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 18%, transparent); } .ov-cte.warn { border-color: #f59e0b; }
.ov-cte.out { background: color-mix(in srgb, var(--accent) 9%, var(--surface)); border-color: var(--accent); }
.ov-ck { font: 800 9.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ov-cte b { font: 700 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-cr { font-size: 11.5px; color: var(--text-2); }
.ov-flag { position: absolute; top: -22px; left: 8px; font: 700 10.5px var(--font); color: #fff; background: #e11d48; padding: 2px 8px; border-radius: 8px; white-space: nowrap;
  box-shadow: 0 8px 16px -8px #e11d48; }
/* columns */
.ov-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.ov-col { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); font: inherit; color: var(--text); text-align: left; }
.ov-col b { font: 600 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ov-col small { font-size: 11px; color: var(--muted); }
.ov-col.t-warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
.ov-col.t-bad { border-color: color-mix(in srgb, var(--fail) 45%, var(--border)); background: color-mix(in srgb, var(--fail) 6%, var(--surface)); }
.ov-col.add { border-style: dashed; align-items: center; justify-content: center; flex-direction: row; gap: 6px; cursor: pointer; color: var(--accent-text); font-weight: 700; }
.ov-col.add svg { width: 14px; height: 14px; } .ov-col.add:hover { background: var(--accent-soft); }
/* what to do next */
.ov-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.ov-step { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; border: 1.5px solid var(--line-dark, var(--border));
  background: linear-gradient(150deg, color-mix(in srgb, #6c5ce7 10%, var(--surface)), var(--surface)); }
.ov-step > div { flex: 1; min-width: 0; } .ov-step b { display: block; font-size: 13px; } .ov-step span { display: block; font-size: 11.5px; color: var(--muted); }
.ov-n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font-weight: 800; font-size: 13px;
  background: linear-gradient(135deg, #6c5ce7, #8b7cf6); box-shadow: 0 8px 16px -8px #6c5ce7; }
.ov-go { display: inline-flex; align-items: center; gap: 5px; border: 0; cursor: pointer; padding: 7px 12px; border-radius: 999px; font: 700 12px var(--font); color: #fff;
  background: #4a3cc4; white-space: nowrap; } .ov-go:hover { background: #3b2fae; } .ov-go svg { width: 13px; height: 13px; }
[data-theme="dark"] .ov-go { background: #7c6cff; }
.ov-step .ov-n { color: #fff; font-size: 13px; } .ov-fixrow .ov-fi { color: #fff; font-size: 12px; display: grid; }
.ov-step .ov-n { display: grid; place-items: center; }
/* overview fixes: centred score, centred cylinders, "no tests yet" */
.ov-score { display: flex; align-items: center; justify-content: center; }
.ov-score-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; gap: 3px; }
.ov-score-in b { font: 800 30px/1 var(--font-head, var(--font)); letter-spacing: -.04em; } .ov-score-in b.long { font-size: 25px; }
.ov-score-in small { font-size: 9px; line-height: 1; letter-spacing: .02em; color: #6c6a85; font-weight: 700; text-transform: uppercase; max-width: 54px; }
.ov-score::after { inset: 4px; border-width: 5px; transform: rotate(-30deg); }
.ov-cyl { height: 64px; justify-content: center; padding: 18px 8px 4px; gap: 1px; }
.ov-cyl::before { height: 18px; }
.ov-cyl b, .ov-cyl small { text-align: center; line-height: 1.25; }
.ov-wr b small { font-weight: 700; font-size: 11px; color: inherit; }
.ov-none { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 12px; background: var(--accent-soft); }
.ov-none > svg { width: 20px; height: 20px; color: var(--accent); flex: none; } .ov-none > div { flex: 1; }
.ov-none b { display: block; font-size: 13px; } .ov-none span { display: block; font-size: 11.5px; color: var(--muted); }
.ov-ck { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 14px; }
@keyframes qcFlash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tc, #6c5ce7) 55%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
.qc-settings.qc-flash { animation: qcFlash 1.1s ease-out; }
.qc-tile.on::after { content: "✓ Selected"; position: absolute; top: 8px; right: 10px; font: 700 10.5px var(--font); color: #fff; background: var(--tc); padding: 2px 8px; border-radius: 999px; }
.qc-tile { position: relative; }
.qc-out:empty { min-height: 70vh; }  /* room to bring step 3 to the top of the screen */

/* ================================================================ Home: collapsible sections */
.page-home { gap: 12px !important; }
.hsec { border-radius: 18px; border: 1.5px solid var(--line-dark, var(--border)); background: var(--surface); overflow: hidden;
  box-shadow: 0 14px 30px -28px rgba(60,40,160,.55); transition: box-shadow .2s; }
.hsec.open { box-shadow: 0 22px 44px -30px rgba(60,40,160,.6); }
.hsec-head { width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 18px; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.hsec-head:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
.hsec-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff;
  background: linear-gradient(135deg, #6c5ce7, #8b7cf6); box-shadow: 0 8px 16px -10px #6c5ce7; }
.hsec-ic svg { width: 19px; height: 19px; }
.hsec-t { display: flex; flex-direction: column; min-width: 0; } .hsec-t b { font: 800 16.5px var(--font-head, var(--font)); letter-spacing: -.015em; color: var(--heading, var(--text)); }
.hsec-t small { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsec-chips { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.hf-sum { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); white-space: nowrap; }
.hf-sum.t-ok { background: var(--pass-bg); color: var(--pass); } .hf-sum.t-warn { background: var(--warn-bg); color: var(--warn); } .hf-sum.t-bad { background: var(--fail-bg); color: var(--fail); }
.hsec-chev { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--accent); transition: transform .25s, background .2s; }
.hsec-chev svg { width: 16px; height: 16px; } .hsec.open .hsec-chev { transform: rotate(180deg); background: var(--accent); color: #fff; }
.hsec-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; }
.hsec.open .hsec-body { grid-template-rows: 1fr; }
.hsec-body-in { overflow: hidden; min-height: 0; }
.hsec.open .hsec-body-in { padding: 4px 16px 16px; }
.hsec.open .hsec-head { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); margin-bottom: 12px; }
/* inside a section the inner blocks lose their own title / frame where it would repeat */
.hsec .start-title, .hsec .ins-title > div > h3, .hsec .wf-head { display: none; }
.hsec .ins-title { justify-content: flex-end; }
.hsec .wf-card, .hsec > .hsec-body .card:only-child { border: 0 !important; box-shadow: none !important; padding: 0; }
@media (max-width: 760px) { .hsec-chips { display: none; } }
@media (prefers-reduced-motion: reduce) { .hsec-body, .hsec-chev { transition: none; } }
.hsec .hsec-body-in > .card > .card-head { background: transparent !important; box-shadow: none !important; padding: 0 0 10px; border-bottom: 0; }
.hsec .hsec-body-in > .card > .card-head h3, .hsec .hsec-body-in > .card > .card-head .ov-dot { display: none; }
.hsec .hsec-body-in > .card > .card-head h3::before { display: none; }
/* the main "Your Dashboard" section and the sections inside it */
.hsec-main > .hsec-head { padding: 18px 22px; background: linear-gradient(110deg, color-mix(in srgb, #6c5ce7 12%, var(--surface)) 0%, var(--surface) 70%); }
.hsec-main > .hsec-head .hsec-ic { width: 46px; height: 46px; border-radius: 14px; background: linear-gradient(135deg, #6c5ce7, #ec4899); }
.hsec-main > .hsec-head .hsec-ic svg { width: 23px; height: 23px; }
.hsec-main > .hsec-head .hsec-t b { font-size: 21px; letter-spacing: -.025em; }
.hsec-main > .hsec-head .hsec-t small { font-size: 13px; }
.hsec-main > .hsec-head .hsec-chev { width: 36px; height: 36px; }
.hsec-main.open > .hsec-head { margin-bottom: 0; }
.hsec-main.open > .hsec-body > .hsec-body-in { padding: 14px 16px 16px !important; }
.hsec:not(.open) > .hsec-body > .hsec-body-in { padding: 0 !important; }
.hsec-group { display: flex; flex-direction: column; gap: 10px; }
.hsec-group > .hsec { border-width: 1px; border-color: color-mix(in srgb, var(--line-dark, var(--border)) 55%, transparent); box-shadow: none; background: var(--surface-2); }
.hsec-group > .hsec > .hsec-head { padding: 11px 14px; } .hsec-group > .hsec > .hsec-head .hsec-ic { width: 32px; height: 32px; border-radius: 10px; }
.hsec-group > .hsec > .hsec-head .hsec-t b { font-size: 15px; }
.hsec-group > .hsec.open { background: var(--surface); }

/* ================================================================ shared charts (viz.js) */
.vz-ring { position: relative; flex: none; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.12), 0 18px 30px -16px rgba(0,0,0,.5); }
.vz-ring svg { position: absolute; inset: 0; } .vz-track { stroke: #eceaf7; }
.vz-ring-in { position: relative; display: flex; flex-direction: column; align-items: center; line-height: 1; gap: 3px; }
.vz-ring-in b { font: 800 24px var(--font-head, var(--font)); letter-spacing: -.03em; color: #1b1646; } .vz-ring-in small { font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #6c6a85; }
.vz-rows { display: flex; flex-direction: column; gap: 8px; }
.vz-row { display: grid; grid-template-columns: minmax(110px, 170px) 1fr auto; gap: 10px; align-items: center; font: inherit; color: var(--text); text-align: left;
  border: 0; background: none; padding: 4px 6px; border-radius: 9px; }
.vz-row.click { cursor: pointer; } .vz-row.click:hover { background: var(--surface-2); }
.vz-name { display: flex; flex-direction: column; min-width: 0; } .vz-name b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vz-name small { font-size: 11px; color: var(--muted); }
.vz-track-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--surface-3); gap: 1.5px; }
.vz-track-bar i { display: block; height: 100%; }
.vz-num { display: flex; gap: 4px; white-space: nowrap; } .vz-num em { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }
.vz-num .f { background: var(--fail-bg); color: var(--fail); } .vz-num .w { background: var(--warn-bg); color: var(--warn); } .vz-num .p { background: var(--pass-bg); color: var(--pass); }
.vz-probs { display: flex; flex-direction: column; gap: 7px; }
.vz-prob { display: flex; gap: 9px; align-items: flex-start; text-align: left; padding: 8px 10px; border-radius: 11px; font: inherit; color: var(--text);
  border: 1.5px solid color-mix(in srgb, var(--fail) 35%, var(--border)); background: color-mix(in srgb, var(--fail) 5%, var(--surface)); }
.vz-prob.w { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); background: color-mix(in srgb, var(--warn) 6%, var(--surface)); }
button.vz-prob { cursor: pointer; } button.vz-prob:hover { transform: translateX(3px); }
.vz-prob b { display: block; font-size: 12.5px; } .vz-prob b small { font-weight: 500; color: var(--muted); } .vz-prob > div > span { display: block; font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.vz-pi { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; flex: none; color: #fff !important; font-weight: 800; font-size: 12px !important; background: var(--fail); }
.vz-prob.w .vz-pi { background: var(--warn); }
.vz-good { padding: 12px; border-radius: 12px; background: var(--pass-bg); color: var(--pass); font-weight: 600; } .vz-empty { color: var(--muted); font-size: 12.5px; padding: 10px 0; }
.vz-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: 12.5px; color: rgba(226,232,255,.9); }
.vz-legend span { display: inline-flex; align-items: center; gap: 6px; } .vz-legend i { width: 10px; height: 10px; border-radius: 3px; }
.ov-sub { font-size: 12px; color: var(--muted); }
/* saved run page */
.rn-glance { padding: 18px !important; } .rn-glance .glance-right { width: 100%; }
.rn-old > .verdict { display: none !important; }

/* ================================================================ Tests tab picture */
.tz-top { display: grid; grid-template-columns: minmax(230px, .7fr) minmax(0, 1.6fr); gap: 14px; }
@media (max-width: 900px) { .tz-top { grid-template-columns: minmax(0, 1fr); } }
.tz-ring { flex-direction: row !important; align-items: center; gap: 18px !important; }
.tz-ring .vz-ring { box-shadow: 0 10px 24px -14px rgba(60,40,160,.5); }
.tz-ring-txt { display: flex; flex-direction: column; gap: 5px; } .tz-ring-txt b { font: 800 16px var(--font-head, var(--font)); }
.tz-l { font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; align-self: flex-start; }
.tz-l.t-FAIL { background: var(--fail-bg); color: var(--fail); } .tz-l.t-WARN { background: var(--warn-bg); color: var(--warn); }
.tz-l.t-PASS { background: var(--pass-bg); color: var(--pass); } .tz-l.t-INFO { background: var(--accent-soft); color: var(--accent-text); }
.tz-recs { display: flex; flex-direction: column; gap: 10px; }
.tz-rec { padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); }
.tz-rec.bad { border-color: color-mix(in srgb, var(--fail) 40%, var(--border)); background: color-mix(in srgb, var(--fail) 4%, var(--surface)); }
.tz-rec.warn { border-color: color-mix(in srgb, var(--warn) 40%, var(--border)); }
.tz-rec-h { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .tz-rec-h b { font-size: 13px; }
.tz-diff { font-weight: 800; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--fail-bg); color: var(--fail); white-space: nowrap; }
.tz-rec.ok .tz-diff { background: var(--pass-bg); color: var(--pass); }
.tz-pair { display: grid; grid-template-columns: 70px 1fr minmax(160px, 1.2fr); gap: 6px 10px; align-items: center; font-size: 12px; }
.tz-lab { color: var(--muted); font-weight: 600; } .tz-val { color: var(--text-2); }
.tz-bar { height: 12px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .tz-bar i { display: block; height: 100%; border-radius: 999px; }
.tz-bar .e { background: linear-gradient(90deg, #94a3b8, #cbd5e1); } .tz-bar .a { background: linear-gradient(90deg, #6c5ce7, #a78bfa); }
.tz-rec.bad .tz-bar .a { background: linear-gradient(90deg, #ef4444, #f472b6); }

/* ================================================================ Columns tab: column map */
.cm-legend { display: flex; flex-wrap: wrap; gap: 8px; }
.cm-how { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; --hc: #6c5ce7;
  background: color-mix(in srgb, var(--hc) 12%, transparent); color: color-mix(in srgb, var(--hc) 80%, var(--text)); }
.cm-how b { font: 800 11px var(--mono); }
.cm-how.k-direct { --hc: #64748b; } .cm-how.k-renamed { --hc: #0ea5e9; } .cm-how.k-calculated { --hc: #8b5cf6; } .cm-how.k-aggregated { --hc: #f59e0b; } .cm-how.k-constant { --hc: #14b8a6; }
.cm-rows { display: flex; flex-direction: column; gap: 6px; max-height: 460px; overflow: auto; }
.cm-row { display: grid; grid-template-columns: minmax(0, 1.6fr) 24px auto 24px minmax(0, 1fr) 46px; gap: 8px; align-items: center; text-align: left; font: inherit; color: var(--text);
  padding: 7px 10px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; }
.cm-row:hover { border-color: var(--accent); background: var(--surface-2); }
.cm-src { display: flex; flex-wrap: wrap; gap: 4px; min-width: 0; }
.cm-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 8px; border-radius: 8px; background: var(--surface-3); font-size: 11.5px; min-width: 0; }
.cm-chip small { color: var(--muted); font-size: 10.5px; } .cm-chip b { font: 600 11.5px var(--mono); } .cm-chip.none { color: var(--muted); font-style: italic; }
.cm-arrow { height: 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 4px, transparent 4px 7px); position: relative; }
.cm-arrow::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: var(--border-strong); }
.cm-out { display: flex; flex-direction: column; min-width: 0; } .cm-out b { font: 700 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; } .cm-out small { font-size: 10.5px; color: var(--muted); }
.cm-tests { display: flex; gap: 3px; justify-content: flex-end; } .cm-tests i { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); }
.cm-tests i.t-PASS { background: var(--pass); } .cm-tests i.t-FAIL, .cm-tests i.t-ERROR { background: var(--fail); } .cm-tests i.t-WARN { background: var(--warn); }
@media (max-width: 900px) { .cm-row { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); } .cm-arrow, .cm-tests { display: none; } }

/* ================================================================ comparison picture */
.cp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 14px; padding: 16px 18px; border-radius: 18px; border: 1.5px solid var(--line-dark, var(--border));
  background: var(--surface); box-shadow: 0 14px 30px -26px rgba(60,40,160,.5); }
.cp:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1000px) { .cp { grid-template-columns: minmax(0, 1fr); } }
.cp-main { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; } .cp-venn { flex: none; }
.cp-n { font: 800 20px var(--font-head, var(--font)); fill: var(--heading-page, var(--text)); } .cp-l { font: 600 10.5px var(--font); fill: var(--muted); }
.cp-l2 { font: 700 10.5px var(--font); fill: #d97706; }
.cp-split { flex: 1; min-width: 240px; display: flex; flex-direction: column; gap: 10px; }
.cp-bar { display: flex; height: 18px; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--surface-3); }
.cp-bar i, .cp-leg i { display: block; } .cp-bar i { height: 100%; }
.same { background: #22c55e; } .chg { background: #f59e0b; } .gone { background: #ef4444; } .new { background: #3b82f6; }
.cp-leg { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; color: var(--text-2); } .cp-leg span { display: flex; align-items: center; gap: 7px; }
.cp-leg i { width: 11px; height: 11px; border-radius: 3px; }
.cp-side { display: flex; flex-direction: column; gap: 12px; }
.cp-box { padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .cp-h { font: 700 13px var(--font-head, var(--font)); margin-bottom: 8px; }
.cp-cols { display: flex; flex-direction: column; gap: 6px; }
.cp-col { display: grid; grid-template-columns: minmax(90px, 160px) 1fr 40px; gap: 8px; align-items: center; font-size: 12px; } .cp-col > span:first-child { font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; }
.cp-cbar { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .cp-cbar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #fbbf24); border-radius: 999px; }
.cp-col b { text-align: right; }
.cp-tots { display: flex; flex-direction: column; gap: 10px; } .cp-tot > b { font: 600 12.5px var(--mono); display: block; margin-bottom: 4px; }
.cp-tpair { display: grid; grid-template-columns: 34px 1fr auto; gap: 4px 8px; align-items: center; font-size: 11.5px; color: var(--muted); } .cp-tpair em { font-style: normal; color: var(--text); font-weight: 700; }
.cp-tb { height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .cp-tb i { display: block; height: 100%; border-radius: 999px; }
.cp-tb .o { background: #94a3b8; } .cp-tb .n { background: linear-gradient(90deg, #6c5ce7, #a78bfa); }
.jr-band { grid-template-columns: auto minmax(0, 1fr) auto !important; }
.jr-band-ic { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: #22c55e; box-shadow: 0 0 0 7px rgba(34,197,94,.2); }
.jr-band.t-bad .jr-band-ic { background: #ef4444; box-shadow: 0 0 0 7px rgba(239,68,68,.22); } .jr-band.t-warn .jr-band-ic { background: #f59e0b; box-shadow: 0 0 0 7px rgba(245,158,11,.22); }
.jr-band-ic svg { width: 30px; height: 30px; color: #fff; }

/* ================================================================ business rules as cards */
.rl-sum { display: flex; gap: 8px; flex-wrap: wrap; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.rl-card { --rc: #6c5ce7; display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line-dark, var(--border));
  border-top: 5px solid var(--rc); background: var(--surface); box-shadow: 0 14px 30px -26px rgba(60,40,160,.5); }
.rl-card.t-ok { --rc: #22c55e; } .rl-card.t-warn { --rc: #f59e0b; } .rl-card.t-bad { --rc: #ef4444; } .rl-card.t-off { --rc: #94a3b8; opacity: .75; }
.rl-top { display: flex; gap: 10px; align-items: center; } .rl-top b { display: block; font-size: 14px; } .rl-top small { font-size: 11.5px; color: var(--muted); }
.rl-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #6c5ce7, #8b7cf6); }
.rl-ic svg { width: 18px; height: 18px; }
.rl-st { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.rl-st.t-ok { background: var(--pass-bg); color: var(--pass); } .rl-st.t-warn { background: var(--warn-bg); color: var(--warn); } .rl-st.t-bad { background: var(--fail-bg); color: var(--fail); }
.rl-st.t-new { background: var(--accent-soft); color: var(--accent-text); }
.rl-obj { display: flex; align-items: center; gap: 6px; font-size: 12.5px; } .rl-obj svg { width: 14px; height: 14px; color: var(--muted); } .rl-obj span { font-family: var(--mono); font-weight: 600; }
.rl-obj small { color: var(--muted); }
.rl-exp { font-size: 12.5px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 8px 10px; line-height: 1.45; }
.rl-hist { display: flex; align-items: center; gap: 10px; } .rl-hl { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rl-dots { display: flex; gap: 4px; } .rl-dot { width: 14px; height: 14px; border-radius: 4px; border: 0; cursor: pointer; background: var(--faint); }
.rl-dot.t-PASS { background: #22c55e; } .rl-dot.t-WARN { background: #f59e0b; } .rl-dot.t-FAIL, .rl-dot.t-ERROR { background: #ef4444; } .rl-dot:hover { transform: scale(1.25); }
.rl-why { font-size: 11.5px; color: var(--fail); } .rl-foot { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--border); padding-top: 8px; }

.vz-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name num" "bar bar"; row-gap: 5px; }
.vz-row .vz-name { grid-area: name; } .vz-row .vz-num { grid-area: num; } .vz-row .vz-track-bar { grid-area: bar; height: 10px; }
.vz-pi { display: grid !important; }

/* ================================================================ business rules inside Pipeline testing */
.br-card .card-body { display: flex; flex-direction: column; gap: 14px; }
.br-sum { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.br-big { font-size: 14px; color: var(--text-2); } .br-big b { font: 800 24px var(--font-head, var(--font)); color: var(--heading-page, var(--text)); margin-right: 2px; }
.br-chip { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.br-chip.soft { background: var(--surface-3); color: var(--muted); }
.br-all { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: 12.5px; } .br-all svg { width: 13px; height: 13px; }
.br-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 12px; }
.br-table { border-radius: 14px; border: 1.5px solid var(--line-dark, var(--border)); background: var(--surface); overflow: hidden; }
.br-table.focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); border-color: var(--accent); }
.br-th { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), var(--surface)); border-bottom: 1px solid var(--border); }
.br-th > svg { width: 16px; height: 16px; color: var(--accent); } .br-th b { font: 700 13px var(--mono); } .br-th small { color: var(--muted); font-size: 11px; } .br-th .btn { margin-left: auto; }
.br-rule { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
.br-rule:last-child { border-bottom: 0; } .br-rule.off { opacity: .55; }
.br-rule b { display: block; font-size: 13px; } .br-rule small { display: block; font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 320px; }
.br-rule > .grow { min-width: 0; }
.br-switch { position: relative; flex: none; width: 34px; height: 20px; cursor: pointer; }
.br-switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; z-index: 1; }
.br-switch i { position: absolute; inset: 0; border-radius: 999px; background: var(--surface-3); border: 1.5px solid var(--border-strong); transition: background .15s; }
.br-switch i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.br-switch input:checked + i { background: var(--accent); border-color: var(--accent); } .br-switch input:checked + i::after { left: 16px; }
.br-dots { display: flex; gap: 3px; } .br-dots i { width: 9px; height: 9px; border-radius: 3px; background: var(--faint); }
.br-dots i.t-PASS { background: #22c55e; } .br-dots i.t-WARN { background: #f59e0b; } .br-dots i.t-FAIL, .br-dots i.t-ERROR { background: #ef4444; }
.br-res { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.br-res.t-PASS { background: var(--pass-bg); color: var(--pass); } .br-res.t-WARN { background: var(--warn-bg); color: var(--warn); }
.br-res.t-FAIL, .br-res.t-ERROR { background: var(--fail-bg); color: var(--fail); } .br-res.t-new { background: var(--accent-soft); color: var(--accent-text); }
.br-empty { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed var(--border-strong); background: var(--surface-2); }
.br-empty-ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #6c5ce7, #f59e0b); }
.br-empty-ic svg { width: 22px; height: 22px; } .br-empty b { display: block; font-size: 14px; } .br-empty span { font-size: 12.5px; color: var(--muted); }
.br-sugg { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.br-add { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1.5px dashed var(--border-strong); background: var(--surface);
  font: 600 12px var(--mono); color: var(--accent-text); cursor: pointer; } .br-add:hover { border-style: solid; border-color: var(--accent); } .br-add svg { width: 12px; height: 12px; }
.br-addbar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--accent-soft); font-size: 13px; }
.br-addbar > span { flex: 1; display: flex; align-items: center; gap: 8px; } .br-addbar svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
/* the add-rule dialog */
.rd-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.rd-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.rd-kind { padding: 6px 11px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font: 600 12px var(--font); color: var(--text-2); cursor: pointer; }
.rd-kind:hover { border-color: var(--accent); } .rd-kind.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rd-example { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--muted); } .rd-example svg { width: 14px; height: 14px; }
.rd-expect { display: flex; gap: 8px; align-items: flex-start; padding: 9px 12px; border-radius: 12px; background: var(--pass-bg); color: var(--pass); font-size: 13px; }
.rd-expect svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }

/* ================================================================ Notebooks */
.nk-notebooks { --nc: #0d9488; }
.nb-starts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-bottom: 16px; }
.nb-start { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; border: 1.5px solid var(--line-dark, var(--border)); cursor: pointer; text-align: left;
  font: inherit; color: var(--text); background: linear-gradient(150deg, color-mix(in srgb, #0d9488 9%, var(--surface)), var(--surface)); transition: transform .15s, box-shadow .15s; }
.nb-start:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(13,148,136,.7); border-color: #0d9488; }
.nb-start > div { flex: 1; } .nb-start b { display: block; font: 700 14.5px var(--font-head, var(--font)); } .nb-start small { color: var(--muted); font-size: 12px; }
.nb-start > svg { width: 16px; height: 16px; color: #0d9488; }
.nb-start-ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; color: #fff; background: linear-gradient(135deg, #0d9488, #22b8cf); }
.nb-start-ic svg { width: 20px; height: 20px; }
.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; padding: 14px 18px 18px; }
.nb-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); text-align: left; cursor: pointer; font: inherit; color: var(--text); }
.nb-card:hover { border-color: var(--accent); box-shadow: 0 12px 24px -18px color-mix(in srgb, var(--accent) 80%, transparent); }
.nb-card-top { display: flex; gap: 10px; align-items: center; } .nb-card-top b { display: block; font-size: 14px; } .nb-card-top small { color: var(--muted); font-size: 11.5px; }
.nb-card-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, #0d9488 15%, transparent); color: #0d9488; }
.nb-card-ic svg { width: 16px; height: 16px; } .nb-card p { margin: 0; font-size: 12.5px; color: var(--text-2); }
.nb-kinds { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .nb-count { margin-left: auto; font-size: 11.5px; color: var(--muted); }
.nb-kind { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; --kc: #6c5ce7;
  background: color-mix(in srgb, var(--kc) 13%, transparent); color: color-mix(in srgb, var(--kc) 80%, var(--text)); } .nb-kind svg { width: 11px; height: 11px; }
.k-sql { --kc: #6c5ce7; } .k-note { --kc: #64748b; } .k-chart { --kc: #0ea5e9; } .k-check { --kc: #16a34a; }
/* editor */
.nb-page { display: flex; flex-direction: column; gap: 14px; max-width: 1200px; }
.nb-hero { display: flex; gap: 16px; align-items: center; padding: 18px 22px; border-radius: 20px; color: #fff; background: var(--band-bg); box-shadow: 0 26px 50px -30px rgba(20,30,110,.8); flex-wrap: wrap; }
.nb-hero > .grow { min-width: 280px; }
.nb-hero-ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #0d9488, #22b8cf); box-shadow: 0 0 0 6px rgba(34,184,207,.2); }
.nb-hero-ic svg { width: 26px; height: 26px; color: #fff; }
.nb-title { width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #fff !important; font: 800 26px var(--font-head, var(--font)) !important;
  letter-spacing: -.025em; padding: 2px 0 !important; outline: none; } .nb-title::placeholder { color: rgba(255,255,255,.5); }
.nb-about { width: 100%; background: transparent !important; border: 0 !important; box-shadow: none !important; color: rgba(226,232,255,.85) !important; font-size: 13.5px !important; padding: 0 !important; outline: none; }
.nb-about::placeholder { color: rgba(226,232,255,.5); }
.nb-hero-meta { display: flex; gap: 10px; align-items: center; margin-top: 6px; font-size: 12px; color: rgba(226,232,255,.75); }
.nb-id { font: 700 11.5px var(--mono); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: 2px 8px; border-radius: 8px; color: #fff; }
.nb-saved.ok { color: #86efac; } .nb-saved.ok::before { content: "\2713  "; }
.nb-hero-acts { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.nb-hero .btn:not(.primary) { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.28) !important; color: #fff !important; } .nb-hero .btn:not(.primary) svg { color: #fff !important; }
.nb-hero .btn.primary { background: #fff !important; color: #3b2fc0 !important; border-color: #fff !important; } .nb-hero .btn.primary svg { color: #3b2fc0 !important; }
.nb-cells { display: flex; flex-direction: column; }
.nb-add { display: flex; align-items: center; gap: 6px; padding: 6px 0; opacity: .35; transition: opacity .15s; } .nb-add:hover, .nb-cells > .nb-add:last-child { opacity: 1; }
.nb-add-line { flex: 1; height: 1.5px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 6px, transparent 6px 11px); }
.nb-add-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font: 700 12px var(--font); cursor: pointer;
  border: 1.5px solid color-mix(in srgb, var(--kc) 45%, var(--border)); background: var(--surface); color: color-mix(in srgb, var(--kc) 85%, var(--text)); }
.nb-add-btn svg { width: 13px; height: 13px; } .nb-add-btn:hover { background: color-mix(in srgb, var(--kc) 12%, var(--surface)); }
.nb-cell { border-radius: 16px; border: 1.5px solid var(--line-dark, var(--border)); background: var(--surface); border-left: 5px solid var(--kc); box-shadow: 0 12px 26px -24px rgba(60,40,160,.5); }
.nb-chead { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.nb-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 11.5px var(--font); color: #fff; background: var(--kc); flex: none; }
.nb-type { display: inline-flex; align-items: center; gap: 5px; font: 800 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--kc); } .nb-type svg { width: 13px; height: 13px; }
.nb-name { width: 150px; font: 700 12.5px var(--mono) !important; padding: 3px 8px !important; border-radius: 8px !important; }
.nb-ref { font: 600 11px var(--mono); color: var(--muted); }
.nb-chead .btn[title="Move up"] svg { transform: rotate(180deg); }
.nb-cbody { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.nb-sql { width: 100%; font: 13px/1.55 var(--mono) !important; background: var(--surface-2) !important; border-radius: 12px !important; resize: vertical; min-height: 70px; }
.nb-hint { font-size: 11.5px; color: var(--muted); } .nb-hint code { background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; font-size: 11px; }
.nb-ai { display: flex; gap: 8px; align-items: center; } .nb-ai > svg { width: 15px; height: 15px; color: var(--accent); flex: none; } .nb-ai input { font-size: 12.5px !important; }
.nb-ai-ans { font-size: 12.5px; padding: 8px 12px; border-radius: 10px; background: var(--accent-soft); }
.nb-meta { display: flex; gap: 12px; align-items: center; font-size: 12px; color: var(--muted); }
.nb-ok { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--pass); } .nb-ok svg { width: 13px; height: 13px; }
.nb-note { cursor: text; font-size: 14px; line-height: 1.6; padding: 2px 4px; } .nb-note h1, .nb-note h2, .nb-note h3 { font-family: var(--font-head, var(--font)); margin: 4px 0 6px; letter-spacing: -.02em; }
.nb-note h1 { font-size: 22px; } .nb-note h2 { font-size: 18px; } .nb-note p { margin: 4px 0; } .nb-note:hover { background: var(--surface-2); border-radius: 10px; }
.nb-notetext { width: 100%; font-size: 13.5px !important; line-height: 1.55; border-radius: 12px !important; }
.nb-cell.k-note { border-left-color: #94a3b8; }
.nb-chart-ctl, .nb-check-ctl { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; } .nb-check-ctl .field { min-width: 180px; } .nb-check-ctl .field:nth-child(2) { flex: 1; min-width: 300px; }
.nb-seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-3); gap: 2px; }
.nb-seg button { border: 0; background: transparent; padding: 5px 12px; border-radius: 999px; font: 700 12px var(--font); color: var(--muted); cursor: pointer; }
.nb-seg button.on { background: var(--accent); color: #fff; }
.nb-chart { padding: 6px 0; } .nb-chart svg { display: block; max-height: 300px; } .nb-chart-cap { font-size: 11.5px; color: var(--muted); text-align: center; }
.nb-grid { stroke: var(--border); stroke-dasharray: 3 4; } .nb-ax { fill: var(--muted); font-size: 10.5px; } .nb-lg { fill: var(--text-2); font-size: 12px; }
.nb-empty { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12.5px; padding: 6px 0; }
.nb-check-res { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; color: #fff; background: var(--band-bg); flex-wrap: wrap; }
.nb-check-res.ok { box-shadow: inset 5px 0 0 #34d399; } .nb-check-res.bad { box-shadow: inset 5px 0 0 #f87171; }
.nb-check-ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; background: #22c55e; } .nb-check-res.bad .nb-check-ic { background: #ef4444; }
.nb-check-ic svg { width: 20px; height: 20px; color: #fff; } .nb-check-res b { display: block; font-size: 14.5px; } .nb-check-res small { color: rgba(226,232,255,.8); font-size: 12px; }
.nb-chips { display: flex; gap: 6px; flex-wrap: wrap; } .nb-chips span { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.12); color: rgba(226,232,255,.9); }
.nb-chips b { display: inline; font-size: 12px; margin-left: 4px; color: #fff; }
.nb-finds { display: flex; flex-direction: column; gap: 5px; } .nb-find { font-size: 12.5px; padding: 6px 10px; border-radius: 9px; background: var(--warn-bg); } .nb-find.bad { background: var(--fail-bg); }
.nb-find b { font-family: var(--mono); }
.nb-zero { stroke: var(--border-strong); stroke-width: 1.5; }
.nb-note ul { margin: 4px 0; padding-left: 20px; } .nb-note code { background: var(--accent-soft); padding: 1px 6px; border-radius: 6px; font-size: 12.5px; }
.nb-note h1 + p, .nb-note h2 + p { margin-top: 0; }

/* ================================================================ Notebooks – Databricks-style editing */
.nb-cell { position: relative; transition: box-shadow .15s, border-color .15s; }
.nb-cell.sel { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent), 0 14px 30px -24px rgba(60,40,160,.6); }
.nb-cell.sel::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--accent); }
.nb-cell:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, #22c55e 35%, transparent), 0 14px 30px -24px rgba(60,40,160,.6); }
.nb-cell:focus-within::before { background: #22c55e; }
.nb-cell.dragging { opacity: .45; }
.nb-cell.drop-before { box-shadow: 0 -4px 0 0 var(--accent); } .nb-cell.drop-after { box-shadow: 0 4px 0 0 var(--accent); }
.nb-grip { cursor: grab; color: var(--faint); font-size: 14px; letter-spacing: -3px; padding: 0 4px 0 0; user-select: none; line-height: 1; }
.nb-grip:hover { color: var(--accent); } .nb-grip:active { cursor: grabbing; }
.nb-chead { gap: 8px; }
.nb-fold svg { transition: transform .2s; } .nb-fold.closed svg { transform: rotate(-90deg); }
.nb-collapsed-hint { font: 12px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 420px; }
.nb-cell.collapsed .nb-chead { border-bottom: 0; } .nb-cell.collapsed .nb-out:empty { display: none; }
.nb-cell.collapsed .nb-cbody:has(.nb-out:empty) { display: none; }
.nb-run { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.nb-run b { font: 700 11.5px var(--mono); color: var(--accent-text); } .nb-run small { font-size: 11px; }
.nb-run.s-queued { color: var(--warn); font-weight: 700; } .nb-run.s-running { color: var(--accent-text); font-weight: 700; }
.nb-run.s-done b { color: var(--pass); } .nb-run.s-error, .nb-run.s-error b { color: var(--fail); }
.nb-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--accent) 25%, transparent); border-top-color: var(--accent); animation: nbspin .8s linear infinite; }
@keyframes nbspin { to { transform: rotate(360deg); } }
.nb-stop { background: #ef4444 !important; border-color: #ef4444 !important; color: #fff !important; } .nb-stop svg { color: #fff !important; }
.nb-hero .nb-hero-acts .btn.icon-btn, .nb-hero .nb-hero-acts .btn:not(:has(span)) { padding-left: 10px; padding-right: 10px; }
/* the cell menu */
.nb-menu { position: fixed; z-index: 9000; min-width: 230px; padding: 6px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--line-dark, var(--border));
  box-shadow: 0 24px 50px -20px rgba(20,20,60,.45); display: flex; flex-direction: column; }
.nb-mi { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 0; border-radius: 9px; background: transparent; font: 500 13px var(--font); color: var(--text); cursor: pointer; text-align: left; }
.nb-mi:hover { background: var(--accent-soft); } .nb-mi svg { width: 15px; height: 15px; color: var(--accent); } .nb-mi.danger, .nb-mi.danger svg { color: var(--fail); }
.nb-msep { height: 1px; background: var(--border); margin: 4px 6px; }
/* shortcuts */
.nb-scs { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } @media (max-width: 760px) { .nb-scs { grid-template-columns: 1fr; } }
.nb-sc { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; padding: 5px 0; font-size: 13px; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); }
kbd { display: inline-block; min-width: 22px; text-align: center; padding: 2px 7px; margin-right: 4px; border-radius: 7px; font: 700 11.5px var(--mono);
  background: var(--surface-2); border: 1.5px solid var(--border-strong); border-bottom-width: 3px; color: var(--text); }

/* ================================================================ "How to use this page" guide */
.ph-wrap { margin-bottom: 20px; } .ph-wrap > .page-head { margin-bottom: 10px !important; }
.page-home > .gd { margin-bottom: 0; }
.gd { border-radius: 16px; border: 1.5px dashed color-mix(in srgb, #0ea5e9 50%, var(--border)); background: color-mix(in srgb, #0ea5e9 5%, var(--surface)); overflow: hidden; }
.gd.open { border-style: solid; background: var(--surface); box-shadow: 0 14px 30px -26px rgba(14,165,233,.7); }
.gd-head { width: 100%; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 0; background: transparent; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.gd-head:hover { background: color-mix(in srgb, #0ea5e9 7%, transparent); }
.gd-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; font: 800 14px var(--font); background: linear-gradient(135deg, #0ea5e9, #6c5ce7); }
.gd-head > b { font-size: 13.5px; white-space: nowrap; }
.gd-sub { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.gd-chev { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #0ea5e9; background: color-mix(in srgb, #0ea5e9 12%, transparent); transition: transform .25s; }
.gd-chev svg { width: 14px; height: 14px; } .gd.open .gd-chev { transform: rotate(180deg); }
.gd-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s ease; } .gd.open .gd-wrap { grid-template-rows: 1fr; }
.gd-in { overflow: hidden; min-height: 0; }
.gd-body { padding: 4px 18px 16px; border-top: 1px solid color-mix(in srgb, #0ea5e9 25%, var(--border)); }
.gd-what { margin: 12px 0 14px; font-size: 14px; line-height: 1.55; color: var(--text); }
.gd-cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; } @media (max-width: 900px) { .gd-cols { grid-template-columns: minmax(0, 1fr); } }
.gd-h { display: flex; align-items: center; gap: 7px; font: 800 11.5px var(--font); letter-spacing: .1em; text-transform: uppercase; color: #0284c7; margin: 0 0 8px; }
.gd-h svg { width: 14px; height: 14px; } [data-theme="dark"] .gd-h { color: #7dd3fc; }
.gd-steps { margin: 0; padding: 0; list-style: none; counter-reset: g; display: flex; flex-direction: column; gap: 8px; }
.gd-steps li { counter-increment: g; position: relative; padding-left: 34px; font-size: 13px; line-height: 1.5; min-height: 24px; }
.gd-steps li::before { content: counter(g); position: absolute; left: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 800 12px var(--font); color: #fff; background: linear-gradient(135deg, #0ea5e9, #6c5ce7); }
.gd-terms { margin: 0 0 12px; display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; font-size: 12.5px; }
.gd-terms dt { font-weight: 700; color: var(--heading, var(--text)); } .gd-terms dd { margin: 0; color: var(--text-2); line-height: 1.45; }
.gd-tips { margin: 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
@media (prefers-reduced-motion: reduce) { .gd-wrap, .gd-chev { transition: none; } }
.dbt-guess { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); white-space: nowrap; cursor: help; }

/* dbt project picker */
.dbt-pick { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dbt-roots { display: flex; gap: 6px; flex-wrap: wrap; }
.dbt-root { padding: 4px 11px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); font: 600 12px var(--font); color: var(--accent-text); cursor: pointer; }
.dbt-root:hover { border-color: var(--accent); }
.dbt-here { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--surface-2); font: 600 12.5px var(--mono); }
.dbt-here svg { width: 15px; height: 15px; color: var(--accent); }
.dbt-list { display: flex; flex-direction: column; max-height: 380px; overflow: auto; border: 1.5px solid var(--border); border-radius: 12px; }
.dbt-row { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); background: transparent;
  font: 500 13px var(--font); color: var(--text); text-align: left; cursor: pointer; }
.dbt-row:hover { background: var(--accent-soft); } .dbt-row svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.dbt-row > span:not(.dbt-yes) { flex: 1; min-width: 0; } .dbt-row small { display: block; font: 11px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.dbt-row.dbt svg { color: #16a34a; } .dbt-row.up { color: var(--muted); font-weight: 700; }
.dbt-yes { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--pass-bg); color: var(--pass); white-space: nowrap; }

/* ================================================================ Explore dbt project */
.dx-band { grid-template-columns: auto minmax(0, 1fr) auto !important; }
.dx-logo { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; flex: none; background: linear-gradient(135deg, #ff694a, #ef4444); box-shadow: 0 0 0 6px rgba(255,105,74,.2); }
.dx-logo svg { width: 30px; height: 30px; color: #fff; }
.dx-ver { font-size: 14px; font-weight: 600; color: #a5b4ff; }
.ov-chip.dx-static { cursor: default; } .ov-chip.dx-static:hover { transform: none; background: rgba(255,255,255,.1); } .ov-chip.dx-static svg { width: 13px; height: 13px; }
.dx-rings { display: grid; grid-template-columns: repeat(4, auto); gap: 14px; }
@media (max-width: 1100px) { .dx-band { grid-template-columns: auto minmax(0, 1fr) !important; } .dx-rings { grid-column: span 2; } }
.dx-ring { display: flex; flex-direction: column; align-items: center; gap: 5px; } .dx-ring small { font-size: 10.5px; color: #c7cdf7; white-space: nowrap; }
.dx-ring-c { --c: #22c55e; width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(closest-side, #fff 76%, transparent 78% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), rgba(255,255,255,.18) 0); }
.dx-ring.t-warn .dx-ring-c { --c: #f59e0b; } .dx-ring.t-bad .dx-ring-c { --c: #ef4444; } .dx-ring.t-na .dx-ring-c { --c: #94a3b8; }
.dx-ring-c b { font: 800 15px var(--font-head, var(--font)); color: #1b1646; }
.dx-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.dx-jump { color: var(--accent-text) !important; background: var(--surface) !important; border: 1.5px solid var(--line-dark, var(--border)) !important; }
.dx-jump:hover { border-color: var(--accent) !important; }
/* lineage */
.dx-gctl { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .dx-gctl .field { min-width: 240px; } .dx-ginfo { font-size: 12.5px; color: var(--muted); padding-bottom: 8px; }
.dx-graph { border-radius: 14px; background: radial-gradient(rgba(108,92,231,.08) 1px, transparent 1px) 0 0/18px 18px, var(--surface-2); border: 1px solid var(--border); }
.dx-svgwrap { overflow: auto; max-height: 640px; padding: 6px; } .dx-svg { display: block; }
.dx-edge { fill: none; stroke: color-mix(in srgb, var(--border-strong) 80%, transparent); stroke-width: 1.6; } .dx-edge.hot { stroke: var(--accent); stroke-width: 2.6; }
.dx-node { cursor: pointer; --lc: #6c5ce7; } .dx-node rect { fill: var(--surface); stroke: color-mix(in srgb, var(--lc) 45%, var(--border)); stroke-width: 1.5; transition: stroke .15s; }
.dx-node .dx-bar { fill: var(--lc); stroke: none; } .dx-node:hover rect:first-of-type { stroke: var(--lc); stroke-width: 2.4; }
.dx-node.focus rect:first-of-type { stroke: var(--accent); stroke-width: 3; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--accent) 50%, transparent)); }
.dx-node.hit rect:first-of-type { stroke: #f59e0b; stroke-width: 3; } .dx-node.dim { opacity: .35; }
.dx-name { font: 700 12.5px var(--mono); fill: var(--text); } .dx-sub { font: 500 10.5px var(--font); fill: var(--muted); }
.dx-st { stroke: var(--surface); stroke-width: 2; } .dx-st.s-ok { fill: #22c55e; } .dx-st.s-warn { fill: #f59e0b; } .dx-st.s-bad { fill: #ef4444; } .dx-st.s-none { fill: #cbd5e1; }
.dx-hi { font: 800 10px var(--font); fill: #ef4444; }
.t-src { --lc: #64748b; } .t-base { --lc: #0ea5e9; } .t-stg { --lc: #3b82f6; } .t-int { --lc: #8b5cf6; } .t-fct { --lc: #16a34a; } .t-dim { --lc: #14b8a6; } .t-mdl { --lc: #6c5ce7; }
.dx-node.src rect:first-of-type { fill: color-mix(in srgb, #64748b 8%, var(--surface)); }
.dx-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .dx-legend span { display: inline-flex; align-items: center; gap: 6px; }
.dx-legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--lc); } .dx-legend i.dx-lg-bad { background: #ef4444; border-radius: 50%; }
.dx-legend i.dx-lg-ok { background: #22c55e; border-radius: 50%; } .dx-legend i.dx-lg-none { background: #cbd5e1; border-radius: 50%; }
/* health */
.dx-hgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.dx-hcard { --hc: #6c5ce7; border-radius: 14px; border: 1.5px solid color-mix(in srgb, var(--hc) 40%, var(--border)); border-top: 5px solid var(--hc); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface); }
.dx-hcard.t-bad { --hc: #ef4444; } .dx-hcard.t-warn { --hc: #f59e0b; } .dx-hcard.t-info { --hc: #0ea5e9; }
.dx-hhead { display: flex; gap: 10px; align-items: center; } .dx-hhead b { display: block; font-size: 14px; } .dx-hhead small { font-size: 11.5px; color: var(--hc); font-weight: 700; }
.dx-hic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--hc); flex: none; } .dx-hic svg { width: 16px; height: 16px; }
.dx-hn { font: 800 22px var(--font-head, var(--font)); color: var(--hc); }
.dx-hitems, .dx-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.dx-mchip { padding: 3px 9px; border-radius: 8px; border: 1.5px solid var(--border); background: var(--surface-2); font: 600 11.5px var(--mono); color: var(--accent-text); cursor: pointer; }
.dx-mchip:hover { border-color: var(--accent); } .dx-mchip.src { color: var(--muted); cursor: default; }
.dx-fix { display: flex; gap: 7px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 10px; padding: 7px 10px; } .dx-fix svg { width: 14px; height: 14px; flex: none; color: var(--accent); margin-top: 2px; }
/* models table */
.dx-tone { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--lc) 14%, transparent); color: color-mix(in srgb, var(--lc) 80%, var(--text)); }
.dx-mono { font-family: var(--mono); font-size: 12.5px; } .dx-zero { color: var(--fail); font-weight: 700; }
/* model panel */
.dx-mband { grid-template-columns: auto minmax(0, 1fr) auto !important; } .dx-mband .dx-logo { background: linear-gradient(135deg, var(--lc), color-mix(in srgb, var(--lc) 55%, #fff)); box-shadow: 0 0 0 6px color-mix(in srgb, var(--lc) 25%, transparent); }
.dx-lin { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 16px; align-items: center; }
.dx-lin-me { padding: 10px 16px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #6c5ce7, #8b7cf6); font-family: var(--mono); box-shadow: 0 10px 22px -12px #6c5ce7; }
.dx-near { display: inline-flex; align-items: center; gap: 4px; } .dx-near small { font-size: 10.5px; color: var(--muted); }
.dx-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; } @media (max-width: 900px) { .dx-two { grid-template-columns: minmax(0, 1fr); } }
.dx-tests { display: flex; flex-direction: column; gap: 6px; }
.dx-test { display: flex; gap: 8px; align-items: center; padding: 7px 10px; border-radius: 10px; background: var(--pass-bg); font-size: 12.5px; flex-wrap: wrap; }
.dx-tname { font-weight: 800; color: var(--pass); } .dx-tcol { font-family: var(--mono); } .dx-test small { color: var(--muted); font-family: var(--mono); font-size: 11px; }
/* column lineage */
.dx-tree { display: flex; flex-direction: column; gap: 6px; }
.dx-tnode { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); flex-wrap: wrap; position: relative; }
.dx-tnode.src { background: color-mix(in srgb, #64748b 8%, var(--surface)); }
.dx-tdot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; } .dx-tnode.src .dx-tdot { background: #64748b; }
.dx-expr { font: 11.5px var(--mono); background: var(--surface-3); padding: 2px 7px; border-radius: 6px; color: var(--text-2); }
.dx-modal .modal-body { background: var(--bg); }

/* ================================================================ dbt developer tools */
.dx-nav { align-items: center; }
.dx-fixnote { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 13px; } .dx-fixnote svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.dx-diff { border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; }
.dx-dhead { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.dx-dhead svg { width: 15px; height: 15px; color: var(--accent); } .dx-dhead b { font: 700 12.5px var(--mono); }
.dx-dtag { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); } .dx-dtag.new { background: var(--pass-bg); color: var(--pass); }
.dx-dcount { margin-left: auto; font: 700 12px var(--mono); color: var(--muted); }
.dx-dbody { margin: 0; max-height: 380px; overflow: auto; font: 12px/1.55 var(--mono); background: var(--surface); padding: 6px 0; }
.dl { display: block; padding: 0 12px; white-space: pre; } .dl.dl-a { background: color-mix(in srgb, #22c55e 16%, transparent); color: color-mix(in srgb, #15803d 90%, var(--text)); }
.dl.dl-d { background: color-mix(in srgb, #ef4444 14%, transparent); color: color-mix(in srgb, #b91c1c 90%, var(--text)); text-decoration: line-through; text-decoration-color: rgba(185,28,28,.35); }
.dl.dl-h { color: var(--accent-text); background: var(--accent-soft); font-weight: 700; } .dl.dl-c { color: var(--muted); }
.dx-fsum { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; } .dx-fsum b { font: 800 18px var(--font-head, var(--font)); }
.dx-fbar { flex: 1; max-width: 320px; height: 9px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .dx-fbar i { display: block; height: 100%; background: linear-gradient(90deg, #22c55e, #4ade80); }
.dx-files { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 10px; }
.dx-file { --fc: #22c55e; display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: 13px; border: 1.5px solid color-mix(in srgb, var(--fc) 35%, var(--border)); background: color-mix(in srgb, var(--fc) 5%, var(--surface)); }
.dx-file.t-bad { --fc: #ef4444; } .dx-file.t-warn { --fc: #f59e0b; } .dx-file.t-info { --fc: #0ea5e9; }
.dx-file b { display: block; font-size: 13.5px; } .dx-file .grow > span { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.dx-fic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--fc); flex: none; } .dx-fic svg { width: 16px; height: 16px; }
.dx-fitems { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; } .dx-fitems code, .dx-codes code { font-size: 11px; padding: 1px 7px; border-radius: 6px; background: var(--surface-3); }
.dx-lsum { font-size: 13px; color: var(--text-2); } .dx-lsum b { font-size: 15px; color: var(--text); }
.dx-code { font: 12.5px/1.6 var(--mono); border: 1.5px solid var(--border); border-radius: 12px; overflow: auto; max-height: 460px; background: var(--surface); }
.dx-cl { display: grid; grid-template-columns: 46px 1fr auto; gap: 10px; padding: 0 10px 0 0; } .dx-cl:hover { background: var(--surface-2); }
.dx-cl.bad { background: color-mix(in srgb, #f59e0b 13%, transparent); box-shadow: inset 3px 0 0 #f59e0b; }
.dx-ln { text-align: right; color: var(--faint); user-select: none; padding-right: 6px; border-right: 1px solid var(--border); } .dx-ct { white-space: pre; }
.dx-cv { display: flex; gap: 3px; } .dx-cv code { font-size: 10.5px; padding: 0 6px; border-radius: 5px; background: #f59e0b; color: #fff; }
.dx-vlist { display: flex; flex-direction: column; gap: 5px; max-height: 260px; overflow: auto; }
.dx-v { display: flex; gap: 9px; align-items: center; font-size: 12.5px; padding: 5px 9px; border-radius: 8px; background: var(--surface-2); }
.dx-vline { font: 700 11.5px var(--mono); color: var(--muted); min-width: 56px; } .dx-v code { font-size: 11px; padding: 1px 6px; border-radius: 5px; background: var(--warn-bg); color: var(--warn); font-weight: 700; }
.dx-vfix { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--pass); }
.dx-quick { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 14px; background: linear-gradient(110deg, color-mix(in srgb, #6c5ce7 10%, var(--surface)), var(--surface)); border: 1.5px dashed color-mix(in srgb, #6c5ce7 40%, var(--border)); }
.dx-qlab { display: inline-flex; align-items: center; gap: 6px; font: 800 12px var(--font); color: var(--accent-text); text-transform: uppercase; letter-spacing: .08em; } .dx-qlab svg { width: 14px; height: 14px; }
.cm-row { grid-template-columns: minmax(0, 1.5fr) 24px auto 24px minmax(0, 1fr) auto 40px !important; }
.cm-flow { display: flex; justify-content: flex-end; }
.cmf { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--muted); }
.cmf.t-ok, .cmf.t-target { background: var(--pass-bg); color: var(--pass); } .cmf.t-warn { background: var(--warn-bg); color: var(--warn); } .cmf.t-bad { background: var(--fail-bg); color: var(--fail); }
.cm-flowsum { display: flex; gap: 6px; flex-wrap: wrap; }
.dx-unused { display: flex; flex-direction: column; gap: 8px; } .dx-urow { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.dx-ucol { font-size: 11.5px; padding: 2px 8px; border-radius: 7px; background: var(--warn-bg); color: var(--warn); font-weight: 700; cursor: help; }
.dx-fnode { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); flex-wrap: wrap; }
.dx-fnode.drop { border-color: color-mix(in srgb, #ef4444 50%, var(--border)); background: color-mix(in srgb, #ef4444 6%, var(--surface)); }
.dx-fnode.tgt { border-color: color-mix(in srgb, #22c55e 50%, var(--border)); background: color-mix(in srgb, #22c55e 6%, var(--surface)); }
.dx-fdot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; } .dx-fnode.drop .dx-fdot { background: #ef4444; } .dx-fnode.tgt .dx-fdot { background: #22c55e; }
.dx-fverdict { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; font-size: 13px; font-weight: 600; }
.dx-fverdict.t-bad { background: var(--fail-bg); color: var(--fail); } .dx-fverdict.t-warn { background: var(--warn-bg); color: var(--warn); } .dx-fverdict svg { width: 16px; height: 16px; flex: none; }

/* ================================================================ model-by-model file ticks */
.fm-title { display: flex; align-items: baseline; gap: 10px; margin: 20px 0 8px; } .fm-title h4 { margin: 0; font: 800 15.5px var(--font-head, var(--font)); }
.fm-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; margin-bottom: 8px; align-items: center; } .fm-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.fm-t td, .fm-t th { vertical-align: middle; } .fm-t th { text-align: center; } .fm-t th:first-child { text-align: left; }
.fm-c { text-align: center; } .fm-c small { display: block; font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.fm-path { display: block; font: 10.5px var(--mono); color: var(--muted); }
.fm-ok { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #22c55e; color: #fff; }
.fm-ok svg { width: 14px; height: 14px; stroke-width: 3; } .fm-ok.sm { width: 18px; height: 18px; } .fm-ok.sm svg { width: 11px; height: 11px; }
.fm-no { display: inline-flex; align-items: center; gap: 6px; }
.fm-x { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--fail-bg); color: var(--fail); font-weight: 900; font-size: 12px; border: 1.5px solid color-mix(in srgb, var(--fail) 40%, transparent); }
.fm-fix { padding: 2px 9px !important; font-size: 11.5px !important; min-height: 0 !important; } .fm-na { color: var(--faint); }
.fm-score { font: 800 12px var(--font); padding: 3px 9px; border-radius: 999px; background: var(--fail-bg); color: var(--fail); }
.fm-score.s3, .fm-score.s4 { background: var(--warn-bg); color: var(--warn); } .fm-score.s5 { background: var(--pass-bg); color: var(--pass); }

/* ================================================================ column journey */
.cl-verdict { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 18px 22px; border-radius: 18px; color: #fff; background: var(--band-bg); }
.cl-verdict.t-ok { box-shadow: inset 6px 0 0 #34d399; } .cl-verdict.t-warn { box-shadow: inset 6px 0 0 #fbbf24; } .cl-verdict.t-bad { box-shadow: inset 6px 0 0 #f87171; }
.cl-vic { width: 56px; height: 56px; border-radius: 17px; display: grid; place-items: center; background: #22c55e; } .cl-verdict.t-warn .cl-vic { background: #f59e0b; } .cl-verdict.t-bad .cl-vic { background: #ef4444; }
.cl-vic svg { width: 28px; height: 28px; color: #fff; }
.cl-verdict h3 { margin: 2px 0 4px; font: 800 21px var(--mono); color: #fff; } .cl-verdict p { margin: 0; color: rgba(226,232,255,.9); font-size: 14px; }
.cl-stats { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; }
.cl-st { font-size: 12.5px; padding: 5px 11px; border-radius: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); color: rgba(226,232,255,.9); }
.cl-st b { color: #fff; font-size: 14px; margin-right: 3px; } .cl-st.tgt { border-color: rgba(52,211,153,.6); } .cl-st.drop { border-color: rgba(248,113,113,.7); }
.cl-wrap { overflow: auto; max-height: 620px; padding: 6px; border-radius: 14px; background: radial-gradient(rgba(108,92,231,.08) 1px, transparent 1px) 0 0/18px 18px, var(--surface-2); border: 1px solid var(--border); }
.cl-svg { display: block; }
.cl-lane { font: 800 10.5px var(--font); letter-spacing: .12em; fill: var(--muted); }
.cl-e { fill: none; stroke: #8f88c4; stroke-width: 2.2; } .cl-e.drop { stroke: #ef4444; stroke-dasharray: 6 5; stroke-width: 2.4; }
.cl-e.calc, .cl-e.case { stroke: #8b5cf6; } .cl-e.agg { stroke: #f59e0b; } .cl-e.ren { stroke: #0ea5e9; }
.cl-el { font: 700 10.5px var(--font); fill: #6d5bd0; paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; } .cl-el.agg { fill: #b45309; } .cl-el.ren { fill: #0369a1; }
.cl-n rect { fill: var(--surface); stroke: #b9b3df; stroke-width: 1.6; }
.cl-n.src rect { fill: color-mix(in srgb, #64748b 10%, var(--surface)); stroke: #94a3b8; }
.cl-n.calc rect, .cl-n.case rect { stroke: #8b5cf6; } .cl-n.agg rect { stroke: #f59e0b; } .cl-n.ren rect { stroke: #0ea5e9; }
.cl-n.me rect { fill: #6c5ce7; stroke: #6c5ce7; stroke-width: 3; filter: drop-shadow(0 6px 14px rgba(108,92,231,.55)); }
.cl-n.me .cl-m, .cl-n.me .cl-c, .cl-n.me .cl-flag { fill: #fff; }
.cl-n.tgt rect { fill: color-mix(in srgb, #22c55e 12%, var(--surface)); stroke: #22c55e; stroke-width: 2.6; }
.cl-n.drop rect { fill: color-mix(in srgb, #ef4444 10%, var(--surface)); stroke: #ef4444; stroke-width: 2.4; stroke-dasharray: 6 4; }
.cl-m { font: 600 11px var(--mono); fill: var(--muted); } .cl-c { font: 800 13.5px var(--mono); fill: var(--text); } .cl-n.drop .cl-c { fill: #dc2626; }
.cl-flag { font: 800 10.5px var(--font); fill: #15803d; }
.cl-legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .cl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.cl-k { width: 16px; height: 11px; border-radius: 4px; border: 2px solid #b9b3df; background: var(--surface); }
.cl-k.src { border-color: #94a3b8; } .cl-k.ren { border-color: #0ea5e9; } .cl-k.calc, .cl-k.case { border-color: #8b5cf6; } .cl-k.agg { border-color: #f59e0b; }
.cl-k.drop { border: 2px dashed #ef4444; background: color-mix(in srgb, #ef4444 12%, transparent); } .cl-k.tgt { border-color: #22c55e; background: color-mix(in srgb, #22c55e 15%, transparent); }
.cl-story { margin: 0; padding: 0; list-style: none; counter-reset: s; display: flex; flex-direction: column; gap: 8px; }
.cl-story li { counter-increment: s; position: relative; padding: 9px 12px 9px 46px; border-radius: 12px; background: var(--surface-2); font-size: 13.5px; line-height: 1.55; border-left: 4px solid #b9b3df; }
.cl-story li::before { content: counter(s); position: absolute; left: 12px; top: 9px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 12px var(--font); color: #fff; background: #8f88c4; }
.cl-story li code { font-size: 12.5px; padding: 1px 6px; border-radius: 6px; background: var(--surface-3); }
.cl-story li.st-src { border-left-color: #94a3b8; } .cl-story li.st-src::before { background: #64748b; }
.cl-story li.st-calc, .cl-story li.st-case { border-left-color: #8b5cf6; } .cl-story li.st-calc::before, .cl-story li.st-case::before { background: #8b5cf6; }
.cl-story li.st-agg { border-left-color: #f59e0b; } .cl-story li.st-agg::before { background: #f59e0b; } .cl-story li.st-ren { border-left-color: #0ea5e9; } .cl-story li.st-ren::before { background: #0ea5e9; }
.cl-story li.st-drop { border-left-color: #ef4444; background: var(--fail-bg); } .cl-story li.st-drop::before { content: "✕"; background: #ef4444; }
.st-me { color: var(--accent-text); } .st-tgt { color: var(--pass); }

/* GitHub import */
.gh-how { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); font-size: 12.5px; line-height: 1.5; }
.gh-how svg { width: 15px; height: 15px; color: var(--accent); flex: none; margin-top: 2px; }
.gh-repo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--surface-2); }
.gh-repo b { display: block; font: 700 13.5px var(--mono); } .gh-repo small { font-size: 12px; color: var(--muted); }
.gh-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #1f2328; color: #fff; flex: none; } .gh-ic svg { width: 17px; height: 17px; }
.gh-tag { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--pass-bg); color: var(--pass); white-space: nowrap; }
.gh-tag.priv { background: var(--warn-bg); color: var(--warn); }

/* ================================================================ Explore dbt project – app layout */
.dx-srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.dx-src { --sc: #6c5ce7; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 20px 18px 16px; border-radius: 20px; cursor: pointer; text-align: left;
  font: inherit; color: var(--text); border: 1.5px solid color-mix(in srgb, var(--sc) 40%, var(--border)); min-height: 200px;
  background: radial-gradient(260px 160px at 100% 0%, color-mix(in srgb, var(--sc) 16%, transparent), transparent 70%), var(--surface);
  box-shadow: 0 18px 36px -30px color-mix(in srgb, var(--sc) 90%, transparent); transition: transform .18s, box-shadow .18s, border-color .18s; }
.dx-src:hover { transform: translateY(-4px); border-color: var(--sc); box-shadow: 0 26px 46px -28px color-mix(in srgb, var(--sc) 90%, transparent); }
.dx-src.gh { --sc: #1f2328; } .dx-src.zip { --sc: #0ea5e9; } .dx-src.pc { --sc: #16a34a; } .dx-src.sample { --sc: #f59e0b; }
[data-theme="dark"] .dx-src.gh { --sc: #a5b4fc; }
.dx-src-ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--sc), color-mix(in srgb, var(--sc) 60%, #fff)); }
.dx-src-ic svg { width: 26px; height: 26px; }
.dx-src > b { font: 800 17px var(--font-head, var(--font)); letter-spacing: -.015em; } .dx-src > span:not(.dx-src-ic):not(.dx-src-go) { font-size: 13px; color: var(--muted); line-height: 1.45; }
.dx-src-sub a { font-size: 12.5px; font-weight: 700; }
.dx-src-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; font: 700 13px var(--font); color: var(--sc); } .dx-src-go svg { width: 14px; height: 14px; }
[data-theme="dark"] .dx-src-go { color: color-mix(in srgb, var(--sc) 60%, #fff); }
.dx-recent { display: flex; flex-direction: column; padding: 6px 10px 10px; }
.dx-rec { display: flex; align-items: center; gap: 12px; padding: 10px 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.dx-rec:hover { background: var(--surface-2); } .dx-rec b { display: block; font-size: 14px; } .dx-rec small { font-size: 11.5px; color: var(--muted); font-family: var(--mono); }
.dx-rec-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; } .dx-rec-ic svg { width: 16px; height: 16px; }
.dx-rec-m { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: var(--surface-3); } .dx-rec-at { font-size: 12px; color: var(--muted); min-width: 52px; text-align: right; }
.dx-loading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 20px; border-radius: 20px; background: var(--surface); border: 1.5px dashed var(--border); }
.dx-loading b { font-size: 16px; } .dx-loading span { color: var(--muted); font-size: 13px; }
.dx-spin { width: 40px; height: 40px; border-radius: 50%; border: 4px solid var(--accent-soft); border-top-color: var(--accent); animation: nbspin .8s linear infinite; }
.dx-counts { display: flex; flex-wrap: wrap; gap: 14px; margin: 4px 0 10px; font-size: 13.5px; color: rgba(226,232,255,.85); } .dx-counts b { color: #fff; font-size: 17px; }
.dx-warnchip { background: rgba(245,158,11,.25) !important; border-color: rgba(245,158,11,.6) !important; }
/* sticky toolbar + tabs */
.dx-sticky { position: sticky; top: 60px; z-index: 30; display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: 18px;
  background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(10px); border: 1.5px solid var(--line-dark, var(--border)); box-shadow: 0 16px 30px -26px rgba(40,30,110,.6); }
.dx-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dx-tb-proj { display: flex; align-items: center; gap: 8px; margin-right: 6px; min-width: 0; } .dx-tb-proj b { font: 800 14px var(--font-head, var(--font)); white-space: nowrap; }
.dx-tb-proj small { font: 11px var(--mono); color: var(--muted); max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-tb-dot { width: 10px; height: 10px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.2); flex: none; }
.dx-tb-sep { flex: 1; }
.dx-tb { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: 600 12.5px var(--font); color: var(--text-2);
  transition: background .15s, border-color .15s, transform .15s; }
.dx-tb:hover { border-color: var(--accent); color: var(--accent-text); transform: translateY(-1px); } .dx-tb svg { width: 14px; height: 14px; color: var(--accent); }
.dx-tb.pri { background: linear-gradient(135deg, #6c5ce7, #8b7cf6); border-color: transparent; color: #fff; box-shadow: 0 8px 18px -10px #6c5ce7; } .dx-tb.pri svg { color: #fff; }
.dx-tabs { display: flex; gap: 4px; overflow-x: auto; border-top: 1px solid var(--border); padding-top: 8px; }
.dx-tab { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 11px; border: 0; background: transparent; cursor: pointer; font: 700 13px var(--font); color: var(--muted); white-space: nowrap; }
.dx-tab svg { width: 15px; height: 15px; } .dx-tab:hover { background: var(--surface-2); color: var(--text); }
.dx-tab.on { background: var(--accent); color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
.dx-tabn { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); } .dx-tab.on .dx-tabn { background: rgba(255,255,255,.25); color: #fff; }
.dx-pane { animation: dxin .25s ease; } @keyframes dxin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* quick wins */
.dx-wins { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.dx-win { --wc: #0ea5e9; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--wc) 35%, var(--border));
  background: linear-gradient(160deg, color-mix(in srgb, var(--wc) 9%, var(--surface)), var(--surface)); }
.dx-win.t-bad { --wc: #ef4444; } .dx-win.t-warn { --wc: #f59e0b; }
.dx-win-top { display: flex; align-items: center; justify-content: space-between; }
.dx-win-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--wc); } .dx-win-ic svg { width: 18px; height: 18px; }
.dx-win-n { font: 800 30px var(--font-head, var(--font)); color: var(--wc); letter-spacing: -.03em; }
.dx-win > b { font-size: 14px; } .dx-win > span { font-size: 12px; color: var(--muted); line-height: 1.4; flex: 1; }
.dx-win-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.dx-ov2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; } @media (max-width: 1100px) { .dx-ov2 { grid-template-columns: minmax(0, 1fr); } }
.dx-mini { position: relative; cursor: pointer; border-radius: 14px; background: radial-gradient(rgba(108,92,231,.08) 1px, transparent 1px) 0 0/16px 16px, var(--surface-2); padding: 8px; border: 1px solid var(--border); }
.dx-mini .dx-svgwrap { max-height: 300px; overflow: hidden; } .dx-mini:hover { border-color: var(--accent); }
.dx-mini-go { position: absolute; right: 12px; bottom: 10px; display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #fff; font: 700 12px var(--font); }
.dx-mini-go svg { width: 13px; height: 13px; }
.dx-worst { display: flex; flex-direction: column; gap: 4px; }
.dx-wrow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 0; border-radius: 11px; background: transparent; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.dx-wrow:hover { background: var(--surface-2); } .dx-wrow > svg { width: 14px; height: 14px; color: var(--muted); }
/* models as cards */
.dx-search { width: 240px; border-radius: 999px !important; }
.dx-fchips { display: flex; gap: 6px; flex-wrap: wrap; }
.dx-fchip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: 600 12.5px var(--font); color: var(--text-2); }
.dx-fchip span { font-size: 11px; padding: 0 6px; border-radius: 999px; background: var(--surface-3); } .dx-fchip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .dx-fchip.on span { background: rgba(255,255,255,.25); }
.dx-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.dx-mcard { --lc: #6c5ce7; display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--border); border-top: 5px solid var(--lc); background: var(--surface);
  transition: transform .15s, box-shadow .15s; } .dx-mcard:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--lc) 80%, transparent); }
.dx-mc-top { display: flex; align-items: center; gap: 6px; } .dx-mat { font-size: 11px; color: var(--muted); font-weight: 600; } .dx-tgt { font-size: 11px; font-weight: 700; color: #15803d; }
.dx-mc-name { font: 700 14px var(--mono); overflow: hidden; text-overflow: ellipsis; } .dx-mc-path { font: 10.5px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dx-mc-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .dx-mc-stats b { color: var(--text); font-size: 14px; }
.dx-mc-ticks { display: flex; gap: 6px; flex-wrap: wrap; } .dx-tk { font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px; }
.dx-tk.ok { background: var(--pass-bg); color: var(--pass); } .dx-tk.no { background: var(--fail-bg); color: var(--fail); }
.dx-mc-acts { display: flex; gap: 6px; margin-top: auto; padding-top: 4px; border-top: 1px solid var(--border); }
.dx-zoom { display: flex; gap: 4px; align-items: center; }
/* journey: target boxes – readable whether or not it is the clicked column */
.cl-n.me.tgt rect { fill: #16a34a; stroke: #0f7a35; stroke-width: 3; filter: drop-shadow(0 6px 14px rgba(22,163,74,.5)); }
.cl-n.me.tgt .cl-m { fill: rgba(255,255,255,.85); } .cl-n.me.tgt .cl-c { fill: #fff; }
.cl-n.tgt:not(.me) .cl-c { fill: #14532d; } [data-theme="dark"] .cl-n.tgt:not(.me) .cl-c { fill: #bbf7d0; }
.cl-wrap g.cl-n .cl-pill rect { fill: #dcfce7; stroke: #16a34a; stroke-width: 1.4; filter: none; } .cl-wrap g.cl-n .cl-pill text { font: 800 10.5px var(--font); fill: #15803d; }
.cl-wrap g.cl-n .cl-pill.me rect { fill: #fff; stroke: none; } .cl-wrap g.cl-n .cl-pill.me text { fill: #6c5ce7; } .cl-wrap g.cl-n .cl-pill.me.tgt text { fill: #15803d; }
[data-theme="dark"] .cl-wrap g.cl-n .cl-pill:not(.me) rect { fill: #14532d; stroke: #4ade80; } [data-theme="dark"] .cl-wrap g.cl-n .cl-pill:not(.me) text { fill: #bbf7d0; }

/* ================================================================ Explore dbt project – grouped navigation + the developer tools (xp-*) */
.dx-nav { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border); padding-top: 8px; }
.dx-nav .dx-tabs { border-top: 0; padding-top: 0; }
.dx-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dx-group { --gc: #6c5ce7; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: left; transition: border-color .15s, background .15s, transform .15s; }
.dx-group.g-explore { --gc: #0ea5e9; } .dx-group.g-check { --gc: #f59e0b; } .dx-group.g-change { --gc: #ec4899; }
.dx-group:hover { border-color: var(--gc); transform: translateY(-1px); }
.dx-group.on { border-color: var(--gc); background: color-mix(in srgb, var(--gc) 12%, var(--surface)); box-shadow: 0 10px 22px -18px var(--gc); }
.dx-group-ic { width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--gc), color-mix(in srgb, var(--gc) 60%, #fff)); flex: none; } .dx-group-ic svg { width: 16px; height: 16px; }
.dx-group-t { display: flex; flex-direction: column; min-width: 0; flex: 1; } .dx-group-t b { font: 800 14px var(--font-head, var(--font)); } .dx-group-t small { font-size: 11.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dx-group-n { font: 700 11px var(--font); padding: 2px 8px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); } .dx-group.on .dx-group-n { background: var(--gc); color: #fff; }
@media (max-width: 760px) { .dx-group-t small { display: none; } .dx-group { padding: 6px 8px; } }

/* hero band of every tool */
.xp-hero { --hc: #6c5ce7; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border-radius: 22px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(420px 220px at 100% 0%, rgba(255,255,255,.18), transparent 70%), linear-gradient(120deg, color-mix(in srgb, var(--hc) 88%, #0b0830), color-mix(in srgb, var(--hc) 55%, #1b1646));
  box-shadow: 0 22px 40px -30px var(--hc); }
.xp-hero.t-ok { --hc: #16a34a; } .xp-hero.t-warn { --hc: #d97706; } .xp-hero.t-bad { --hc: #dc2626; } .xp-hero.t-info { --hc: #5b4ef0; }
.xp-hero-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: rgba(255,255,255,.18); border: 1.5px solid rgba(255,255,255,.35); flex: none; } .xp-hero-ic svg { width: 28px; height: 28px; }
.xp-hero-say { flex: 1 1 320px; min-width: 0; } .xp-hero-say h3 { margin: 0 0 4px; font: 800 21px var(--font-head, var(--font)); letter-spacing: -.02em; color: #fff; }
.xp-hero-say p { margin: 0 0 8px; color: rgba(255,255,255,.86); font-size: 13.5px; line-height: 1.5; max-width: 760px; }
.xp-hero .btn { background: rgba(255,255,255,.95); color: #1b1646; border-color: transparent; }
.xp-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.xp-stat { min-width: 84px; padding: 9px 12px; border-radius: 14px; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.28); display: flex; flex-direction: column; align-items: flex-start; }
.xp-stat b { font: 800 24px var(--font-head, var(--font)); letter-spacing: -.03em; line-height: 1.1; } .xp-stat span { font-size: 11.5px; color: rgba(255,255,255,.85); }
.xp-stat.t-bad { background: rgba(239,68,68,.35); border-color: rgba(254,202,202,.7); } .xp-stat.t-warn { background: rgba(245,158,11,.32); border-color: rgba(253,230,138,.7); }
.xp-stat.t-ok { background: rgba(34,197,94,.28); border-color: rgba(187,247,208,.6); } .xp-stat.t-info { background: rgba(59,130,246,.3); border-color: rgba(191,219,254,.6); }
.xp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 34px 20px; border-radius: 20px; border: 1.5px dashed var(--border-strong); background: var(--surface-2); }
.xp-empty b { font: 800 16px var(--font-head, var(--font)); } .xp-empty > span { color: var(--muted); font-size: 13px; max-width: 620px; line-height: 1.5; }
.xp-empty-ic { width: 54px; height: 54px; border-radius: 18px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); } .xp-empty-ic svg { width: 26px; height: 26px; }
.xp-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; }
.xp-pill { font: 700 11px var(--font); padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.xp-pill.t-ok { background: var(--pass-bg); color: var(--pass); } .xp-pill.t-bad { background: var(--fail-bg); color: var(--fail); } .xp-pill.t-warn { background: var(--warn-bg); color: #b45309; }
.xp-pill.t-info { background: var(--accent-soft); color: var(--accent-text); } [data-theme="dark"] .xp-pill.t-warn { color: var(--warn); }
.xp-graph { overflow: auto; border-radius: 16px; padding: 10px; background: radial-gradient(rgba(108,92,231,.09) 1px, transparent 1px) 0 0/16px 16px, var(--surface-2); border: 1px solid var(--border); }
.xp-leg { margin-top: 10px; } .xp-k { width: 16px; height: 11px; border-radius: 4px; border: 2px solid; display: inline-block; }
.xp-k.k-me { background: #6c5ce7; border-color: #6c5ce7; } .xp-k.k-breaks, .xp-k.k-removed { background: #fee2e2; border-color: #ef4444; } .xp-k.k-check, .xp-k.k-changed { background: #fef3c7; border-color: #f59e0b; }
.xp-k.k-affected, .xp-k.k-downstream { background: #dbeafe; border-color: #3b82f6; } .xp-k.k-safe, .xp-k.k-added { background: #dcfce7; border-color: #22c55e; }
.xp-k0 { width: 14px; height: 14px; border-radius: 4px; border: 1.5px dashed var(--border-strong); background: var(--surface-3); display: inline-block; }
/* lineage nodes painted by status (impact, compare) */
.dx-node.imp rect:first-of-type { stroke-width: 2.6; }
.dx-node.imp-me rect:first-of-type { fill: #6c5ce7; stroke: #4c3fd0; } .dx-node.imp-me .dx-name, .dx-node.imp-me .dx-sub { fill: #fff; }
.dx-node.imp-breaks rect:first-of-type, .dx-node.imp-removed rect:first-of-type { fill: color-mix(in srgb, #ef4444 14%, var(--surface)); stroke: #ef4444; }
.dx-node.imp-removed rect:first-of-type { stroke-dasharray: 6 4; } .dx-node.imp-removed .dx-name { text-decoration: line-through; fill: #dc2626; }
.dx-node.imp-check rect:first-of-type, .dx-node.imp-changed rect:first-of-type { fill: color-mix(in srgb, #f59e0b 16%, var(--surface)); stroke: #f59e0b; }
.dx-node.imp-affected rect:first-of-type, .dx-node.imp-downstream rect:first-of-type { fill: color-mix(in srgb, #3b82f6 12%, var(--surface)); stroke: #3b82f6; }
.dx-node.imp-safe rect:first-of-type, .dx-node.imp-added rect:first-of-type { fill: color-mix(in srgb, #22c55e 13%, var(--surface)); stroke: #22c55e; }
.dx-edge.ep-p-breaks { stroke: #ef4444; stroke-width: 2.4; } .dx-edge.ep-p-check { stroke: #f59e0b; stroke-width: 2.2; } .dx-edge.ep-p-affected { stroke: #3b82f6; stroke-width: 2; }
.dx-edge.ep-added { stroke: #22c55e; stroke-width: 2.6; stroke-dasharray: 7 4; } .dx-edge.ep-removed { stroke: #ef4444; stroke-width: 2.4; stroke-dasharray: 4 4; }

/* 1. impact */
.xp-pick { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; gap: 18px; align-items: center; padding: 18px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--line-dark, var(--border)); }
@media (max-width: 1100px) { .xp-pick { grid-template-columns: minmax(0, 1fr); } }
.xp-pick-l { display: flex; gap: 12px; align-items: flex-start; } .xp-pick-l > .stack > b { font: 800 14.5px var(--font-head, var(--font)); }
.xp-pick-l select { min-width: 220px; }
.xp-step { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 800 14px var(--font); color: #fff; background: linear-gradient(135deg, #6c5ce7, #a78bfa); flex: none; }
.xp-chg { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.xp-chg-b { --kc: #6c5ce7; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: left; transition: all .15s; }
.xp-chg-b.k-remove { --kc: #ef4444; } .xp-chg-b.k-rename { --kc: #f59e0b; } .xp-chg-b.k-type { --kc: #0ea5e9; } .xp-chg-b.k-logic { --kc: #8b5cf6; }
.xp-chg-b:hover { border-color: var(--kc); } .xp-chg-b.on { border-color: var(--kc); background: color-mix(in srgb, var(--kc) 12%, var(--surface)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--kc) 18%, transparent); }
.xp-chg-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: var(--kc); } .xp-chg-ic svg { width: 15px; height: 15px; }
.xp-chg-b b { font-size: 13.5px; } .xp-chg-b small { font-size: 11.5px; color: var(--muted); }
.xp-lanes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1000px) { .xp-lanes { grid-template-columns: minmax(0, 1fr); } }
.xp-lane { --lc: #3b82f6; display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 18px; background: color-mix(in srgb, var(--lc) 6%, var(--surface)); border: 1.5px solid color-mix(in srgb, var(--lc) 35%, var(--border)); border-top: 5px solid var(--lc); }
.xp-lane.t-bad { --lc: #ef4444; } .xp-lane.t-warn { --lc: #f59e0b; }
.xp-lane-h { display: flex; align-items: center; justify-content: space-between; } .xp-lane-h b { font: 800 15px var(--font-head, var(--font)); }
.xp-lane-h span { font: 800 13px var(--font); min-width: 28px; text-align: center; padding: 2px 8px; border-radius: 999px; background: var(--lc); color: #fff; } .xp-lane-s { color: var(--muted); font-size: 11.5px; margin-top: -4px; }
.xp-imp { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.xp-imp.s-safe { opacity: .78; } .xp-dist { font-size: 11px; color: var(--muted); } .xp-why { font-size: 12.5px; color: var(--text-2); }
.xp-lines { display: flex; flex-direction: column; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.xp-line { display: flex; gap: 8px; font: 11.5px var(--mono); background: var(--surface-2); padding: 3px 8px; } .xp-line i { color: var(--faint); font-style: normal; min-width: 22px; text-align: right; }
.xp-line code { white-space: pre-wrap; word-break: break-word; background: none; padding: 0; } .xp-line mark { background: #fde68a; color: #7c2d12; border-radius: 3px; padding: 0 2px; }
.xp-none { color: var(--faint); font-size: 12.5px; text-align: center; padding: 10px; }
.xp-colflow { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-col { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--border); border-left: 4px solid #3b82f6; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); }
.xp-col:hover { border-color: #3b82f6; } .xp-col small { font: 10.5px var(--mono); color: var(--muted); } .xp-col b { font: 700 13px var(--mono); } .xp-col i { font-size: 10.5px; color: var(--faint); font-style: normal; }
.xp-how { font-size: 11px; font-weight: 700; color: #6d5bd0; }
.xp-tests { display: flex; flex-direction: column; gap: 6px; } .xp-test { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.xp-test b { font: 600 12.5px var(--mono); } .xp-test small { color: var(--muted); margin-left: auto; }
.xp-exps { display: flex; flex-direction: column; gap: 8px; } .xp-exp { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: var(--surface-2); }
.xp-exp b { display: block; font-size: 13.5px; } .xp-exp small { color: var(--muted); font-size: 11.5px; }
.xp-exp-ic { --ec: #0ea5e9; width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--ec); flex: none; } .xp-exp-ic svg { width: 17px; height: 17px; }
.xp-exp-ic.lg { width: 44px; height: 44px; border-radius: 14px; } .xp-exp-ic.lg svg { width: 22px; height: 22px; }
.xp-exp-ic.t-ml { --ec: #db2777; } .xp-exp-ic.t-notebook { --ec: #f59e0b; } .xp-exp-ic.t-application { --ec: #16a34a; } .xp-exp-ic.t-analysis { --ec: #8b5cf6; } .xp-exp-ic.t-metric { --ec: #6c5ce7; }

/* 2. compare */
.xp-vs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.xp-ver { display: flex; flex-direction: column; padding: 10px 16px; border-radius: 14px; border: 1.5px solid var(--border); background: var(--surface); }
.xp-ver small { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .xp-ver b { font-size: 14px; }
.xp-ver.old { border-left: 5px solid #94a3b8; } .xp-ver.new { border-left: 5px solid #22c55e; }
.xp-vs-arrow { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .xp-vs-arrow svg { width: 16px; height: 16px; }
.xp-srcs { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.xp-src { --sc: #6c5ce7; display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--sc) 40%, var(--border));
  background: radial-gradient(220px 140px at 100% 0%, color-mix(in srgb, var(--sc) 14%, transparent), transparent 70%), var(--surface); }
.xp-src.t-gh { --sc: #1f2328; } .xp-src.t-sample { --sc: #f59e0b; } .xp-src.t-rec { --sc: #0ea5e9; } .xp-src.t-zip { --sc: #16a34a; } [data-theme="dark"] .xp-src.t-gh { --sc: #a5b4fc; }
.xp-src > b { font: 800 15px var(--font-head, var(--font)); } .xp-src > span:not(.xp-src-ic) { font-size: 12.5px; color: var(--muted); }
.xp-src-ic { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; color: #fff; background: var(--sc); } .xp-src-ic svg { width: 20px; height: 20px; }
.xp-rec { padding: 6px 8px; flex-direction: column; align-items: flex-start; gap: 0; }
.xp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-tag { font: 600 11.5px var(--mono); padding: 3px 9px; border-radius: 8px; border: 1px solid; }
.xp-tag.add, .xp-tag.tadd { background: var(--pass-bg); color: var(--pass); border-color: color-mix(in srgb, var(--pass) 40%, transparent); }
.xp-tag.rem, .xp-tag.trem { background: var(--fail-bg); color: var(--fail); border-color: color-mix(in srgb, var(--fail) 40%, transparent); }
.xp-tag.ren { background: #e0f2fe; color: #0369a1; border-color: #7dd3fc; } .xp-tag.sql { background: var(--warn-bg); color: #b45309; border-color: #fcd34d; }
[data-theme="dark"] .xp-tag.ren { background: #0c2a3d; color: #7dd3fc; border-color: #0369a1; } [data-theme="dark"] .xp-tag.sql { color: var(--warn); border-color: #92400e; }
.xp-cmp { display: flex; flex-direction: column; gap: 10px; }
.xp-cmpm { --sc: #f59e0b; border-radius: 14px; border: 1.5px solid var(--border); border-left: 5px solid var(--sc); background: var(--surface); padding: 4px 12px 10px; }
.xp-cmpm.s-added { --sc: #22c55e; } .xp-cmpm.s-removed { --sc: #ef4444; }
.xp-cmp-h { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); } .xp-cmp-h svg { width: 16px; height: 16px; color: var(--muted); }
.xp-state { font: 800 10.5px var(--font); text-transform: uppercase; letter-spacing: .05em; padding: 3px 8px; border-radius: 6px; color: #fff; background: #f59e0b; }
.xp-state.s-added, .xp-state.s-pass, .xp-state.s-success { background: #22c55e; } .xp-state.s-removed, .xp-state.s-fail, .xp-state.s-error { background: #ef4444; } .xp-state.s-warn { background: #f59e0b; } .xp-state.s-skipped { background: #94a3b8; }
.xp-cmp-diff .dx-dbody { margin-top: 8px; max-height: 360px; }

/* 3. compiled SQL */
.xp-cbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.xp-crel { display: flex; align-items: center; gap: 6px; } .xp-crel svg { width: 16px; height: 16px; color: var(--accent); } .xp-crel b { font: 700 13px var(--mono); }
.xp-cins { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.xp-cin { font: 600 11.5px var(--mono); padding: 3px 8px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); }
.xp-sw { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.xp-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (max-width: 900px) { .xp-side { grid-template-columns: minmax(0, 1fr); } }
.xp-side pre.code { max-height: 560px; overflow: auto; margin: 0; }
.xp-side-h { font: 800 11px var(--font); text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding: 0 0 6px; } .xp-side-h.on { color: #16a34a; }
.xp-split { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 900px) { .xp-split { grid-template-columns: minmax(0, 1fr); } }
.xp-split .dx-search { width: 100%; }
.xp-mlist { display: flex; flex-direction: column; gap: 4px; max-height: 640px; overflow: auto; padding: 6px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); }
.xp-mi { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.xp-mi b { font: 600 12.5px var(--mono); } .xp-mi:hover { background: var(--surface-2); } .xp-mi.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.xp-mview { min-width: 0; padding: 14px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--border); }

/* 4. macros and packages */
.xp-pkgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; margin-top: 10px; }
.xp-pkg { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1.5px solid var(--border); background: var(--surface); }
.xp-pkg-top { display: flex; align-items: center; gap: 10px; } .xp-pkg-top b { display: block; font: 800 15px var(--mono); } .xp-pkg-top small { color: var(--muted); font-size: 11.5px; }
.xp-pkg-logo { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; font: 800 14px var(--font); color: #fff; background: linear-gradient(135deg, #ff694a, #f59e0b); flex: none; }
.xp-pkg-v { display: flex; gap: 8px; flex-wrap: wrap; } .xp-pkg-v span { display: flex; flex-direction: column; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); min-width: 80px; }
.xp-pkg-v small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .xp-pkg-v b { font: 700 13px var(--mono); }
.xp-calls { display: flex; flex-wrap: wrap; gap: 5px; } .xp-call { font: 600 11px var(--mono); padding: 3px 8px; border-radius: 8px; background: var(--accent-soft); color: var(--accent-text); } .xp-call i { font-style: normal; opacity: .7; margin-left: 4px; }
.xp-macs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.xp-mac { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; border-radius: 16px; border: 1.5px solid var(--border); border-top: 4px solid #22c55e; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: left; transition: transform .15s; }
.xp-mac:hover { transform: translateY(-2px); } .xp-mac.unused { border-top-color: #f59e0b; } .xp-mac.over { border-top-color: #6c5ce7; }
.xp-mac b { font-size: 14px; } .xp-args { font: 11.5px var(--mono); color: var(--muted); } .xp-mdesc { font-size: 12.5px; color: var(--text-2); line-height: 1.4; }
.xp-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .xp-bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #22c55e, #0ea5e9); }

/* 5. exposures and metrics */
.xp-fe { fill: none; stroke: #a5a0d8; stroke-width: 2; } [data-theme="dark"] .xp-fe { stroke: #5b5f9e; }
.xp-fn rect { stroke-width: 2; } .xp-fn-t { font: 700 12.5px var(--font); fill: var(--text); } .xp-fn-s { font: 500 10.5px var(--font); fill: var(--muted); }
.xp-fn.k-model { cursor: pointer; } .xp-fn.k-model rect { fill: var(--surface); stroke: #16a34a; } .xp-fn.k-model .xp-fn-t { font-family: var(--mono); font-size: 12px; }
.xp-fn.k-sem rect { fill: color-mix(in srgb, #0ea5e9 12%, var(--surface)); stroke: #0ea5e9; }
.xp-fn.k-met rect { fill: color-mix(in srgb, #8b5cf6 14%, var(--surface)); stroke: #8b5cf6; }
.xp-fn.k-exp rect { fill: #ec4899; stroke: #be185d; } .xp-fn.k-exp .xp-fn-t, .xp-fn.k-exp .xp-fn-s { fill: #fff; }
.xp-fn.k-exp.tp-ml rect { fill: #db2777; } .xp-fn.k-exp.tp-notebook rect { fill: #f59e0b; stroke: #b45309; }
.xp-expcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.xp-expc { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); border-top: 5px solid #22c55e; }
.xp-expc.t-warn { border-top-color: #f59e0b; } .xp-expc b { font: 800 15px var(--font-head, var(--font)); display: block; } .xp-expc small { color: var(--muted); font-size: 12px; }
.xp-p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.xp-chain { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; } .xp-chain > svg { width: 14px; height: 14px; color: var(--faint); }
.xp-chain span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--border); } .xp-chain span b { display: inline; font-size: 13px; }
.xp-chain span.me { background: #ec4899; color: #fff; border-color: transparent; font-weight: 700; }
.xp-warnrow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; border-radius: 12px; background: var(--warn-bg); font-size: 12.5px; } .xp-warnrow > svg { width: 15px; height: 15px; color: #d97706; }
.xp-mets { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 10px; }
.xp-met { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--border); }
.xp-met b { display: block; font-size: 13.5px; } .xp-met small { color: var(--muted); font-size: 11.5px; font-family: var(--mono); }
.xp-met-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6c5ce7); flex: none; } .xp-met-ic svg { width: 17px; height: 17px; }
.xp-matrix-wrap { overflow: auto; } .xp-matrix { border-collapse: separate; border-spacing: 4px; }
.xp-matrix th { font-size: 11.5px; font-weight: 700; color: var(--text-2); padding: 4px 8px; white-space: nowrap; } .xp-matrix th:first-child { text-align: left; }
.xp-matrix td { text-align: center; padding: 4px; border-radius: 8px; background: var(--surface-2); min-width: 90px; } .xp-matrix td:first-child { background: none; text-align: left; min-width: 0; }
.xp-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: color-mix(in srgb, #ec4899 40%, transparent); border: 2px solid #ec4899; } .xp-dot.direct { background: #ec4899; }

/* 6. incremental and snapshots */
.xp-matbar { display: flex; height: 34px; border-radius: 12px; overflow: hidden; gap: 3px; }
.xp-matbar i { display: grid; place-items: center; color: #fff; font: 700 12px var(--font); font-style: normal; min-width: 6px; white-space: nowrap; overflow: hidden; }
.xp-incs { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; } @media (max-width: 700px) { .xp-incs { grid-template-columns: minmax(0, 1fr); } }
.xp-inc { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); }
.xp-inc .dx-ring-c { width: 58px; height: 58px; background: radial-gradient(closest-side, var(--surface) 74%, transparent 76% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); }
.xp-inc .dx-ring-c b { color: var(--text); font-size: 14px; } .xp-inc small.muted { display: block; font: 11px var(--mono); margin-top: 3px; }
.xp-checks { display: flex; flex-direction: column; gap: 6px; }
.xp-chk { --kc: #22c55e; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--kc) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--kc) 30%, var(--border)); }
.xp-chk.t-bad { --kc: #ef4444; } .xp-chk.t-warn { --kc: #f59e0b; } .xp-chk.t-info { --kc: #3b82f6; }
.xp-chk b { font-size: 13px; display: block; } .xp-chk small { font-size: 12px; color: var(--text-2); line-height: 1.4; }
.xp-chk-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font); color: #fff; background: var(--kc); flex: none; }

/* 7. layer rules */
.xp-le { fill: none; stroke: #8f88c4; stroke-width: 2.2; } .xp-le.bad { stroke: #ef4444; stroke-width: 2.6; stroke-dasharray: 6 4; }
.xp-ln { font: 700 11px var(--font); fill: var(--muted); paint-order: stroke; stroke: var(--surface-2); stroke-width: 4px; } .xp-ln.bad { fill: #dc2626; }
.xp-lb { --lc: #6c5ce7; } .xp-lb.t-src { --lc: #64748b; } .xp-lb.t-base { --lc: #0ea5e9; } .xp-lb.t-stg { --lc: #3b82f6; } .xp-lb.t-int { --lc: #8b5cf6; } .xp-lb.t-mart { --lc: #16a34a; } .xp-lb.t-other { --lc: #f59e0b; }
.xp-lb rect { fill: var(--lc); filter: drop-shadow(0 8px 12px color-mix(in srgb, var(--lc) 45%, transparent)); }
.xp-lb-n { font: 800 22px var(--font-head, var(--font)); fill: #fff; } .xp-lb-t { font: 700 11.5px var(--font); fill: rgba(255,255,255,.9); }
.xp-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.xp-rule { --kc: #22c55e; display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--kc) 35%, var(--border)); background: var(--surface); border-left: 5px solid var(--kc); }
.xp-rule.t-bad { --kc: #ef4444; } .xp-rule.t-warn { --kc: #f59e0b; } .xp-rule.t-info { --kc: #3b82f6; }
.xp-rule b { font-size: 14px; } .xp-rule-ic { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 800 13px var(--font); color: #fff; background: var(--kc); flex: none; }
.xp-viol { display: flex; flex-direction: column; gap: 4px; } .xp-vrow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.xp-fix { display: flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; } .xp-fix svg { width: 13px; height: 13px; }

/* 8. run results */
.xp-fails { display: flex; flex-direction: column; gap: 6px; }
.xp-failr { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--fail-bg); border: 1px solid color-mix(in srgb, var(--fail) 30%, transparent); }
.xp-failr.s-warn { background: var(--warn-bg); border-color: color-mix(in srgb, #f59e0b 35%, transparent); } .xp-failr small { display: block; color: var(--text-2); font-size: 12px; }
.xp-gantt { display: flex; flex-direction: column; gap: 6px; }
.xp-grow { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 10px; align-items: center; } .xp-gth { font: 700 11.5px var(--font); color: var(--muted); }
.xp-gtrack { position: relative; height: 30px; border-radius: 10px; background: repeating-linear-gradient(90deg, var(--surface-2) 0 10%, var(--surface-3) 10% 10.2%); }
.xp-gbar { position: absolute; top: 3px; bottom: 3px; border-radius: 8px; border: 0; cursor: pointer; color: #fff; font: 600 10.5px var(--mono); padding: 0 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left;
  background: linear-gradient(135deg, #22c55e, #16a34a); box-shadow: 0 4px 10px -6px #16a34a; }
.xp-gbar:hover { filter: brightness(1.1); z-index: 2; } .xp-gbar.s-error { background: #ef4444; } .xp-gbar.s-skipped { background: #94a3b8; }
.xp-gaxis { display: flex; justify-content: space-between; margin-left: 80px; font-size: 11px; color: var(--faint); }
.xp-bars { display: flex; flex-direction: column; gap: 6px; }
.xp-brow { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr) 70px; gap: 10px; align-items: center; } .xp-bl { font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-bt { height: 14px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .xp-bt i { display: block; height: 100%; border-radius: 999px; } .xp-brow b { font-size: 12px; text-align: right; }
.xp-tgrid { display: flex; flex-wrap: wrap; gap: 6px; }
.xp-tchip { font: 600 11px var(--mono); padding: 4px 9px; border-radius: 8px; background: var(--pass-bg); color: var(--pass); } .xp-tchip.s-fail, .xp-tchip.s-error { background: var(--fail-bg); color: var(--fail); } .xp-tchip.s-warn { background: var(--warn-bg); color: #b45309; }

/* 9. coverage heatmap */
.xp-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.xp-seg button { border: 0; background: none; padding: 6px 14px; border-radius: 9px; font: 700 12.5px var(--font); color: var(--muted); cursor: pointer; } .xp-seg button.on { background: var(--surface); color: var(--accent-text); box-shadow: 0 2px 6px rgba(20,16,60,.12); }
.xp-hinfo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 36px; margin: 10px 0; padding: 7px 12px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 12.5px; color: var(--muted); }
.xp-heat-wrap { overflow: auto; } .xp-heat { display: flex; flex-direction: column; gap: 6px; min-width: 640px; }
.xp-hrow { display: grid; grid-template-columns: 250px 110px minmax(0, 1fr); gap: 12px; align-items: center; padding: 6px 8px; border-radius: 12px; } .xp-hrow:hover { background: var(--surface-2); }
.xp-hname { display: flex; align-items: center; gap: 6px; border: 0; background: none; cursor: pointer; font: inherit; color: var(--text); text-align: left; min-width: 0; }
.xp-hname b { font: 600 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xp-hpct { position: relative; height: 22px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .xp-hpct i { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: #22c55e; }
.xp-hpct.t-warn i { background: #f59e0b; } .xp-hpct.t-bad i { background: #ef4444; } .xp-hpct span { position: relative; display: block; text-align: center; font: 800 11.5px/22px var(--font); color: var(--text); }
.xp-hcells { display: flex; flex-wrap: wrap; gap: 4px; }
.xp-hc { width: 24px; height: 24px; border-radius: 6px; border: 1.5px dashed var(--border-strong); background: var(--surface-3); cursor: pointer; padding: 0; font: 800 10.5px var(--font); color: #fff; transition: transform .1s; }
.xp-hc.on { border: 1.5px solid rgba(0,0,0,.12); } .xp-hc:hover { transform: scale(1.25); box-shadow: 0 4px 10px rgba(20,16,60,.25); z-index: 1; position: relative; }
.xp-hmodel { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #1b1646; color: #fff; font: 800 10.5px var(--font); }
[data-theme="dark"] .xp-hmodel { background: #a5b4fc; color: #121834; }

/* the navigation in one row: a segmented group switch, then the group's tabs */
.dx-nav { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
.dx-nav .dx-tabs { flex: 1 1 520px; min-width: 0; justify-content: flex-start; }
.dx-groups { display: flex; gap: 3px; padding: 4px; border-radius: 14px; background: var(--surface-3); flex: none; }
.dx-group { padding: 4px 12px 4px 4px; gap: 8px; border: 0; border-radius: 11px; background: transparent; box-shadow: none; }
.dx-group:hover { transform: none; background: color-mix(in srgb, var(--gc) 10%, transparent); }
.dx-group.on { background: var(--surface); box-shadow: 0 4px 12px -6px color-mix(in srgb, var(--gc) 70%, transparent), inset 0 -3px 0 var(--gc); }
.dx-group-ic { width: 28px; height: 28px; border-radius: 9px; } .dx-group-ic svg { width: 14px; height: 14px; }
.dx-group:not(.on) .dx-group-ic { background: color-mix(in srgb, var(--gc) 22%, var(--surface)); color: var(--gc); }
.dx-group-t small, .dx-group-n { display: none; } .dx-group-t b { font-size: 13.5px; }
@media (max-width: 1600px) { .dx-tb.c span { display: none; } .dx-tb.c { padding: 7px 9px; } .dx-tb-proj small { display: none; } }
.dx-nav .dx-tabs { flex-wrap: wrap; overflow: visible; row-gap: 4px; } .dx-nav .dx-tab { padding: 7px 12px; }
.xp-hero-say h3 { font-size: 18.5px; line-height: 1.25; } .xp-hero-say { flex: 1 1 420px; }
.xp-stat { min-width: 74px; padding: 8px 11px; } .xp-stat b { font-size: 21px; }

/* ================================================================ compare two branches / folders / files (cx-*) */
.cx-pick { display: flex; flex-direction: column; gap: 16px; padding: 18px; border-radius: 22px; background: var(--surface); border: 1.5px solid var(--line-dark, var(--border)); }
.cx-pick-h { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .cx-pick-h > div:first-child { flex: 1 1 420px; }
.cx-pick-h h3 { margin: 0 0 4px; font: 800 19px var(--font-head, var(--font)); } .cx-pick-h .muted { font-size: 13px; }
.cx-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: stretch; }
@media (max-width: 980px) { .cx-slots { grid-template-columns: minmax(0, 1fr); } }
.cx-slot { --sc: #ef4444; display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--sc) 40%, var(--border));
  background: linear-gradient(170deg, color-mix(in srgb, var(--sc) 7%, var(--surface)), var(--surface) 60%); min-width: 0; }
.cx-slot.k-b { --sc: #16a34a; }
.cx-slot-h { display: flex; align-items: center; gap: 10px; } .cx-slot-h b { display: block; font: 800 15px var(--font-head, var(--font)); } .cx-slot-h small { color: var(--muted); font-size: 11.5px; }
.cx-letter { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; font: 800 15px var(--font); color: #fff; background: #ef4444; flex: none; margin-right: 6px; }
.cx-letter.b, .cx-slot.k-b .cx-letter { background: #16a34a; }
.cx-src { display: flex; gap: 4px; flex-wrap: wrap; padding: 3px; border-radius: 12px; background: var(--surface-3); }
.cx-src button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; padding: 6px 10px; border-radius: 9px; font: 700 12px var(--font); color: var(--muted); cursor: pointer; }
.cx-src button svg { width: 13px; height: 13px; } .cx-src button.on { background: var(--surface); color: var(--text); box-shadow: 0 2px 6px rgba(20,16,60,.12), inset 0 -2px 0 var(--sc); }
.cx-sbody { min-height: 90px; } .cx-sbody input, .cx-sbody select { width: 100%; }
.cx-chosen { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1px dashed var(--border-strong); }
.cx-chosen > svg { width: 18px; height: 18px; color: var(--sc); } .cx-chosen b { display: block; } .cx-chosen small { color: var(--muted); font-size: 12px; }
.cx-path { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-swap { align-self: center; width: 42px; height: 42px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; display: grid; place-items: center; color: var(--accent); }
.cx-swap:hover { border-color: var(--accent); transform: rotate(180deg); transition: transform .3s; } .cx-swap svg { width: 18px; height: 18px; }
.cx-go { display: flex; justify-content: center; }
.cx-ta { width: 100%; min-height: 190px; font: 12.5px/1.5 var(--mono); resize: vertical; }
.xp-rec.on { background: var(--accent-soft); }
.xp-seg.sm button { padding: 5px 10px; font-size: 12px; }
/* summary */
.cx-sum { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--border); }
.cx-vs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .cx-vs b { font-size: 14px; } .cx-arrow svg { width: 16px; height: 16px; color: var(--faint); margin: 0 6px; }
.cx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } @media (max-width: 900px) { .cx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cx-tile { --tc: #16a34a; position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 14px; border-radius: 16px; cursor: pointer; font: inherit; text-align: left;
  border: 1.5px solid color-mix(in srgb, var(--tc) 45%, transparent); background: color-mix(in srgb, var(--tc) 10%, var(--surface)); color: var(--text); transition: transform .15s; }
.cx-tile:hover { transform: translateY(-2px); } .cx-tile.t-bad { --tc: #dc2626; } .cx-tile.t-warn { --tc: #ea580c; } .cx-tile.t-info { --tc: #2563eb; }
.cx-tile b { font: 800 28px var(--font-head, var(--font)); color: var(--tc); line-height: 1.1; } .cx-tile span { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.cx-tile i { position: absolute; right: 12px; top: 10px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 800 15px var(--font); font-style: normal; color: #fff; background: var(--tc); }
.cx-meter, .cx-mini { display: flex; height: 10px; border-radius: 999px; overflow: hidden; gap: 2px; } .cx-mini { width: 90px; height: 8px; }
.cx-meter i, .cx-mini i { display: block; } .cx-meter .ok, .cx-mini .ok { background: #22c55e; } .cx-meter .bad, .cx-mini .bad { background: #ef4444; } .cx-meter .warn { background: #f97316; } .cx-meter .info { background: #3b82f6; }
/* file list + viewer */
.cx-split { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; } @media (max-width: 1000px) { .cx-split { grid-template-columns: minmax(0, 1fr); } }
.cx-left { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 190px; } .cx-left .dx-search { width: 100%; }
.cx-files { display: flex; flex-direction: column; gap: 3px; max-height: 62vh; overflow: auto; padding: 6px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); }
.cx-file { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.cx-file:hover { background: var(--surface-2); } .cx-file.on { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cx-fic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font: 800 12px var(--font); color: #fff; flex: none; }
.cx-fic.t-ok { background: #22c55e; } .cx-fic.t-bad { background: #ef4444; } .cx-fic.t-warn { background: #f97316; } .cx-fic.t-info { background: #3b82f6; }
.cx-fname { display: flex; flex-direction: column; min-width: 0; flex: 1; } .cx-fname small { font: 10px var(--mono); color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cx-fname b { font: 600 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cx-file.s-same .cx-fname b { color: var(--muted); font-weight: 500; }
.cx-fn { display: flex; gap: 4px; font: 700 11px var(--mono); } .cx-fn .p { color: #16a34a; font-style: normal; } .cx-fn .m { color: #dc2626; font-style: normal; }
.cx-view { min-width: 0; padding: 14px; border-radius: 18px; background: var(--surface); border: 1.5px solid var(--border); }
.cx-fhead { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .cx-fhead b { font-size: 14px; }
.cx-pill { font: 700 11px var(--font); padding: 3px 9px; border-radius: 999px; } .cx-pill.ok { background: var(--pass-bg); color: var(--pass); } .cx-pill.bad { background: var(--fail-bg); color: var(--fail); }
.cx-pill.warn { background: #ffedd5; color: #c2410c; } .cx-pill.info { background: #dbeafe; color: #1d4ed8; }
[data-theme="dark"] .cx-pill.warn { background: #3a1d0c; color: #fdba74; } [data-theme="dark"] .cx-pill.info { background: #13244a; color: #93c5fd; }
.cx-banner { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; } .cx-bsg { font: 800 18px var(--font); font-style: normal; }
.cx-banner.warn { background: #ffedd5; color: #9a3412; } .cx-banner.info { background: #dbeafe; color: #1e3a8a; }
[data-theme="dark"] .cx-banner.warn { background: #3a1d0c; color: #fed7aa; } [data-theme="dark"] .cx-banner.info { background: #13244a; color: #bfdbfe; }
.cx-ctrl { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .cx-blkn { font: 700 12px var(--font); color: var(--muted); }
.cx-ctrl .row > .btn:first-child svg { transform: rotate(180deg); }
.cx-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; font: 700 12.5px var(--font); } .cx-cols > span { display: flex; align-items: center; padding: 6px 4px; }
/* the diff itself */
.cx-diff { border-radius: 12px; border: 1px solid var(--border-strong); overflow: auto; max-height: 70vh; background: var(--surface); font: 12.5px/1.55 var(--mono); }
.cx-body { min-width: 100%; width: max-content; }
.cx-diff.v-split .cx-body { width: 100%; }
.cx-row.s { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px minmax(0, 1fr); }
.cx-row.u { display: grid; grid-template-columns: 48px 48px minmax(0, 1fr); }
.cx-ln { text-align: right; padding: 0 8px; color: var(--faint); user-select: none; border-right: 1px solid var(--border); font-size: 11.5px; }
.cx-tx { padding: 0 10px; white-space: pre-wrap; word-break: break-word; min-width: 0; } .cx-row.s .cx-tx:nth-child(2) { border-right: 1px solid var(--border-strong); }
.cx-sg { display: inline-block; width: 14px; font-style: normal; font-weight: 800; color: var(--faint); user-select: none; }
.cx-tx .wd { border-radius: 3px; padding: 0 1px; }
/* colours: matching = green, not matching = red (default) */
.cx-diff.c-match .same { background: color-mix(in srgb, #22c55e 9%, var(--surface)); } .cx-diff.c-match .cx-ln.same { background: color-mix(in srgb, #22c55e 16%, var(--surface)); color: #15803d; }
.cx-diff.c-match .same .cx-sg { color: #16a34a; }
.cx-diff.c-match .del, .cx-diff.c-match .add { background: color-mix(in srgb, #ef4444 13%, var(--surface)); } .cx-diff.c-match .cx-ln.del, .cx-diff.c-match .cx-ln.add { background: color-mix(in srgb, #ef4444 22%, var(--surface)); color: #b91c1c; }
.cx-diff.c-match .del .cx-sg, .cx-diff.c-match .add .cx-sg { color: #dc2626; } .cx-diff.c-match .wd { background: color-mix(in srgb, #ef4444 38%, transparent); }
/* colours: GitHub (removed red, added green) */
.cx-diff.c-github .del { background: color-mix(in srgb, #ef4444 12%, var(--surface)); } .cx-diff.c-github .cx-ln.del { background: color-mix(in srgb, #ef4444 20%, var(--surface)); }
.cx-diff.c-github .add { background: color-mix(in srgb, #22c55e 13%, var(--surface)); } .cx-diff.c-github .cx-ln.add { background: color-mix(in srgb, #22c55e 22%, var(--surface)); }
.cx-diff.c-github .del .wd { background: color-mix(in srgb, #ef4444 40%, transparent); } .cx-diff.c-github .add .wd { background: color-mix(in srgb, #22c55e 45%, transparent); }
.cx-diff.c-github .del .cx-sg { color: #dc2626; } .cx-diff.c-github .add .cx-sg { color: #16a34a; }
/* a line missing on one side */
.cx-tx.miss, .cx-ln.miss { background: repeating-linear-gradient(135deg, var(--surface-3) 0 6px, var(--surface-2) 6px 12px); }
/* the bar above each block of differences, and the folded matching lines */
.cx-blk { display: flex; align-items: center; gap: 8px; padding: 4px 10px; font: 600 12px var(--font); color: var(--text-2); background: var(--surface-3); border-top: 1px solid var(--border-strong); border-bottom: 1px solid var(--border); position: sticky; left: 0; }
.cx-blk.del { box-shadow: inset 4px 0 0 #f97316; } .cx-blk.add { box-shadow: inset 4px 0 0 #3b82f6; } .cx-blk.chg { box-shadow: inset 4px 0 0 #ef4444; }
.cx-blk.flash { animation: cxflash .9s ease; } @keyframes cxflash { 0%, 60% { background: #fde68a; } 100% { background: var(--surface-3); } }
.cx-blk-n { font: 800 11px var(--mono); padding: 1px 7px; border-radius: 6px; background: var(--surface); }
.cx-miss { font: 700 11px var(--font); color: var(--faint); padding: 0 6px; }
.cx-fold { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 4px; border: 0; border-top: 1px dashed var(--border-strong); border-bottom: 1px dashed var(--border-strong);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface)); color: var(--accent-text); font: 700 12px var(--font); cursor: pointer; }
.cx-fold svg { width: 13px; height: 13px; } .cx-fold:hover { background: var(--accent-soft); }
.cx-diff .cx-ln, .cx-diff .cx-tx { color: var(--text); } .cx-diff .cx-ln { color: var(--faint); }
.cx-diff.c-github .same { background: var(--surface); } .cx-diff.c-github .cx-ln.same { background: var(--surface-2); color: var(--faint); }
.cx-row.same, .cx-row.chg { background: none; }

/* ================================================================ TraceProof accounts: sign-in screens (au-*) and Users & sign-in (us-*) */
.auth-view .signin-main { align-items: center; }
.au-card { width: min(440px, 100%); }
.au-card h2 { margin: 0; font: 800 26px var(--font-head, var(--font)); letter-spacing: -.02em; }
.au-card .lead { margin: -6px 0 0; }
.au-step { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); font: 700 12px var(--font); }
.au-step svg { width: 13px; height: 13px; }
.au-go { width: 100%; justify-content: center; }
.au-pw { position: relative; display: flex; } .au-pw input { width: 100%; padding-right: 42px; }
.au-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border: 0; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; border-radius: 8px; }
.au-eye:hover { background: var(--surface-2); color: var(--text); } .au-eye svg { width: 16px; height: 16px; }
.au-lab { display: flex; justify-content: space-between; align-items: baseline; width: 100%; } .au-lab a { font-weight: 600; font-size: 12.5px; }
.au-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); cursor: pointer; }
.au-err { display: none; padding: 9px 12px; border-radius: 10px; background: var(--fail-bg); color: var(--fail); font-size: 13px; font-weight: 600; }
.au-err.on { display: block; }
.au-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--text-2); font-size: 13px; line-height: 1.45; }
.au-note > svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--accent); }
.au-who { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.au-who > svg { width: 16px; height: 16px; color: var(--accent); flex: none; }
.lc-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; color: var(--text-2); }
.lc-self { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.lc-kind { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 6px; margin-right: 6px; vertical-align: 1px; }
.lc-kind.admin { background: #ede9fe; color: #5b21b6; } .lc-kind.licence { background: #e0f2fe; color: #075985; }
:root[data-theme="dark"] .lc-kind.admin { background: #2e1f5e; color: #c4b5fd; } :root[data-theme="dark"] .lc-kind.licence { background: #0c3550; color: #7dd3fc; }
.au-note.ok { background: var(--pass-bg); color: var(--pass); } .au-note.ok > svg { color: var(--pass); }
.au-note.bad { background: var(--fail-bg); color: var(--fail); } .au-note.bad > svg { color: var(--fail); }
.au-foot { text-align: center; margin: 4px 0 0; font-size: 13px; }
.au-sso { display: flex; flex-direction: column; gap: 8px; }
.au-ssob { display: flex; align-items: center; justify-content: center; gap: 10px; height: 44px; border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--surface);
  color: var(--text); font: 700 14px var(--font); text-decoration: none; transition: border-color .15s, background .15s; }
.au-ssob:hover { border-color: var(--accent); background: var(--surface-2); text-decoration: none; }
.au-ssoic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; font: 800 13px var(--font); color: #fff; background: #6c5ce7; flex: none; }
.au-ssoic.lg { width: 40px; height: 40px; border-radius: 12px; font-size: 18px; }
.p-google .au-ssoic { background: conic-gradient(#ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); }
.p-microsoft .au-ssoic { background: linear-gradient(135deg, #f25022 0 50%, #7fba00 0) ; } .p-oidc .au-ssoic { background: #1b1646; }
[data-theme="dark"] .p-oidc .au-ssoic { background: #a5b4fc; color: #121834; }
.au-strength { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.au-meter { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .au-meter i { display: block; height: 100%; border-radius: 999px; transition: width .2s, background .2s; background: #ef4444; }
.au-meter[data-l="2"] i { background: #f59e0b; } .au-meter[data-l="3"] i { background: #22c55e; } .au-meter[data-l="4"] i { background: #16a34a; }
.au-say { font-size: 11.5px; color: var(--muted); }
.au-code { font: 700 22px var(--mono) !important; letter-spacing: .25em; text-align: center; }
.au-big { width: 60px; height: 60px; border-radius: 20px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.au-big svg { width: 28px; height: 28px; } .au-big.ok { background: var(--pass-bg); color: var(--pass); }
.au-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-2); }
.au-qrrow { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.au-qr { width: 168px; height: 168px; padding: 8px; border-radius: 14px; background: #fff; border: 1.5px solid var(--border-strong); flex: none; }
.au-qr svg { width: 100%; height: 100%; display: block; }
.au-key { font: 700 13px var(--mono); padding: 6px 10px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); word-break: break-all; }
.au-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; padding: 12px; border-radius: 14px; background: var(--surface-2); border: 1.5px dashed var(--border-strong); }
.au-codes code { font: 700 14px var(--mono); text-align: center; padding: 4px; }
/* My account */
.au-me { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 20px 22px; border-radius: 22px; color: #fff;
  background: radial-gradient(420px 220px at 100% 0%, rgba(255,255,255,.18), transparent 70%), linear-gradient(120deg, #3b2fc9, #6c5ce7 60%, #8b7cf6); }
.au-me h3 { margin: 0; font: 800 21px var(--font-head, var(--font)); color: #fff; } .au-me .muted { color: rgba(255,255,255,.8); }
.avatar.xl { width: 64px; height: 64px; font-size: 22px; background: rgba(255,255,255,.2); color: #fff; border: 2px solid rgba(255,255,255,.5); }
.au-me .row { margin-top: 8px; } .au-me .xp-pill { background: rgba(255,255,255,.18); color: #fff; }
.au-mefacts { display: flex; gap: 8px; flex-wrap: wrap; } .au-mefacts span { display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.au-mefacts small { font-size: 11px; color: rgba(255,255,255,.8); } .au-mefacts b { font-size: 13px; }
.au-role { font: 700 11px var(--font); padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: var(--surface-3); color: var(--text-2); }
.au-role.r-owner { background: #fde68a; color: #92400e; } .au-role.r-admin { background: #ddd6fe; color: #5b21b6; } .au-role.r-member { background: #e0f2fe; color: #075985; } .au-role.r-off { background: var(--fail-bg); color: var(--fail); }
[data-theme="dark"] .au-role.r-owner { background: #3a2a07; color: #fcd34d; } [data-theme="dark"] .au-role.r-admin { background: #2a1f52; color: #c4b5fd; } [data-theme="dark"] .au-role.r-member { background: #0c2a3d; color: #7dd3fc; }
.au-me .au-role { background: #fff; }
.au-mfaon { display: flex; align-items: center; gap: 14px; }
.au-sessions { display: flex; flex-direction: column; gap: 6px; }
.au-sess { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .au-sess.this { box-shadow: inset 3px 0 0 #22c55e; }
.au-sess b { display: block; font-size: 13.5px; } .au-sic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; } .au-sic svg { width: 16px; height: 16px; }
/* Users & sign-in */
.us-off { display: flex; gap: 18px; align-items: flex-start; padding: 22px; border-radius: 22px; background: var(--surface); border: 1.5px solid var(--line-dark, var(--border)); }
.us-off h3 { margin: 0 0 6px; font: 800 20px var(--font-head, var(--font)); } .us-off p { margin: 0 0 12px; color: var(--text-2); max-width: 720px; }
.us-off-ic { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, #6c5ce7, #a78bfa); flex: none; } .us-off-ic svg { width: 26px; height: 26px; }
.us-list { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; } .us-list li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; }
.us-list svg { width: 15px; height: 15px; color: #16a34a; flex: none; margin-top: 2px; }
.us-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px; border-radius: 14px; background: var(--surface-3); align-self: flex-start; margin-bottom: 14px; }
.us-tab { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border: 0; border-radius: 10px; background: none; cursor: pointer; font: 700 13px var(--font); color: var(--muted); }
.us-tab svg { width: 14px; height: 14px; } .us-tab:hover { color: var(--text); } .us-tab.on { background: var(--surface); color: var(--accent-text); box-shadow: 0 3px 10px -4px rgba(20,16,60,.25); }
.us-bars { display: flex; align-items: flex-end; gap: 6px; height: 140px; padding: 6px 0; }
.us-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.us-bar i { display: block; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #8b7cf6, #5b4ef0); } .us-bar small { font-size: 10px; color: var(--faint); }
.us-ring { display: flex; align-items: center; gap: 14px; }
.us-ring .dx-ring-c { background: radial-gradient(closest-side, var(--surface) 74%, transparent 76% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--surface-3) 0); }
.us-ring .dx-ring-c b { color: var(--text); }
.us-roles { display: flex; gap: 6px; flex-wrap: wrap; }
.us-recent { display: flex; flex-direction: column; gap: 4px; } .us-rrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; } .us-rrow b { display: block; font-size: 13.5px; }
.us-bar-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.us-rolekey { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .us-rolekey > span { display: inline-flex; gap: 6px; align-items: center; }
.us-users { display: flex; flex-direction: column; gap: 6px; }
.us-user { display: grid; grid-template-columns: auto minmax(180px, 1.4fr) minmax(0, 1fr) 90px 120px auto; gap: 12px; align-items: center; padding: 10px 14px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--border); }
@media (max-width: 1100px) { .us-user { grid-template-columns: auto 1fr; } .us-user > :nth-child(n+3) { grid-column: 2; } }
.us-user.s-pending { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 6%, var(--surface)); } .us-user.s-disabled { opacity: .65; }
.us-who b { display: flex; align-items: center; gap: 6px; font-size: 14px; } .us-who small { color: var(--muted); font-size: 12px; }
.us-you { font: 700 10px var(--font); padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; }
.us-tags { display: flex; gap: 4px; flex-wrap: wrap; } .us-seen { display: flex; flex-direction: column; font-size: 12.5px; } .us-seen small { font-size: 10.5px; }
.us-rolesel { min-width: 110px; } .us-acts { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }
.avatar.off { background: var(--surface-3); color: var(--muted); } .avatar.off svg { width: 15px; height: 15px; }
.us-link { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); }
.us-link code { flex: 1; min-width: 0; font: 11.5px var(--mono); word-break: break-all; }
.us-policies { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.us-pol { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--border); cursor: pointer; position: relative; }
.us-pol input { position: absolute; right: 12px; top: 12px; } .us-pol b { font-size: 13.5px; padding-right: 22px; } .us-pol small { font-size: 12px; color: var(--muted); line-height: 1.4; }
.us-pol.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent); }
.us-nums { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; } .us-nums input { width: 100%; }
.us-ssos { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.us-sso { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; border: 1.5px solid var(--border); background: var(--surface); }
.us-sso.on { border-color: #22c55e; box-shadow: inset 0 4px 0 #22c55e; } .us-sso b { display: block; font-size: 15px; } .us-sso input { width: 100%; }
.us-switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font: 700 12px var(--font); color: var(--muted); }
.us-switch input { position: absolute; opacity: 0; pointer-events: none; }
.us-switch span { width: 38px; height: 22px; border-radius: 999px; background: var(--surface-3); border: 1.5px solid var(--border-strong); position: relative; transition: background .15s; }
.us-switch span::after { content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .15s; }
.us-switch input:checked + span { background: #22c55e; border-color: #16a34a; } .us-switch input:checked + span::after { left: 18px; }
.us-env { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 7px 10px; border-radius: 10px; background: var(--surface-2); }
.us-env svg { width: 14px; height: 14px; } .us-env.ok { background: var(--pass-bg); color: var(--pass); } .us-env code { font-size: 11px; }
.us-redir { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .us-redir code { flex: 1; min-width: 0; font: 11px var(--mono); padding: 5px 8px; border-radius: 8px; background: var(--surface-2); word-break: break-all; }
.us-how summary { cursor: pointer; font: 700 12.5px var(--font); color: var(--accent-text); } .us-how ol { margin: 8px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-2); display: flex; flex-direction: column; gap: 4px; }
.us-audit { display: flex; flex-direction: column; gap: 4px; }
.us-ev { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.us-ev b { display: block; font-size: 13.5px; } .us-ev small { color: var(--muted); font-size: 12px; }
.us-evic { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: none; } .us-evic svg { width: 15px; height: 15px; }
.us-evic.t-ok { background: var(--pass-bg); color: var(--pass); } .us-evic.t-bad { background: var(--fail-bg); color: var(--fail); } .us-evic.t-warn { background: var(--warn-bg); color: #b45309; } .us-evic.t-info { background: var(--accent-soft); color: var(--accent); }
.us-evwho { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; text-align: right; }
.us-store { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--surface-2); flex-wrap: wrap; }
.us-store b { display: block; font-size: 14px; } .us-store code { display: inline-block; margin: 3px 0; font: 11.5px var(--mono); padding: 2px 7px; border-radius: 6px; background: var(--surface); word-break: break-all; }
.us-store p { margin: 2px 0 0; font-size: 12.5px; color: var(--text-2); }
.us-stic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); flex: none; } .us-stic svg { width: 17px; height: 17px; }
.us-stsafe { flex: 0 1 320px; font-size: 12px; color: var(--pass); background: var(--pass-bg); padding: 8px 10px; border-radius: 10px; line-height: 1.4; }
.au-me .grow > .muted, .au-me .grow > div.muted { color: rgba(255,255,255,.85) !important; font-weight: 500; }
.us-switch { position: relative; } .us-switch input { left: 0; top: 0; width: 1px; height: 1px; }

/* ================================================================ Notebooks 2: layout, data panel, editor, result table, parameters, assertions (nb2-*, gr-*, se-*, ex-*, nt-*) */
.nb-page.nb2 { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 18px; align-items: start; max-width: none; }
.nb-page.nb2.norail { grid-template-columns: minmax(0, 1fr); }
.nb2-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.nb2-rail { position: sticky; top: 72px; display: flex; flex-direction: column; height: calc(100vh - 92px); border-radius: 18px; background: var(--surface); border: 1.5px solid var(--line-dark, var(--border)); overflow: hidden; }
.nb2-railtabs { display: flex; gap: 2px; padding: 6px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.nb2-railtabs button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 7px 6px; border: 0; border-radius: 9px; background: none; cursor: pointer; font: 700 12px var(--font); color: var(--muted); }
.nb2-railtabs button svg { width: 13px; height: 13px; } .nb2-railtabs button.on { background: var(--surface); color: var(--accent-text); box-shadow: 0 2px 8px -4px rgba(20,16,60,.25); }
.nb2-railtabs .nb2-railx { flex: 0 0 28px; font-size: 18px; line-height: 1; }
.nb2-railbody { flex: 1; overflow: auto; padding: 8px; }
.nb2-railopen { position: fixed; left: calc(var(--sidebar-w, 250px) + 8px); top: 140px; z-index: 20; width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; display: grid; place-items: center; color: var(--accent); box-shadow: 0 6px 16px -10px rgba(20,16,60,.4); }
.nb2-railopen svg { width: 16px; height: 16px; }
@media (max-width: 1100px) { .nb-page.nb2 { grid-template-columns: minmax(0, 1fr); } .nb2-rail { position: static; height: 360px; } }
/* outline */
.nb2-outline { display: flex; flex-direction: column; gap: 1px; }
.nb2-oi { display: flex; align-items: center; gap: 7px; padding: 5px 8px; border: 0; border-radius: 8px; background: none; cursor: pointer; font: 500 12.5px var(--font); color: var(--text-2); text-align: left; }
.nb2-oi span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nb2-oi:hover { background: var(--surface-2); } .nb2-oi.on { background: var(--accent-soft); color: var(--accent-text); }
.nb2-oi.l1 { font-weight: 800; font-size: 13.5px; color: var(--text); margin-top: 6px; } .nb2-oi.l2 { font-weight: 700; padding-left: 14px; } .nb2-oi.l3 { padding-left: 22px; } .nb2-oi.l4 { padding-left: 26px; font-family: var(--mono); font-size: 11.5px; }
.nb2-oi.k-assert { font-family: var(--font); }
.nb2-od { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); flex: none; } .nb2-od.s-done, .nb2-od.s-ok { background: #22c55e; } .nb2-od.s-error, .nb2-od.s-bad, .nb2-od.s-failed { background: #ef4444; } .nb2-od.s-running, .nb2-od.s-queued { background: #f59e0b; }
.nb2-ofoot { margin-top: 10px; padding: 8px; font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--border); }
/* context bar */
.nb2-ctx { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--border); }
.nb2-conn { display: inline-flex; align-items: center; gap: 6px; font: 700 12.5px var(--font); padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.nb2-conn .dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2); }
.nb2-cx { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } .nb2-cxl { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); font-weight: 700; } .nb2-cxl svg { width: 12px; height: 12px; }
.nb2-cx select { height: 28px; padding: 0 26px 0 8px; font-size: 12px; border-radius: 8px; max-width: 170px; } .nb2-cx b { font: 700 12px var(--mono); }
.nb2-mode { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; border: 1.5px solid color-mix(in srgb, #16a34a 45%, transparent); background: var(--pass-bg); color: var(--pass); font: 700 12px var(--font); cursor: pointer; }
.nb2-mode svg { width: 13px; height: 13px; } .nb2-mode.on { border-color: color-mix(in srgb, #ea580c 55%, transparent); background: #ffedd5; color: #c2410c; }
[data-theme="dark"] .nb2-mode.on { background: #3a1d0c; color: #fdba74; }
/* parameters */
.nb2-params { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: linear-gradient(120deg, color-mix(in srgb, #0ea5e9 8%, var(--surface)), var(--surface)); border: 1.5px solid color-mix(in srgb, #0ea5e9 30%, var(--border)); }
.nb2-params.empty { padding: 0; background: none; border: 0; }
.nb2-plab { display: inline-flex; align-items: center; gap: 5px; font: 800 11px var(--font); letter-spacing: .08em; text-transform: uppercase; color: #0369a1; align-self: center; } .nb2-plab svg { width: 13px; height: 13px; }
[data-theme="dark"] .nb2-plab { color: #7dd3fc; }
.nb2-param { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 150px; }
.nb2-param label { display: flex; align-items: baseline; gap: 6px; font: 700 12px var(--font); } .nb2-param label code { font-size: 10.5px; color: var(--muted); background: none; padding: 0; }
.nb2-param input, .nb2-param select { height: 34px; }
.nb2-pedit { position: absolute; right: 0; top: -2px; border: 0; background: none; color: var(--faint); cursor: pointer; padding: 2px; } .nb2-pedit svg { width: 12px; height: 12px; } .nb2-pedit:hover { color: var(--accent); }
.nb2-multi { display: flex; gap: 8px; flex-wrap: wrap; padding: 6px 8px; border-radius: 9px; border: 1.5px solid var(--border); background: var(--surface); font-size: 12.5px; } .nb2-multi label { font-weight: 500; }
.nb2-auto { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); margin-left: auto; align-self: center; }
/* pass / fail summary */
.nb2-sum { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); }
.nb2-sum b { font: 800 15px var(--font-head, var(--font)); }
.nb2-sumic { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none; background: #94a3b8; } .nb2-sumic svg { width: 20px; height: 20px; }
.nb2-sumic.t-ok { background: #22c55e; } .nb2-sumic.t-bad { background: #ef4444; } .nb2-sumic.t-warn { background: #f59e0b; }
.nb2-sumbar { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; margin: 6px 0 4px; max-width: 520px; }
.nb2-sumbar .ok { background: #22c55e; } .nb2-sumbar .bad { background: #ef4444; } .nb2-sumbar .idle { background: var(--surface-3); }
/* pills, comments button, view toggle */
.nb2-pill { display: inline-flex; align-items: center; gap: 4px; font: 700 11px var(--font); padding: 2px 9px; border-radius: 999px; background: var(--surface-3); color: var(--text-2); }
.nb2-pill svg { width: 11px; height: 11px; } .nb2-pill.priv { background: #fef3c7; color: #92400e; } [data-theme="dark"] .nb2-pill.priv { background: #3a2a07; color: #fcd34d; }
.nb2-cmt { display: inline-flex; align-items: center; gap: 3px; border: 0; background: none; color: var(--faint); cursor: pointer; font: 700 11px var(--font); padding: 4px 6px; border-radius: 8px; }
.nb2-cmt svg { width: 14px; height: 14px; } .nb2-cmt:hover { background: var(--surface-2); color: var(--accent); } .nb2-cmt.has { color: #d97706; background: #fef3c7; } [data-theme="dark"] .nb2-cmt.has { background: #3a2a07; color: #fcd34d; }
.nb2-hascmt { color: #d97706 !important; }
.nb2-viewtg { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface); cursor: pointer; font: 700 13px var(--font); color: var(--text-2); }
.nb2-viewtg svg { width: 15px; height: 15px; } .nb2-viewtg.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.nb2-cardrun { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 8px; overflow: hidden; font-size: 12px; font-weight: 700; background: var(--fail-bg); color: var(--fail); }
.nb2-cardrun i { position: absolute; inset: 0 auto 0 0; background: color-mix(in srgb, #22c55e 22%, transparent); } .nb2-cardrun span { position: relative; } .nb2-cardrun.ok { background: var(--pass-bg); color: var(--pass); }
.nb-kind.k-param { background: #e0f2fe; color: #075985; font-family: var(--mono); } .nb-kind.k-cmt { background: #fef3c7; color: #92400e; } .nb-kind.k-assert { background: #dcfce7; color: #166534; }
/* SQL editor */
.se { position: relative; border-radius: 12px; border: 1.5px solid var(--border-strong); background: var(--surface-2); }
.se:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.se-hl, .se-ta { margin: 0; padding: 12px 14px; font: 13px/1.6 var(--mono); tab-size: 2; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: anywhere; letter-spacing: 0; }
.se-hl { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--text); border: 0; background: none; }
.se-ta { position: relative; display: block; width: 100%; min-height: 66px; resize: none; overflow: hidden; border: 0 !important; outline: 0; background: transparent !important; color: transparent; caret-color: var(--text); box-shadow: none !important; }
.se-ta::placeholder { color: var(--faint); } .se-ta::selection { background: color-mix(in srgb, var(--accent) 28%, transparent); color: transparent; }
.se-k { color: #7c3aed; font-weight: 700; } .se-f { color: #0369a1; } .se-f2 { color: #0e7490; } .se-s { color: #15803d; } .se-q { color: #b45309; } .se-n { color: #c2410c; } .se-c { color: #8a88a6; font-style: italic; }
.se-r { color: #db2777; background: color-mix(in srgb, #db2777 12%, transparent); border-radius: 4px; } .se-p { color: #0d9488; background: color-mix(in srgb, #0d9488 14%, transparent); border-radius: 4px; }
[data-theme="dark"] .se-k { color: #c4b5fd; } [data-theme="dark"] .se-f { color: #7dd3fc; } [data-theme="dark"] .se-f2 { color: #67e8f9; } [data-theme="dark"] .se-s { color: #86efac; }
[data-theme="dark"] .se-q { color: #fcd34d; } [data-theme="dark"] .se-n { color: #fdba74; } [data-theme="dark"] .se-r { color: #f9a8d4; } [data-theme="dark"] .se-p { color: #5eead4; }
.se-pop { position: absolute; z-index: 40; width: 300px; max-height: 260px; overflow: auto; padding: 4px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--border-strong); box-shadow: 0 16px 34px -12px rgba(20,16,60,.45); }
.se-it { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 8px; cursor: pointer; font-size: 12.5px; }
.se-it b { font: 600 12.5px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .se-it small { margin-left: auto; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.se-it.on, .se-it:hover { background: var(--accent-soft); }
.se-ik { width: 22px; height: 20px; border-radius: 6px; display: grid; place-items: center; font: 800 10px var(--font); background: var(--surface-3); color: var(--text-2); flex: none; }
.se-it.k-tb .se-ik, .se-it.k-vw .se-ik { background: #dcfce7; color: #166534; } .se-it.k-col .se-ik { background: #e0f2fe; color: #075985; } .se-it.k-kw .se-ik { background: #ede9fe; color: #6d28d9; }
.se-it.k-fn .se-ik { background: #cffafe; color: #0e7490; } .se-it.k-cell .se-ik { background: #fce7f3; color: #be185d; } .se-it.k-param .se-ik { background: #ccfbf1; color: #0f766e; } .se-it.k-db .se-ik, .se-it.k-sc .se-ik { background: #fef3c7; color: #92400e; }
.nb2-sqlbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.nb2-limit { height: 28px; padding: 0 26px 0 8px; font-size: 12px; border-radius: 8px; width: auto; }
.nb2-running { display: flex; align-items: center; gap: 8px; padding: 14px; color: var(--muted); font-size: 13px; }
/* result table */
.gr { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gr-tools { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gr-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--surface-3); }
.gr-seg button { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; padding: 4px 10px; border-radius: 7px; font: 700 12px var(--font); color: var(--muted); cursor: pointer; } .gr-seg button svg { width: 12px; height: 12px; }
.gr-seg button.on { background: var(--surface); color: var(--accent-text); box-shadow: 0 1px 4px rgba(20,16,60,.15); }
.gr-search { height: 28px !important; width: 190px; font-size: 12px !important; border-radius: 999px !important; }
.gr-meta { font-size: 12px; color: var(--muted); } .gr-meta b { color: var(--text); }
.gr-chips { display: flex; gap: 4px; flex-wrap: wrap; } .gr-chip { display: inline-flex; align-items: center; gap: 4px; font: 600 11px var(--font); padding: 2px 4px 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.gr-chip button { border: 0; background: none; cursor: pointer; color: inherit; font-weight: 800; padding: 0 4px; }
.gr-scroll { overflow: auto; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); }
.gr-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; width: max-content; min-width: 100%; }
.gr-table th { position: sticky; top: 0; z-index: 1; background: var(--surface-2); border-bottom: 1.5px solid var(--border-strong); text-align: left; padding: 0; font-weight: 700; white-space: nowrap; }
.gr-thin { display: flex; align-items: center; gap: 4px; padding: 6px 4px 6px 8px; }
.gr-sort { border: 0; background: none; cursor: pointer; font: 700 12.5px var(--font); color: var(--text); padding: 0; display: inline-flex; gap: 4px; } .gr-sort i { font-style: normal; color: var(--accent); }
.gr-colmenu { border: 0; background: none; cursor: pointer; color: var(--faint); padding: 0 4px; font-weight: 800; border-radius: 4px; opacity: .3; } .gr-th:hover .gr-colmenu, .gr-th.filtered .gr-colmenu { opacity: 1; } .gr-colmenu:hover { background: var(--surface-3); color: var(--text); }
.gr-th.sorted { background: color-mix(in srgb, var(--accent) 9%, var(--surface-2)); } .gr-th.filtered .gr-sort { color: var(--accent-text); }
.gr-ty { font: 800 9.5px var(--mono); padding: 1px 4px; border-radius: 4px; background: var(--surface-3); color: var(--muted); } .gr-ty.t-num { background: #e0f2fe; color: #075985; } .gr-ty.t-date { background: #fef3c7; color: #92400e; } .gr-ty.t-bool { background: #fce7f3; color: #9d174d; }
.gr-table td { padding: 5px 10px; border-bottom: 1px solid var(--border); max-width: 360px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-table td.num, .gr-table th.num .gr-thin { text-align: right; font-variant-numeric: tabular-nums; justify-content: flex-end; }
.gr-table tbody tr:hover td { background: var(--surface-2); }
.gr-rn { color: var(--faint); font: 11px var(--mono); text-align: right; width: 1%; padding: 5px 8px !important; background: var(--surface-2); position: sticky; left: 0; }
.gr-null { color: var(--faint); font-style: italic; font-size: 11.5px; } .gr-bool { font: 700 11.5px var(--mono); } .gr-bool.t { color: #16a34a; } .gr-bool.f { color: #dc2626; }
.gr-none { padding: 18px; text-align: center; color: var(--muted); border-radius: 10px; border: 1px dashed var(--border-strong); }
.gr-foot { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); } .gr-pages { display: flex; align-items: center; gap: 4px; } .gr-pages .btn { min-width: 30px; }
.gr-pop { position: fixed; z-index: 90; display: flex; flex-direction: column; gap: 8px; padding: 12px; width: 300px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--border-strong); box-shadow: 0 18px 40px -14px rgba(20,16,60,.45); }
.gr-pop select, .gr-pop input { height: 32px; } .gr-pop select { width: 110px; }
.gr-prof { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.gr-pc { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-radius: 14px; background: var(--surface); border: 1.5px solid var(--border); }
.gr-pch { display: flex; align-items: center; gap: 6px; } .gr-pch b { font: 700 13px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gr-bar3 { display: flex; height: 6px; border-radius: 999px; overflow: hidden; gap: 2px; } .gr-bar3 .ok { background: #22c55e; } .gr-bar3 .null { background: #f59e0b; }
.gr-kv { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .gr-kv span { display: flex; flex-direction: column; } .gr-kv small { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.gr-kv b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gr-kv b.warn { color: #d97706; }
.gr-hist { display: flex; align-items: flex-end; gap: 2px; height: 40px; } .gr-hist i { flex: 1; background: linear-gradient(180deg, #8b7cf6, #6c5ce7); border-radius: 3px 3px 0 0; min-height: 3px; }
.gr-top { display: flex; flex-direction: column; gap: 3px; } .gr-tv { display: grid; grid-template-columns: minmax(0, 1fr) 60px 36px; gap: 6px; align-items: center; font-size: 11.5px; }
.gr-tv span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); } .gr-tv i { height: 6px; border-radius: 999px; background: #0ea5e9; } .gr-tv b { text-align: right; }
.gr-note { font-size: 11.5px; color: var(--muted); margin-top: 6px; }
/* data panel */
.ex { display: flex; flex-direction: column; gap: 6px; } .ex-top { display: flex; gap: 4px; } .ex-search { height: 30px !important; font-size: 12.5px !important; border-radius: 999px !important; flex: 1; }
.ex-tree { display: flex; flex-direction: column; } .ex-kids { padding-left: 12px; border-left: 1px dashed var(--border); margin-left: 9px; }
.ex-row { display: flex; align-items: center; gap: 6px; width: 100%; padding: 4px 6px; border: 0; border-radius: 7px; background: none; cursor: pointer; font: 600 12.5px var(--font); color: var(--text); text-align: left; }
.ex-row:hover { background: var(--surface-2); } .ex-row.cur > .ex-lab { color: var(--accent-text); }
.ex-tw { width: 10px; color: var(--muted); font-size: 10px; } .ex-ic { width: 18px; text-align: center; font-size: 12px; } .ex-ic.k-db { color: #d97706; } .ex-ic.k-sc { color: #6c5ce7; } .ex-ic.k-tb { color: #16a34a; } .ex-ic.k-vw { color: #0ea5e9; }
.ex-lab { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ex-badge { font: 700 9.5px var(--font); padding: 1px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); }
.ex-row.tb { padding: 0; gap: 0; } .ex-tbname { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; padding: 4px 6px; border: 0; background: none; cursor: pointer; font: 500 12.5px var(--mono); color: var(--text); text-align: left; border-radius: 7px; }
.ex-row.tb:hover { background: var(--surface-2); } .ex-rows { font: 600 10.5px var(--font); color: var(--muted); }
.ex-prev, .ex-more { opacity: 0; } .ex-row.tb:hover .ex-prev, .ex-row.tb:hover .ex-more { opacity: 1; }
.ex-cols { display: flex; flex-direction: column; padding: 2px 0 4px 26px; }
.ex-col { display: flex; align-items: center; gap: 6px; padding: 2px 6px; border: 0; background: none; cursor: pointer; font: 12px var(--mono); color: var(--text-2); text-align: left; border-radius: 6px; }
.ex-col:hover { background: var(--accent-soft); } .ex-col small { margin-left: auto; color: var(--faint); font-size: 10.5px; }
.ex-none { padding: 8px; font-size: 12px; color: var(--muted); }
.ex-mhead { padding: 6px 10px 4px; display: flex; flex-direction: column; } .ex-mhead b { font-size: 13px; } .ex-mhead small { font-size: 11px; color: var(--muted); }
.ex-mnote { padding: 6px 10px 8px; font-size: 12px; color: var(--muted); max-width: 260px; }
.ex-sec { font: 800 10.5px var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 10px 6px 4px; }
.ex-hist { display: flex; flex-direction: column; gap: 4px; }
.ex-q { display: flex; flex-direction: column; gap: 2px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface); cursor: pointer; text-align: left; font: inherit; color: var(--text); }
.ex-q:hover { border-color: var(--accent); } .ex-q code { font: 11.5px var(--mono); color: var(--text-2); background: none; padding: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ex-q small { font-size: 10.5px; color: var(--muted); } .ex-q.bad { border-left: 3px solid #ef4444; }
/* notes */
.nt h1 { font: 800 24px var(--font-head, var(--font)); letter-spacing: -.02em; margin: 4px 0 8px; } .nt h2 { font: 800 19px var(--font-head, var(--font)); margin: 10px 0 6px; } .nt h3 { font: 700 15.5px var(--font); margin: 8px 0 4px; }
.nt p { margin: 4px 0; line-height: 1.6; } .nt ul, .nt ol { margin: 4px 0; padding-left: 22px; } .nt li { margin: 2px 0; line-height: 1.55; }
.nt .nt-task { list-style: none; margin-left: -20px; } .nt .nt-task input { margin-right: 6px; cursor: pointer; } .nt .nt-task.done span { text-decoration: line-through; color: var(--muted); }
.nt a { color: var(--accent-text); text-decoration: underline; } .nt code { font: 12px var(--mono); background: var(--surface-3); padding: 1px 5px; border-radius: 5px; }
.nt blockquote { margin: 6px 0; padding: 8px 12px; border-left: 4px solid var(--border-strong); background: var(--surface-2); border-radius: 0 10px 10px 0; color: var(--text-2); }
.nt hr { border: 0; border-top: 1.5px dashed var(--border-strong); margin: 12px 0; }
.nt-code { font: 12.5px var(--mono); background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; white-space: pre-wrap; margin: 6px 0; }
.nt-tw { overflow: auto; margin: 6px 0; } .nt-table { border-collapse: collapse; font-size: 13px; } .nt-table th, .nt-table td { border: 1px solid var(--border-strong); padding: 5px 10px; text-align: left; } .nt-table th { background: var(--surface-2); }
.nt-callout { margin: 8px 0; padding: 10px 14px; border-radius: 12px; border: 1.5px solid; display: flex; flex-direction: column; gap: 2px; }
.nt-callout > b { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.nt-callout.c-note { border-color: #93c5fd; background: #eff6ff; } .nt-callout.c-note > b { color: #1d4ed8; } .nt-callout.c-tip { border-color: #86efac; background: #f0fdf4; } .nt-callout.c-tip > b { color: #15803d; }
.nt-callout.c-warning, .nt-callout.c-caution { border-color: #fcd34d; background: #fffbeb; } .nt-callout.c-warning > b, .nt-callout.c-caution > b { color: #b45309; }
.nt-callout.c-important { border-color: #c4b5fd; background: #f5f3ff; } .nt-callout.c-important > b { color: #6d28d9; }
[data-theme="dark"] .nt-callout.c-note { background: #0f1f3d; border-color: #1e40af; } [data-theme="dark"] .nt-callout.c-tip { background: #0b2a1b; border-color: #166534; }
[data-theme="dark"] .nt-callout.c-warning, [data-theme="dark"] .nt-callout.c-caution { background: #2d2208; border-color: #92400e; } [data-theme="dark"] .nt-callout.c-important { background: #22183f; border-color: #5b21b6; }
[data-theme="dark"] .nt-callout.c-note > b { color: #93c5fd; } [data-theme="dark"] .nt-callout.c-tip > b { color: #86efac; } [data-theme="dark"] .nt-callout.c-warning > b { color: #fcd34d; } [data-theme="dark"] .nt-callout.c-important > b { color: #c4b5fd; }
.nt-tools { display: flex; gap: 2px; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: var(--surface-3); }
.nt-tb { min-width: 28px; height: 26px; padding: 0 6px; border: 0; border-radius: 7px; background: none; cursor: pointer; font: 700 12px var(--font); color: var(--text-2); display: inline-grid; place-items: center; }
.nt-tb:hover { background: var(--surface); color: var(--accent-text); } .nt-tb svg { width: 13px; height: 13px; } .nt-tb code { background: none; font-size: 11px; } .nt-sep { width: 1px; background: var(--border-strong); margin: 4px 3px; }
.nb2-noteedit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } @media (max-width: 1200px) { .nb2-noteedit { grid-template-columns: minmax(0, 1fr); } .nb2-preview { display: none; } }
.nb2-preview { padding: 10px 14px; border-radius: 12px; border: 1.5px dashed var(--border); max-height: 420px; overflow: auto; }
/* assertions */
.nb-cell.k-assert { border-left: 4px solid #16a34a; }
.nb2-alabel { flex: 1; min-width: 180px; height: 30px !important; font-weight: 600 !important; border-color: transparent !important; background: transparent !important; }
.nb2-alabel:hover, .nb2-alabel:focus { border-color: var(--border) !important; background: var(--surface) !important; }
.nb2-assert { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; } .nb2-assert .field { min-width: 150px; }
.nb2-anot { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed var(--border-strong); color: var(--muted); font-size: 13px; } .nb2-anot svg { width: 15px; height: 15px; }
.nb2-ares { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid; }
.nb2-ares.ok { background: var(--pass-bg); border-color: color-mix(in srgb, #22c55e 45%, transparent); } .nb2-ares.bad { background: var(--fail-bg); border-color: color-mix(in srgb, #ef4444 45%, transparent); }
.nb2-ares b { display: block; font-size: 14.5px; } .nb2-ares small { color: var(--text-2); font-family: var(--mono); font-size: 11.5px; }
.nb2-aic { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; color: #fff; flex: none; } .nb2-aic svg { width: 20px; height: 20px; } .ok > .nb2-aic { background: #22c55e; } .bad > .nb2-aic { background: #ef4444; }
.nb2-aexp { display: flex; gap: 8px; } .nb2-aexp span { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: var(--surface); min-width: 110px; }
.nb2-aexp small { font: 700 10px var(--font) !important; text-transform: uppercase; letter-spacing: .05em; color: var(--muted) !important; } .nb2-aexp b { font-size: 13px; }
/* changes */
.nb2-change { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 16px; border-radius: 14px; border: 1.5px solid #fdba74; background: #fff7ed; }
.nb2-change.d-high { border-color: #fca5a5; background: #fef2f2; } [data-theme="dark"] .nb2-change { background: #2d1a0c; border-color: #9a3412; } [data-theme="dark"] .nb2-change.d-high { background: #351414; border-color: #991b1b; }
.nb2-change b { display: block; font-size: 14px; } .nb2-change small { color: var(--text-2); font-size: 12.5px; }
.nb2-chic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: #ea580c; flex: none; } .nb2-chic svg { width: 18px; height: 18px; } .d-high .nb2-chic { background: #dc2626; } .nb2-chic.ok { background: #16a34a; }
.nb2-changed { display: flex; align-items: center; gap: 12px; margin-top: 8px; padding: 12px 16px; border-radius: 14px; background: var(--pass-bg); border: 1.5px solid color-mix(in srgb, #22c55e 40%, transparent); }
.nb2-changed b { display: block; } .nb2-changed small { font-size: 12px; color: var(--text-2); }
.nb2-rev { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #c2410c, #ea580c); }
.nb2-rev.d-high { background: linear-gradient(120deg, #991b1b, #dc2626); } .nb2-rev.d-low { background: linear-gradient(120deg, #15803d, #22c55e); }
.nb2-revk { font: 800 12px var(--mono); padding: 6px 10px; border-radius: 9px; background: rgba(255,255,255,.2); } .nb2-rev b { display: block; font: 800 16px var(--mono); } .nb2-rev small { color: rgba(255,255,255,.88); }
.nb2-revn { display: flex; flex-direction: column; align-items: flex-end; } .nb2-revn b { font: 800 26px var(--font-head, var(--font)); } .nb2-revn small { font-size: 11px; }
.nb2-revfacts { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--text-2); } .nb2-revfacts span { display: flex; align-items: center; gap: 6px; } .nb2-revfacts svg { width: 14px; height: 14px; color: var(--accent); }
.nb2-ack { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.nb2-set { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 14px; border: 1.5px solid var(--border); } .nb2-set b { font-size: 14.5px; } .nb2-set p { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.5; }
/* comments and versions */
.nb2-cmts { display: flex; flex-direction: column; gap: 8px; max-height: 50vh; overflow: auto; }
.nb2-cmt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); } .nb2-cmt.done { opacity: .6; }
.nb2-cmth { display: flex; align-items: baseline; gap: 8px; } .nb2-cmth small { color: var(--muted); font-size: 11.5px; } .nb2-cmt p { margin: 3px 0 0; font-size: 13.5px; white-space: pre-wrap; }
.nb2-cmtgo { border: 0; background: none; color: var(--accent-text); cursor: pointer; font: 600 11.5px var(--font); padding: 0; }
.nb2-versions { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 14px; min-height: 50vh; } @media (max-width: 900px) { .nb2-versions { grid-template-columns: minmax(0, 1fr); } }
.nb2-vlist { display: flex; flex-direction: column; gap: 4px; max-height: 62vh; overflow: auto; }
.nb2-v { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; border: 1.5px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; font: inherit; color: var(--text); text-align: left; }
.nb2-v b { font-size: 13px; } .nb2-v small { font-size: 11.5px; color: var(--muted); } .nb2-v.named { border-left: 4px solid #6c5ce7; } .nb2-v.on { border-color: var(--accent); background: var(--accent-soft); }
.nb2-vview { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* report mode */
.nb2.report .nb-hero input { pointer-events: none; } .nb2.report .nb2-ctx, .nb2.report .nb-add { display: none; }
.nb2-rc { padding: 6px 0; } .nb2-rc.k-sql, .nb2-rc.k-chart { padding: 14px 18px; border-radius: 16px; background: var(--surface); border: 1.5px solid var(--border); margin: 4px 0; }
.nb2-rch { display: flex; align-items: baseline; gap: 8px; } .nb2-rch b { font: 700 13px var(--mono); color: var(--accent-text); }
.nb2.report .nb-cells { gap: 8px; } .nb2.report .nb-note { padding: 4px 6px; cursor: default; }
@media print {
  .sidebar, .topbar, .nb2-rail, .nb2-railopen, .nb-hero-acts, .nb2-params .nb2-pedit, .nb2-auto, .gr-tools .btn, .gr-foot .gr-pages, .nb2-sum .btn, .toast, .guide { display: none !important; }
  .main, .shell { margin: 0 !important; padding: 0 !important; } .nb-page.nb2 { display: block; } .gr-scroll { max-height: none !important; overflow: visible; } .nb2-rc, .nb-cell { break-inside: avoid; }
  body { background: #fff !important; }
}
/* the typed text stays invisible over its coloured copy – also when a theme gives textareas a colour */
.se .se-ta { color: transparent !important; -webkit-text-fill-color: transparent; }
.se .se-ta::placeholder { -webkit-text-fill-color: var(--faint); }

/* ================================================================ Notebook, calm layout (nbx-*): a slim toolbar, cells as a document, tools on hover */
.nbx { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px; align-items: start; margin: -6px 0 0; }
.nbx.withpanel { grid-template-columns: 52px 280px minmax(0, 1fr); }
.nbx.report { grid-template-columns: minmax(0, 1fr); }
.nbx-doc { min-width: 0; max-width: 1180px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; }
/* icon strip + side panel */
.nbx-strip { position: sticky; top: 72px; display: flex; flex-direction: column; gap: 4px; padding: 6px 4px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); }
.nbx-sb { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 2px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--muted); }
.nbx-sb svg { width: 17px; height: 17px; } .nbx-sb small { font: 600 9.5px var(--font); } .nbx-sb:hover { background: var(--surface-2); color: var(--text); } .nbx-sb.on { background: var(--accent-soft); color: var(--accent-text); }
.nbx-panel { position: sticky; top: 72px; display: flex; flex-direction: column; height: calc(100vh - 92px); border-radius: 14px; background: var(--surface); border: 1px solid var(--border); overflow: hidden; }
.nbx-phead { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--border); } .nbx-phead b { font-size: 13px; }
.nbx-pbody { flex: 1; overflow: auto; padding: 8px; }
@media (max-width: 1100px) { .nbx, .nbx.withpanel { grid-template-columns: minmax(0, 1fr); } .nbx-strip { position: static; flex-direction: row; } .nbx-panel { position: static; height: 340px; } }
/* the toolbar */
.nbx-bar { position: sticky; top: 60px; z-index: 25; display: flex; flex-direction: column; gap: 6px; padding: 10px 4px 10px; margin-bottom: 6px; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); }
.nbx-r1, .nbx-r2 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.nbx-back { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); flex: none; } .nbx-back svg { width: 16px; height: 16px; transform: rotate(180deg); } .nbx-back:hover { background: var(--surface-2); color: var(--text); }
.nbx-tt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nbx-title { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 4px !important; height: 30px !important; font: 800 20px var(--font-head, var(--font)) !important; letter-spacing: -.02em; color: var(--text); border-radius: 6px !important; }
.nbx-about { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 4px !important; height: 20px !important; font-size: 12.5px !important; color: var(--muted); }
.nbx-title:hover, .nbx-about:hover, .nbx-title:focus, .nbx-about:focus { background: var(--surface) !important; }
.nbx-icon { display: inline-flex; align-items: center; gap: 5px; height: 32px; min-width: 32px; justify-content: center; padding: 0 8px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text-2); font: 600 12.5px var(--font); }
.nbx-icon svg { width: 15px; height: 15px; } .nbx-icon:hover { border-color: var(--accent); color: var(--accent-text); } .nbx-icon b { font-size: 11px; } .nbx-icon.has { color: #b45309; border-color: #fcd34d; }
.nbx-seg { display: inline-flex; padding: 2px; border-radius: 9px; background: var(--surface-3); }
.nbx-seg button { border: 0; background: none; padding: 5px 11px; border-radius: 7px; font: 600 12.5px var(--font); color: var(--muted); cursor: pointer; } .nbx-seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(20,16,60,.15); }
.nbx-sum { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 999px; border: 0; cursor: pointer; font: 700 12px var(--font); background: var(--surface-3); color: var(--text-2); }
.nbx-sum svg { width: 13px; height: 13px; } .nbx-sum.t-ok { background: var(--pass-bg); color: var(--pass); } .nbx-sum.t-bad { background: var(--fail-bg); color: var(--fail); } .nbx-sum.t-warn { background: var(--warn-bg); color: #b45309; }
.nbx-r2 { padding-left: 38px; font-size: 12px; color: var(--muted); }
.nbx-ctx { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nbx-conn { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--text-2); } .nbx-conn i { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; }
.nbx-cx { font: 600 12px var(--mono); color: var(--text-2); } .nbx-cx select { height: 24px; border: 0; background: transparent; font: 600 12px var(--mono); color: var(--text-2); padding: 0 18px 0 4px; border-radius: 6px; cursor: pointer; }
.nbx-cx select:hover { background: var(--surface-2); } .nbx-dot { color: var(--faint); margin: 0 -4px; }
.nbx-mode { display: inline-flex; align-items: center; gap: 4px; border: 0; background: none; cursor: pointer; font: 600 12px var(--font); color: var(--muted); padding: 2px 6px; border-radius: 6px; }
.nbx-mode svg { width: 12px; height: 12px; } .nbx-mode:hover { background: var(--surface-2); } .nbx-mode.on { color: #c2410c; background: #ffedd5; }
.nbx-metarow { display: flex; align-items: center; gap: 8px; } .nbx-id { font: 600 11px var(--mono); color: var(--faint); }
.nbx-metarow .nb-saved { font-size: 11.5px; } .nbx-tag { display: inline-flex; align-items: center; gap: 3px; } .nbx-tag svg { width: 11px; height: 11px; }
/* parameters: one quiet row */
.nbx .nb2-params { margin: 4px 0 6px 38px; padding: 8px 12px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); gap: 14px; }
.nbx .nb2-plab { color: var(--muted); font-size: 10.5px; } .nbx .nb2-param { min-width: 130px; } .nbx .nb2-param input, .nbx .nb2-param select { height: 30px; font-size: 13px; }
/* cells */
.nbx-cells { display: flex; flex-direction: column; padding-bottom: 80px; }
.nbx-cell { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 0; border-radius: 12px; }
.nbx-gut { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-top: 34px; }
.nbx-play { width: 26px; height: 26px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--muted); background: transparent; transition: background .12s, color .12s; }
.nbx-play svg { width: 13px; height: 13px; } .nbx-cell:hover .nbx-play, .nbx-cell.sel .nbx-play { background: var(--accent); color: #fff; } .nbx-play:hover { filter: brightness(1.1); }
.nbx-cell[data-state="running"] .nbx-play { animation: nbxp 1s ease-in-out infinite; } @keyframes nbxp { 50% { opacity: .4; } }
.nbx-count { font: 600 10.5px var(--mono); color: var(--faint); }
.nbx-main { min-width: 0; border-radius: 12px; padding: 4px 10px 10px; border: 1px solid transparent; transition: border-color .12s, background .12s; }
.nbx-cell:hover .nbx-main { border-color: var(--border); }
.nbx-cell.sel .nbx-main { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); background: color-mix(in srgb, var(--accent) 3%, transparent); box-shadow: inset 3px 0 0 var(--accent); }
.nbx-cell.drop-before { box-shadow: 0 -3px 0 var(--accent); } .nbx-cell.drop-after { box-shadow: 0 3px 0 var(--accent); } .nbx-cell.dragging { opacity: .4; }
.nbx-tools { display: flex; align-items: center; gap: 4px; height: 28px; opacity: 0; transition: opacity .12s; }
.nbx-cell:hover .nbx-tools, .nbx-cell.sel .nbx-tools, .nbx-cell[data-state="running"] .nbx-tools, .nbx-cell[data-state="done"] .nbx-tools, .nbx-cell[data-state="error"] .nbx-tools, .nbx-cell[data-state="failed"] .nbx-tools { opacity: 1; }
.nbx-cell.k-note .nbx-tools { position: absolute; right: 6px; top: 2px; left: 48px; z-index: 2; height: 26px; pointer-events: none; } .nbx-cell.k-note .nbx-tools > * { pointer-events: auto; }
.nbx-cell.k-note .nbx-tools .nbx-kind, .nbx-cell.k-note .nbx-tools .nbx-grip { opacity: 0; } .nbx-cell.k-note:hover .nbx-tools .nbx-grip { opacity: 1; }
.nbx-cell.k-note .nbx-gut { padding-top: 6px; } .nbx-cell.k-note .nbx-main { padding-top: 6px; }
.nbx-grip { cursor: grab; color: var(--faint); font-size: 11px; letter-spacing: -2px; padding: 0 4px; }
.nbx-kind { font: 700 10.5px var(--font); letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.nbx-name { width: 150px; height: 22px !important; padding: 0 6px !important; border: 1px solid transparent !important; background: none !important; box-shadow: none !important; font: 600 12px var(--mono) !important; color: var(--accent-text) !important; border-radius: 6px !important; }
.nbx-name:hover, .nbx-name:focus { border-color: var(--border) !important; background: var(--surface) !important; }
.nbx-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); } .nbx-meta .ok { color: #16a34a; } .nbx-meta .bad { color: #dc2626; }
.nbx-tb { display: inline-flex; align-items: center; gap: 3px; height: 24px; min-width: 24px; justify-content: center; padding: 0 4px; border: 0; border-radius: 6px; background: none; cursor: pointer; color: var(--muted); font: 700 11px var(--font); }
.nbx-tb svg { width: 14px; height: 14px; } .nbx-tb:hover { background: var(--surface-3); color: var(--text); } .nbx-tb.has { color: #b45309; }
.nbx-cell.k-note .nbx-tb.has { opacity: 1; }
.nbx-body { display: flex; flex-direction: column; gap: 6px; }
.nbx-folded { border: 0; background: var(--surface-2); border-radius: 8px; padding: 6px 10px; text-align: left; cursor: pointer; font: 12.5px var(--mono); color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* the SQL editor inside a cell: quieter */
.nbx .se { border: 1px solid var(--border); background: var(--surface-2); border-radius: 10px; }
.nbx .se:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, var(--border)); box-shadow: none; background: var(--surface); }
.nbx .se-hl, .nbx .se-ta { padding: 10px 12px; font-size: 13px; }
.nbx-ai { display: flex; flex-direction: column; gap: 6px; } .nbx-airow { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 10px; background: var(--accent-soft); }
.nbx-airow > svg { width: 15px; height: 15px; color: var(--accent); } .nbx-airow input { height: 30px; border: 0 !important; background: var(--surface) !important; }
/* notes: just text */
.nbx-note { cursor: text; padding: 2px 2px; min-height: 22px; }
.nbx-note.nt h1 { font-size: 22px; margin: 6px 0 4px; } .nbx-note.nt h2 { font-size: 17px; margin: 8px 0 2px; } .nbx-note.nt h3 { font-size: 14.5px; margin: 6px 0 2px; }
.nbx-note.nt p { font-size: 14px; color: var(--text-2); } .nbx-note.nt li { font-size: 14px; color: var(--text-2); }
.nbx-ph { color: var(--faint); font-style: italic; }
.nbx-editing .nt-tools { background: none; padding: 0; } .nbx-ta { min-height: 70px; font: 14px/1.6 var(--font) !important; }
.nbx-done { display: flex; align-items: center; justify-content: flex-end; gap: 10px; font-size: 11.5px; color: var(--faint); }
/* one-line controls (assertions, charts, checks) */
.nbx-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); padding: 4px 0; }
.nbx-line select, .nbx-in { height: 30px; font-size: 13px; padding: 0 8px; border-radius: 8px; width: auto; }
.nbx-line select { padding-right: 26px; }
.nbx-alabel { border: 0 !important; background: none !important; box-shadow: none !important; padding: 0 2px !important; height: 26px !important; font: 700 15px var(--font) !important; color: var(--text); }
.nbx-alabel:hover, .nbx-alabel:focus { background: var(--surface) !important; }
.nbx .nb-seg button { padding: 4px 10px; }
/* the place to add a cell: invisible until you point at it */
.nbx-add { position: relative; height: 18px; margin-left: 38px; display: flex; align-items: center; justify-content: center; }
.nbx-add::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed transparent; }
.nbx-addin { position: relative; display: flex; gap: 4px; opacity: 0; transition: opacity .12s; background: var(--bg); padding: 0 8px; }
.nbx-add:hover::before { border-color: var(--border-strong); } .nbx-add:hover .nbx-addin { opacity: 1; }
.nbx-add.last { height: auto; margin: 12px 0 0 38px; } .nbx-add.last .nbx-addin { opacity: 1; background: none; padding: 0; }
.nbx-addb { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer; font: 600 12px var(--font); color: var(--text-2); }
.nbx-addb svg { width: 12px; height: 12px; } .nbx-addb:hover { border-color: var(--accent); color: var(--accent-text); }
.nbx-add.last .nbx-addb { height: 32px; padding: 0 14px; font-size: 13px; }
/* results: no extra frames */
.nbx .nb-out:empty { display: none; } .nbx .gr { margin-top: 4px; }
/* comments drawer */
.nbx-drawer { position: fixed; top: 60px; right: 0; bottom: 0; z-index: 60; width: 380px; max-width: 100vw; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border-strong); box-shadow: -18px 0 40px -28px rgba(20,16,60,.45); }
.nbx-dh { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); } .nbx-dh b { font-size: 14.5px; }
.nbx-scope { border: 0; background: var(--accent-soft); color: var(--accent-text); border-radius: 999px; padding: 2px 10px; font: 600 11.5px var(--mono); cursor: pointer; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nbx-dl { flex: 1; overflow: auto; padding: 8px 14px; display: flex; flex-direction: column; gap: 12px; }
.nbx-cm { display: flex; flex-direction: column; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .nbx-cm.done { opacity: .6; }
.nbx-cmh { display: flex; align-items: center; gap: 6px; } .nbx-cmh b { font-size: 13px; } .nbx-cmh small { color: var(--muted); font-size: 11.5px; }
.nbx-cmh .nbx-tb { opacity: 0; } .nbx-cm:hover .nbx-tb { opacity: 1; }
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.nbx-cm p { margin: 0 0 0 30px; font-size: 13.5px; line-height: 1.5; white-space: pre-wrap; color: var(--text); }
.nbx-cmwhere { margin-left: 30px; align-self: flex-start; border: 0; background: var(--surface-2); border-radius: 6px; padding: 1px 8px; font: 11px var(--mono); color: var(--muted); cursor: pointer; }
.nbx-resolved summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.nbx-empty { color: var(--muted); font-size: 13px; padding: 20px 0; text-align: center; }
.nbx-dc { padding: 12px 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .nbx-dc textarea { width: 100%; font-size: 13.5px; }
/* report */
.nbx.report .nbx-r2 .nbx-ctx { display: none; } .nbx.report .nbx-doc { max-width: 980px; }
.nbx-rc { padding: 4px 0 10px; } .nbx-rc.k-sql, .nbx-rc.k-chart, .nbx-rc.k-assert, .nbx-rc.k-check { padding: 6px 0 14px; }
.nbx-rch { font: 700 12px var(--mono); color: var(--muted); } .nbx-rch small { font-weight: 400; }
.nbx.report .nbx-note { cursor: default; }
[data-theme="dark"] .nbx-mode.on { background: #3a1d0c; color: #fdba74; }
@media print { .nbx-strip, .nbx-panel, .nbx-drawer, .nbx-bar .nbx-r1 > :not(.nbx-tt), .nbx-r2 { display: none !important; } .nbx { display: block; } .nbx-bar { position: static; border: 0; } }
.nbx-tt { flex: 1 1 280px; } .nbx-title, .nbx-about { width: 100% !important; }
.nbx .nbx-cx select { border: 0 !important; box-shadow: none !important; background-color: transparent !important; height: 24px !important; min-height: 0 !important; padding: 0 18px 0 4px !important; width: auto !important; }
.nbx .nb2-param select, .nbx .nb2-param input { height: 32px !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 30px; }
.nbx .nb2-ares { padding: 10px 14px; } .nbx .nb2-ares b { font-size: 13.5px; } .nbx .nb2-aic { width: 30px; height: 30px; } .nbx .nb2-aic svg { width: 16px; height: 16px; }
.nbx-cell.sel .nbx-main { box-shadow: inset 2px 0 0 var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }

/* ================================================================ Notebook as a clean white sheet (overrides the nbx layout above) */
.nbx-doc { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 1px 2px rgba(20,16,60,.04), 0 18px 40px -30px rgba(20,16,60,.35); padding: 0 26px 30px; }
.nbx-bar { background: color-mix(in srgb, var(--surface) 94%, transparent); margin: 0 -26px 10px; padding: 14px 26px 12px; border-radius: 18px 18px 0 0; border-bottom: 1px solid var(--border); }
.nbx .nb2-params { margin: 6px 0 10px 38px; background: var(--surface-2); border: 0; }
/* cells: no frames, the selected cell gets a thin line on the left */
.nbx-main, .nbx-cell:hover .nbx-main { border: 0 !important; background: none !important; padding: 2px 4px 8px 10px; }
.nbx-cell.sel .nbx-main { box-shadow: inset 2px 0 0 var(--accent) !important; background: none !important; }
.nbx-cell.k-sql .nbx-kind { display: none; }
.nbx-grip { opacity: 0; } .nbx-cell:hover .nbx-grip { opacity: 1; }
.nbx-tools { height: 24px; }
.nbx-name { color: var(--muted) !important; font-weight: 600 !important; width: 140px; }
.nbx-cell.sel .nbx-name, .nbx-cell:hover .nbx-name { color: var(--accent-text) !important; }
/* the code block: soft grey, no border – white with a faint ring while typing */
.nbx .se { background: #f6f7f9; border: 1px solid transparent; border-radius: 10px; }
.nbx .se:focus-within { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent); }
[data-theme="dark"] .nbx .se { background: var(--surface-2); } [data-theme="dark"] .nbx .se:focus-within { background: var(--surface-3); }
.nbx .se-hl, .nbx .se-ta { padding: 12px 14px; font-size: 13px; line-height: 1.65; }
.nbx-gut { padding-top: 32px; }
/* text cells: just text – small, no box; while writing a light, borderless area */
.nbx-cell.k-note .nbx-gut { padding-top: 4px; }
.nbx-cell.k-note .nbx-main { padding: 0 4px 2px 10px; }
.nbx-note.nt { padding: 2px 0; min-height: 0; }
.nbx-note.nt h1 { font-size: 20px; margin: 4px 0 2px; } .nbx-note.nt h2 { font-size: 16px; margin: 6px 0 2px; } .nbx-note.nt h3 { font-size: 14px; }
.nbx-note.nt p, .nbx-note.nt li { font-size: 13.5px; line-height: 1.55; margin: 1px 0; }
.nbx-editing { gap: 4px; }
.nbx-ta { border: 0 !important; background: var(--surface-2) !important; box-shadow: none !important; border-radius: 8px !important; padding: 8px 10px !important; min-height: 38px !important; font: 13.5px/1.55 var(--font) !important; resize: none; }
.nbx-ta:focus { background: var(--surface) !important; box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 35%, var(--border)) !important; }
.nbx-editing .nt-tools { opacity: .85; } .nbx-editing .nt-tb { height: 24px; min-width: 24px; font-size: 11.5px; }
.nbx-done { margin-top: 0; } .nbx-done .btn { height: 26px; padding: 0 12px; }
.nbx-ph { font-size: 13px; }
/* inserting a cell: a "+" on the line between two cells, only when you point at the gap */
.nbx-add { height: 22px; margin-left: 48px; position: relative; display: flex; align-items: center; justify-content: center; }
.nbx-add::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid transparent; transition: border-color .12s; }
.nbx-add:hover::before { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); }
.nbx-plus { position: relative; width: 24px; height: 24px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border)); background: var(--surface); color: var(--accent);
  display: grid; place-items: center; cursor: pointer; opacity: 0; transition: opacity .12s, transform .12s; }
.nbx-plus svg { width: 13px; height: 13px; } .nbx-add:hover .nbx-plus { opacity: 1; } .nbx-plus:hover { transform: scale(1.12); background: var(--accent); color: #fff; }
.nbx-addend { display: flex; align-items: center; gap: 8px; margin: 18px 0 0 48px; padding-top: 14px; border-top: 1px dashed var(--border); }
.nbx-addmain { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 16px; border-radius: 10px; border: 0; background: var(--accent); color: #fff; font: 700 13px var(--font); cursor: pointer; }
.nbx-addmain svg { width: 14px; height: 14px; } .nbx-addmain:hover { filter: brightness(1.08); }
.nbx-addq { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); font: 600 13px var(--font); cursor: pointer; }
.nbx-addq svg { width: 13px; height: 13px; } .nbx-addq:hover { border-color: var(--accent); color: var(--accent-text); }
.nbx-add.last, .nbx-addin, .nbx-addb { display: none; }
.nbx-addmenu { min-width: 250px; } .nbx-ami { display: flex; align-items: center; gap: 10px; padding: 7px 10px; }
.nbx-amic { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--surface-3); color: var(--text-2); } .nbx-amic svg { width: 14px; height: 14px; }
.nbx-amic.k-sql { background: #ede9fe; color: #6d28d9; } .nbx-amic.k-note { background: #e0f2fe; color: #0369a1; } .nbx-amic.k-assert { background: #dcfce7; color: #15803d; }
.nbx-amic.k-chart { background: #fef3c7; color: #b45309; } .nbx-amic.k-check { background: #fce7f3; color: #be185d; }
.nbx-amt { display: flex; flex-direction: column; text-align: left; } .nbx-amt b { font-size: 13px; } .nbx-amt small { font-size: 11.5px; color: var(--muted); }
/* results sit close under their code */
.nbx .gr { margin-top: 6px; } .nbx .alert.err { margin-top: 6px; border-radius: 10px; font-size: 13px; }
@media (max-width: 800px) { .nbx-doc { padding: 0 12px 20px; } .nbx-bar { margin: 0 -12px 10px; padding: 12px; } }
.nbx-main { border-radius: 0 !important; border-left: 2px solid transparent !important; box-shadow: none !important; }
.nbx-cell.sel .nbx-main { border-left-color: var(--accent) !important; box-shadow: none !important; }

/* ================================================================ Notebook: code cells as a card, clear cell actions, helpful errors */
.nbx { --nbx-line: #c3c7d3; --nbx-head: #f3f4f8; }
[data-theme="dark"] .nbx { --nbx-line: #3c4678; --nbx-head: #1a2147; }
/* the code card: a header strip (name, last run, Run, actions) joined to the code */
.nbx-cell.k-sql .nbx-main { padding-top: 6px; }
.nbx-cell.k-sql .nbx-tools { opacity: 1 !important; height: 38px; padding: 0 8px 0 12px; background: var(--nbx-head); border: 1.5px solid var(--nbx-line); border-bottom: 0; border-radius: 12px 12px 0 0; }
.nbx-cell.k-sql .se { border: 1.5px solid var(--nbx-line) !important; border-radius: 0 0 12px 12px; background: var(--surface) !important; box-shadow: none !important; }
[data-theme="dark"] .nbx-cell.k-sql .se { background: var(--surface-2) !important; }
.nbx-cell.k-sql .se:focus-within { border-color: var(--accent) !important; }
.nbx-cell.k-sql:has(.se:focus-within) .nbx-tools, .nbx-cell.k-sql.sel .nbx-tools { border-color: color-mix(in srgb, var(--accent) 70%, var(--nbx-line)); }
.nbx-cell.k-sql.sel .se { border-color: color-mix(in srgb, var(--accent) 70%, var(--nbx-line)) !important; }
.nbx-cell.k-sql .nbx-name { color: var(--text) !important; font-weight: 700 !important; }
.nbx-cell.k-sql .nbx-gut { padding-top: 16px; }
/* cell actions: real buttons you can see */
.nbx-tb { height: 28px; min-width: 28px; border: 1px solid var(--nbx-line) !important; background: var(--surface) !important; color: var(--text-2) !important; border-radius: 8px; }
.nbx-tb svg { width: 14px; height: 14px; }
.nbx-tb:hover { border-color: var(--accent) !important; color: var(--accent-text) !important; background: var(--accent-soft) !important; }
.nbx-tb.has { border-color: #f59e0b !important; color: #b45309 !important; background: #fffbeb !important; }
[data-theme="dark"] .nbx-tb.has { background: #2d2208 !important; color: #fcd34d !important; }
.nbx-tools { gap: 6px; }
.nbx-run { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-radius: 8px; border: 0; cursor: pointer; background: var(--accent); color: #fff; font: 700 12px var(--font); }
.nbx-run svg { width: 12px; height: 12px; } .nbx-run:hover { filter: brightness(1.08); }
.nbx-cell[data-state="running"] .nbx-run { opacity: .6; pointer-events: none; }
.nbx-sep { width: 1px; height: 18px; background: var(--nbx-line); margin: 0 2px; }
.nbx-meta { margin-right: 4px; }
/* other cells: actions show on hover / when selected, with the same clear buttons */
.nbx-cell:not(.k-sql) .nbx-tools { opacity: 0; } .nbx-cell:not(.k-sql):hover .nbx-tools, .nbx-cell:not(.k-sql).sel .nbx-tools { opacity: 1; }
.nbx-cell.k-note .nbx-tools { top: 0; height: 30px; }
.nbx-cell.k-note .nbx-tools .nbx-tb { background: color-mix(in srgb, var(--surface) 92%, transparent) !important; }
.nbx-cell.k-assert .nbx-main, .nbx-cell.k-chart .nbx-main, .nbx-cell.k-check .nbx-main { padding-top: 4px; }
/* text being written: small */
.nbx-ta { min-height: 0 !important; }
/* the error card */
.nbx-err { display: flex; align-items: flex-start; gap: 12px; margin-top: 8px; padding: 12px 14px; border-radius: 12px; background: var(--fail-bg); border: 1px solid color-mix(in srgb, var(--fail) 35%, transparent); }
.nbx-err b { display: block; font-size: 13.5px; color: var(--fail); } .nbx-err span { font-size: 12.5px; color: var(--text-2); font-family: var(--mono); word-break: break-word; }
.nbx-erric { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; background: var(--fail); color: #fff; } .nbx-erric svg { width: 15px; height: 15px; }
.nbx-erracts { display: flex; gap: 6px; flex: none; }

/* ================================================================ licence, trial, About, vendor Licences page (lc-*) */
.lc-hero { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding: 20px 22px; border-radius: 20px; color: #fff;
  background: radial-gradient(400px 200px at 100% 0%, rgba(255,255,255,.16), transparent 70%), linear-gradient(120deg, #4c3fd0, #6c5ce7); }
.lc-hero.t-warn { background: radial-gradient(400px 200px at 100% 0%, rgba(255,255,255,.16), transparent 70%), linear-gradient(120deg, #b45309, #f59e0b); }
.lc-hero.t-bad { background: radial-gradient(400px 200px at 100% 0%, rgba(255,255,255,.16), transparent 70%), linear-gradient(120deg, #991b1b, #dc2626); }
.lc-hero h3 { margin: 2px 0 4px; font: 800 20px var(--font-head, var(--font)); color: #fff; } .lc-hero p { margin: 0; color: rgba(255,255,255,.88); font-size: 13.5px; }
.lc-k { font: 800 11px var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.lc-ring { width: 86px; height: 86px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none;
  background: radial-gradient(closest-side, rgba(20,10,70,.55) 76%, transparent 78% 100%), conic-gradient(#fff calc(var(--p) * 1%), rgba(255,255,255,.25) 0); }
.lc-ring b { font: 800 26px var(--font-head, var(--font)); line-height: 1; } .lc-ring small { font-size: 10.5px; color: rgba(255,255,255,.85); }
.lc-facts { display: flex; gap: 8px; flex-wrap: wrap; } .lc-facts span { position: relative; display: flex; flex-direction: column; padding: 8px 12px; border-radius: 12px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); }
.lc-facts small { font-size: 10.5px; color: rgba(255,255,255,.8); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; } .lc-facts b { font-size: 13.5px; }
.lc-facts .mono, .lc-arow .mono { font-family: var(--mono); font-size: 12.5px; }
.lc-copy { position: absolute; top: 6px; right: 6px; border: 0; background: none; color: rgba(255,255,255,.85); cursor: pointer; } .lc-copy svg { width: 12px; height: 12px; }
.lc-facts span:has(.lc-copy) { padding-right: 28px; }
.lc-screen, .lc-view { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg); }
.lc-view > .lc-screen { width: 100%; }
.lc-box { width: min(760px, 100%); display: flex; flex-direction: column; gap: 16px; }
.lc-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: #fef3c7; color: #92400e; font-size: 13px; font-weight: 600; border-bottom: 1px solid #fcd34d; }
.lc-banner svg { width: 15px; height: 15px; } .lc-banner a { color: #92400e; text-decoration: underline; } .lc-banner button { margin-left: auto; border: 0; background: none; font-size: 18px; color: #92400e; cursor: pointer; }
[data-theme="dark"] .lc-banner { background: #2d2208; color: #fcd34d; border-color: #92400e; } [data-theme="dark"] .lc-banner a, [data-theme="dark"] .lc-banner button { color: #fcd34d; }
.lc-about { display: flex; align-items: center; gap: 14px; } .lc-about b { font: 800 18px var(--font-head, var(--font)); }
.logo.lg { width: 48px; height: 48px; border-radius: 14px; } .logo.lg svg { width: 24px; height: 24px; }
.lc-arow { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; } .lc-arow span { color: var(--muted); }
.lc-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .lc-form input, .lc-form select { width: 100%; }
.lc-issued { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border-radius: 14px; background: var(--pass-bg); border: 1px solid color-mix(in srgb, #22c55e 40%, transparent); }
.lc-key { display: block; font: 11.5px var(--mono); padding: 8px 10px; border-radius: 8px; background: var(--surface); word-break: break-all; }
.lc-list { display: flex; flex-direction: column; gap: 6px; }
.lc-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); }
.lc-row b { display: block; font-size: 14px; } .lc-row small { color: var(--muted); font-size: 12px; }
.lc-row.soon { border-left: 4px solid #f59e0b; } .lc-row.over { opacity: .6; border-left: 4px solid #ef4444; }
.lc-when { display: flex; flex-direction: column; align-items: flex-end; font-size: 12.5px; } .lc-when small { font-size: 11px; }
.lc-row.done { opacity: .72; } .lc-row:not(.done):not(.soon):not(.over) { border-left: 4px solid var(--accent); }
.lc-row > .grow { min-width: 0; } .lc-row small { overflow-wrap: anywhere; }
.lc-paste { align-items: stretch; } .lc-paste { align-items: center; } .lc-paste textarea { flex: 1; font: 12px var(--mono); resize: vertical; min-height: 58px; height: 58px; }
.lc-decline { margin: -2px 0 4px 18px; padding: 12px 14px; border-radius: 12px; border: 1px dashed color-mix(in srgb, var(--fail) 45%, transparent); background: var(--fail-bg); }
.lc-decline input { width: 100%; }
@media (max-width: 640px) { .lc-row { flex-wrap: wrap; } }