/* Kyber Repo: report dashboard, scan loader, report preview and the sections below the fold. */
:root {
  --sev-critical: #ff5fb8; --sev-critical-2: #c2368d;
  --sev-high: #f073c6; --sev-high-2: #a944c9;
  --sev-medium: #c9a3ff; --sev-medium-2: #8a4dff;
  --sev-low: #9a8af2; --sev-low-2: #5a47b8;
  --sev-info: #9a96b3; --sev-info-2: #4d4771;
  --dash-panel: #13101b; --dash-line: #ffffff14;
}

/* ---------- dashboard ---------- */
.dash { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; margin-top: 18px; color: var(--ink); }
.dash-panel { position: relative; min-width: 0; padding: 18px 20px 20px; border: 1px solid var(--dash-line); border-radius: 18px; background: linear-gradient(180deg, #17131f, var(--dash-panel)); box-shadow: 0 1px 0 #ffffff0d inset; }
.dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dash-head h3 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.dash-caption { font-size: 12px; color: var(--dim); }
.dash-severity { grid-column: span 8; display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 24px; overflow: hidden;
  background: radial-gradient(80% 90% at 70% 110%, #8a3dd666 0%, transparent 65%), radial-gradient(50% 60% at 15% 0%, #5b2bb83d, transparent 70%), linear-gradient(180deg, #1a1424, #110e18); }
.dash-severity .dash-head { grid-column: 1 / -1; }
.dash-kpis { display: grid; align-content: start; gap: 18px; }
.dash-kpi strong { display: block; font-size: 34px; font-weight: 700; line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dash-kpi span { display: flex; align-items: center; gap: 7px; margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.dash-kpi span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--violet); box-shadow: 0 0 10px var(--violet); }
.dash-kpi.hot span::before { background: var(--sev-high); box-shadow: 0 0 10px var(--sev-high); }
.dash-kpi.hot strong { color: #ffc2e8; }
.dash-columns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; gap: clamp(8px, 1.4vw, 18px); align-self: end; height: clamp(220px, 21vw, 310px); padding-top: 22px; }
.dash-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 8px; height: 100%; min-width: 0; text-align: center; }
.dash-col small { font-size: 12px; color: var(--dim); }
.dash-bar { --c1: var(--sev-medium); --c2: var(--sev-medium-2); position: relative; height: var(--h); min-height: 14px; border: 1px solid #ffffff17; border-radius: 12px; transform-origin: bottom;
  background: repeating-linear-gradient(135deg, #ffffff12 0 2px, transparent 2px 8px), linear-gradient(180deg, #2a2236, #15111d); animation: bar-grow .9s var(--ease) both; }
.dash-bar::before { content: ""; position: absolute; inset: -1px -1px auto; height: min(36px, 46%); border-radius: 12px; background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: 0 0 26px color-mix(in srgb, var(--c2) 70%, transparent); }
.dash-pill { position: absolute; left: 50%; top: -13px; z-index: 1; min-width: 34px; padding: 3px 8px; border: 1px solid #ffffff4d; border-radius: 8px; background: linear-gradient(180deg, var(--c1), var(--c2)); color: #fff; font-size: 12px; font-weight: 700; transform: translateX(-50%); box-shadow: 0 6px 16px #0008; }
.dash-col.critical .dash-bar { --c1: var(--sev-critical); --c2: var(--sev-critical-2); }
.dash-col.high .dash-bar { --c1: var(--sev-high); --c2: var(--sev-high-2); }
.dash-col.low .dash-bar { --c1: var(--sev-low); --c2: var(--sev-low-2); }
.dash-col.informational .dash-bar { --c1: var(--sev-info); --c2: var(--sev-info-2); }
.dash-col:nth-child(2) .dash-bar { animation-delay: .06s; } .dash-col:nth-child(3) .dash-bar { animation-delay: .12s; }
.dash-col:nth-child(4) .dash-bar { animation-delay: .18s; } .dash-col:nth-child(5) .dash-bar { animation-delay: .24s; }
@keyframes bar-grow { from { transform: scaleY(0); opacity: 0; } }

.dash-coverage { grid-column: span 4; display: flex; flex-direction: column; gap: 14px; }
.dash-coverage .dash-head { margin-bottom: 0; }
.dash-cov-row { display: grid; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--dash-line); }
.dash-cov-label { font-size: 12px; color: var(--dim); }
.dash-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.dash-chip { max-width: 100%; padding: 5px 10px; border: 1px solid #ffffff1c; border-radius: 999px; background: #ffffff0a; font-size: 12.5px; color: #e6def2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dash-chip.more { color: var(--violet-2); border-color: #a877ff55; }
.dash-checks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: auto; }
.dash-check { padding: 10px; border-radius: 12px; background: #ffffff08; font-size: 12px; color: var(--muted); }
.dash-check b { display: block; font-size: 22px; color: var(--ink); }
.dash-check.ok b { color: #7ff0b4; } .dash-check.part b { color: #f4d083; } .dash-check.off b { color: #b3aec2; }

.dash-heat { grid-column: span 5; }
.dash-grid { display: grid; grid-template-columns: auto repeat(5, minmax(0, 1fr)); gap: 5px; align-items: center; }
.dash-grid-col { font-size: 11px; color: var(--dim); text-align: center; }
.dash-grid-row { padding-right: 8px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.dash-cell { display: grid; place-items: center; aspect-ratio: 1.5; border-radius: 7px; background: #1d1828; font-size: 11.5px; font-weight: 700; color: #fff; }
.dash-cell.on { background: linear-gradient(160deg, rgb(201 163 255 / var(--a)), rgb(122 61 240 / var(--a))); box-shadow: 0 0 calc(var(--a) * 18px) rgb(168 119 255 / calc(var(--a) * .7)), 0 0 0 1px #ffffff1f inset; }

.dash-radar { grid-column: span 3; }
.dash-radar-svg { display: block; width: 100%; max-width: 280px; height: auto; margin: -6px auto 0; overflow: visible; }
.radar-ring { fill: none; stroke: #ffffff1a; }
.radar-axis { stroke: #ffffff14; }
.radar-label { fill: #b5adc6; font-size: 10.5px; }
.radar-shape { fill: #a877ff40; stroke: #d3b3ff; stroke-width: 1.6; filter: drop-shadow(0 0 10px #a877ffaa); }
.radar-dot { fill: #f2e8ff; }

.dash-files { grid-column: span 4; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.dash-table th { padding: 0 8px 8px 0; text-align: left; font-size: 11.5px; font-weight: 500; color: var(--dim); }
.dash-table td { padding: 9px 8px 9px 0; border-top: 1px solid var(--dash-line); }
.dash-file { max-width: 0; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #e6def2; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.dash-num { font-variant-numeric: tabular-nums; }
.dash-dots { white-space: nowrap; }
.dot { display: inline-block; width: 9px; height: 9px; margin-right: 4px; border-radius: 50%; background: var(--sev-info); }
.dot.critical { background: var(--sev-critical); box-shadow: 0 0 8px var(--sev-critical); } .dot.high { background: var(--sev-high); }
.dot.medium { background: var(--sev-medium); } .dot.low { background: var(--sev-low); }
.dash-empty { font-size: 13px; color: var(--dim); }

/* ---------- scan loader ---------- */
.project-output.is-loading { padding-block: 40px 34px; }
.scan-loader { display: grid; justify-items: center; gap: 6px; text-align: center; }
.bucket { position: relative; isolation: isolate; width: min(100%, 560px); aspect-ratio: 655 / 352; margin-bottom: 10px; }
.bucket svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bucket-back { z-index: 0; } .bucket-front { z-index: 2; pointer-events: none; }
.bk-flap { fill: #ffffff14; stroke: #ffffff2e; }
.bk-rim { fill: #c9a8ff26; stroke: #ffffff33; }
.bk-corner { fill: #ffffff1f; }
.bk-box { fill: #16121f; stroke: #ffffff26; }
.bk-lip { fill: #2b2239; stroke: #ffffff40; filter: drop-shadow(0 16px 22px #0009); }
.bucket-slot { position: absolute; inset: 0; z-index: 1; }
.bucket-chip { position: absolute; left: 50%; top: -6%; display: flex; align-items: center; gap: 10px; width: min(78%, 300px); padding: 8px 16px 8px 8px; border: 1px solid #ffffff2e; border-radius: 999px; translate: -50% 0;
  background: linear-gradient(140deg, #2a2138, #1a1524); box-shadow: 0 14px 30px #0009, 0 0 30px #8a4dff33; text-align: left; animation: chip-drop 1.5s cubic-bezier(.455, .03, .515, .955) both; }
.bucket-chip-icon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg, #a877ff, #6f3fd6); color: #fff; font-size: 12px; font-weight: 700; box-shadow: 0 0 16px #a877ff88; }
.bucket-chip-copy { display: grid; gap: 2px; min-width: 0; }
.bucket-chip-copy strong { font-size: 14px; font-weight: 600; }
.bucket-chip-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); }
@keyframes chip-drop {
  0% { transform: translateY(-60%) scale(.8); opacity: 0; }
  28% { transform: translateY(0) scale(1.08); opacity: 1; }
  68% { transform: translateY(0) scale(1.08); opacity: 1; }
  100% { transform: translateY(190%) scale(.82); opacity: 1; }
}
.scan-loader-title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.scan-loader-note { font-size: 13.5px; color: var(--dim); }

/* ---------- report preview: tilts upright while it scrolls into view (--p goes 0 to 1) ---------- */
.showcase { --p: 0; margin-top: clamp(70px, 8vw, 120px); padding-bottom: clamp(30px, 4vw, 60px); perspective: 1000px; }
.showcase-head { text-align: center; transform: translateY(calc(var(--p) * -60px)); }
.showcase-head h2 { max-width: 15em; margin: 18px auto 0; font-size: clamp(30px, 3.6vw, 56px); line-height: 1.02; font-weight: 600; letter-spacing: -.04em; text-wrap: balance; }
.showcase-head h2 em { font-style: normal; background: linear-gradient(90deg, #6f3fd6, #b07bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.showcase-head > p:last-child { max-width: 38em; margin: 16px auto 0; font-size: 16.5px; line-height: 1.45; color: var(--paper-muted); }
.device { width: calc(100% - 2 * var(--pad)); max-width: 1240px; margin: 0 auto; padding: clamp(6px, 1vw, 14px); border: 4px solid #4b4458; border-radius: 30px; background: #1c1824;
  transform: rotateX(calc((1 - var(--p)) * 20deg)) scale(calc(1.05 - var(--p) * .05)); transform-origin: 50% 0; will-change: transform;
  box-shadow: 0 9px 20px #1a0f304a, 0 37px 37px #1a0f3042, 0 84px 50px #1a0f3026, 0 149px 60px #1a0f300a; }
.device-screen { overflow: hidden; border-radius: 18px; background: radial-gradient(60% 50% at 80% 0%, #3a1d6b55, transparent 70%), #0d0b13; color: var(--ink); color-scheme: dark; }
.device-bar { display: flex; align-items: center; gap: 18px; padding: 12px 18px; border-bottom: 1px solid var(--dash-line); font-size: 13px; }
.device-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.device-brand img { width: auto; height: 22px; }
.device-tabs { display: flex; gap: 4px; color: var(--muted); }
.device-tabs > * { padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.device-tabs b { background: #ffffff12; color: #fff; box-shadow: 0 0 0 1px #ffffff1a inset; }
.device-badge { margin-left: auto; padding: 5px 10px; border: 1px solid #a877ff66; border-radius: 999px; background: #a877ff1f; color: var(--lav); font-size: 12px; font-weight: 600; }
.device-body { padding: 0 18px 18px; }
.device-body .dash { margin-top: 16px; }

/* ---------- sections below the fold ---------- */
.privacy, .exports, .faq { padding: clamp(70px, 7vw, 110px) 0; }
.privacy .kicker, .exports .kicker, .faq .kicker, .cta .kicker { color: var(--violet-2); }
.privacy h2, .exports h2, .faq h2 { margin-top: 18px; font-size: clamp(28px, 2.9vw, 44px); line-height: 1.06; font-weight: 600; letter-spacing: -.035em; }
.privacy { position: relative; background: radial-gradient(50% 70% at 0% 50%, #5b2bb826, transparent 70%); border-top: 1px solid #ffffff0d; }
.privacy-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.privacy-lead > p:last-child { max-width: 30em; margin-top: 18px; font-size: 16.5px; color: var(--muted); }
.privacy-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.privacy-card { padding: 22px; border: 1px solid var(--line-2); border-radius: 18px; background: linear-gradient(160deg, #17121f, #100d18); transition: transform .25s var(--ease), border-color .25s; }
.privacy-card:hover { transform: translateY(-3px); border-color: #6b4aa8; }
.privacy-card > .icon { font-size: 30px; color: var(--violet-2); }
.privacy-card h3 { margin-top: 14px; font-size: 17px; font-weight: 600; }
.privacy-card p { margin-top: 6px; font-size: 14px; color: var(--muted); }
.privacy-wide { grid-column: 1 / -1; display: flex; align-items: center; gap: 26px; background: radial-gradient(70% 120% at 100% 0%, #7a3df040, transparent 60%), linear-gradient(160deg, #1b1426, #100d18); }
.privacy-wide h3 { margin-top: 0; font-size: clamp(18px, 1.6vw, 24px); }
.privacy-wide h3 strong { margin-right: 6px; font-size: 1.9em; vertical-align: -.12em; background: linear-gradient(180deg, #fff, #c9a8ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.net-meter { display: flex; align-items: flex-end; gap: 5px; flex: none; height: 64px; padding: 10px 14px; border: 1px solid #ffffff1a; border-radius: 14px; background: #0b0911; }
.net-meter i { width: 6px; height: 4px; border-radius: 3px; background: #a877ff; box-shadow: 0 0 8px #a877ff; opacity: .55; animation: idle 2.4s ease-in-out infinite; }
.net-meter i:nth-child(odd) { animation-delay: .4s; } .net-meter i:nth-child(3n) { animation-delay: .8s; }
@keyframes idle { 50% { opacity: 1; transform: scaleY(1.6); } }

.exports { background: linear-gradient(180deg, transparent, #120e1c 60%, transparent); }
.export-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.export-card { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line-2); border-radius: 18px; background: #110e18; overflow: hidden; transition: transform .25s var(--ease), border-color .25s, box-shadow .25s; }
.export-card:hover { transform: translateY(-3px); border-color: #7b55c0; box-shadow: 0 20px 50px #2a145566; }
.export-ext { width: fit-content; padding: 4px 10px; border-radius: 8px; background: #a877ff26; color: var(--lav); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; font-weight: 600; }
.export-card h3 { margin-top: 16px; font-size: 21px; font-weight: 600; letter-spacing: -.02em; }
.export-card p { margin-top: 6px; color: var(--muted); }
.export-card pre { margin: 20px 0 0; padding: 14px; border: 1px solid #ffffff12; border-radius: 12px; background: #09070e; color: #d9c8f5; font: 12.5px/1.55 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }

.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.faq-list { display: grid; gap: 10px; }
.faq-list details { border: 1px solid var(--line-2); border-radius: 14px; background: #110e18; transition: border-color .2s, background-color .2s; }
.faq-list details[open] { border-color: #6b4aa8; background: #15111e; }
.faq-list summary { position: relative; padding: 18px 52px 18px 20px; font-size: 17px; font-weight: 600; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--violet-2); border-bottom: 2px solid var(--violet-2); transform: translateY(-70%) rotate(45deg); transition: transform .25s var(--ease); }
.faq-list details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq-list details p { padding: 0 20px 18px; color: var(--muted); }

.cta { padding: 20px 0 clamp(70px, 7vw, 110px); }
.cta-card { position: relative; overflow: hidden; padding: clamp(36px, 5vw, 72px); border: 1px solid #a877ff4d; border-radius: 28px; text-align: center;
  background: radial-gradient(60% 120% at 50% 120%, #8a3dd6aa, transparent 70%), radial-gradient(40% 80% at 90% 0%, #c9a8ff33, transparent 70%), linear-gradient(160deg, #1d1530, #0f0b18); box-shadow: 0 30px 80px #5b2bb84d; }
.cta-card h2 { max-width: 16em; margin: 0 auto; font-size: clamp(28px, 3.4vw, 52px); line-height: 1.04; font-weight: 700; letter-spacing: -.04em; text-wrap: balance; }
.cta-card p { margin-top: 14px; font-size: 17px; color: #ddd3ee; }
.cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.cta-actions .button { min-height: 50px; padding: 0 24px; font-size: 16px; cursor: pointer; }
.cta-actions .button-ghost { border-radius: 999px; }

.footer { padding: 54px 0 30px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; }
.footer-brand p { max-width: 26em; margin-top: 14px; }
.footer-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.footer-cols h3 { margin-bottom: 12px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.footer-cols a { display: block; padding: 5px 0; color: var(--muted); transition: color .2s; }
.footer-cols a:hover { color: #fff; }
.footer-base { display: flex; justify-content: space-between; gap: 16px; margin-top: 40px; padding-top: 20px; border-top: 1px solid #ffffff12; font-size: 13px; }

/* ---------- responsive ---------- */
@media (max-width: 1240px) {
  .dash-severity { grid-column: span 12; } .dash-coverage { grid-column: span 6; } .dash-files { grid-column: span 6; }
  .dash-heat { grid-column: span 7; } .dash-radar { grid-column: span 5; }
  .dash-coverage { order: 1; } .dash-files { order: 2; } .dash-heat { order: 3; } .dash-radar { order: 4; }
  .privacy-grid, .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .dash-coverage, .dash-files, .dash-heat, .dash-radar { grid-column: span 12; }
  .dash-severity { grid-template-columns: 1fr; } .dash-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 8px; }
  .dash-kpi strong { font-size: 26px; }
  .device { transform: rotateX(calc((1 - var(--p)) * 20deg)) scale(calc(.8 + var(--p) * .2)); border-radius: 22px; }
  .device-screen { max-height: 34rem; }
  .device-tabs { display: none; }
  .export-cards, .privacy-cards { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dash-panel { padding: 16px; } .dash-columns { height: 180px; } .dash-severity .dash-caption { display: none; }
  .dash-grid-row { font-size: 11px; padding-right: 4px; }
  .privacy-wide { flex-direction: column; align-items: flex-start; }
  .footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-base { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  .bucket-chip { animation: none; top: 2%; }
  .net-meter i { animation: none; }
}
@media print {
  .dash-panel { border-color: #ccc !important; }
  .showcase, .privacy, .exports, .faq, .cta { display: none !important; }
}