:root {
  --bg: #05080d;
  --bg-2: #0a1018;
  --card: #0d1622;
  --line: #18293b;
  --up: #16d67a;
  --down: #ff3b52;
  --flat: #9fb0c6;
  --text: #e8f1ff;
  --dim: #7f92aa;
  --gold: #ffcf4d;
  --font: 'VT323', "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: radial-gradient(circle at 50% -10%, var(--bg-2), var(--bg) 60%);
  color: var(--text);
  font-family: var(--font);
  min-height: 100vh;
  letter-spacing: 0.02em;
  padding-bottom: 3rem;
}

/* header */
.mhead {
  position: sticky; top: 0; z-index: 5;
  background: linear-gradient(180deg, #0c1826, #070d15);
  border-bottom: 2px solid var(--line);
  padding: 0.9rem 1rem 0.7rem;
  text-align: center;
}
.mbrand { font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; }
.mlogo { color: var(--up); }
.msub { color: var(--gold); font-size: 1.5rem; letter-spacing: 0.2em; margin-top: 0.1rem; }
.mstate {
  color: var(--dim); font-size: 1.15rem; letter-spacing: 0.1em; margin-top: 0.2rem;
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
}
.mdot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--up);
  box-shadow: 0 0 8px var(--up); animation: pulse 2s infinite; }
.mclock { color: var(--gold); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* crash banner */
.crash-banner {
  display: none;
  background: var(--down); color: #fff; text-align: center;
  font-size: 1.4rem; letter-spacing: 0.1em; padding: 0.6rem;
  animation: crashblink 1.1s steps(1) infinite;
}
body.is-crashed .crash-banner { display: block; }
@keyframes crashblink { 50% { opacity: 0.4; } }

/* menu */
#menu { max-width: 640px; margin: 0 auto; padding: 0.8rem; }
.mloading { text-align: center; color: var(--dim); padding: 3rem 1rem; letter-spacing: 0.25em; }

.cat { margin-bottom: 1.4rem; }
.cat > h2 {
  color: var(--gold); font-size: 1.7rem; font-weight: 700; letter-spacing: 0.14em;
  padding: 0.3rem 0.2rem; border-bottom: 2px solid var(--line); margin-bottom: 0.4rem;
}
.mitem {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  padding: 0.55rem 0.2rem; border-bottom: 1px solid rgba(24,41,59,0.6);
}
.mitem .mname { font-size: 1.7rem; line-height: 1.05; }
.mitem .mname .msym {
  font-size: 1.05rem; color: var(--dim); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 0.3rem; margin-right: 0.4rem; vertical-align: middle;
}
.mitem .minfo { display: block; font-size: 1.15rem; color: var(--dim); margin-top: 0.1rem; }
.mitem .mright { text-align: right; white-space: nowrap; }
.mitem .mprice { font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.mitem .mcur { font-size: 1.1rem; color: var(--dim); margin-right: 0.2rem; }
.mitem .mchg { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

.up { color: var(--up); } .down { color: var(--down); } .flat { color: var(--flat); }

.mfoot { text-align: center; color: var(--dim); font-size: 1.1rem; letter-spacing: 0.1em; padding: 1rem; }