/* Cockpit — minimalista cyberpunk monospace */
:root {
  --bg: #07090a;
  --bg2: #0b0f11;
  --panel: #0d1316;
  --line: #16302a;
  --line2: #1f4339;
  --fg: #b8ffe6;
  --fg-dim: #4f7e6e;
  --fg-mute: #2f5247;
  --cyan: #27e0d0;
  --green: #5cff9d;
  --amber: #ffcf5c;
  --magenta: #ff3d81;
  --red: #ff5c5c;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "DejaVu Sans Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: radial-gradient(1200px 600px at 70% -10%, #0c1a18 0%, var(--bg) 60%);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--cyan); color: #02110e; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--line2); }
::-webkit-scrollbar-track { background: transparent; }

/* ---- login ---- */
#login { position: fixed; inset: 0; display: grid; place-items: center; background: var(--bg); z-index: 50; }
#login .box { border: 1px solid var(--line2); padding: 28px 34px; min-width: 300px; }
#login h1 { margin: 0 0 4px; letter-spacing: 3px; font-weight: 600; color: var(--green); }
#login p { color: var(--fg-mute); margin: 0 0 18px; }
#login input { width: 100%; background: #060a0b; border: 1px solid var(--line2); color: var(--fg); font-family: var(--mono); padding: 10px; outline: none; margin-bottom: 8px; }
#login input:focus { border-color: var(--cyan); }
#login button { width: 100%; margin-top: 10px; background: var(--cyan); color: #02110e; border: 0; padding: 10px; font-family: var(--mono); font-weight: 700; letter-spacing: 1px; cursor: pointer; }
#login .err { color: var(--magenta); min-height: 16px; margin-top: 8px; }

/* ---- layout ---- */
#app { display: grid; grid-template-columns: 190px 1fr; min-height: 100vh; }
#app.hidden, #login.hidden { display: none; }
nav { border-right: 1px solid var(--line); padding: 16px 0; position: sticky; top: 0; height: 100vh; }
nav .brand { padding: 0 18px 16px; color: var(--green); letter-spacing: 2px; font-weight: 600; border-bottom: 1px solid var(--line); margin-bottom: 10px; }
nav .brand small { display: block; color: var(--fg-mute); letter-spacing: 1px; font-size: 10px; font-weight: 400; }
nav a { display: block; color: var(--fg-dim); padding: 8px 18px; border-left: 2px solid transparent; cursor: pointer; }
nav a:hover { color: var(--fg); text-decoration: none; background: var(--bg2); }
nav a.active { color: var(--green); border-left-color: var(--cyan); background: var(--panel); }
main { padding: 22px 26px; min-width: 0; }
.head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 18px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.head h2 { margin: 0; color: var(--cyan); letter-spacing: 2px; font-weight: 600; }
.head .sub { color: var(--fg-mute); }
.cursor::after { content: "_"; color: var(--cyan); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---- panels / grid ---- */
.grid { display: grid; gap: 14px; }
.kpis { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin-bottom: 16px; }
.kpi { border: 1px solid var(--line); padding: 14px; background: var(--panel); position: relative; }
.kpi .v { font-size: 26px; color: var(--green); font-weight: 600; }
.kpi .l { color: var(--fg-mute); letter-spacing: 1px; font-size: 11px; text-transform: uppercase; }
.kpi.alert .v { color: var(--magenta); }
.panel { border: 1px solid var(--line); background: var(--panel); padding: 14px 16px; margin-bottom: 14px; }
.panel h3 { margin: 0 0 10px; color: var(--fg-dim); letter-spacing: 1px; font-weight: 600; font-size: 11px; text-transform: uppercase; }
.two { grid-template-columns: 1fr 1fr; }

/* ---- bars (sentiment / cost) ---- */
.bar { display: flex; height: 22px; border: 1px solid var(--line2); overflow: hidden; margin: 6px 0; }
.bar span { display: block; height: 100%; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; color: var(--fg-dim); font-size: 11px; }
.legend i { display: inline-block; width: 9px; height: 9px; margin-right: 4px; vertical-align: middle; }

/* ---- tables / rows ---- */
.rows { display: flex; flex-direction: column; }
.row { display: grid; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.row:hover { background: var(--bg2); }
.row .t { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .meta { color: var(--fg-mute); font-size: 11px; white-space: nowrap; }
.tag { border: 1px solid var(--line2); color: var(--fg-dim); padding: 0 5px; font-size: 10px; white-space: nowrap; }
.imp3 { color: var(--magenta); border-color: var(--magenta); }
.imp2 { color: var(--amber); border-color: var(--amber); }
.brk { color: var(--magenta); font-weight: 700; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.muted { color: var(--fg-mute); }
pre.mem { white-space: pre-wrap; color: var(--fg); border: 1px solid var(--line); padding: 12px; background: #060a0b; margin: 0; }

/* ---- query box (W4 hook) ---- */
.qbox { display: flex; gap: 8px; margin-bottom: 14px; }
.qbox input { flex: 1; background: #060a0b; border: 1px solid var(--line2); color: var(--fg); font-family: var(--mono); padding: 9px; outline: none; }
.qbox input:focus { border-color: var(--cyan); }
.qbox button { background: var(--cyan); color: #02110e; border: 0; padding: 0 16px; font-family: var(--mono); font-weight: 700; cursor: pointer; }
.qbox button:disabled { opacity: 0.5; cursor: default; }
.fb { background: var(--line2); color: var(--fg); border: 1px solid var(--line2); padding: 3px 12px; font-family: var(--mono); cursor: pointer; }
.fb:hover { border-color: var(--cyan); }
.fb:disabled { opacity: 0.5; cursor: default; }

.loading { color: var(--fg-mute); padding: 20px 0; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  #app { grid-template-columns: 1fr; }
  nav { position: static; height: auto; display: flex; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px; gap: 2px; }
  nav .brand { width: 100%; border: 0; padding: 4px 10px 8px; margin: 0; }
  nav a { border-left: 0; border-bottom: 2px solid transparent; padding: 6px 10px; }
  nav a.active { border-left: 0; border-bottom-color: var(--cyan); }
  main { padding: 16px; }
  .row .meta.hide-sm { display: none; }
  .two { grid-template-columns: 1fr; }
}