:root {
  --bg:#0e0f13; --card:#181a21; --line:#272a33; --fg:#e8eaf0; --mut:#8b909d;
  --acc:#7c5cff; --acc2:#5b8cff; --ok:#28c76f; --err:#ff5c5c;
  --field:#0f1117; --field-hover:#13151d;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --shadow-card:0 1px 2px rgba(0,0,0,.3),0 8px 24px -8px rgba(0,0,0,.5);
  --shadow-modal:0 24px 60px -12px rgba(0,0,0,.7);
  --focus:0 0 0 3px rgba(124,92,255,.35);
  --navh:48px;
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body { margin:0; background:var(--bg); color:var(--fg); font-family:-apple-system,"PingFang SC","Microsoft YaHei",system-ui,sans-serif; }
.hidden { display:none !important; }
a { color:var(--acc2); }
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { 0% { background-position:100% 0; } 100% { background-position:-100% 0; } }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes pop { from { opacity:0; transform:translateY(8px) scale(.98); } to { opacity:1; transform:none; } }

/* 遮罩弹窗 */
.overlay { position:fixed; inset:0; background:rgba(8,9,12,.92); display:flex; align-items:center; justify-content:center; z-index:50; padding:var(--sp4); }
.modal { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--sp5); max-width:420px; width:100%; box-shadow:var(--shadow-modal); animation:pop .2s ease; }
.modal h1 { margin:0 0 var(--sp4); font-size:22px; text-align:center; }
.modal h2 { margin:0 0 var(--sp3); font-size:18px; }
.modal p { color:var(--mut); font-size:14px; line-height:1.6; }
.modal.auth input { width:100%; background:var(--field); color:var(--fg); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 13px; font-size:16px; margin-bottom:10px; transition:border-color .15s,box-shadow .15s; }
.modal.auth input:focus { outline:none; border-color:var(--acc); box-shadow:var(--focus); }
.tabs2 { display:flex; gap:var(--sp2); margin-bottom:var(--sp4); }
.t2 { flex:1; text-align:center; padding:12px; font-size:15px; color:var(--mut); background:var(--field); border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; transition:.15s; }
.t2.active { color:#fff; background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent; }
.amsg { font-size:13px; min-height:18px; margin-top:var(--sp2); color:var(--err); white-space:pre-wrap; }

/* 按钮 */
.btn { background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border:0; padding:13px; border-radius:var(--r-md); font-size:15px; font-weight:600; cursor:pointer; width:100%; transition:filter .15s,transform .1s,box-shadow .15s; }
.btn:not(:disabled):hover { filter:brightness(1.08); }
.btn:not(:disabled):active { transform:translateY(1px); filter:brightness(.95); }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn:focus-visible { outline:none; box-shadow:var(--focus); }
.btn.ghost { background:var(--field); border:1px solid var(--line); color:var(--fg); }
.btn.small { width:auto; padding:9px 16px; font-size:13px; }
.btn.loading { color:transparent !important; position:relative; pointer-events:none; }
.btn.loading::after { content:''; position:absolute; inset:0; margin:auto; width:18px; height:18px; border:2px solid #fff; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite; }
.row { display:flex; gap:10px; margin-top:var(--sp4); }
.row .btn { flex:1; }

/* 头部 */
header { display:flex; align-items:center; gap:18px; padding:12px 18px; border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; background:rgba(14,15,19,.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
header h1 { font-size:17px; margin:0; background:linear-gradient(135deg,var(--acc),var(--acc2)); -webkit-background-clip:text; background-clip:text; color:transparent; letter-spacing:.3px; }
nav { display:flex; gap:6px; }
.navlink { position:relative; font-size:14px; color:var(--mut); padding:10px 16px; border-radius:var(--r-md); cursor:pointer; transition:.15s; }
.navlink:hover { color:var(--fg); }
.navlink.active { color:#fff; background:var(--card); border:1px solid var(--line); }
.userbox { margin-left:auto; display:flex; align-items:center; gap:12px; }
.quota { font-size:12px; color:var(--mut); white-space:nowrap; }
.who { font-size:13px; }

/* 视图 */
.view { display:none; max-width:1180px; margin:0 auto; padding:var(--sp5); }
.view.active { display:block; }
.grid { display:grid; grid-template-columns:380px 1fr; gap:var(--sp5); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px; box-shadow:var(--shadow-card); }
.card.busy .drop, .card.busy .presets, .card.busy .chips, .card.busy textarea, .card.busy input, .card.busy .adv { pointer-events:none; opacity:.55; }
label { display:block; font-size:13px; color:var(--mut); margin:var(--sp4) 0 var(--sp2); }
label:first-child { margin-top:0; }
textarea, input[type=number], input[type=text] { width:100%; background:var(--field); color:var(--fg); border:1px solid var(--line); border-radius:var(--r-md); padding:11px 12px; font-size:14px; font-family:inherit; resize:vertical; max-height:280px; transition:border-color .15s,box-shadow .15s; }
textarea { min-height:80px; }
textarea:focus, input:focus { outline:none; border-color:var(--acc); box-shadow:var(--focus); }
.drop { border:1.5px dashed var(--line); border-radius:var(--r-md); padding:18px; text-align:center; color:var(--mut); cursor:pointer; transition:.15s; font-size:13px; min-height:88px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.drop:hover, .drop.over { border-color:var(--acc); color:var(--fg); background:var(--field-hover); }
.thumb-wrap { position:relative; display:inline-block; margin-top:8px; }
.thumb-wrap img { max-width:100%; max-height:230px; border-radius:var(--r-sm); display:block; }
.thumb-x { position:absolute; top:6px; right:6px; width:30px; height:30px; border-radius:var(--r-pill); background:rgba(0,0,0,.65); color:#fff; border:0; font-size:16px; line-height:1; cursor:pointer; }
.row3 { display:flex; gap:10px; } .row3 > div { flex:1; }
.adv { margin-top:10px; } .adv summary { cursor:pointer; font-size:13px; color:var(--mut); padding:8px 0; user-select:none; }
.go { margin-top:var(--sp5); }
.status { margin-top:var(--sp3); font-size:13px; min-height:18px; }
.status.run { color:var(--acc2); } .status.ok { color:var(--ok); } .status.err { color:var(--err); white-space:pre-wrap; }
.sublabel { font-size:12px; color:var(--mut); margin:var(--sp3) 0 5px; }

/* 预设 / chip(触控 ≥40px) */
.presets, .chips { display:flex; flex-wrap:wrap; gap:var(--sp3); margin:2px 0 4px; }
.preset, .chip { font-size:13px; color:var(--fg); background:var(--field); border:1px solid var(--line); padding:9px 14px; border-radius:var(--r-pill); cursor:pointer; transition:.12s; user-select:none; min-height:40px; display:inline-flex; align-items:center; }
.preset:hover, .chip:hover { border-color:var(--acc); background:var(--field-hover); }
.preset:active, .chip:active { transform:scale(.96); }
.preset.on, .chip.on { background:linear-gradient(135deg,var(--acc),var(--acc2)); border-color:transparent; color:#fff; box-shadow:0 2px 8px rgba(124,92,255,.4); }

/* 结果区 */
.result { min-height:440px; display:flex; align-items:center; justify-content:center; flex-direction:column; color:var(--mut); }
.result img, .result video { max-width:100%; max-height:660px; border-radius:var(--r-sm); border:1px solid var(--line); animation:fadeIn .25s ease; }
.compare { display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%; }
.compare figure { margin:0; } .compare figcaption { font-size:12px; color:var(--mut); margin-bottom:6px; text-align:center; }
.compare img { width:100%; border-radius:var(--r-sm); border:1px solid var(--line); }
.dl { margin-top:var(--sp3); display:inline-block; font-size:13px; color:var(--acc2); text-decoration:none; border:1px solid var(--line); padding:9px 16px; border-radius:var(--r-md); }
.ph { display:flex; flex-direction:column; align-items:center; gap:var(--sp3); color:var(--mut); font-size:14px; padding:var(--sp5) var(--sp4); text-align:center; }
.result .ph::before { content:'🖼️'; font-size:40px; opacity:.5; }
#view-video .result .ph::before { content:'🎬'; }
.gallery .ph::before { content:'🗂️'; font-size:40px; opacity:.5; }

/* 加载 / 进度 / 失败态 */
.loading { display:flex; flex-direction:column; align-items:center; gap:var(--sp3); width:100%; padding:var(--sp4); }
.spin { width:26px; height:26px; border:2px solid var(--line); border-top-color:var(--acc); border-radius:50%; animation:spin .8s linear infinite; }
.skeleton { width:100%; height:200px; border-radius:var(--r-md); background:linear-gradient(90deg,var(--field) 25%,var(--field-hover) 37%,var(--field) 63%); background-size:400% 100%; animation:shimmer 1.4s infinite; }
.skeleton.video { aspect-ratio:9/16; height:auto; max-height:360px; }
.prog { width:100%; max-width:300px; height:5px; background:var(--line); border-radius:var(--r-pill); overflow:hidden; }
.prog i { display:block; height:100%; width:0; background:linear-gradient(90deg,var(--acc),var(--acc2)); transition:width .9s linear; }
.ltext { font-size:13px; color:var(--acc2); margin:0; text-align:center; }
.failbox { display:flex; flex-direction:column; align-items:center; gap:var(--sp3); text-align:center; padding:var(--sp4); }
.failicon { font-size:38px; }
.failbox p { color:var(--err); font-size:13px; margin:0; word-break:break-word; }

/* toast 轻提示(成功/失败一次性反馈,手机滚到结果区也能看到) */
.toast { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(var(--navh) + env(safe-area-inset-bottom) + 12px); background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow-card); padding:10px 16px; border-radius:var(--r-pill); z-index:60; font-size:14px; animation:pop .2s ease; max-width:88vw; text-align:center; }
.toast.ok { color:var(--ok); } .toast.err { color:var(--err); }

/* 自定义控件键盘/读屏焦点可见 */
.navlink:focus-visible, .preset:focus-visible, .chip:focus-visible, .drop:focus-visible { outline:none; box-shadow:var(--focus); }

/* 画廊 */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; }
.gcard { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--shadow-card); transition:transform .15s,box-shadow .15s; }
.gcard:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); }
.gcard img, .gcard video { width:100%; height:180px; object-fit:cover; display:block; background:var(--field); }
.gcard .meta { padding:8px 10px; font-size:12px; color:var(--mut); display:flex; justify-content:space-between; }
.badge { font-size:11px; padding:2px 9px; border-radius:var(--r-pill); background:var(--field); border:1px solid var(--line); }
.badge.done { color:var(--ok); } .badge.failed { color:var(--err); } .badge.running { color:var(--acc2); }

/* ───── 平板/手机:≤880 ───── */
@media (max-width:880px) {
  .grid { display:flex; flex-direction:column; }
  /* 移动端关掉 header 毛玻璃:backdrop-filter 会困住后代 fixed 元素(让底部 nav 跑到顶部) */
  header { gap:10px; padding:12px max(14px,env(safe-area-inset-left)) 12px max(14px,env(safe-area-inset-right)); justify-content:space-between; backdrop-filter:none; -webkit-backdrop-filter:none; background:var(--bg); }
  header h1 { flex:0 0 auto; }
  nav { order:0; position:fixed; bottom:0; left:0; right:0; display:flex; gap:0; min-height:var(--navh); align-items:center; background:var(--card); border-top:1px solid var(--line); z-index:8; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 16px -8px rgba(0,0,0,.6); }
  .navlink { flex:1; text-align:center; padding:12px 0; font-size:13px; border-radius:0; }
  .navlink.active { color:#fff; background:transparent; border:0; }
  .navlink.active::after { content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:6px; width:24px; height:2px; background:linear-gradient(90deg,var(--acc),var(--acc2)); border-radius:2px; }
  .userbox { margin-left:auto; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
  .quota { font-size:11px; }
  .view { padding:var(--sp4); padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom) + var(--sp5)); }
  .result { min-height:240px; }
  .view.active .card .go { position:sticky; bottom:calc(var(--navh) + env(safe-area-inset-bottom)); z-index:5; margin-top:var(--sp4); }
  .card.busy .go { position:static; }  /* 生成中吸底键随卡片滚走,避免与结果区 loading 重复 */
  .dl { display:flex; justify-content:center; align-items:center; min-height:48px; width:100%; font-size:15px; font-weight:600; background:linear-gradient(135deg,var(--acc),var(--acc2)); color:#fff; border-color:transparent; margin-top:var(--sp4); }
}

/* ───── 手机:≤480 ───── */
@media (max-width:480px) {
  .view { padding:var(--sp3); padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom) + var(--sp5)); }
  .card { padding:var(--sp4); }
  .modal { padding:var(--sp5); }
  .overlay { padding:var(--sp3); }
  .compare { grid-template-columns:1fr; }
  .thumb-wrap img { max-height:180px; }
  textarea, input[type=number], input[type=text], .t2 { font-size:16px; }
  .row .btn { min-height:48px; white-space:nowrap; }
  .gallery { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }
  .userbox { flex-wrap:nowrap; }
  .quota { font-size:12px; max-width:42vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.who{white-space:nowrap}