/* Tema dark portado do juice 1.0 (../juice/main.py). "Sem cara bonitinha" — sóbrio,
   feed legível, igual ao app desktop. Cores idênticas às tags do ScrolledText. */
:root {
  --bg: #1e1e1e;
  --card: #2d2d2d;
  --text: #ffffff;
  --analysis: #cfd8dc;
  --headline: #64b5f6;
  --source: #90a4ae;
  --link: #80cbc4;
  --negativo: #ff5252;
  --positivo: #4caf50;
  --neutro: #ffb74d;
  --market: #26a69a;
  --conn: #81c784;
  --conn-down: #ff5252;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.hidden { display: none !important; }

/* ---- barra de topo ---- */
.bar {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #181818;
  border-bottom: 1px solid #333;
  z-index: 10;
}
.brand { font-weight: bold; color: var(--headline); }
.brand-dim { color: var(--source); font-weight: normal; }
.status { color: var(--conn); font-size: 18px; line-height: 1; }
.status.down { color: var(--conn-down); }
.status-text { color: var(--source); font-size: 12px; font-style: italic; }
.spacer { flex: 1 1 auto; }
.ctrl { color: var(--analysis); font-size: 13px; display: inline-flex; align-items: center; gap: 5px; }
.ctrl input[type="number"] { width: 56px; background: var(--card); color: var(--text); border: 1px solid #444; border-radius: 4px; padding: 3px 5px; }
.ctrl-btn { background: var(--card); color: var(--text); border: 1px solid #555; border-radius: 4px; padding: 5px 10px; cursor: pointer; }
.ctrl-btn:hover { border-color: var(--conn); }
.ctrl-btn.done { color: var(--conn); border-color: var(--conn); }

/* ---- feed ---- */
.feed { padding: 8px 14px 40px; max-width: 900px; margin: 0 auto; }

.item {
  background: var(--card);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
  border-left: 4px solid transparent;
}
.item.s-negativo { border-left-color: var(--negativo); }
.item.s-positivo { border-left-color: var(--positivo); }
.item.s-neutro   { border-left-color: var(--neutro); }

.item .head { color: var(--headline); font-weight: bold; }
.item .src  { color: var(--source); font-size: 12px; font-style: italic; }
.item .resumo { margin: 6px 0; }
.item .analise { color: var(--analysis); margin: 6px 0; font-style: italic; }
.item .meta { font-weight: bold; font-size: 13px; }
.item.s-negativo .meta { color: var(--negativo); }
.item.s-positivo .meta { color: var(--positivo); }
.item.s-neutro   .meta { color: var(--neutro); }
.item a.link { color: var(--link); font-family: Consolas, monospace; font-size: 12px; text-decoration: underline; word-break: break-all; }
.item .market { color: var(--market); font-family: Consolas, monospace; font-size: 13px; font-weight: bold; margin-top: 6px; }

/* linha de cotação que chega depois (evento quote) e linha de conexão */
.market-line { color: var(--market); font-family: Consolas, monospace; font-size: 13px; font-weight: bold; margin: 8px 0; }
.conn-line { color: var(--source); font-size: 12px; font-style: italic; margin: 8px 0; }

/* ---- gate (tela de token) ---- */
.gate { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 50; }
.gate-box { background: var(--card); padding: 28px; border-radius: 8px; width: min(440px, 92vw); }
.gate-box h1 { color: var(--headline); margin: 0 0 6px; font-size: 20px; }
.gate-box p { color: var(--analysis); margin: 6px 0 14px; font-size: 13px; }
.gate-box input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid #444; border-radius: 4px; padding: 9px; margin-bottom: 10px; }
.gate-box button { width: 100%; background: var(--headline); color: #061018; border: none; border-radius: 4px; padding: 10px; font-weight: bold; cursor: pointer; }
.gate-error { color: var(--negativo) !important; min-height: 16px; }

/* ---- responsivo: celular ---- */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .bar { gap: 8px; padding: 8px 10px; }
  .status-text { width: 100%; order: 9; }
  .feed { padding: 6px 8px 40px; }
  .item { padding: 12px; }
}