/* ============================================================
   SIGNAL — design tokens
   Paleta: consola tecnica oscura, no negro puro. Acento ambar
   ("senal") + cian frio para contraste secundario. Tipografia
   tecnica (Space Grotesk) + mono para datos (JetBrains Mono).
   ============================================================ */
:root{
  --bg: #14181F;
  --surface: #1C2129;
  --surface-2: #212832;
  --border: #2A303B;
  --border-soft: #232933;

  --text: #E8EAED;
  --text-dim: #8B93A1;
  --text-faint: #5B6270;

  --amber: #E8A33D;
  --amber-dim: #8A6428;
  --cyan: #4FC3D9;
  --cyan-dim: #2E6C78;

  --positive: #5FBF77;
  --negative: #E2665A;
  --neutral: #8B93A1;

  --radius: 10px;
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

*{ box-sizing: border-box; }

body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(232,163,61,0.06), transparent),
    radial-gradient(ellipse 700px 400px at 100% 10%, rgba(79,195,217,0.05), transparent);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  min-height: 100vh;
}

.mono{ font-family: var(--font-mono); }

/* subtle scanline signature — respects reduced motion */
.scanline{
  position: fixed; top:0; left:0; right:0; height:2px;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  opacity:0.5;
  animation: scan 6s linear infinite;
  pointer-events:none; z-index:50;
}
@keyframes scan{
  0%{ transform: translateY(0); opacity:0; }
  5%{ opacity:0.5; }
  95%{ opacity:0.5; }
  100%{ transform: translateY(100vh); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .scanline{ animation: none; display:none; }
}

/* ---------- topbar ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(28,33,41,0.6);
  backdrop-filter: blur(6px);
  position: sticky; top:0; z-index:10;
}
.topbar__brand{ display:flex; align-items:center; gap:12px; }
.topbar__mark{ font-size:22px; color: var(--amber); }
.topbar__title{
  font-family: var(--font-display); font-weight:700; font-size:18px;
  letter-spacing: 0.08em; color: var(--text);
}
.topbar__subtitle{ font-size:12px; color: var(--text-dim); }
.topbar__actions{ display:flex; align-items:center; gap:20px; }
.topbar__meta{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.label{ font-size:10px; text-transform:uppercase; letter-spacing:0.08em; color: var(--text-faint); }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 9px 16px; border-radius: 999px; border:1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font-family: var(--font-body); font-weight:600; font-size:13px;
  cursor:pointer; transition: border-color .15s, transform .1s;
}
.btn:hover{ border-color: var(--amber-dim); }
.btn:active{ transform: scale(0.97); }
.btn--primary .btn__dot{
  width:7px; height:7px; border-radius:50%; background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}
.btn:disabled{ opacity:0.5; cursor:not-allowed; }

/* ---------- layout ---------- */
.layout{ max-width: 1280px; margin: 0 auto; padding: 28px 32px 60px; display:flex; flex-direction:column; gap:24px; }

/* ---------- metric cards ---------- */
.metrics{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap:14px; }
.metric-card{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; position:relative; overflow:hidden;
}
.metric-card.is-self{ border-color: var(--amber-dim); }
.metric-card__name{ font-size:12px; color: var(--text-dim); margin-bottom:10px; display:flex; justify-content:space-between; align-items:center;}
.metric-card__value{ font-family: var(--font-mono); font-size:32px; font-weight:600; color: var(--text); }
.metric-card__value .unit{ font-size:16px; color: var(--text-faint); }
.metric-card__sub{ margin-top:8px; font-size:11px; color: var(--text-faint); display:flex; gap:12px; }
.sentiment-tag{ padding:2px 8px; border-radius:999px; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
.sentiment-tag--positive{ background: rgba(95,191,119,0.12); color: var(--positive); }
.sentiment-tag--negative{ background: rgba(226,102,90,0.12); color: var(--negative); }
.sentiment-tag--neutral{ background: rgba(139,147,161,0.12); color: var(--neutral); }

/* ---------- panels ---------- */
.panel{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 20px 22px;
}
.panel__head{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
.panel__head h2{ font-family: var(--font-display); font-size:15px; font-weight:600; margin:0; }
.panel__hint{ font-size:12px; color: var(--text-faint); margin:0; }

.two-col{ display:grid; grid-template-columns: 1fr 1fr; gap:20px; }
@media (max-width: 860px){ .two-col{ grid-template-columns: 1fr; } }

/* ---------- signal bars (signature element) ---------- */
.signal-grid{ display:flex; flex-direction:column; gap:18px; }
.signal-system{ display:flex; flex-direction:column; gap:8px; }
.signal-system__label{
  font-family: var(--font-mono); font-size:11px; color: var(--text-dim);
  text-transform:uppercase; letter-spacing:0.08em; display:flex; align-items:center; gap:8px;
}
.signal-system__label .sys-dot{ width:6px; height:6px; border-radius:50%; background: var(--cyan); }
.signal-row{ display:flex; align-items:center; gap:12px; }
.signal-row__name{ width:170px; flex-shrink:0; font-size:12px; color: var(--text-dim); text-align:right; }
.signal-row__track{
  flex:1; height:14px; background: var(--surface-2); border-radius:4px; overflow:hidden;
  border:1px solid var(--border-soft); position:relative;
}
.signal-row__fill{
  height:100%; border-radius:3px;
  background: linear-gradient(90deg, var(--cyan-dim), var(--cyan));
  transition: width .6s cubic-bezier(.2,.8,.2,1);
  position:relative;
}
.signal-row.is-self .signal-row__fill{ background: linear-gradient(90deg, var(--amber-dim), var(--amber)); }
.signal-row__pct{ width:44px; flex-shrink:0; font-family: var(--font-mono); font-size:12px; color: var(--text-dim); text-align:right; }

/* ---------- filters / selects ---------- */
.filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.select{
  background: var(--surface-2); border:1px solid var(--border); color: var(--text);
  border-radius:6px; padding:7px 10px; font-family: var(--font-body); font-size:12px;
}
.checkbox{ display:flex; align-items:center; gap:6px; font-size:12px; color: var(--text-dim); }

/* ---------- mentions table ---------- */
.mentions-table{ display:flex; flex-direction:column; gap:1px; background: var(--border-soft); border-radius:8px; overflow:hidden; }
.mention-row{
  background: var(--surface); padding:12px 14px; display:grid;
  grid-template-columns: 90px 130px 1fr 90px 90px; gap:14px; align-items:start;
  font-size:12.5px;
}
.mention-row__head{ background: var(--surface-2); font-size:10px; text-transform:uppercase; letter-spacing:0.06em; color: var(--text-faint); padding:10px 14px; }
.mention-row .system-badge{
  font-family: var(--font-mono); font-size:10px; text-transform:uppercase; color: var(--cyan);
  background: rgba(79,195,217,0.1); border-radius:4px; padding:3px 6px; width:fit-content; height:fit-content;
}
.mention-row .competitor-name{ font-weight:600; color: var(--text); }
.mention-row .prompt-text{ color: var(--text-dim); font-size:11.5px; margin-top:2px; }
.mention-row .summary-text{ color: var(--text-dim); }
.mention-row .empty-state{ grid-column: 1 / -1; text-align:center; color: var(--text-faint); padding: 30px 0; }

/* ---------- footer ---------- */
.footer{
  display:flex; justify-content:space-between; padding: 20px 32px; color: var(--text-faint); font-size:11px;
  border-top:1px solid var(--border);
}