/* 风格3：素纸青瓷 */
:root {
  --ink: #243028;
  --paper: #f7f4ee;
  --panel: #eef3ef;
  --jade: #3d8b74;
  --jade-deep: #2a6a58;
  --rose: #c45c6a;
  --amber: #c4893a;
  --muted: #6d7a72;
  --line: rgba(61, 139, 116, 0.18);
}

body {
  color: var(--ink);
  background:
    radial-gradient(ellipse at 50% 0%, #ffffff 0%, transparent 50%),
    linear-gradient(180deg, #d9e4dc 0%, #b7c8be 45%, #8fa89a 100%);
}

.safe-note { color: rgba(36, 48, 40, 0.28); }

.work-zone {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(247, 244, 238, 0.9));
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 28px;
  box-shadow:
    0 24px 48px rgba(42, 106, 88, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 1.8vh 2.2vw 2vh;
}

.brand-mark {
  border-radius: 16px;
  color: var(--jade-deep);
  border: 1px solid rgba(61, 139, 116, 0.28);
  background: linear-gradient(145deg, #ffffff, #e5efe9);
}

.brand h1 {
  color: var(--ink);
  letter-spacing: 0.14em;
}
.brand p { color: var(--muted); }

.live-pill {
  border-radius: 999px;
  color: var(--jade-deep);
  border: 1px solid rgba(61, 139, 116, 0.28);
  background: rgba(61, 139, 116, 0.08);
  font-weight: 600;
}
.live-pill i {
  background: var(--jade);
  box-shadow: 0 0 0 4px rgba(61, 139, 116, 0.12);
  animation: pulse3 1.6s ease-in-out infinite;
}
@keyframes pulse3 {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.8); opacity: 0.55; }
}

.plotter {
  background: linear-gradient(180deg, #f3f7f4, #e4ece7);
  border: 1px solid rgba(61, 139, 116, 0.12);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.rail-end {
  background: radial-gradient(circle at 35% 35%, #7ec4ae, var(--jade-deep));
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 6px rgba(42, 106, 88, 0.2);
}

.rail-beam {
  background: linear-gradient(180deg, #c9dcd4, #9fbeb3);
  border-radius: 999px;
  border: 1px solid rgba(61, 139, 116, 0.16);
}

.carriage-body {
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff, #d7e8e0);
  border: 1px solid rgba(61, 139, 116, 0.25);
  box-shadow: 0 6px 14px rgba(42, 106, 88, 0.12);
}

.pen {
  border-radius: 3px;
  background: linear-gradient(180deg, #4a5a52, #1f2a24);
}

.paper-roll {
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(61, 139, 116, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(61, 139, 116, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(180deg, #ffffff, var(--paper));
  border: 1px solid rgba(61, 139, 116, 0.12);
  box-shadow: 0 10px 24px rgba(42, 106, 88, 0.08);
}

.paper-head { color: var(--muted); letter-spacing: 0.35em; }

.rule {
  border-radius: 14px;
  background: rgba(61, 139, 116, 0.06);
  border: 1px solid rgba(61, 139, 116, 0.1);
}
.rule em { color: var(--muted); }
.rule strong { color: var(--ink); }
.rule span {
  border-radius: 999px;
  color: var(--jade-deep);
  background: rgba(61, 139, 116, 0.12);
}

.result-ticker { color: var(--muted); }

.card {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(61, 139, 116, 0.12);
  box-shadow: 0 12px 28px rgba(42, 106, 88, 0.1);
}
.card::before { background: var(--jade); width: 5px; border-radius: 0 3px 3px 0; }
.card.gift::before { background: var(--rose); }
.card.like::before { background: var(--amber); }
.card.enter::before { background: #4d8fbf; }
.card.sales::before { background: #6b5cad; }

.card .avatar {
  color: var(--jade-deep);
  background: linear-gradient(145deg, #ffffff, #dceae4);
  border: 1px solid rgba(61, 139, 116, 0.16);
}
.card .badge {
  border-radius: 999px;
  color: var(--jade-deep);
  background: rgba(61, 139, 116, 0.12);
}
.card.gift .badge { color: #fff; background: var(--rose); }
.card.like .badge { color: #fff; background: var(--amber); }
.card.enter .badge { color: #fff; background: #4d8fbf; }
.card.sales .badge { color: #fff; background: #6b5cad; }
.card .nick { color: var(--ink); }
.card .tip { color: var(--muted); }
.card .times { color: var(--rose); }

.sales-banner {
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(107, 92, 173, 0.18);
  box-shadow: 0 16px 32px rgba(107, 92, 173, 0.12);
}
.sales-tag {
  border-radius: 999px;
  color: #fff;
  background: #6b5cad;
}
.sales-text { color: var(--ink); }
.queue-hint { color: var(--muted); }

.particles span {
  width: 4px;
  height: 4px;
  background: rgba(61, 139, 116, 0.35);
}