:root {
  --bg: #020502;     
  --grid: #0c1f0c;    
  --green: #00e676;     
  --green-soft: #7cf6c1;
  --green-dim: #0bbf63; 
  --line: #0a2d18;  
  --shadow: 0 0 12px rgba(0,230,118,.25), 0 0 24px rgba(0,230,118,.12);
  --shadow-strong: 0 0 18px rgba(0,230,118,.45), 0 0 42px rgba(0,230,118,.18);
  --sev-low: #00e676;  
  --sev-medium: #eab308;
  --sev-high: #f97316;
  --sev-critical: #ef4444;
  --rank-track: rgba(0, 30, 18, .3);
  --plane-line: rgba(0, 230, 118, 0.35);
}

/* Reset and font settings */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  color: var(--green);
  background: var(--bg);
  letter-spacing: .2px;
  text-shadow: 0 0 1px rgba(0,230,118,.35);
}

/* Subtle grid like terminal glass */
.grid-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  opacity: .65;
}

/* CRT overlay: scanlines + vignette + rolling bar */
.crt {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.crt::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
      to bottom,
      rgba(0,230,118,.08) 0px,
      rgba(0,230,118,.08) 1px,
      rgba(0,0,0,0) 3px,
      rgba(0,0,0,0) 4px
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(0,0,0,.12) 0px,
      rgba(0,0,0,.12) 4px,
      rgba(0,0,0,0) 8px,
      rgba(0,0,0,0) 12px
    );
  mix-blend-mode: normal;
  opacity: .35;
  animation: scan-flicker 6s ease-in-out infinite;
}
.crt::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.08) 50%, rgba(255,255,255,0) 100%),
    radial-gradient(ellipse at center, rgba(0,0,0,0) 60%, rgba(0,0,0,.6) 100%);
  background-size: 100% 260%, 100% 100%;
  background-position: 50% -120%, 50% 50%;
  animation: roll 9s linear infinite;
  opacity: .5;
}
@keyframes scan-flicker {
  0%,100% { opacity: .33; }
  45% { opacity: .40; }
  46% { opacity: .26; }
  60% { opacity: .36; }
  80% { opacity: .30; }
}
@keyframes roll {
  0% { background-position: 50% -130%, 50% 50%; }
  100% { background-position: 50% 130%, 50% 50%; }
}

/* Slight page flicker / jitter */
.screen-wrap {
  min-height: 100svh;
  animation: flicker 7.5s infinite;
}
@keyframes flicker {
  0% { filter: contrast(1.02) saturate(1.02); }
  12% { filter: contrast(1.05) saturate(1.03); }
  13% { filter: contrast(0.98) saturate(1.00); }
  14% { filter: contrast(1.02) saturate(1.02); }
  50% { filter: contrast(1.01) saturate(1.01); }
  51% { filter: contrast(1.05) saturate(1.03); }
  100% { filter: contrast(1.02) saturate(1.02); }
}

/* Container for page content */
.content {
  padding: 56px 16px 88px;
  max-width: 1200px;
  margin: auto;
}

/* Terminal card component */
.term-card {
  /* Increase opacity of the card background to ensure the grid plane
     doesn't show through the tables and charts.  Still use a subtle
     gradient to preserve the CRT feel. */
  background: linear-gradient(180deg, rgba(0,30,18,.55), rgba(0,12,8,.55));
  position: relative;
  z-index: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(0,230,118,.06), 0 10px 30px rgba(0,0,0,.35);
  overflow: hidden;
  margin-bottom: 28px;
}

.term-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0,10,6,.55);
  border-bottom: 1px solid var(--line);
  text-transform: uppercase;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .8px;
}

.leds {
  display: flex;
  gap: 6px;
  margin-right: 8px;
}
.led {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0,230,118,.65);
  background: var(--green);
  opacity: .8;
}

.term-meta {
  color: var(--green-soft);
  opacity: .85;
  margin-left: auto;
  font-size: .9rem;
}

