:root {
  color-scheme: light;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background: #f6f4fb;
  color: #171329;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at top right, #e9ddff 0, transparent 34%), #f7f5fa; }
button { font: inherit; }
.shell { width: min(760px, 100%); margin: 0 auto; padding: 24px 16px 60px; }
.hero { padding: 20px 4px 10px; }
.eyebrow { color: #7140d8; font-size: 12px; font-weight: 800; letter-spacing: .14em; margin: 0 0 8px; }
h1 { margin: 0; font-size: clamp(30px, 8vw, 50px); letter-spacing: -.05em; }
.subtitle { color: #6c657a; margin: 10px 0 16px; line-height: 1.7; }
.summary { display: inline-flex; gap: 7px; flex-wrap: wrap; padding: 10px 14px; background: #fff; border: 1px solid #ebe5f4; border-radius: 999px; box-shadow: 0 8px 24px #3d24600d; }
.summary strong { color: #6330cf; }
.promotion-panel { margin: 14px 0 18px; padding: 18px; border: 1px solid #e3d9f0; border-radius: 22px; background: #fff; box-shadow: 0 14px 40px #3d24600b; }
.promotion-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.promotion-heading .eyebrow { margin-bottom: 5px; }
.promotion-heading h2 { margin: 0; font-size: 23px; }
.promotion-heading p:not(.eyebrow) { margin: 7px 0 0; color: #766d82; font-size: 13px; line-height: 1.6; }
.job-badge { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; color: #6330cf; background: #f1ebff; font-size: 12px; font-weight: 700; }
.job-badge[data-status="running"] { color: #8a5700; background: #fff2d2; }
.job-badge[data-status="completed"] { color: #197448; background: #e9f8f0; }
.job-badge[data-status="stopped"] { color: #a32935; background: #fff0f0; }
.promotion-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0 10px; }
.promotion-metrics div { min-width: 0; padding: 12px 10px; border-radius: 14px; background: #f8f6fa; }
.promotion-metrics span { display: block; color: #82788d; font-size: 12px; }
.promotion-metrics strong { display: block; margin-top: 6px; overflow-wrap: anywhere; color: #3e217c; font-size: 17px; }
.promotion-freshness { margin: 8px 0 13px; color: #81768e; font-size: 12px; }
.promotion-actions { display: flex; gap: 9px; }
.promotion-actions button { flex: 1; border: 1px solid #dfd7eb; border-radius: 12px; padding: 12px; background: #fff; color: #4d3b68; }
.promotion-actions .primary { border-color: #7140d8; background: #7140d8; color: #fff; font-weight: 700; }
.promotion-actions .danger { border-color: #efb7be; color: #b52a39; }
.promotion-progress { margin-top: 15px; }
.progress-copy { display: flex; justify-content: space-between; gap: 12px; color: #6f657b; font-size: 12px; }
.progress-copy strong { color: #272035; }
.progress-track { height: 8px; margin: 9px 0 11px; overflow: hidden; border-radius: 999px; background: #eee9f3; }
.progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7140d8, #9b6bf2); transition: width .25s ease; }
.promotion-log { max-height: 220px; overflow-y: auto; border: 1px solid #eee7f4; border-radius: 13px; }
.promotion-log-row { display: grid; grid-template-columns: minmax(88px, .7fr) 1.3fr; gap: 10px; padding: 9px 10px; border-bottom: 1px solid #f1ecf5; font-size: 12px; }
.promotion-log-row:last-child { border-bottom: 0; }
.promotion-log-row strong { color: #332744; }
.promotion-log-row span { color: #83798f; }
.promotion-log-row[data-status="running"] { background: #fff8e8; }
.promotion-log-row[data-status="success"] { background: #f2fbf6; }
.promotion-log-row[data-status="failed"] { background: #fff2f2; }
.promotion-log-row[data-status="failed"] span { color: #a32935; }
.toolbar { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; padding: 12px 0; background: #f7f5fae8; backdrop-filter: blur(12px); }
.toolbar button, .actions button, .access-panel button { border: 1px solid #dfd7eb; border-radius: 12px; background: #fff; padding: 11px 14px; color: #4d3b68; }
.toolbar .active, .actions .refresh { border-color: #7140d8; background: #7140d8; color: #fff; font-weight: 700; }
.icon-button { margin-left: auto; }
button:disabled { opacity: .55; }
.access-panel { margin: 5px 0 14px; padding: 16px; border-radius: 18px; background: #171329; color: #fff; }
.access-panel p { overflow-wrap: anywhere; color: #d8c9f7; font-size: 13px; }
.access-panel button { border: 0; color: #402071; font-weight: 700; }
.access-panel small { display: block; margin-top: 10px; color: #aaa0b8; }
.access-panel .remote-hint { color: #fff; font-size: 13px; margin: 8px 0; }
.message { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 20; width: min(92vw, 600px); padding: 14px 16px; border-radius: 14px; box-shadow: 0 12px 40px #17132933; }
.message.success { background: #e7f8ef; color: #12623b; }
.message.error { background: #fff0f0; color: #a32935; }
.hidden { display: none !important; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); gap: 14px; }
.card { overflow: hidden; border: 1px solid #e7dfef; border-radius: 22px; background: #fff; padding: 17px; box-shadow: 0 14px 40px #3d24600b; }
.card[data-status="qr-expired"], .card[data-status="needs-qr"] { border-color: #efb7be; }
.card[data-status="logged-in-live"] { border-color: #a9dfc2; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.card h2 { font-size: 20px; margin: 0; }
.alias, .updated { color: #83798f; font-size: 12px; margin: 5px 0 0; }
.badge { flex: 0 0 auto; max-width: 145px; padding: 6px 9px; border-radius: 999px; background: #f1ebff; color: #6330cf; font-size: 12px; text-align: center; }
[data-status="qr-expired"] .badge, [data-status="needs-qr"] .badge { color: #b52a39; background: #fff0f2; }
[data-status="logged-in-live"] .badge { color: #197448; background: #e9f8f0; }
.qr-wrap { position: relative; display: grid; place-items: center; min-height: 270px; margin: 14px 0 8px; border-radius: 17px; background: #f8f6fa; overflow: hidden; }
.qr { width: 100%; height: auto; display: block; }
.qr-placeholder { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; white-space: pre-line; text-align: center; color: #8b8196; background: #f8f6fae8; font-size: 17px; font-weight: 700; }
.qr-placeholder[hidden] { display: none; }
.actions { display: flex; gap: 9px; margin-top: 14px; }
.actions button { flex: 1; }
.empty { grid-column: 1 / -1; padding: 70px 20px; text-align: center; color: #81768e; border: 1px dashed #d9cfe5; border-radius: 20px; }
@media (max-width: 430px) {
  .shell { padding-inline: 12px; }
  .toolbar { overflow-x: auto; }
  .toolbar button { white-space: nowrap; }
  .qr-wrap { min-height: 245px; }
  .promotion-panel { padding: 15px; }
  .promotion-heading { align-items: flex-start; }
  .promotion-metrics strong { font-size: 15px; }
  .promotion-log-row { grid-template-columns: 1fr; gap: 3px; }
}