/* 易语天机 · 易语生图 —— 黑紫视觉，与工具箱首页同一套 token */
:root{
  --bg:#0a0a0f;
  --purple:#a878e8;
  --purple-light:#c9a6ff;
  --purple-dark:#6b4a9e;
  --border:rgba(168,120,232,.2);
  --border2:rgba(168,120,232,.36);
  --card:rgba(20,16,32,.54);
  --card-on:rgba(28,22,44,.7);
  --text:#e8e8f0; --dim:#9a9aaa; --faint:#5f5f70;
  --red:#e05555; --green:#5fbf8f;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{min-height:100%}
body{
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
.bg{position:fixed;inset:0;z-index:-3;background:url('/tools/pxyw2.jpg') center top/cover no-repeat;opacity:.5}
.veil{position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,15,.86) 0%,rgba(10,10,15,.24) 22%,rgba(10,10,15,.34) 50%,rgba(10,10,15,.86) 80%,rgba(10,10,15,.97) 100%)}
.veil::before{content:"";position:absolute;left:0;right:0;top:0;height:220px;
  background:linear-gradient(180deg,rgba(10,10,15,.99) 0%,rgba(10,10,15,.95) 45%,rgba(10,10,15,.7) 74%,rgba(10,10,15,0) 100%)}
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 20%,rgba(168,120,232,.16),transparent 58%)}

.wrap{max-width:760px;margin:0 auto;padding:0 16px 70px;position:relative;z-index:2}