/* Button used in card headers (e.g. to link analytics or home) */
.analytics-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .7rem;
  margin-left: 10px;
  border: 1px solid rgba(0,230,118,.5);
  color: var(--green);
  background: rgba(0,10,6,.2);
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .3px;
  box-shadow: 0 0 10px rgba(0,230,118,.2);
  transition: transform .1s ease, box-shadow .2s ease, background .2s ease;
}
.analytics-btn::before {
  content: '#';
  opacity: .8;
}
.analytics-btn:hover {
  transform: translateY(-1px);
  background: rgba(0,30,18,.3);
  box-shadow: var(--shadow-strong);
}

/* Sortable tables (from index page) */
.table-wrap {
  max-height: 60vh;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #0a3 transparent;
}
.table-wrap::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.table-wrap::-webkit-scrollbar-thumb {
  background: #0a3;
  border-radius: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
  color: var(--green);
  font-size: .975rem;
}
th, td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}
thead th {
  background: rgba(0,20,12,.5);
  position: sticky;
  top: 0;
  z-index: 1;
  text-transform: uppercase;
  font-size: .85rem;
  letter-spacing: .9px;
  color: var(--green-soft);
  border-bottom: 1px solid rgba(0,230,118,.25);
  box-shadow: inset 0 -1px 0 rgba(0,230,118,.12);
}
tr:hover td {
  background: rgba(0,40,24,.18);
}
th.sortable {
  cursor: pointer;
  user-select: none;
}
th.sortable::after {
  content: ' ▴▾';
  font-size: .75rem;
  opacity: .35;
  margin-left: .35rem;
}
th.sortable[data-sort='asc']::after {
  content: ' ▴';
  opacity: .9;
}
th.sortable[data-sort='desc']::after {
  content: ' ▾';
  opacity: .9;
}

/* Reference links inside tables */
a.reference {
  color: var(--green-soft);
  text-decoration: none;
  border-bottom: 1px dotted rgba(0,230,118,.35);
}
a.reference:hover {
  text-shadow: var(--shadow-strong);
  border-color: rgba(0,230,118,.6);
}

/* Tiny RGB bleed for that phosphor look */
.rgb-bleed, .rgb-bleed * {
  text-shadow: 0.6px 0 0 rgba(0,230,118,.20),
    -0.6px 0 0 rgba(150,255,200,.12),
    0 0.6px 0 rgba(120,255,190,.12);
}

/* Perspective grid plane on the bottom of the page.  This element
   creates a three-dimensional effect similar to a retro floor grid
   receding into the horizon.  It is positioned behind the main
   content and does not intercept pointer events. */
.grid-plane {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* Extend the plane further up the screen to suggest depth */
  /* Increase the height for a deeper 3D effect.  A taller plane
     enhances the sense of perspective while remaining behind the
     content. */
  /* Extend the plane to about half the viewport height.  This deeper
     plane enhances the 3D perspective while leaving room for content
     above it. */
  height: 50vh;
  pointer-events: none;
  z-index: -3;
  perspective: 800px;
  overflow: hidden;
}
.grid-plane::before {
  content: '';
  position: absolute;
  bottom: -5%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image:
    repeating-linear-gradient(
      to top,
      var(--plane-line) 0px,
      var(--plane-line) 1px,
      transparent 1px,
      transparent 60px
    ),
    repeating-linear-gradient(
      to left,
      var(--plane-line) 0px,
      var(--plane-line) 1px,
      transparent 1px,
      transparent 60px
    );
  background-size: 60px 60px;
  transform-origin: bottom;
  /* Rotate along X axis to simulate the plane receding into the horizon */
  /* Tilt the grid slightly more and push it further down so the vanishing
     point is centred on the page.  Increasing translateY creates the
     effect of the horizon meeting roughly at mid-page. */
  transform: rotateX(65deg) translateY(60%);
  /* Make the receding grid lines slightly brighter and sharper */
  opacity: 0.45;
  filter: blur(0.4px);
}

