:root {
  --bg: #2a2a72;
  --window-bg: #c0c0c0;
  --accent: #00ffea;
  --accent-2: #ff00aa;
  --text: #101010;
}

* { box-sizing: border-box; }

body {
  font-family: "Courier New", Courier, monospace;
  margin: 2rem;
  color: var(--text);
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #4b3f8f, #2a2a72 60%, #12123a);
  min-height: 100vh;
}

h1 {
  font-size: 1.5rem;
  color: #fff;
  text-shadow: 2px 2px 0 var(--accent-2), 4px 4px 0 rgba(0,0,0,0.4);
  letter-spacing: 1px;
}

.subtitle { color: var(--accent); margin-top: -0.5rem; font-size: 0.85rem; }

.blink { animation: blink 1s steps(1) infinite; color: var(--accent); }
@keyframes blink { 50% { opacity: 0; } }

.window {
  background: var(--window-bg);
  border: 2px solid #000;
  box-shadow:
    inset 1px 1px 0 #fff,
    inset -2px -2px 0 #6b6b6b,
    4px 4px 0 rgba(0,0,0,0.5);
  margin: 1.5rem 0;
}

.title-bar {
  background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 4px);
  height: 22px;
  display: flex;
  align-items: center;
  padding: 0 6px;
  gap: 8px;
  border-bottom: 2px solid #000;
}

.dots { display: flex; gap: 5px; background: var(--window-bg); padding: 2px 4px; }
.dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; display: inline-block; }
.dot.red { background: #ff5f56; }
.dot.yellow { background: #ffbd2e; }
.dot.green { background: #27c93f; }

.title-text {
  background: var(--window-bg);
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: bold;
  letter-spacing: 1px;
}

.window-body { padding: 1rem; }

.cards { display: flex; gap: 1rem; flex-wrap: wrap; }
.card {
  background: #d8d8d8;
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #fff, inset -2px -2px 0 #6b6b6b;
  padding: 0.8rem 1.2rem;
  max-width: 220px;
}
.card .value { font-size: 1.6rem; font-weight: 700; color: var(--accent-2); text-shadow: 1px 1px 0 #000; }
.card .label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
.card .description { font-size: 0.7rem; color: #333; margin-top: 0.4rem; }

table { border-collapse: collapse; width: 100%; margin-top: 0.5rem; background: #fff; }
th, td { border: 1px solid #000; padding: 0.35rem 0.6rem; text-align: left; font-size: 0.8rem; }
th { background: #000; color: var(--accent); }
tr:nth-child(even) td { background: #eee; }

.bar-cell { display: flex; align-items: center; gap: 0.5rem; }
.bar-track { display: inline-block; background: #000; border: 1px solid #000; height: 10px; width: 120px; overflow: hidden; }
.bar-fill { display: inline-block; background: var(--accent); height: 100%; width: 0%; transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); }

#disagreement-table td { max-width: 420px; }
#disagreement-filter {
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  width: 280px;
  font-family: inherit;
  background: #000;
  color: var(--accent);
  border: 2px solid #000;
  box-shadow: inset 1px 1px 0 #6b6b6b, inset -1px -1px 0 #fff;
}
#disagreement-filter::placeholder { color: var(--accent); opacity: 0.6; }

.checkbox-label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; cursor: pointer; }
.hidden { display: none; }
#parse-error-table td { max-width: 420px; word-break: break-word; }