/* ===== 顶栏 ===== */
.top{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 0 14px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,rgba(10,10,15,.97),rgba(10,10,15,.72) 70%,rgba(10,10,15,0));
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.top-l{display:flex;align-items:center;gap:11px}
.top-logo{width:36px;height:36px;border-radius:9px;border:1px solid var(--border2);object-fit:cover;background:#141020}
.top-t{font-size:17px;font-weight:700;letter-spacing:.5px;
  background:linear-gradient(135deg,var(--purple-light),var(--purple) 50%,var(--purple-dark));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.top-s{font-size:10px;color:var(--faint);letter-spacing:1.6px;text-transform:uppercase}
.back{font-size:12px;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:6px 13px;text-decoration:none;transition:.2s}
.back:hover{color:var(--purple-light);border-color:var(--border2)}

.hero{padding:8px 0 20px;text-align:center}
.hero h1{font-size:26px;letter-spacing:1px;margin-bottom:7px;
  background:linear-gradient(135deg,var(--purple-light),var(--purple) 55%,var(--purple-dark));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero p{color:var(--dim);font-size:13.5px}

/* ===== 卡片 ===== */
.card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:18px;margin-bottom:14px;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:.25s;
}
.card.focus{border-color:var(--border2);background:var(--card-on)}
.lbl{display:flex;align-items:baseline;gap:8px;margin-bottom:11px;font-size:14px;font-weight:600}
.lbl .tip{font-size:11.5px;color:var(--faint);font-weight:400}

/* ===== 上传区 ===== */
.zone{
  border:1.5px dashed var(--border2);border-radius:13px;padding:26px 16px;text-align:center;
  cursor:pointer;transition:.22s;background:rgba(168,120,232,.03)
}
.zone:hover,.zone.over{border-color:var(--purple);background:rgba(168,120,232,.09)}
.zone .ic{font-size:26px;margin-bottom:7px;opacity:.85}
.zone .m{font-size:13.5px;color:var(--text)}
.zone .h{font-size:11.5px;color:var(--faint);margin-top:5px}
.thumb{margin-top:13px;position:relative;display:none}
.thumb.on{display:block}
.thumb img{width:100%;max-height:280px;object-fit:contain;border-radius:11px;border:1px solid var(--border);background:#0f0c18}
.thumb .del{
  position:absolute;top:9px;right:9px;width:29px;height:29px;border-radius:50%;
  background:rgba(10,10,15,.8);border:1px solid var(--border2);color:var(--purple-light);
  font-size:15px;cursor:pointer;line-height:1;display:flex;align-items:center;justify-content:center
}
.thumb .meta{margin-top:7px;font-size:11.5px;color:var(--faint);text-align:center}

/* ===== 输入 ===== */
textarea,input[type=text],input[type=password]{
  width:100%;background:rgba(10,10,15,.5);border:1px solid var(--border);border-radius:11px;
  color:var(--text);padding:12px 13px;font-size:14px;font-family:inherit;outline:none;transition:.2s;resize:vertical
}
textarea:focus,input:focus{border-color:var(--border2);background:rgba(10,10,15,.7)}
textarea{min-height:96px;line-height:1.7}
::placeholder{color:var(--faint)}

.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px}
.chip{
  font-size:12px;color:var(--dim);border:1px solid var(--border);border-radius:999px;
  padding:5px 11px;cursor:pointer;transition:.18s;background:rgba(168,120,232,.04)
}
.chip:hover{color:var(--purple-light);border-color:var(--border2);background:rgba(168,120,232,.1)}

/* ===== 选项行 ===== */
.row{display:flex;gap:9px;flex-wrap:wrap}
.opt{
  flex:1;min-width:88px;text-align:center;font-size:12.5px;color:var(--dim);
  border:1px solid var(--border);border-radius:10px;padding:9px 6px;cursor:pointer;transition:.18s;
  background:rgba(10,10,15,.35)
}
.opt:hover{border-color:var(--border2);color:var(--text)}
.opt.on{background:linear-gradient(135deg,var(--purple),var(--purple-dark));color:#fff;border-color:transparent;font-weight:600}
.sub{font-size:10.5px;opacity:.75;display:block;margin-top:1px}

/* ===== 按钮 ===== */
.btn{
  width:100%;border:none;border-radius:12px;padding:14px;font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;transition:.22s;letter-spacing:.5px;
  background:linear-gradient(135deg,var(--purple-light),var(--purple) 45%,var(--purple-dark));
  color:#0a0a0f;
}
.btn:hover{filter:brightness(1.09);transform:translateY(-1px)}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn.ghost{background:transparent;border:1px solid var(--border2);color:var(--purple-light)}
.btn.ghost:hover{background:rgba(168,120,232,.12)}
.btn.sm{padding:10px 14px;font-size:13px;width:auto}

/* ===== 进度 ===== */
.prog{display:none;text-align:center;padding:30px 16px}
.prog.on{display:block}
.spin{width:40px;height:40px;margin:0 auto 15px;border:3px solid var(--border);border-top-color:var(--purple);border-radius:50%;animation:sp .9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.prog .m{font-size:14px;margin-bottom:6px}
.prog .s{font-size:12px;color:var(--faint)}
.pbar{height:3px;background:rgba(168,120,232,.15);border-radius:2px;overflow:hidden;margin-top:15px}
.pbar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--purple),var(--purple-light));
  animation:pb 60s ease-out forwards}
@keyframes pb{to{width:92%}}

/* ===== 结果 ===== */
.result{display:none}
.result.on{display:block}
.cmp{position:relative;border-radius:13px;overflow:hidden;border:1px solid var(--border);background:#0f0c18}
.cmp img{display:block;width:100%;max-height:520px;object-fit:contain}
.cmp-tabs{display:flex;gap:6px;margin-bottom:10px}
.cmp-tab{flex:1;text-align:center;font-size:12.5px;padding:7px;border-radius:9px;cursor:pointer;
  border:1px solid var(--border);color:var(--dim);transition:.18s}
.cmp-tab.on{background:rgba(168,120,232,.16);color:var(--purple-light);border-color:var(--border2);font-weight:600}
.acts{display:flex;gap:9px;margin-top:13px}
.acts .btn{flex:1}
.info{margin-top:11px;font-size:11.5px;color:var(--faint);text-align:center;line-height:1.9}
.info b{color:var(--purple-light);font-weight:600}

/* ===== 历史 ===== */
.hist{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:9px;margin-top:12px}
.hist-i{position:relative;border-radius:10px;overflow:hidden;border:1px solid var(--border);cursor:pointer;aspect-ratio:1;background:#0f0c18;transition:.2s}
.hist-i:hover{border-color:var(--border2);transform:scale(1.03)}
.hist-i img{width:100%;height:100%;object-fit:cover;display:block}
.hist-i .tag{position:absolute;left:0;bottom:0;right:0;font-size:9.5px;padding:2px 5px;background:rgba(10,10,15,.82);color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-i.fail{opacity:.55}
.hist-i.fail::after{content:"失败";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--red)}

/* ===== 解锁 ===== */
.lock{max-width:400px;margin:60px auto;text-align:center}
.lock .ic{font-size:34px;margin-bottom:14px;opacity:.9}
.lock h2{font-size:19px;margin-bottom:8px;font-weight:600}
.lock p{font-size:13px;color:var(--dim);margin-bottom:22px}

/* ===== 提示 ===== */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translateX(-50%) translateY(20px);
  background:rgba(28,22,44,.97);border:1px solid var(--border2);color:var(--text);
  font-size:13px;padding:11px 20px;border-radius:11px;opacity:0;pointer-events:none;
  transition:.28s;z-index:99;max-width:88vw;text-align:center;
  box-shadow:0 8px 30px rgba(0,0,0,.5)
}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{border-color:rgba(224,85,85,.5)}

.foot{text-align:center;font-size:11px;color:var(--faint);padding:28px 0 10px;line-height:2}
.foot a{color:var(--dim);text-decoration:none}
.hide{display:none!important}

@media(max-width:480px){
  .hero h1{font-size:22px}
  .wrap{padding:0 13px 60px}
  .card{padding:15px}
  .acts{flex-wrap:wrap}
}