/* Ranking list styles used on analytics page */
.ranked-list {
  display: grid;
  gap: .75rem;
  margin-top: .5rem;
}
.rank-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .75rem;
  align-items: center;
}
.rank-left {
  min-width: 0;
}
.rank-title {
  color: var(--green);
  font-size: .95rem;
  line-height: 1.3;
  word-break: break-word;
  /* Strengthen the glow and uppercasing for CRT labels. */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-shadow: 0 0 3px var(--green), 0 0 6px var(--green);
}
.rank-bar {
  position: relative;
  width: 100%;
  /* Slightly taller bars improve clarity when comparing counts */
  height: 12px;
  border-radius: 999px;
  background: var(--rank-track);
  overflow: hidden;
  margin-top: .35rem;
  border: 1px solid var(--line);
  /* Draw a bright line at the far right of the bar.  This mimics
     the phosphor beam extending beyond the filled portion and
     provides a clear end marker for each bar. */
  border-right: 2px solid var(--green);
}
.rank-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0%;
  border-radius: 999px;
  transition: width .6s ease;
}
.rank-count {
  color: var(--green-soft);
  font-weight: 600;
  min-width: 2.25rem;
  text-align: right;
}

/* Chart canvas sizing; ensures they respond to container width */
canvas {
  width: 100% !important;
  height: 320px !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content { padding: 36px 12px 60px; }
  th, td { padding: 9px 10px; font-size: .95rem; }
  .table-wrap { max-height: 55vh; }
  canvas { height: 260px !important; }
}

@media (max-width: 520px) {
  .table-inner { min-width: 720px; }
  canvas { height: 220px !important; }
}

/* Chart sections inside analytics card */
.chart-section {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--line);
}
.chart-section:last-of-type {
  border-bottom: none;
}
.chart-section h3 {
  margin: 0 0 .75rem;
  font-size: 1.1rem;
  color: var(--green);
  text-transform: none;
  font-weight: 600;
}

/* Legend styling for custom charts */
.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.75rem;
  justify-content: center;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--green-soft);
  /* Use uppercase text with wider letter spacing and a glow to
     mimic pixelated CRT lettering. */
  text-transform: uppercase;
  letter-spacing: 0.35px;
  text-shadow: 0 0 3px var(--green-soft), 0 0 6px var(--green-soft);
}
.legend-dot {
  width: 14px;
  height: 8px;
  border-radius: 1px;
  display: inline-block;
  /* Neon glow around each legend swatch for clarity */
  box-shadow: 0 0 4px currentColor, 0 0 8px currentColor;
}

/* Horizontal split layout for analytics page: severity and top CWEs side by side */
.split {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
/* Items within a split row occupy equal space and have padding.  The
   border for the entire row is drawn on the split container rather
   than individual items to avoid double borders. */
.split-item {
  flex: 1 1 50%;
  padding: 1rem 1.25rem;
}
/* Add a vertical dividing line between the two halves on wide screens */
.split-item:first-child {
  border-right: 1px solid var(--line);
}
.split-item h3 {
  margin: 0 0 .75rem;
  font-size: 1.2rem;
  color: var(--green);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  /* Center headings horizontally within their panels */
  text-align: center;
  /* Apply a strong glow and subtle pixelation via layered shadows.
     This approximates the look of characters on an old CRT
     screen where phosphor dots blur slightly. */
  text-shadow:
    0 0 4px var(--green),
    0 0 8px var(--green),
    1px 1px 2px rgba(0, 230, 118, 0.2);
}
@media (max-width: 768px) {
  .split-item {
    flex: 1 1 100%;
    border-right: none;
  }
  .split-item:first-child {
    border-right: none;
  }
}

/* Hero section and prompt styling (used on index/home page) */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  position: relative;
}
.prompt {
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  color: var(--green-dim);
  opacity: .9;
  margin-bottom: .9rem;
}
.hero h1 {
  font-size: clamp(1.8rem, 6vw, 4rem);
  color: var(--green);
  text-shadow: var(--shadow);
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
}
.cursor {
  width: .6ch;
  background: var(--green);
  display: inline-block;
  height: 1em;
  transform: translateY(.15em);
  animation: blink 1.1s steps(1,end) infinite;
  box-shadow: var(--shadow-strong);
}
@keyframes blink {
  50% { opacity: 0; }
}
.socials {
  margin-top: 1rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  opacity: .95;
}
.socials a {
  color: var(--green-soft);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,230,118,.35);
  padding-bottom: 2px;
  transition: opacity .15s, border-color .15s, text-shadow .15s;
}
.socials a:hover {
  opacity: .9;
  border-color: rgba(0,230,118,.6);
  text-shadow: var(--shadow-strong);
}

