*,
*::before,
*::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: "JetBrains Mono", "Courier New", Consolas, monospace;
   background: #09090b;
   color: #f4f4f5;
   line-height: 1.6;
   padding: 2.5rem 1.5rem 4rem;
   max-width: 820px;
   margin: 0 auto;
}

/* ── Header ── */
header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 2rem;
   flex-wrap: wrap;
   gap: 1rem;
}

.header-left {
   display: flex;
   flex-direction: column;
   gap: 0.15rem;
}

.brand {
   font-size: 1.25rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: #f4f4f5;
}

.brand-iq {
   color: #3b82f6;
}

.subtitle {
   font-size: 0.8rem;
   color: #a1a1aa;
   font-weight: 400;
   letter-spacing: 0.02em;
}

.header-right {
   display: flex;
   align-items: center;
   gap: 1rem;
   flex-wrap: wrap;
}

.status-indicator {
   display: flex;
   align-items: center;
   gap: 0.4rem;
   font-size: 0.7rem;
   color: #a1a1aa;
   text-transform: uppercase;
   letter-spacing: 0.05em;
}

.status-dot {
   width: 8px;
   height: 8px;
   background: #10b981;
   border-radius: 50%;
   animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }
}

.mode-label {
   font-size: 0.7rem;
   color: #a1a1aa;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding: 0.25rem 0.5rem;
   border: 1px solid #27272a;
   border-radius: 0.25rem;
}

.disclaimer {
   font-size: 0.7rem;
   color: #a1a1aa;
   border-top: 1px solid #27272a;
   border-bottom: 1px solid #27272a;
   padding: 0.5rem 0;
   margin-bottom: 2rem;
}

/* ── Summary table ── */
table {
   width: 100%;
   border-collapse: separate;
   border-spacing: 0;
   margin-bottom: 2.5rem;
   font-size: 0.78rem;
   border: 1px solid #27272a;
   border-radius: 0.5rem;
   overflow: hidden;
}

thead {
   background: #18181b;
}

thead th {
   text-align: left;
   font-weight: 600;
   font-size: 0.68rem;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: #a1a1aa;
   border-bottom: 1px solid #27272a;
   padding: 0.75rem 0.75rem;
}

tbody td {
   padding: 0.65rem 0.75rem;
   border-bottom: 1px solid #27272a;
   vertical-align: middle;
   color: #f4f4f5;
}

tbody tr:last-child td {
   border-bottom: none;
}

tbody tr:hover {
   background: rgba(39, 39, 42, 0.5);
}

td.state {
   vertical-align: middle;
}

td.date {
   white-space: nowrap;
   color: #a1a1aa;
}

/* ── State badges ── */
/* State badge base styles */
.state-badge {
   padding: 0.2rem 0.5rem;
   border-radius: 0.25rem;
   display: inline-block;
   font-weight: 600;
   letter-spacing: 0.04em;
}

.state-low {
   background: #022c22;
   color: #10b981;
   border: 1px solid #064e3b;
}

.state-rising {
   background: #292524;
   color: #d6a96c;
   border: 1px solid #44403c;
}

.state-elevated {
   background: #431407;
   color: #f97316;
   border: 1px solid #7c2d12;
}

.state-severe {
   background: #4c0519;
   color: #f43f5e;
   border: 1px solid #881337;
}

.state-high {
   background: #431407;
   color: #f97316;
   border: 1px solid #7c2d12;
}

.state-confident {
   background: #022c22;
   color: #10b981;
   border: 1px solid #064e3b;
}

.state-stable {
   background: #172554;
   color: #60a5fa;
   border: 1px solid #1e3a8a;
}

.state-neutral {
   background: #27272a;
   color: #a1a1aa;
   border: 1px solid #3f3f46;
}

.rare-note {
   font-size: 0.7rem;
   color: #71717a;
   margin-bottom: 2rem;
}

/* ── Detail blocks ── */
.details {
   margin-bottom: 3rem;
}

.signal-detail {
   border: 1px solid #27272a;
   background: #18181b;
   padding: 1.2rem 1.4rem;
   margin-bottom: 1rem;
   border-radius: 0.5rem;
}

.signal-detail h2 {
   font-size: 0.82rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.06em;
   color: #f4f4f5;
   margin-bottom: 0.8rem;
   padding-bottom: 0.4rem;
   border-bottom: 1px solid #27272a;
}

.field {
   margin-bottom: 0.6rem;
   font-size: 0.76rem;
}

.field:last-child {
   margin-bottom: 0;
}

.field-label {
   font-weight: 600;
   color: #a1a1aa;
   display: block;
   font-size: 0.68rem;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   margin-bottom: 0.1rem;
}

.field-value {
   color: #f4f4f5;
   display: block;
}

/* State badges in detail cards */
.field-value.state-badge {
   display: inline-block;
   margin-top: 0.2rem;
}

/* ── Footer ── */
footer {
   border-top: 1px solid #27272a;
   padding-top: 1rem;
   margin-top: 2rem;
}

.footer-main {
   font-size: 0.65rem;
   color: #a1a1aa;
   line-height: 1.5;
   margin-bottom: 1rem;
}

.footer-main p {
   margin-bottom: 0.3rem;
}

.status-bar {
   font-size: 0.6rem;
   color: #71717a;
   text-transform: uppercase;
   letter-spacing: 0.05em;
   padding-top: 0.75rem;
   border-top: 1px solid #27272a;
}

/* ── Loading / error state ── */
.loading {
   font-size: 0.76rem;
   color: #a1a1aa;
   padding: 1rem 0;
}