:root{
  --bg:#0c0f14; --panel:#141922; --panel2:#1a2029; --line:#232b38;
  --txt:#dbe3ef; --dim:#8b98ad; --acc:#4c8dff; --ok:#3ecf8e; --bad:#ff6b81; --warn:#f0b34e;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important} /* 防 .demo/.panel 等 display 规则压过 hidden 属性 */
body{margin:0;background:radial-gradient(900px 400px at 50% -80px,#16233c 0%,var(--bg) 60%);color:var(--txt);
  font:15px/1.6 system-ui,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}
.shell{max-width:640px;margin:0 auto;padding:28px 18px 40px}
a{color:var(--acc)}
.mono{font-family:var(--mono)}
small{color:var(--dim)}

.head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.brand{display:flex;gap:10px;align-items:center}
.brand .dot{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--acc),#9a6bff)}
.brand b{display:block;font-size:17px}
.brand small{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.queue{font-size:12px;color:var(--dim);border:1px solid var(--line);padding:4px 10px;border-radius:999px}
.queue strong{color:var(--warn)}
.region-lock{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#10251f;border:1px solid #245b48;color:#b8f5d8;border-radius:var(--r);padding:10px 12px;margin:0 0 12px;font-size:13px}.region-lock span{color:#8ed0b3;font-size:12px;text-align:right}

.notice{display:flex;gap:8px;align-items:center;background:#241c10;border:1px solid #4a3a1a;color:#ffd9a0;
  padding:8px 12px;border-radius:var(--r);font-size:13px;margin-bottom:12px}
.ntag{flex:none;background:#4a3a1a;border-radius:6px;padding:1px 7px;font-size:11px}

.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.tabs button{flex:1;min-width:96px;background:var(--panel);border:1px solid var(--line);color:var(--dim);
  border-radius:10px;padding:9px 6px;cursor:pointer;font-size:14px}
.tabs button.on{background:#17233a;border-color:var(--acc);color:#cfe0ff}
.subtabs{display:flex;gap:6px;margin-bottom:12px}
.subtabs button{background:none;border:1px solid var(--line);color:var(--dim);border-radius:999px;padding:4px 14px;cursor:pointer;font-size:13px}
.subtabs button.on{border-color:var(--acc);color:var(--acc)}

.page{display:none}
.page.on{display:block;animation:fade .25s}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1}}

.steps{display:flex;gap:8px;list-style:none;padding:0;margin:0 0 16px}
.steps li{flex:1;display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;font-size:13px;color:var(--dim)}
.steps li i{font-style:normal;width:20px;height:20px;border-radius:50%;background:#232c3c;display:grid;place-items:center;font-size:12px}
.steps li.on{border-color:var(--acc);color:#cfe0ff}.steps li.on i{background:var(--acc);color:#06101f}
.steps li.done i{background:var(--ok);color:#06120b}

.panel{display:none}.panel.on{display:block;animation:fade .25s}
.lab{display:block;font-size:13px;color:var(--dim);margin:12px 0 6px}
input,textarea{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:10px;color:var(--txt);
  padding:11px 12px;font:inherit;font-family:var(--mono);font-size:13px;resize:vertical}
input:focus,textarea:focus{outline:none;border-color:var(--acc)}
button{font:inherit}
.primary{width:100%;margin-top:14px;background:var(--acc);border:0;color:#06101f;font-weight:700;
  border-radius:12px;padding:13px;cursor:pointer}
.primary:disabled{opacity:.45;cursor:wait}
.ghost{background:var(--panel);border:1px solid var(--line);color:var(--dim);border-radius:12px;padding:12px 18px;cursor:pointer}
.row{display:flex;gap:10px}.row .primary{flex:1}
.chip{background:#232c3c;border:1px solid var(--line);color:var(--txt);border-radius:999px;padding:3px 11px;font-size:12px;cursor:pointer}
.demo{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

.banner{border:1px solid #4a2731;background:#24141a;color:#ffd9df;border-radius:var(--r);padding:10px 14px;margin-bottom:14px}
.banner p{margin:2px 0}
.banner code{font-size:12px;color:#ffb3c0;word-break:break-all}

.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:6px 14px;margin:10px 0}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv span{color:var(--dim)}
.warn{font-size:12px;color:var(--dim);background:var(--panel);border:1px dashed var(--line);padding:8px 10px;border-radius:10px}
.hint{font-size:12px;color:var(--dim);text-align:center}

.bar{height:6px;border-radius:99px;background:#1b2431;overflow:hidden;margin:10px 0}
.bar i{display:block;height:100%;width:15%;border-radius:99px;background:linear-gradient(90deg,var(--acc),#9a6bff);transition:width .6s}
.pulse{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--acc);margin-right:6px;animation:pulse 1.2s infinite}
@keyframes pulse{50%{opacity:.25}}

.timeline{list-style:none;padding:0;margin:8px 0}
.timeline li{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13px}
.timeline li:last-child{border-bottom:0}
.timeline .tag{flex:none;font-size:11px;border-radius:6px;padding:1px 8px;background:#232c3c;color:var(--dim)}
.timeline li.succeeded .tag{background:#12331f;color:var(--ok)}
.timeline li.failed .tag{background:#3a1620;color:var(--bad)}
.timeline li.running .tag{background:#12233f;color:var(--acc)}
.timeline time{margin-left:auto;color:var(--dim);font-size:11px}

.result{margin-top:12px;border-radius:var(--r);border:1px solid #16402c;background:#0e2418;padding:14px;display:flex;gap:12px}
.result.bad{border-color:#4a2731;background:#24141a}
.result span{font-size:26px}
.result p{margin:2px 0;color:var(--dim);font-size:13px}

table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13px}
th,td{padding:7px 8px;border-bottom:1px dashed var(--line);text-align:left;vertical-align:top}
th{color:var(--dim);font-weight:500;font-size:12px}
.st{font-size:12px;border-radius:6px;padding:1px 8px}
.st.succeeded{background:#12331f;color:var(--ok)}
.st.failed{background:#3a1620;color:var(--bad)}
.st.submitted{background:#12233f;color:var(--acc)}
.st.unused{background:#232c3c;color:var(--dim)}

.newcode{background:#12233f;border:1px solid var(--acc);border-radius:10px;padding:12px;font-family:var(--mono);word-break:break-all;display:flex;justify-content:space-between;gap:10px;align-items:center}
pre.receipt{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px;font-size:12px;overflow:auto;white-space:pre-wrap}
.debug{margin-top:18px;color:var(--dim);font-size:12px}
.debug pre{background:#0a0d12;border:1px solid var(--line);border-radius:10px;padding:10px;max-height:280px;overflow:auto}
footer{margin-top:26px;color:#5b6679;font-size:11px;text-align:center}
@media(max-width:480px){.steps li span.lbl{display:none}.tabs button{min-width:0;font-size:12px}}

/* ── jz-activate 追加 ───────────────────────────────────────── */
.st.pending{background:#2a2312;color:var(--warn)}
.st.submitted{background:#12233f;color:var(--acc)}
.st.manual_review{background:#2b1c33;color:#c99bff}
.st.completed{background:#12331f;color:var(--ok)}
.st.failed{background:#3a1620;color:var(--bad)}
.st.none{background:#232c3c;color:var(--dim)}
.kv b{max-width:62%;text-align:right;word-break:break-all}
.newcode b{font-weight:600}
.newcode button{flex:none}
.mini{background:none;border:1px dashed var(--line);color:var(--dim);border-radius:8px;padding:4px 10px;font-size:12px;cursor:pointer}
.mini:hover{border-color:var(--acc);color:var(--acc)}
.sec{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:14px}
.sec h3{margin:0 0 10px;font-size:15px}
.codes{background:#0a0d12;border:1px solid var(--line);border-radius:10px;padding:10px;font-family:var(--mono);font-size:12px;max-height:260px;overflow:auto;white-space:pre}
.row2{display:flex;gap:10px}.row2>*{flex:1}
.toolbar{display:flex;gap:10px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.grow{flex:1}
.cdkhint{font-size:12px;color:var(--warn);margin:8px 0 0}