/* 风格2：夜色霓虹 */
:root {
  --bg0: #070b14;
  --bg1: #10182a;
  --panel: #141e33;
  --ink: #e8eefc;
  --muted: #8ea0c4;
  --cyan: #3ec7ff;
  --magenta: #ff4fd8;
  --lime: #7dffb3;
  --line: rgba(62, 199, 255, 0.22);
}

body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 70% 20%, rgba(255, 79, 216, 0.12), transparent 42%),
    radial-gradient(ellipse at 20% 70%, rgba(62, 199, 255, 0.1), transparent 45%),
    linear-gradient(180deg, #0c1220 0%, var(--bg0) 100%);
}

.safe-note { color: rgba(142, 160, 196, 0.35); letter-spacing: 0.35em; }

.work-zone {
  background: linear-gradient(180deg, rgba(20, 30, 51, 0.92), rgba(10, 16, 28, 0.96));
  border: 1px solid var(--line);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(255, 79, 216, 0.08),
    0 20px 50px rgba(0, 0, 0, 0.45);
  padding: 1.6vh 2vw 1.8vh;
}

.brand-mark {
  border-radius: 4px;
  color: var(--cyan);
  border: 1px solid rgba(62, 199, 255, 0.45);
  background: linear-gradient(145deg, #1a2744, #0d1424);
  box-shadow: 0 0 18px rgba(62, 199, 255, 0.25);
}

.brand h1 {
  color: #f4f8ff;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: clamp(18px, 3.8vw, 26px) !important;
  font-family: var(--sans) !important;
  font-weight: 700 !important;
}
.brand p { color: var(--muted); letter-spacing: 0.08em; }

.live-pill {
  border-radius: 4px;
  color: var(--ink);
  border: 1px solid rgba(255, 79, 216, 0.4);
  background: rgba(255, 79, 216, 0.08);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
}
.live-pill i {
  background: var(--magenta);
  box-shadow: 0 0 10px rgba(255, 79, 216, 0.9);
  animation: pulse2 1.2s ease-in-out infinite;
  border-radius: 1px;
}
@keyframes pulse2 {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.plotter {
  background: linear-gradient(180deg, #182338, #0e1524);
  border: 1px solid rgba(62, 199, 255, 0.18);
  border-radius: 4px;
}

.rail-end {
  border-radius: 2px;
  background: linear-gradient(180deg, var(--cyan), #1a7fa8);
  box-shadow: 0 0 10px rgba(62, 199, 255, 0.45);
}

.rail-beam {
  height: 4px;
  background: linear-gradient(90deg, rgba(62, 199, 255, 0.15), rgba(255, 79, 216, 0.35), rgba(62, 199, 255, 0.15));
  border-radius: 1px;
  box-shadow: 0 0 12px rgba(62, 199, 255, 0.2);
}

.carriage-body {
  border-radius: 3px;
  background: linear-gradient(180deg, #2a3b5c, #152033);
  border: 1px solid rgba(62, 199, 255, 0.45);
  box-shadow: 0 0 14px rgba(62, 199, 255, 0.3);
}

.pen {
  border-radius: 1px;
  background: linear-gradient(180deg, var(--magenta), #8a1a72);
  box-shadow: 0 0 8px rgba(255, 79, 216, 0.55);
}

.paper-roll {
  border-radius: 2px;
  background:
    linear-gradient(90deg, rgba(62, 199, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(62, 199, 255, 0.05) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(180deg, #0f1728, #0a101c);
  border: 1px solid rgba(62, 199, 255, 0.16);
  box-shadow: inset 0 0 30px rgba(62, 199, 255, 0.05);
}

.paper-head {
  color: var(--cyan);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-weight: 700;
  opacity: 0.7;
}

.rule {
  border-radius: 2px;
  background: rgba(62, 199, 255, 0.06);
  border: 1px solid rgba(62, 199, 255, 0.16);
}
.rule em { color: var(--muted); letter-spacing: 0.12em; text-transform: uppercase; font-size: 10px; }
.rule strong { color: var(--ink); font-family: var(--sans) !important; font-weight: 700; letter-spacing: 0.04em; }
.rule span {
  border-radius: 2px;
  color: var(--cyan);
  background: rgba(62, 199, 255, 0.12);
  border: 1px solid rgba(62, 199, 255, 0.2);
}

.result-ticker { color: var(--muted); letter-spacing: 0.12em; }

.card {
  border-radius: 2px;
  background: rgba(16, 24, 42, 0.92);
  border: 1px solid rgba(62, 199, 255, 0.22);
  box-shadow: 0 0 24px rgba(62, 199, 255, 0.08);
}
.card::before { background: var(--cyan); width: 3px; }
.card.gift::before { background: var(--magenta); }
.card.like::before { background: #ff9a4d; }
.card.enter::before { background: var(--lime); }
.card.sales::before { background: #6ea8ff; }

.card .avatar {
  border-radius: 2px;
  color: var(--cyan);
  background: #0d1526;
  border: 1px solid rgba(62, 199, 255, 0.35);
}
.card .badge {
  border-radius: 2px;
  color: var(--bg0);
  background: var(--cyan);
  font-weight: 700;
  letter-spacing: 0.1em;
}
.card.gift .badge { background: var(--magenta); color: #fff; }
.card.like .badge { background: #ff9a4d; color: #1a1008; }
.card.enter .badge { background: var(--lime); color: #07140e; }
.card.sales .badge { background: #6ea8ff; color: #081018; }
.card .nick {
  color: #f4f8ff;
  font-family: var(--sans) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.card .tip { color: var(--muted); }
.card .times { color: var(--magenta); }

.sales-banner {
  border-radius: 2px;
  background: rgba(12, 18, 32, 0.95);
  border: 1px solid rgba(110, 168, 255, 0.35);
  box-shadow: 0 0 30px rgba(110, 168, 255, 0.15);
}
.sales-tag {
  border-radius: 2px;
  color: #081018;
  background: #6ea8ff;
  font-weight: 800;
  letter-spacing: 0.18em;
}
.sales-text {
  color: var(--ink);
  font-family: var(--sans) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.queue-hint { color: var(--muted); letter-spacing: 0.08em; }

.particles span {
  width: 3px;
  height: 3px;
  border-radius: 0;
  background: rgba(62, 199, 255, 0.7);
  box-shadow: 0 0 6px rgba(62, 199, 255, 0.6);
}