:root { --bg:#0f1420; --card:#1a2130; --line:#2a3446; --fg:#e7ecf3; --sub:#93a1b5; --acc:#3b82f6; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444; }
  * { box-sizing:border-box; }
  body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,"Segoe UI","Microsoft YaHei",sans-serif; line-height:1.5; }
  .wrap { max-width:720px; margin:0 auto; padding:20px 16px 60px; }
  .logo { text-align:center; margin:18px 0 22px; }
  .logo h1 { font-size:22px; margin:0 0 6px; letter-spacing:1px; }
  .logo p { margin:0; color:var(--sub); font-size:13px; }
  .card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px; margin-bottom:16px; }
  .step { display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; margin-bottom:14px; color:var(--sub); }
  .step .n { width:22px; height:22px; border-radius:50%; background:var(--acc); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; flex:0 0 auto; }
  .step.done .n { background:var(--ok); }
  label { display:block; font-size:13px; color:var(--sub); margin:10px 0 6px; }
  input, textarea { width:100%; background:#111725; border:1px solid var(--line); color:var(--fg); border-radius:9px; padding:11px 12px; font-size:15px; outline:none; font-family:inherit; }
  input:focus, textarea:focus { border-color:var(--acc); }
  textarea { resize:vertical; min-height:80px; }
  .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; background:var(--acc); color:#fff; border:none; border-radius:9px; padding:11px 18px; font-size:15px; font-weight:600; cursor:pointer; width:100%; margin-top:12px; }
  .btn:disabled { opacity:.5; cursor:not-allowed; }
  .btn.ghost { background:transparent; border:1px solid var(--line); color:var(--fg); }
  .btn.sm { width:auto; padding:7px 14px; font-size:13px; margin:0; }
  .row { display:flex; gap:10px; flex-wrap:wrap; }
  .row .btn { flex:1; width:auto; }
  .info { font-size:13px; color:var(--sub); margin-top:10px; }
  .badge { display:inline-block; background:#111725; border:1px solid var(--line); border-radius:6px; padding:2px 8px; margin:2px 4px 2px 0; font-size:12px; color:var(--fg); }
  .bar { height:8px; background:#111725; border-radius:6px; overflow:hidden; margin:12px 0 6px; }
  .bar i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--acc),var(--ok)); transition:width .4s; }
  .hidden { display:none !important; }
  .files { margin-top:8px; }
  .file { display:flex; align-items:center; gap:10px; padding:10px 0; border-top:1px solid var(--line); }
  .file .fi { flex:1; min-width:0; }
  .file .nm { font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .file .sz { font-size:12px; color:var(--sub); }
  .fdir { padding:11px 6px; font-size:14px; font-weight:700; color:#e8b93c; cursor:pointer; user-select:none; border-top:1px solid var(--line); }
  .fdir:hover { background:rgba(255,255,255,.03); }
  .fdir .arr { display:inline-block; width:16px; color:var(--sub); font-size:12px; }
  .fdir .cnt { font-weight:400; font-size:12px; color:var(--sub); margin-left:8px; }
  .fbody { padding-left:20px; }
  .file a.dl { background:var(--ok); color:#fff; text-decoration:none; padding:6px 14px; border-radius:8px; font-size:13px; font-weight:600; flex:0 0 auto; }
  .file a.cp { background:transparent; border:1px solid var(--line); color:var(--sub); }
  .msg { font-size:13px; margin-top:10px; padding:9px 12px; border-radius:8px; }
  .msg.err { background:rgba(239,68,68,.12); color:#fca5a5; border:1px solid rgba(239,68,68,.3); }
  .msg.ok { background:rgba(34,197,94,.12); color:#86efac; border:1px solid rgba(34,197,94,.3); }
  .tip { font-size:12px; color:var(--sub); margin-top:8px; }
  .spin { display:inline-block; width:14px; height:14px; border:2px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; animation:sp .8s linear infinite; }
  @keyframes sp { to { transform:rotate(360deg); } }
  @keyframes exePulse { 0%,100% { box-shadow:0 0 6px rgba(34,197,94,.35); } 50% { box-shadow:0 0 18px rgba(34,197,94,.85); } }
  .foot { text-align:center; color:var(--sub); font-size:12px; margin-top:24px; }
  .foot a { color:var(--acc); text-decoration:none; }
  .vipcard { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px 18px; margin-top:14px; }
  .vipcard .vbrand { display:flex; justify-content:space-between; align-items:center; font-size:16px; font-weight:600; letter-spacing:1px; color:#d4af37; }
  .vipcard .vcode { font-size:clamp(24px,7vw,32px); font-weight:700; letter-spacing:4px; color:#ffd700; margin:14px 0 16px; }
  .vipcard .vdiv { border-top:1px solid var(--line); margin-bottom:14px; }
  .vipcard .vmeta { display:flex; flex-wrap:wrap; gap:28px; }
  .vipcard .vmeta .k { font-size:12px; color:var(--sub); margin-bottom:4px; }
  .vipcard .vmeta .v { font-size:18px; font-weight:700; color:#fff; }
  .vipcard .vmeta .sub { font-size:12px; color:#ffd700; margin-top:3px; }

/* The original page layout is preserved; demo controls live outside the flow. */
body { padding-bottom:76px; }
.demo-tools { position:fixed; bottom:0; left:0; right:0; z-index:5; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:10px 16px calc(10px + env(safe-area-inset-bottom)); background:rgba(15,20,32,.96); border-top:1px solid var(--line); font-size:12px; backdrop-filter:blur(12px); }
.demo-label { color:var(--sub); }
.demo-tools button,.demo-tools a { border:1px solid var(--line); background:var(--card); color:var(--fg); border-radius:6px; padding:5px 9px; font:inherit; cursor:pointer; text-decoration:none; }
:focus-visible { outline:2px solid var(--acc); outline-offset:3px; }
@media(max-width:480px) { .demo-tools { gap:6px; } .demo-label { width:100%; text-align:center; } .file { gap:6px; flex-wrap:wrap; } .file .fi { min-width:100px; } .file a.dl { padding:6px 10px; } .vipcard { padding:18px 14px; } .vipcard .vcode { letter-spacing:2px; overflow-wrap:anywhere; } .row > div { min-width:0; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
@media(max-width:480px) {
  #resultBox > .row { display:grid; grid-template-columns:1fr 1fr; }
  #resultBox > .row .btn { white-space:nowrap; min-width:0; }
  #btnExe { grid-column:1 / -1; grid-row:2; }
}
.card code { overflow-wrap:anywhere; word-break:break-word; }
.card a:not(.btn):not(.dl) { color:var(--acc); }
.card summary { cursor:pointer; margin-top:14px; }
#currentDir { overflow-wrap:anywhere; }
#realFiles .file .btn { flex:0 0 auto; }

/* Highlight the card switch action. */
#cardInfo .btn { background:linear-gradient(135deg,#fbbf24,#f59e0b); color:#251800; border:1px solid #fcd34d; font-size:14px; font-weight:700; padding:9px 20px; margin-top:16px; box-shadow:0 4px 16px rgba(245,158,11,.28); transition:transform .2s ease,box-shadow .2s ease; }
#cardInfo .btn:hover, #cardInfo .btn:focus-visible { transform:scale(1.06); box-shadow:0 6px 24px rgba(245,158,11,.45); }
#cardInfo .btn:focus-visible { outline:2px solid #fff; outline-offset:3px; }
#cardInfo .btn:active { transform:scale(.97); }
@media(prefers-reduced-motion:reduce) { #cardInfo .btn { transition:none; } #cardInfo .btn:hover, #cardInfo .btn:focus-visible, #cardInfo .btn:active { transform:none; } }

/* Automatic card switch pulse. */
@keyframes cardSwitchPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.07); } }
#cardInfo .btn { animation:cardSwitchPulse 2s ease-in-out infinite; }
#cardInfo .btn:hover, #cardInfo .btn:focus-visible, #cardInfo .btn:active { animation:none; }
@media(prefers-reduced-motion:reduce) { #cardInfo .btn { animation:none; } }

/* Download all green glow. */
@keyframes downloadAllGlow { 0%,100% { box-shadow:0 0 8px rgba(34,197,94,.3),0 0 18px rgba(34,197,94,.15); } 50% { box-shadow:0 0 16px rgba(34,197,94,.65),0 0 32px rgba(34,197,94,.32); } }
#btnAllDl { animation:downloadAllGlow 2s ease-in-out infinite; transition:filter .2s ease; }
#btnAllDl:hover { filter:brightness(1.12); }
@media(prefers-reduced-motion:reduce) { #btnAllDl { animation:none; box-shadow:0 0 14px rgba(34,197,94,.4); } }

/* Agent recruitment banner. */
.card-actions { display:flex; align-items:center; gap:18px; margin-top:18px; }
#cardInfo .card-actions .btn { flex:0 0 auto; margin-top:0; }
.agent-banner { flex:1; min-width:0; overflow:hidden; border:1px solid rgba(192,132,252,.65); border-radius:12px; background:linear-gradient(120deg,#482174,#7c3aed); box-shadow:0 4px 22px rgba(139,92,246,.24); transition:box-shadow .25s ease,transform .25s ease; }
.agent-banner img { display:block; width:100%; height:52px; object-fit:fill; }
.agent-banner:hover { transform:translateY(-2px); box-shadow:0 6px 28px rgba(168,85,247,.4); }
@media(max-width:480px) { .card-actions { gap:12px; } .agent-banner img { height:52px; object-fit:fill; } }
@media(prefers-reduced-motion:reduce) { .agent-banner { transition:none; } .agent-banner:hover { transform:none; } }

/* Image-only compact banner with natural letter proportions. */
.agent-banner { height:54px; }
.agent-banner img { display:block; width:100%; height:52px; object-fit:cover; object-position:center 43%; }
.agent-banner::before, .agent-banner::after { content:none; }

/* Side Float Banners (Left & Right, Clean Border with Shimmer & Glow Effect, Centered Vertically) */
.side-banner {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  width: clamp(140px, 12vw, 185px);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
  animation: bannerGlow 3.5s ease-in-out infinite;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: block;
}
.side-banner::after {
  content: '';
  position: absolute;
  top: -60%;
  left: -130%;
  width: 75%;
  height: 220%;
  background: linear-gradient(
    105deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 25%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0.08) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  pointer-events: none;
  animation: bannerShine 3.5s ease-in-out infinite;
}
.side-banner:hover {
  transform: translateY(calc(-50% - 4px)) scale(1.02);
  box-shadow: 0 14px 42px rgba(0, 0, 0, 0.65), 0 0 28px rgba(236, 72, 153, 0.55);
}
.side-banner a {
  display: block;
  text-decoration: none;
  line-height: 0;
}
.side-banner img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
}
@keyframes bannerShine {
  0% {
    left: -140%;
  }
  32%, 100% {
    left: 200%;
  }
}
@keyframes bannerGlow {
  0%, 100% {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45), 0 0 10px rgba(236, 72, 153, 0.2);
  }
  50% {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55), 0 0 24px rgba(236, 72, 153, 0.48);
  }
}
.side-banner-left {
  left: max(14px, calc(50% - 370px - clamp(140px, 12vw, 185px) - 22px));
}
.side-banner-right {
  right: max(14px, calc(50% - 370px - clamp(140px, 12vw, 185px) - 22px));
}
@media (max-width: 1100px) {
  .side-banner {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .side-banner {
    transition: none;
    animation: none;
  }
  .side-banner::after {
    animation: none;
    display: none;
  }
  .side-banner:hover {
    transform: translateY(-50%);
  }
}

.dl-dialog { background:var(--card); border:1px solid var(--line); border-radius:14px; color:var(--fg); padding:22px; width:min(620px,calc(100vw - 32px)); max-height:88vh; overflow:auto; box-shadow:0 16px 48px rgba(0,0,0,0.7); }
.dl-dialog::backdrop { background:rgba(0,0,0,0.75); backdrop-filter:blur(4px); }