@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

:root{
  --bg: #0b0f14;
  --panel: #10161d;
  --line: #1f2b36;
  --amber: #ffb020;
  --amber-dim: #8a6a2c;
  --up: #4fd68c;
  --down: #ff5f5f;
  --text: #d8e2ea;
  --dim: #5f7385;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Space Mono', monospace;
  min-height: 100vh;
}

.crt{ max-width: 720px; margin: 0 auto; padding: 2rem 1.25rem 1rem; }

.term-header{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.9rem;
  margin-bottom: 1.5rem;
}
.term-title{ color: var(--amber); font-weight: 700; letter-spacing: 0.05em; font-size: 1.15rem; }
.cursor{ animation: blink 1.1s step-end infinite; }
@keyframes blink{ 50%{ opacity: 0; } }
.term-clock{ color: var(--dim); font-size: 0.85rem; }

.watch-form{
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.1rem 1.25rem;
}
.pair-select{ display:flex; align-items:center; gap: 0.5rem; margin-bottom: 1rem; }
.pair-slash{ color: var(--dim); }
select, input{
  background: #0d1319;
  border: 1px solid var(--line);
  color: var(--text);
  padding: 0.5rem 0.6rem;
  border-radius: 3px;
  font-family: inherit;
  font-size: 0.9rem;
}
select:focus-visible, input:focus-visible, button:focus-visible{
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}
button{
  background: var(--amber);
  color: #211705;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 3px;
  font-family: inherit;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.03em;
}
button:hover:not(:disabled){ background: #ffc352; }
button:disabled{ opacity: 0.35; cursor: not-allowed; background: var(--amber-dim); color: #ccc; }

.alert-row{ display:flex; align-items:center; gap: 0.6rem; flex-wrap: wrap; }
.alert-row label{ font-size: 0.8rem; color: var(--dim); }
#threshold{ width: 110px; }

.status-line{ margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--dim); }
.status-line.error{ color: var(--down); }
.status-line.ok{ color: var(--up); }
.hidden{ display:none !important; }

.ticker-panel{
  margin-top: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem 1.4rem 1rem;
}
.rate-display{ display:flex; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem; flex-wrap: wrap; }
.rate-pair{ color: var(--dim); font-size: 0.95rem; }
.rate-value{ font-size: 2rem; font-weight: 700; color: var(--amber); }
.rate-delta{ font-size: 0.95rem; color: var(--up); }
.rate-delta.down{ color: var(--down); }

.spark{ width: 100%; height: auto; display:block; }
.spark-line{ fill:none; stroke: var(--amber); stroke-width: 1.5; }
.spark-caption{ font-size: 0.75rem; color: var(--dim); margin: 0.6rem 0 0; }

.log{
  list-style:none;
  margin: 1.25rem 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 0.4rem;
  max-height: 220px;
  overflow-y: auto;
}
.log li{
  font-size: 0.78rem;
  color: var(--dim);
  border-left: 2px solid var(--line);
  padding-left: 0.6rem;
}
.log li.alert{ color: var(--amber); border-left-color: var(--amber); font-weight: 700; }

.footer{
  text-align:center;
  padding: 2rem 1.25rem 3rem;
  color: var(--dim);
  font-size: 0.75rem;
  max-width: 720px;
  margin: 0 auto;
}
.footer a{ color: var(--amber); }

@media (max-width: 480px){
  .alert-row{ flex-direction: column; align-items: stretch; }
}