/* 星天璀工作台 · tools.css —— 基础生图（v1.8）：页面背景 / 海报卡片 / 模型选择 / 结果卡 / 图片快速预览 / 手机宽度 */

/* 图片快速预览（imgload.js）：占位微光 → 小图 */
[data-img]{background-repeat:no-repeat;background-position:center;background-size:cover}
.big.has[data-img]{background-size:contain}
.xi-load{background-image:linear-gradient(100deg,#EEF1EF 30%,#F8FAF8 50%,#EEF1EF 70%)!important;background-size:200% 100%!important;animation:xish 1.2s linear infinite}
@keyframes xish{to{background-position:-200% 0}}
.xi-err{background:#F4F6F5!important}.xi-err::after{content:"图片没加载出来";font-size:11px;color:var(--ink3);font-weight:400}
[data-zoom]{cursor:zoom-in}

/* 页面背景：品牌色 + 绿 + 蓝三团柔光，叠一层细点阵 */
.tpage{position:relative;border-radius:20px;padding:14px;margin:-4px -6px 0;
 background:
  radial-gradient(rgba(31,42,36,.045) 1px,transparent 1.2px) 0 0/18px 18px,
  radial-gradient(820px 360px at 0% 0%,var(--acc-s),transparent 70%),
  radial-gradient(680px 340px at 100% 6%,rgba(47,122,85,.13),transparent 70%),
  radial-gradient(760px 460px at 55% 100%,rgba(63,111,143,.10),transparent 70%),
  var(--bg)}
.tpage .tside,.tpage .tcfg,.tpage .tres,.tpage .cvbox,.tpage .card{box-shadow:0 1px 2px rgba(31,42,36,.04),0 8px 24px rgba(31,42,36,.05)}

/* 顶部横幅 */
.thero{display:flex;gap:16px;align-items:center;flex-wrap:wrap;border-radius:16px;padding:16px 18px;margin-bottom:14px;color:#fff;position:relative;overflow:hidden;
 background:linear-gradient(120deg,var(--deep),var(--acc) 55%,#F2C36B)}
.thero::before,.thero::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.14);pointer-events:none}
.thero::before{width:220px;height:220px;right:-50px;top:-90px}.thero::after{width:130px;height:130px;right:150px;bottom:-70px;background:rgba(255,255,255,.1)}
.thero h1{margin:0;font-size:20px;line-height:1.2}.thero p{margin:4px 0 0;font-size:12.5px;opacity:.92;max-width:560px}
.thero .tkpi{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.thero .tkpi span{background:rgba(255,255,255,.2);border-radius:999px;padding:2px 11px;font-size:12px;font-weight:700;backdrop-filter:blur(2px)}.thero .tkpi b{font-size:14px}
.thero .tsearch{position:relative;z-index:1;margin-left:auto;display:flex;gap:6px;align-items:center}.thero .tsearch input{width:230px;border:0;border-radius:999px;padding:8px 14px;font-size:13px;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.tfilter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.tfilter .chip{padding:3px 12px;font-size:12px}

/* 分组标题 + 海报卡片 */
.tgsec{display:flex;align-items:center;gap:8px;margin:14px 2px 8px;font-size:13.5px;font-weight:800}.tgsec:first-of-type{margin-top:2px}.tgsec i{font-style:normal;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:var(--acc-s)}.tgsec small{font-weight:400;color:var(--ink3);font-size:11.5px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.tcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:9px;cursor:pointer;transition:transform .15s,box-shadow .15s,border-color .15s;display:flex;flex-direction:column;gap:5px}
.tcard:hover{transform:translateY(-3px);border-color:var(--acc);box-shadow:0 12px 28px rgba(31,42,36,.12)}
.tcard .hd{display:flex;justify-content:space-between;align-items:center;gap:6px;font-weight:800;font-size:13.5px}.tcard .note{min-height:34px;line-height:1.45}
.tposter{position:relative;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(135deg,var(--c1,#ccc),var(--c2,#ddd));display:grid;place-items:center;color:#fff;font-weight:800;font-size:13px}
.tposter img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s}.tcard:hover .tposter img{transform:scale(1.04)}
.tposter .tgrp{position:absolute;left:7px;top:7px;z-index:1;font-size:10.5px;font-weight:800;border-radius:999px;padding:1px 8px;background:rgba(255,255,255,.92);color:var(--deep)}
.tposter .tneed{position:absolute;right:7px;top:7px;z-index:1;font-size:10.5px;font-weight:700;border-radius:999px;padding:1px 8px;background:rgba(31,42,36,.62);color:#fff}

/* 工具页头 */
.thd{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}.thd .ic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;font-size:19px;background:linear-gradient(135deg,var(--acc),var(--deep));box-shadow:0 6px 14px rgba(31,42,36,.14)}.thd h2{font-size:16px}.thd .ds{font-size:12px;color:var(--ink2);flex:1 1 260px;min-width:0}

/* 左侧配置：分步小标题 */
.tstep{display:flex;align-items:center;gap:6px;font-weight:800;font-size:12.5px;margin:12px 0 5px}.tstep:first-child{margin-top:0}.tstep em{font-style:normal;width:18px;height:18px;border-radius:50%;background:var(--ink);color:#fff;font-size:11px;display:grid;place-items:center}.tstep small{font-weight:400;color:var(--ink3);font-size:11px}
.tup.over{border-color:var(--acc);background:var(--acc-s)}
.ref .rx{position:absolute;right:-5px;top:-5px;width:16px;height:16px;border-radius:50%;background:var(--ink);color:#fff;font-size:10px;display:grid;place-items:center;line-height:1}
.ref.has[data-img]{color:transparent;border-color:var(--line);background-color:#fff}
.pk{display:flex;gap:5px;flex-wrap:wrap}.pk .chip{padding:2px 10px}.pk .chip i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:4px;border:1px solid rgba(0,0,0,.15);vertical-align:-1px}
.boxcv{display:block;max-width:100%;border-radius:8px;border:1px solid var(--line);touch-action:none;cursor:crosshair;margin-top:6px}

/* 模型选择 */
.mdlcur{display:flex;align-items:center;gap:6px;border:1.5px solid var(--acc);background:var(--acc-s);border-radius:10px;padding:7px 9px;cursor:pointer}.mdlcur b{font-size:12.5px}.mdlcur .grow{flex:1}
.mdls{display:grid;gap:6px;margin-top:6px}
.mdl{border:1.5px solid var(--line);border-radius:10px;padding:7px 9px;cursor:pointer;background:#fff}.mdl:hover{border-color:var(--acc)}.mdl.on{border-color:var(--acc);background:var(--acc-s)}.mdl.off{opacity:.45;cursor:not-allowed}
.mdl .l1{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.mdl .l1 b{font-size:12.5px}.mdl .cost{margin-left:auto;font-weight:800;color:var(--deep);font-size:12.5px;white-space:nowrap}.mdl .l2{font-size:11.5px;color:var(--ink2);margin-top:2px;line-height:1.45}.mdl .l3{font-size:11px;color:var(--ink3);margin-top:1px}
.tcost{display:flex;justify-content:space-between;gap:8px;align-items:center;text-align:left}.tcost b{font-size:13px}

/* 结果区 */
.rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.rcard{border:1px solid var(--line);border-radius:12px;padding:7px;background:#FAFCFA;min-width:0}
.rcard .big{aspect-ratio:1;width:100%}
.rwait{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;font-size:12px;color:var(--ink2);background:linear-gradient(100deg,#EEF1EF 30%,#F8FAF8 50%,#EEF1EF 70%);background-size:200% 100%;animation:xish 1.6s linear infinite}.rwait b{font-size:20px;color:var(--deep)}
.rfail{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;align-content:center;gap:6px;text-align:center;font-size:12px;color:var(--bad);background:var(--bad-s);padding:10px;overflow:hidden}
.rcard .rm{font-size:12px;margin-top:5px;font-weight:700;display:flex;gap:5px;align-items:center;flex-wrap:wrap}.rcard .rm small{font-weight:400;color:var(--ink3)}
.rsrc{position:absolute;left:6px;bottom:6px;width:46px;height:46px;border-radius:7px;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.25);background-color:#fff}
.rdemo{border-radius:12px;overflow:hidden;border:1px solid var(--line);position:relative;background:#F4F6F5}.rdemo img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}.rdemo .cap{position:absolute;left:10px;bottom:10px;background:rgba(31,42,36,.7);color:#fff;border-radius:999px;font-size:11.5px;font-weight:700;padding:2px 10px}
.rtips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}.rtips div{border:1px dashed var(--line);border-radius:10px;padding:8px 10px;font-size:12px;color:var(--ink2);background:#fff}.rtips b{display:block;color:var(--ink);margin-bottom:2px}

/* 全屏看图：原图加载中的小提示 */
.lb .img.lbwait::after{content:"原图加载中…";position:absolute;right:10px;bottom:10px;background:rgba(15,20,17,.7);color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:3px 11px}.lb .img{position:relative}

/* 手机 / 窄屏：单列下滚，工具列表改横向滑动 */
@media (max-width:860px){
 .tpage{padding:10px;margin:0 -8px}
 .twrap{grid-template-columns:minmax(0,1fr)}
 .tside{position:static;display:flex;gap:4px;overflow-x:auto;padding:6px;-webkit-overflow-scrolling:touch}.tside .tg{display:none}.tside .ti2{white-space:nowrap;flex:0 0 auto;padding:5px 11px;border:1px solid var(--line);border-radius:999px}
 .tws,.cropwrap{grid-template-columns:minmax(0,1fr)}.tres,.cvbox{min-height:0}
 .thero .tsearch{margin-left:0;width:100%}.thero .tsearch input{width:100%}
 .tgrid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}.tcard .note{min-height:0}
 .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.rtips{grid-template-columns:minmax(0,1fr)}
 .cmp{grid-template-columns:minmax(0,1fr)}
}