* { box-sizing: border-box; margin: 0; }
:root { --accent: #0A84FF; }
body { background: #1e1e1e; color: #e8e8e8; font: 14px/1.6 "Microsoft YaHei", sans-serif; }
header { padding: 18px 24px 8px; }
h1 { font-size: 20px; color: #0A84FF; }
.tip { color: #d8a545; font-size: 13px; margin-top: 4px; }

.tabs { display: flex; gap: 8px; align-items: center; padding: 10px 24px; border-bottom: 1px solid #333; }
.ptype { display: flex; gap: 14px; margin-right: 14px; padding-right: 14px; border-right: 1px solid #3a3a3a; }
.ptype label { display: flex; align-items: center; gap: 5px; color: #ccc; cursor: pointer; margin: 0; }
.ptype input { accent-color: #0A84FF; }
.tab.dim { opacity: .35; cursor: not-allowed; }
.sz { font-style: normal; color: #666; font-size: 12px; margin-left: auto; flex-shrink: 0; }
.over { color: #ff6b6b !important; }
.note { color: #a08547; font-size: 12px; padding: 2px 0 6px; line-height: 1.5; }
.tab { background: #2c2c2c; border: 1px solid #3a3a3a; color: #ccc; padding: 8px 18px; border-radius: 6px; cursor: pointer; }
.tab.active { background: #0A84FF; color: #fff; border-color: #0A84FF; }
.spacer { flex: 1; }
.badge { color: #0A84FF; font-weight: bold; }

.panel { display: none; padding: 16px 24px 90px; }
.panel.active { display: block; }

/* ====== 插件页 ====== */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
#searchBox { flex: 1; min-width: 220px; background: #2c2c2c; border: 1px solid #3a3a3a; color: #eee; padding: 8px 12px; border-radius: 6px; }
.letters button { background: #2c2c2c; border: 1px solid #3a3a3a; color: #aaa; padding: 6px 12px; margin-right: 6px; border-radius: 5px; cursor: pointer; }
.letters button.on { background: #0A84FF; color: #fff; border-color: #0A84FF; }
.plugin-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.plist-head { color: #888; font-size: 13px; margin-bottom: 6px; }
.plist { list-style: none; background: #262626; border: 1px solid #333; border-radius: 8px; height: 62vh; overflow-y: auto; padding: 6px; }
.plist li { padding: 7px 10px; border-radius: 5px; cursor: pointer; display: flex; justify-content: space-between; }
.plist li:hover { background: #333; }
.plist li.on { background: rgba(10,132,255,.18); color: #5cb0ff; }
.plist.sel li b { color: #ff6b6b; cursor: pointer; }

/* ====== 设计页两栏 ====== */
.design-cols { display: grid; grid-template-columns: minmax(360px,46%) 1fr; gap: 18px; align-items: start; }
.subtabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.subtab { background: #2c2c2c; border: 1px solid #3a3a3a; color: #aaa; padding: 6px 14px; border-radius: 6px; cursor: pointer; }
.subtab.on { background: #0A84FF; color: #fff; border-color: #0A84FF; }
.sub { display: none; background: #262626; border: 1px solid #333; border-radius: 10px; padding: 14px 16px; }
.sub.on { display: block; }
.grp { color: #0A84FF; font-weight: bold; margin: 14px 0 4px; }
.grp:first-child { margin-top: 0; }
label { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0; color: #bbb; }
label.row { justify-content: flex-start; }
input[type=text], input[type=password], input:not([type]), select {
  background: #1e1e1e; border: 1px solid #3a3a3a; color: #eee; padding: 6px 10px; border-radius: 6px; width: 62%; }
input[type=color] { width: 52px; height: 30px; border: 1px solid #3a3a3a; border-radius: 6px; background: none; padding: 2px; }
input[type=range] { width: 55%; accent-color: #0A84FF; }
.rv { min-width: 30px; text-align: right; color: #5cb0ff; }
input[type=checkbox] { accent-color: #0A84FF; width: 16px; height: 16px; }
.mat-row { border-top: 1px dashed #333; padding-top: 8px; margin-top: 8px; }
.mat-row > label { color: #888; }
.mat-lib { width: 45%; }
.mat-up { font-size: 12px; color: #999; width: 100%; margin: 4px 0; }
.mat-pv { display: none; max-width: 160px; max-height: 90px; border-radius: 6px; border: 1px solid #3a3a3a; margin-top: 4px; }

/* ====== 预览区 ====== */
.preview-side { position: sticky; top: 10px; }
.pv-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; color: #888; }
.pv-scr { background: #2c2c2c; border: 1px solid #3a3a3a; color: #aaa; padding: 4px 12px; margin-left: 6px; border-radius: 5px; cursor: pointer; }
.pv-scr.on { background: #0A84FF; color: #fff; border-color: #0A84FF; }
.pv-stage { background: repeating-conic-gradient(#222 0 25%, #1b1b1b 0 50%) 0 0/24px 24px;
  border: 1px solid #333; border-radius: 10px; min-height: 70vh; display: flex; align-items: center; justify-content: center; overflow: auto; padding: 20px; }

/* 假安装器窗口 */
.pv-win { position: relative; background: #2b2b2b; overflow: hidden; transform-origin: center; }
.pv-winbtns { position: absolute; top: 9px; right: 10px; display: flex; gap: 7px; z-index: 3; }
.pv-winbtns i { font-style: normal; font-size: 11px; color: #ccc; width: 12px; height: 12px; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
.pv-winbtns.mac i { border-radius: 50%; }
.pv-winbtns.mac i:nth-child(1){background:#ff5f57}.pv-winbtns.mac i:nth-child(2){background:#febc2e}.pv-winbtns.mac i:nth-child(3){background:#28c840}
.pv-winbtns.win { display: none; gap: 14px; font-size: 12px; }
.pv-win.btns-win .pv-winbtns.mac { display: none; }
.pv-win.btns-win .pv-winbtns.win { display: flex; }

.pv-body { position: absolute; inset: 0; }
.pv-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
.pv-topleft { position: absolute; top: 14px; left: 16px; z-index: 2; }
.pv-softname { position: absolute; top: 30%; left: 0; right: 0; text-align: center; z-index: 2; font-weight: bold; text-shadow: 0 2px 8px rgba(0,0,0,.6); }
.pv-contact { position: absolute; bottom: 96px; left: 0; right: 0; text-align: center; z-index: 2; }
.pv-bottom { position: absolute; left: 0; right: 0; bottom: 18px; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; }

.pv-pwd { display: none; position: absolute; top: 52%; left: 0; right: 0; text-align: center; z-index: 2; }
.pv-pwd input { width: 60%; padding: 9px 14px; border-radius: 8px; font-size: 13px; }
.pv-pwd.pwd0 input { border: 2px solid var(--accent); background: rgba(0,0,0,.5); color: #fff; }
.pv-pwd.pwd1 input { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.12); backdrop-filter: blur(6px); color: #fff; }
.pv-pwd.pwd2 input { border: 0; border-bottom: 2px solid var(--accent); border-radius: 0; background: transparent; color: #fff; }
.pv-pwd.pwd3 input { border: 0; background: rgba(255,255,255,.85); color: #333; }
.pv-pwd.pwd4 input { border: 0; background: transparent; color: #fff; border-bottom: 1px dashed #888; border-radius: 0; }
.pv-pwd.pwd5 input { border: 0; background: linear-gradient(135deg,#ffdde1,#ee9ca7); color: #6b2d3b; box-shadow: 0 4px 14px rgba(238,156,167,.5); }
#pvPwdHint { font-size: 11px; color: #aaa; margin-top: 5px; }

/* 10种按钮 */
#pvBtn { padding: 9px 34px; border: 0; cursor: pointer; border-radius: 8px; background: var(--accent); transition: .2s; }
#pvBtn.btn0 { border-radius: 8px; background: var(--accent); }
#pvBtn.btn1 { border-radius: 0; background: var(--accent); }
#pvBtn.btn2 { background: transparent; border: 1.5px solid var(--accent); color: var(--accent) !important; border-radius: 6px; }
#pvBtn.btn3 { border-radius: 0; background: transparent; border-bottom: 3px solid var(--accent); padding-bottom: 6px; }
#pvBtn.btn4 { background: rgba(255,255,255,.18); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.3); border-radius: 10px; }
#pvBtn.btn5 { background: var(--accent); border-radius: 8px; box-shadow: 0 0 14px var(--accent), 0 0 34px var(--accent); }
#pvBtn.btn6 { background: linear-gradient(110deg, var(--accent) 40%, #fff 50%, var(--accent) 60%); background-size: 220% 100%; animation: sweep 2.2s linear infinite; border-radius: 8px; }
#pvBtn.btn7 { background: var(--accent); border-radius: 8px; animation: breathe 1.8s ease-in-out infinite; }
#pvBtn.btn8 { background: var(--accent); border-radius: 8px; box-shadow: 0 0 8px 2px rgba(255,255,255,.35) inset, 0 0 20px var(--accent); }
#pvBtn.btn9 { background: #222; border-radius: 8px; border: 2px solid transparent;
  background-image: linear-gradient(#222,#222), linear-gradient(90deg,var(--accent),#fff,var(--accent));
  background-origin: border-box; background-clip: padding-box, border-box; background-size: 100% 100%, 300% 100%;
  animation: borderflow 2.4s linear infinite; }
@keyframes sweep { to { background-position: -220% 0; } }
@keyframes breathe { 0%,100%{box-shadow:0 0 6px var(--accent)} 50%{box-shadow:0 0 22px var(--accent)} }
@keyframes borderflow { to { background-position: 0 0, 300% 0; } }

/* 6种进度条 */
.pv-prog { display: none; width: 78%; }
.pv-progbar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.12); overflow: hidden; }
#pvProgFill { height: 100%; width: 45%; background: linear-gradient(90deg,var(--p1),var(--p2)); border-radius: 6px; }
.pv-progtxt { display: flex; justify-content: space-between; font-size: 11px; color: #bbb; margin-top: 5px; }
.pv-prog.prog1 .pv-progbar { height: 12px; background: repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 18px,transparent 18px 20px); }
.pv-prog.prog1 #pvProgFill { background: repeating-linear-gradient(90deg,var(--p1) 0 18px,var(--p2) 18px 20px); }
.pv-prog.prog2 .pv-progbar { height: 3px; border-radius: 2px; }
.pv-prog.prog2 #pvProgFill { box-shadow: 0 0 8px var(--p2); }
.pv-prog.prog3 #pvProgFill { background: linear-gradient(90deg,var(--p1),#fff,var(--p2)); background-size: 200% 100%; animation: sweep 1.6s linear infinite; }
.pv-prog.prog4 .pv-progbar { display: none; }
.pv-prog.prog4::before { content: ''; display: block; width: 46px; height: 46px; margin: 0 auto;
  border-radius: 50%; border: 5px solid rgba(255,255,255,.12); border-top-color: var(--p1); border-right-color: var(--p2);
  animation: spin 1.1s linear infinite; }
.pv-prog.prog5 .pv-progbar { height: 6px; background: transparent; border-top: 2px solid rgba(255,255,255,.15); border-bottom: 2px solid rgba(255,255,255,.15); border-radius: 0; }
.pv-prog.prog5 #pvProgFill { border-radius: 0; }
@keyframes spin { to { transform: rotate(360deg); } }

.pv-finish { display: none; font-size: 20px; color: #4cd964; text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.pv-note { color: #666; font-size: 12px; margin-top: 8px; text-align: center; }

/* ====== 出场动画（近似） ====== */
@keyframes k-fade{from{opacity:0}to{opacity:1}}
@keyframes k-left{from{transform:translateX(-40px);opacity:0}}
@keyframes k-right{from{transform:translateX(40px);opacity:0}}
@keyframes k-top{from{transform:translateY(-30px);opacity:0}}
@keyframes k-bottom{from{transform:translateY(30px);opacity:0}}
@keyframes k-bounce{0%{transform:translateY(-60px);opacity:0}60%{transform:translateY(8px)}80%{transform:translateY(-4px)}}
@keyframes k-zoom{from{transform:scale(.4);opacity:0}}
@keyframes k-zoomel{0%{transform:scale(.2);opacity:0}60%{transform:scale(1.15)}80%{transform:scale(.95)}}
@keyframes k-rotate{from{transform:rotate(-180deg) scale(.4);opacity:0}}
@keyframes k-spiral{from{transform:rotate(360deg) scale(.1);opacity:0}}
@keyframes k-flipv{from{transform:perspective(400px) rotateX(90deg);opacity:0}}
@keyframes k-fliph{from{transform:perspective(400px) rotateY(90deg);opacity:0}}
@keyframes k-blur{from{filter:blur(12px);opacity:0}}
@keyframes k-expand{from{letter-spacing:30px;opacity:0}}
@keyframes k-shrink{from{letter-spacing:-6px;opacity:0}}
@keyframes k-neon{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes k-heart{0%,100%{transform:scale(1)}25%{transform:scale(1.12)}50%{transform:scale(.96)}75%{transform:scale(1.06)}}
.a-fade{animation:k-fade .8s both}.a-left{animation:k-left .7s both}.a-right{animation:k-right .7s both}
.a-top{animation:k-top .7s both}.a-bottom{animation:k-bottom .7s both}.a-bounce{animation:k-bounce .9s both}
.a-elastic{animation:k-bounce 1s both}.a-zoom{animation:k-zoom .7s both}.a-zoomel{animation:k-zoomel .9s both}
.a-rotate{animation:k-rotate .8s both}.a-spiral{animation:k-spiral .9s both}
.a-type{animation:k-fade 1.2s steps(6) both}
.a-diag{animation:k-left .7s both, k-top .7s both}.a-flipv{animation:k-flipv .8s both}.a-fliph{animation:k-fliph .8s both}
.a-blinds{animation:k-zoom .8s steps(8) both}.a-radar{animation:k-fade 1s both}.a-breath{animation:k-heart 1.6s 2}
.a-blur{animation:k-blur .9s both}.a-merge{animation:k-left .8s both}.a-wave{animation:k-bottom .8s ease both}
.a-backdrop{animation:k-bounce 1s both}.a-expand{animation:k-expand 1s both}.a-shrink{animation:k-shrink 1s both}
.a-heart{animation:k-heart 1.4s 2}.a-ghost{animation:k-blur 1.2s both}.a-neon{animation:k-neon .12s 6}
.a-login{animation:k-top .9s cubic-bezier(.19,1,.22,1) both}.a-noise{animation:k-fade .6s steps(4) 2}

/* ====== 底部栏 ====== */
footer { position: fixed; bottom: 0; left: 0; right: 0; background: #242424; border-top: 1px solid #333;
  padding: 12px 24px; display: flex; gap: 12px; justify-content: flex-end; align-items: center; z-index: 9; }
#accessCode { width: 200px; }
#exportBtn, #importBtn2 { background: #0A84FF; color: #fff; border: 0; padding: 10px 28px; border-radius: 8px; font-size: 15px; cursor: pointer; }
#importBtn2 { background: transparent; border: 1px solid #0A84FF; color: #5cb0ff; }
#exportBtn:disabled { opacity: .5; cursor: wait; }
#toast { position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%); background: #2d7d46; color: #fff;
  padding: 10px 22px; border-radius: 8px; opacity: 0; transition: .3s; pointer-events: none; }
#toast.show { opacity: 1; }
#toast.bad { background: #b03a3a; }

@media (max-width: 1100px) {
  .design-cols { grid-template-columns: 1fr; }
  .preview-side { position: static; }
  .pv-stage { min-height: 480px; }
}
@media (max-width: 800px) { .plugin-cols { grid-template-columns: 1fr; } .plist { height: 38vh; } }