/* NEW: hero chat button layout */
.hero-actions {
  margin-top: 3rem;
}

/* NEW: central chat button styled like a CRT control */
.chat-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 2.1rem;
  border-radius: 8px;
  border: 1px solid rgba(0,230,118,.7);
  background: radial-gradient(circle at 50% 0%, rgba(0,230,118,.2), rgba(0,10,6,.7));
  color: var(--green);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: 0 0 14px rgba(0,230,118,.45), 0 0 32px rgba(0,230,118,.22);
  text-shadow: 0 0 4px var(--green), 0 0 10px rgba(0,230,118,.7);
  transition:
    background 0.12s ease-out,
    box-shadow 0.15s ease-out,
    transform 0.08s ease-out,
    letter-spacing 0.1s ease-out;
}
.chat-btn::before {
  content: '▶';
  font-size: 0.8rem;
  margin-right: 0.6rem;
  opacity: 0.9;
}
.chat-btn:hover {
  background: radial-gradient(circle at 50% 0%, rgba(0,255,180,.45), rgba(0,20,10,.9));
  box-shadow: var(--shadow-strong);
  transform: translateY(-1px);
  letter-spacing: 0.22em;
}
.chat-btn:active {
  transform: translateY(1px);
  box-shadow: 0 0 8px rgba(0,230,118,.3);
}

.scroll-down {
  position: absolute;
  bottom: 5%;
  color: #0a5;
  opacity: .65;
}

/*
 * Additional styling for the analytics heatmap section.  The
 * heatmap container has its own grid pattern drawn via CSS so
 * the background feels part of the radar visualization.  A
 * pseudo-element sits behind the canvas to render the grid,
 * while the canvas is placed on top using a higher z-index.
 */
.heatmap-box {
  position: relative;
  overflow: hidden;
}
.heatmap-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      to bottom,
      rgba(0,230,118,0.07) 0px,
      rgba(0,230,118,0.07) 1px,
      transparent 1px,
      transparent 40px
    ),
    repeating-linear-gradient(
      to right,
      rgba(0,230,118,0.07) 0px,
      rgba(0,230,118,0.07) 1px,
      transparent 1px,
      transparent 40px
    );
  background-size: 40px 40px;
  z-index: 0;
  pointer-events: none;
}
#heatmapCanvas {
  position: relative;
  z-index: 1;
}

/* 3D spinning donut for severity distribution */
.spin-container {
  perspective: 600px;
}

/*
 * Multi-layer donut container for the severity distribution.
 * Each severity slice is drawn on its own canvas and separated
 * along the Z axis to simulate physical thickness.  The entire
 * donut rotates in 3D space using the same keyframes as the
 * original 2D donut animation.  A fixed height ensures the
 * donut always reserves sufficient vertical space regardless of
 * content above or below.
 */
.donut3d {
  /* Legacy multi-layer donut container.  No longer used for the
     severity distribution now that the torus is drawn via a single
     canvas.  Retain basic sizing in case of future reuse but
     remove 3D animation and preserve-3d to avoid unintended
     transforms. */
  position: relative;
  width: 100%;
  height: 260px;
  transform-style: flat;
  animation: none;
}

/* Individual canvases within the 3D donut.  They are absolutely
   positioned to stack directly on top of one another and share
   the parent’s dimensions.  Each canvas is translated along the
   Z axis in JavaScript to create thickness. */
.donut3d canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: flat;
}

canvas.spin {
  display: block;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  animation: donut-spin 18s linear infinite;
}

@keyframes donut-spin {
  /* Spin the donut mostly around the Y axis with a modest tilt on
     the X axis.  A smaller tilt angle preserves the 3D illusion
     without causing the layers to separate visually. */
  from {
    transform: rotateX(30deg) rotateY(0deg);
  }
  to {
    transform: rotateX(30deg) rotateY(360deg);
  }
}

/* Canvas used for the 3D torus.  The dimensions are controlled via
   CSS so that the canvas scales responsively while the internal
   drawing resolution is set in JavaScript. */
/* Canvas used for the 3D torus.  Constrain its aspect ratio so
   that the canvas remains square and the torus does not appear
   distorted when scaled.  Width scales with its container and
   height adjusts automatically. */
.donut-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
}