/* MITAI 公开站共用设计令牌 */
:root {
  --bg:        #07111d;
  --panel:     rgba(8,18,32,0.88);
  --panel2:    rgba(12,24,42,0.94);
  --border:    rgba(148,186,224,0.13);
  --text:      #dde8f4;
  --muted:     #7b96b8;
  --accent:    #4cc9f0;
  --green:     #3ecf72;
  --red:       #f46060;
  --amber:     #ffa940;
  --gold:      #f5c842;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  font-size: 14px;
  color: var(--text);
  background:
    radial-gradient(ellipse at 0% 0%,   rgba(76,201,240,0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(245,200,66,0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 100%,rgba(62,207,114,0.07) 0%, transparent 50%),
    linear-gradient(180deg, #07111d 0%, #050d18 100%);
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

.mono { font-family: 'IBM Plex Mono', monospace; }
.green { color: var(--green); }
.red   { color: var(--red); }
.gold  { color: var(--gold); }
.muted { color: var(--muted); }
.accent{ color: var(--accent); }

/* ── NAV ── */
.nav {
  position: sticky; top: 0; z-index: 100;
  width: 100%;
  background: rgba(7,17,29,0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 0 32px; height: 58px; gap: 16px;
}
.nav-logo {
  width: 32px; height: 32px; border-radius: 8px;
  background: linear-gradient(135deg, var(--accent), #7c5af5);
  display: flex; align-items: center; justify-content: center;
  font-family: 'IBM Plex Serif', serif;
  font-size: 16px; font-weight: 700; color: #fff; flex-shrink: 0;
}
.nav-title {
  font-family: 'IBM Plex Serif', serif;
  font-size: 18px; font-weight: 700; letter-spacing: -0.02em;
}
.nav-subtitle { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; }

/* ── CARD ── */
.card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 22px;
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 64px rgba(0,0,0,0.4);
}

/* ── NAV ADMIN LINK ── */
.admin-link {
  font-size: 12px; color: var(--muted);
  padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 8px; text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.admin-link:hover { color: var(--accent); border-color: var(--accent); }

/* ── LIVE BADGE ── */
.live-badge {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; color: var(--green);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green); animation: pulse 2s infinite; flex-shrink: 0;
}
@keyframes pulse {
  0%,100%{ opacity:1; transform:scale(1); box-shadow:0 0 0 0 rgba(62,207,114,0.5); }
  50%    { opacity:0.8; transform:scale(1.15); box-shadow:0 0 0 5px rgba(62,207,114,0); }
}

/* ── TABLE ── */
.table-wrap { padding: 18px 0 4px; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
thead th {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
  padding: 0 16px 10px; text-align: left;
  border-bottom: 1px solid var(--border); white-space: nowrap;
}
thead th:first-child { padding-left: 28px; }
thead th:last-child  { padding-right: 28px; }
tbody tr {
  border-bottom: 1px solid rgba(148,186,224,0.06);
  transition: background 0.15s; cursor: pointer;
}
tbody tr:last-child { border-bottom: none; }
tbody tr:hover { background: rgba(76,201,240,0.04); }
tbody td { padding: 13px 16px; vertical-align: middle; white-space: nowrap; }
tbody td:first-child { padding-left: 28px; }
tbody td:last-child  { padding-right: 28px; }

/* ── RANK BADGE ── */
.rank {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-size: 12px; font-weight: 700; font-family: 'IBM Plex Mono', monospace;
}
.rank-1 { background: rgba(245,200,66,0.18); color: var(--gold); border: 1px solid rgba(245,200,66,0.3); }
.rank-2 { background: rgba(192,192,192,0.15); color: #c8d0dc; border: 1px solid rgba(200,208,220,0.25); }
.rank-3 { background: rgba(205,127,50,0.18); color: #e0a97a; border: 1px solid rgba(205,127,50,0.3); }
.rank-n { background: rgba(148,186,224,0.08); color: var(--muted); border: 1px solid var(--border); }

/* ── SIDE PILL ── */
.side-buy  { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em; padding:2px 8px; border-radius:6px; background:rgba(62,207,114,0.14); border:1px solid rgba(62,207,114,0.3); color:var(--green); }
.side-sell { display:inline-block; font-size:10px; font-weight:700; letter-spacing:.05em; padding:2px 8px; border-radius:6px; background:rgba(244,96,96,0.14); border:1px solid rgba(244,96,96,0.3); color:var(--red); }

/* ── SKELETON ── */
.skeleton {
  background: linear-gradient(90deg, var(--panel2) 25%, rgba(148,186,224,0.08) 50%, var(--panel2) 75%);
  background-size: 200% 100%; animation: shimmer 1.6s infinite;
  border-radius: 6px; height: 14px;
}
@keyframes shimmer { 0%{ background-position:200% 0; } 100%{ background-position:-200% 0; } }

/* ── EMPTY / ERROR ── */
.empty-state { padding: 40px 28px; text-align: center; color: var(--muted); font-size: 13px; }
.error-state { padding: 32px 28px; text-align: center; color: var(--red); font-size: 13px; }

/* ── RESPONSIVE ── */
@media (max-width: 640px) {
  .nav { padding: 0 16px; }
  .nav-subtitle { display: none; }
}