/* ============================================================
   吟风的图片生成站 · 原型样式表
   基调：深夜 / 深海 —— 只有深靛蓝与墨蓝，无任何星空天体意象
   动效语言只有三种：① 背景柔光晕漂移 ② hover/状态过渡 ③ 进度反馈
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}

:root{
  /* —— 底色三层 —— */
  --bg-deep:#070B16;
  --bg-page:#0A1020;
  --bg-card:#0E1526;
  /* —— 蓝 —— */
  --pri:#4C8CFF;
  --pri-hi:#8FB8FF;
  --cyan:#7FD4F5;
  /* —— 文字三档 —— */
  --t1:#E4EBF8;
  --t2:#93A2BE;
  --t3:#61708E;
  /* —— 描边 —— */
  --line:rgba(140,170,255,.14);
  --line-soft:rgba(140,170,255,.08);
  /* —— 玻璃 —— */
  --glass:rgba(255,255,255,.05);
  --glass-line:rgba(255,255,255,.09);
  --glass-hi:rgba(255,255,255,.06);
  --glass-2:rgba(255,255,255,.04);
  /* —— 影子（深而散，绝不硬灰） —— */
  --sh:0 18px 48px rgba(0,0,0,.45);
  --sh-sm:0 8px 24px rgba(0,0,0,.32);
  /* —— 状态色（低饱和，仅 7px 圆点使用） —— */
  --ok:#5FD3A3;
  --warn:#E0B76A;
  --off:#61708E;
  /* —— 动效 —— */
  --ease:cubic-bezier(.22,.61,.36,1);
  --dur:340ms;
  --r-card:14px;
  --r-panel:20px;
  --r-pill:999px;
}

html{background:var(--bg-deep);scrollbar-color:rgba(140,170,255,.2) transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(140,170,255,.16);background-clip:content-box;border:3px solid transparent;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(140,170,255,.28);background-clip:content-box;border:3px solid transparent}
::-webkit-scrollbar-corner{background:transparent}
body{
  min-height:100vh;
  background:var(--bg-page);
  color:var(--t1);
  font-family:Inter,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:13.5px;
  line-height:1.68;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
svg{display:block}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--t3)}
.ic-18{width:18px;height:18px}
.ic-20{width:20px;height:20px}
.ic-24{width:24px;height:24px}

/* ============ 背景：三团柔光晕 + 极低透明度噪点 ============ */
.aura{position:fixed;inset:-18% -12%;z-index:0;pointer-events:none;filter:blur(90px)}
.aura i{position:absolute;display:block;border-radius:50%}
.aura i:nth-child(1){width:52vw;height:52vw;left:-4%;top:-6%;opacity:.20;
  background:radial-gradient(circle at 50% 50%,rgba(46,95,217,.82),rgba(46,95,217,0) 66%);
  animation:drift-a 54s var(--ease) infinite alternate}
.aura i:nth-child(2){width:46vw;height:46vw;right:-6%;top:18%;opacity:.19;
  background:radial-gradient(circle at 50% 50%,rgba(26,48,118,.9),rgba(26,48,118,0) 66%);
  animation:drift-b 66s var(--ease) infinite alternate}
.aura i:nth-child(3){width:40vw;height:40vw;left:30%;bottom:-14%;opacity:.14;
  background:radial-gradient(circle at 50% 50%,rgba(76,140,255,.62),rgba(76,140,255,0) 66%);
  animation:drift-c 76s var(--ease) infinite alternate}
@keyframes drift-a{to{transform:translate3d(3.5%,-2.5%,0) scale(1.06)}}
@keyframes drift-b{to{transform:translate3d(-3%,3%,0) scale(1.05)}}
@keyframes drift-c{to{transform:translate3d(2%,-3.5%,0) scale(1.08)}}

.grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.03;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ============ 玻璃面板 ============ */
.panel{
  position:relative;
  background:var(--glass);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);
  border-radius:var(--r-panel);
  box-shadow:var(--sh),inset 0 1px 0 var(--glass-hi);
}
.panel.pad{padding:18px}
.panel.flat{box-shadow:inset 0 1px 0 var(--glass-hi)}
.sub{
  background:var(--glass-2);
  border:1px solid var(--glass-line);
  border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}

/* ============ 文字档位（只用 24 / 17 / 13.5 / 12） ============ */
.h1{font-size:24px;font-weight:600;line-height:1.38;letter-spacing:-.01em}
.h2{font-size:17px;font-weight:600;line-height:1.45}
.lab{font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--t3)}
.body{font-size:13.5px;font-weight:400;line-height:1.68;color:var(--t2)}
.mute{color:var(--t3)}
.dim{color:var(--t3);font-size:12px;letter-spacing:.04em}
.num{font-size:24px;font-weight:600;line-height:1.2;color:var(--t1);font-variant-numeric:tabular-nums}
.num em{font-size:12px;font-style:normal;font-weight:400;letter-spacing:.04em;color:var(--t3);margin-left:3px}
strong{font-weight:600;color:var(--t1)}

/* ============ 按钮：只允许一个渐变按钮 .btn-go，其余半透明深底 + 细描边 ============ */
.btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--glass);border:1px solid var(--glass-line);color:var(--t2);
  font-size:12px;letter-spacing:.04em;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),
             border-color var(--dur) var(--ease),transform var(--dur) var(--ease);
}
.btn .ic{transition:color var(--dur) var(--ease)}
.btn:hover{background:rgba(255,255,255,.085);color:var(--t1);border-color:var(--line);transform:translateY(-1px)}
.btn:hover .ic{color:var(--t2)}
.btn:active{transform:translateY(0)}
.btn.wide{width:100%;justify-content:center}
.btn.sm{padding:5px 11px}
.btn.on{background:rgba(76,140,255,.15);border-color:rgba(76,140,255,.44);color:var(--pri-hi)}
.btn.on .ic{color:var(--pri-hi)}
.btn.on:hover{background:rgba(76,140,255,.2);color:var(--pri-hi);border-color:rgba(76,140,255,.56)}
.btn[disabled]{opacity:.42;cursor:not-allowed}
.btn[disabled]:hover{transform:none;background:var(--glass);color:var(--t2);border-color:var(--glass-line)}
.btn.danger{color:#E2909A;border-color:rgba(210,120,135,.26)}
.btn.danger:hover{background:rgba(210,120,135,.12);color:#F0A7B0;border-color:rgba(210,120,135,.4)}
.btn.danger .ic{color:#C4798A}

.btn-go{
  display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;height:44px;border-radius:var(--r-pill);border:0;
  background-image:linear-gradient(135deg,#2E5FD9 0%,#4C8CFF 52%,#7FD4F5 100%);
  color:#08122A;font-size:13.5px;font-weight:600;letter-spacing:.06em;
  transition:filter var(--dur) var(--ease),transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.btn-go:hover{filter:brightness(1.05);transform:translateY(-1px);box-shadow:0 14px 30px rgba(0,0,0,.4)}
.btn-go:active{transform:translateY(0)}
.btn-go[disabled]{filter:grayscale(.3) brightness(.66);cursor:not-allowed;transform:none;box-shadow:none}
.btn-go .spin{border-color:rgba(8,18,42,.28);border-top-color:#08122A}

/* ============ 胶囊 / 徽章 ============ */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 15px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.035);border:1px solid var(--line);color:var(--t2);
  font-size:12px;letter-spacing:.04em;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.pill:hover{background:rgba(255,255,255,.07);color:var(--t1)}
.pill.on{background:rgba(76,140,255,.14);border-color:rgba(76,140,255,.34);color:var(--pri-hi)}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);
  border:1px solid var(--line);color:var(--t3);
  font-size:12px;letter-spacing:.04em;white-space:nowrap;
}
.chip.hi{border-color:rgba(76,140,255,.28);background:rgba(76,140,255,.1);color:var(--pri-hi)}

/* ============ 分段控件 ============ */
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-pill);
  background:var(--glass-2);border:1px solid var(--glass-line)}
.seg button{
  padding:7px 18px;border-radius:var(--r-pill);
  border:1px solid transparent;color:var(--t3);
  font-size:12px;letter-spacing:.04em;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.seg button:hover{color:var(--t2)}
.seg button.on{background:rgba(76,140,255,.14);border-color:rgba(76,140,255,.3);color:var(--pri-hi)}

/* ============ 表单 ============ */
.field{display:flex;flex-direction:column;gap:7px}
.inp{
  height:42px;padding:0 14px;border-radius:12px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);
  color:var(--t1);font-size:13.5px;outline:none;
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.inp::placeholder{color:var(--t3)}
.inp:hover{border-color:rgba(140,170,255,.24)}
.inp:focus{border-color:rgba(76,140,255,.55);background:rgba(76,140,255,.05);box-shadow:0 0 0 3px rgba(76,140,255,.13)}
textarea.inp{height:auto;min-height:132px;padding:13px 14px;line-height:1.68;resize:none;display:block}
.sel{
  appearance:none;-webkit-appearance:none;
  height:38px;padding:0 32px 0 13px;border-radius:11px;
  background-color:rgba(255,255,255,.04);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%2361708E' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.6 9.4 5.4 5.2 5.4-5.2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:13px;
  border:1px solid var(--line);color:var(--t1);font-size:13.5px;outline:none;
  transition:border-color var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.sel:hover{border-color:rgba(140,170,255,.24)}
.sel:focus{border-color:rgba(76,140,255,.55);box-shadow:0 0 0 3px rgba(76,140,255,.13)}
.sel option{background:var(--bg-card);color:var(--t1)}
.inline{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.inline .lab{white-space:nowrap}
/* 基本参数：窄栏里用两列栅格，避免标签与控制项被拆散 */
.params{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.params .span2{grid-column:1 / -1}
.pfield{display:flex;flex-direction:column;gap:6px;min-width:0}
.pfield .sel,.pfield .inp{width:100%}
.pfield .inp{height:38px;padding:0 13px}

/* ============ 状态点 ============ */
.dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.dot.ok{background:var(--ok)}
.dot.warn{background:var(--warn)}
.dot.off{background:var(--off)}
.status{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.04em;color:var(--t2)}

/* ============ 页壳 ============ */
.screen{display:none;position:relative;z-index:1}
.screen.on{display:block}
.wrap{max-width:1420px;margin:0 auto;padding:0 32px}
.topbar{
  position:sticky;top:0;z-index:30;
  background:rgba(10,16,32,.74);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid var(--line-soft);
}
.topbar .row{height:60px;display:flex;align-items:center;gap:20px}
.brand{display:flex;align-items:center;gap:10px;color:var(--t1)}
.brand .mark{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:rgba(76,140,255,.12);border:1px solid rgba(76,140,255,.26);color:var(--pri-hi);
}
.brand b{font-size:13.5px;font-weight:600;letter-spacing:.02em}
.space{flex:1}

/* 用户菜单 */
.umenu{position:relative}
.ubtn{display:inline-flex;align-items:center;gap:9px;padding:5px 10px 5px 5px;border-radius:var(--r-pill);
  border:1px solid transparent;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.ubtn:hover{background:var(--glass);border-color:var(--glass-line)}
.ava{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:rgba(76,140,255,.16);border:1px solid rgba(76,140,255,.3);color:var(--pri-hi);
  font-size:12px;font-weight:600;letter-spacing:.04em}
.pop{
  position:absolute;right:0;top:calc(100% + 8px);min-width:178px;padding:6px;
  background:rgba(14,21,38,.86);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--r-card);
  box-shadow:var(--sh),inset 0 1px 0 var(--glass-hi);
  display:none;
}
.pop.on{display:block}
.pop button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:9px;
  font-size:13.5px;color:var(--t2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.pop button:hover{background:var(--glass);color:var(--t1)}
.pop .sep{height:1px;background:var(--line-soft);margin:5px 4px}

/* 图片右键菜单：与用户菜单同一套玻璃语言，只是改用 fixed 定位（可落在浮层之上） */
.ctx{
  position:fixed;z-index:88;min-width:196px;padding:6px;
  background:rgba(14,21,38,.9);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--r-card);
  box-shadow:var(--sh),inset 0 1px 0 var(--glass-hi);
  animation:ctxIn 180ms var(--ease);
}
@keyframes ctxIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.ctx{animation:none}}
.ctx button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border-radius:9px;
  font-size:13.5px;color:var(--t2);text-align:left;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.ctx button .ic{width:16px;height:16px}
.ctx button:hover{background:var(--glass);color:var(--t1)}
.ctx button.pri{color:var(--pri-hi)}
.ctx button.pri:hover{background:rgba(76,140,255,.13);color:var(--pri-hi)}
/* 删除是破坏性动作：菜单里唯一一抹红，且与上方动作隔开一条线 */
.ctx button.danger{color:#E2909A}
.ctx button.danger .ic{color:#C4798A}
.ctx button.danger:hover{background:rgba(210,120,135,.13);color:#F0A7B0}
.ctx .sep{height:1px;background:var(--line-soft);margin:5px 4px}

/* ============ 工作区栅格 ============ */
.work{display:grid;grid-template-columns:5fr 7fr;gap:20px;padding:24px 0 150px;align-items:stretch}
.col{display:flex;flex-direction:column;gap:16px;min-width:0}
/* 描述框占满：让「画面描述 / 修改需求」面板吃掉左列剩余高度，输入框再吃掉面板剩余高度 */
/* 描述面板吃掉整列剩余高度：面板本身有下限，列被拉高时文本框继续长 */
.col > .panel.grow{flex:1 1 auto;display:flex;flex-direction:column;min-height:440px}
.panel.grow > textarea.inp{flex:1 1 auto;min-height:340px}
.phead{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.phead .t{font-size:13.5px;font-weight:500;color:var(--t1)}
.phead .r{margin-left:auto;display:flex;align-items:center;gap:8px}

/* ============ 出图区 ============ */
.stage{
  border-radius:var(--r-card);overflow:hidden;position:relative;
  background:linear-gradient(180deg,rgba(7,11,22,.55),rgba(7,11,22,.28));
  border:1px solid var(--line-soft);
  min-height:430px;display:grid;place-items:center;
}
.stage.empty{border:1px dashed rgba(140,170,255,.2);background:rgba(7,11,22,.25)}
.stage .ph{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;padding:30px}
.stage .ph .ring-ic{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--t3);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.stage img{max-width:100%;max-height:520px;border-radius:10px;display:block}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%}
.cell{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.022));
  border:1px solid var(--glass-line);display:grid;place-items:center}
.cell img{width:100%;height:100%;object-fit:cover;border-radius:0}
.tagd{position:absolute;left:9px;top:9px;display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:var(--r-pill);font-size:12px;letter-spacing:.04em;
  background:rgba(7,11,22,.62);border:1px solid var(--glass-line);color:var(--t2);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.tagd .ic{width:12px;height:12px}
.cell.pending{border-style:dashed;border-color:rgba(140,170,255,.2);background:rgba(7,11,22,.25)}
.cell .mid{display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--t3);font-size:12px;letter-spacing:.04em}

/* 进度环 */
.ring{width:66px;height:66px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:2.4;stroke-linecap:round}
.ring .tr{stroke:rgba(140,170,255,.16)}
.ring .pg{stroke:var(--pri);stroke-dasharray:163.4;transition:stroke-dashoffset 420ms var(--ease)}
.ringwrap{position:relative;display:grid;place-items:center}
.ringwrap b{position:absolute;font-size:12px;font-weight:600;color:var(--pri-hi);letter-spacing:.02em}

/* 旋转（唯一第三种动效语言的一部分：进度反馈） */
.spin{width:14px;height:14px;border-radius:50%;border:1.8px solid rgba(255,255,255,.2);
  border-top-color:var(--pri-hi);animation:spin 900ms linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* 顶部细进度条 */
.track{height:2px;border-radius:2px;background:rgba(140,170,255,.14);overflow:hidden}
.track i{display:block;height:100%;border-radius:2px;background:var(--pri);
  transition:width 420ms var(--ease)}

/* ============ 参考图（图生图专用） ============ */
.ring-ic{
  width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--t3);
  box-shadow:inset 0 1px 0 var(--glass-hi);
}
.drop{
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  padding:26px 18px;border-radius:var(--r-card);
  border:1px dashed rgba(140,170,255,.22);background:rgba(7,11,22,.22);
  transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.drop:hover{border-color:rgba(76,140,255,.42);background:rgba(76,140,255,.045)}
/* 参考图 · 多图网格 */
.refs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.refc{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;padding:0;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  transition:border-color var(--dur) var(--ease)}
.refc img{width:100%;height:100%;object-fit:cover;display:block}
.refc.lead{border-color:rgba(76,140,255,.52);box-shadow:inset 0 0 0 1px rgba(76,140,255,.24)}
.refc .rb{position:absolute;left:6px;top:6px;min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;letter-spacing:.02em;
  color:var(--t2);background:rgba(7,11,22,.72);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.refc.lead .rb{background:rgba(76,140,255,.86);border-color:rgba(150,190,255,.5);color:#fff}
.refc .rdel{position:absolute;right:5px;top:5px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;
  color:var(--t2);background:rgba(7,11,22,.72);border:1px solid var(--glass-line);
  opacity:0;transition:opacity var(--dur) var(--ease)}
.refc:hover .rdel{opacity:1}
.refc .rdel .ic{width:11px;height:11px}
.refc.add{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-style:dashed;border-color:rgba(140,170,255,.24);color:var(--t3);
  font-size:12px;letter-spacing:.04em;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.refc.add:hover{border-color:rgba(76,140,255,.45);color:var(--t2)}
.refpin{
  position:absolute;left:12px;bottom:12px;z-index:2;
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:var(--r-pill);
  background:rgba(7,11,22,.68);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
.refpin img{width:30px;height:30px;border-radius:50%;object-fit:cover;display:block;max-height:none}
.refpin .lab{font-size:12px;color:var(--t2);letter-spacing:.04em}

/* ============ 看图写词 ============ */
.lang{
  font-size:11px;letter-spacing:.04em;padding:2px 7px;border-radius:var(--r-pill);
  color:var(--t3);border:1px solid var(--line-soft);background:rgba(7,11,22,.5);white-space:nowrap;
}
.lang.hi{color:var(--pri-hi);border-color:rgba(76,140,255,.34);background:rgba(76,140,255,.12)}
.capsrc{display:flex;align-items:center;gap:13px;padding:11px}
.capthumb{width:100px;height:100px;border-radius:12px;overflow:hidden;flex:0 0 auto;
  border:1px solid var(--line);background:rgba(255,255,255,.03)}
.capthumb img{width:100%;height:100%;object-fit:cover;display:block}
.capmeta{min-width:0;flex:1}
.capmeta .nm{font-size:13.5px;font-weight:500;color:var(--t1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 场景卡 · 可多选 */
.scns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.scn{position:relative;display:flex;flex-direction:column;gap:4px;padding:11px 12px 11px;
  border-radius:var(--r-card);border:1px solid var(--line);background:rgba(255,255,255,.028);
  text-align:left;cursor:pointer;
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease),transform var(--dur) var(--ease)}
.scn:hover{background:rgba(255,255,255,.055);border-color:rgba(140,170,255,.24);transform:translateY(-2px)}
.scn.on{background:rgba(76,140,255,.13);border-color:rgba(76,140,255,.42)}
.scn .t{font-size:13.5px;font-weight:500;color:var(--t1);padding-right:40px}
.scn .d{font-size:12px;color:var(--t3);line-height:1.5}
.scn .lang{position:absolute;right:9px;top:9px}
.scn.on .lang{color:var(--pri-hi);border-color:rgba(76,140,255,.34)}

/* 场景清单 */
.scnlist{display:flex;flex-direction:column}
.scnrow{display:flex;align-items:center;gap:9px;padding:10px 2px;border-bottom:1px solid var(--line-soft)}
.scnrow:last-child{border-bottom:0}
.scnrow .nm{font-size:13.5px;font-weight:500;color:var(--t1)}
.scnrow .r{margin-left:auto;display:flex;align-items:center;gap:8px}

/* 结果卡 */
.rlt{padding:13px 14px;border-radius:var(--r-card);border:1px solid var(--line);background:rgba(255,255,255,.032)}
.rlt-h{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.rlt-h .nm{font-size:13.5px;font-weight:500;color:var(--t1)}
.rlt-h .meta{margin-left:auto;font-size:12px;color:var(--t3);font-variant-numeric:tabular-nums}
.rlt-t{margin:0;font-size:13.5px;line-height:1.68;color:var(--t2)}
.rlt .obar{margin-top:12px}
.tips{display:flex;flex-direction:column;gap:10px}
.tips p{margin:0;font-size:12px;line-height:1.68;color:var(--t3)}
.tips b{color:var(--t2);font-weight:500}

/* ============ 操作条 ============ */
.obar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.obar .meta{margin-left:auto;font-size:12px;letter-spacing:.04em;color:var(--t3)}

/* ============ 历史 ============ */
.thumbs{display:flex;gap:10px;align-items:stretch;flex-wrap:wrap}
.thumb{width:74px;height:74px;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.03);padding:0;position:relative;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb:hover{transform:translateY(-2px);border-color:rgba(76,140,255,.36)}
.thumb.more{display:grid;place-items:center;color:var(--t3);font-size:12px;letter-spacing:.04em}

/* 批量选择：勾选角标 / 选中态 / 操作条 —— 与缩略图同一套玻璃语言，不引第二种视觉 */
.thumb .tick,.hcell .tick{
  position:absolute;top:5px;right:5px;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;background:rgba(7,11,22,.62);border:1px solid var(--glass-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;transition:opacity var(--dur) var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.thumb .tick .ic,.hcell .tick .ic{width:12px;height:12px;color:#08122A;opacity:0;transition:opacity var(--dur) var(--ease)}
.thumbs.picking .thumb:not(.more) .tick,.drawer.picking .hcell .tick{opacity:1}
.thumb.on .tick,.hcell.on .tick{background:var(--pri);border-color:var(--pri);opacity:1}
.thumb.on .tick .ic,.hcell.on .tick .ic{opacity:1}
.thumb.on,.hcell.on{border-color:var(--pri);box-shadow:0 0 0 2px rgba(76,140,255,.32)}
.thumb.on:hover,.hcell.on:hover{border-color:var(--pri-hi)}
.thumbs.picking .thumb,.drawer.picking .hcell{cursor:pointer}

/* 批量操作条：只在「批量选择」模式下出现，贴着抽屉底下 */
.histbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;
  padding:9px 11px;border-radius:var(--r-card);
  background:rgba(76,140,255,.07);border:1px solid rgba(76,140,255,.2)}
.histbar .lab{font-size:12.5px;letter-spacing:.04em;color:var(--pri-hi)}
.histbar .sp{margin-left:auto}

/* ============ 表格 ============ */
.tbl{width:100%;border-collapse:collapse}
.tbl th{font-size:12px;font-weight:400;letter-spacing:.04em;color:var(--t3);text-align:left;
  padding:0 14px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:11px 14px 11px 0;border-bottom:1px solid var(--line-soft);
  font-size:13.5px;color:var(--t2);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n{color:var(--t1);font-weight:500}
.tbl td.r,.tbl th.r{text-align:right;padding-right:0}
.tbl .acts{display:inline-flex;gap:6px;justify-content:flex-end}

/* ============ 提示条 ============ */
.note{display:flex;gap:11px;padding:12px 14px;border-radius:var(--r-card);
  background:rgba(76,140,255,.06);border:1px solid rgba(76,140,255,.18);color:var(--t2);font-size:13.5px}
.note .ic{color:var(--pri-hi);margin-top:3px}
.note.warn{background:rgba(224,183,106,.06);border-color:rgba(224,183,106,.2)}
.note.warn .ic{color:var(--warn)}
.note.danger{background:rgba(210,120,135,.07);border-color:rgba(210,120,135,.22)}
.note.danger .ic{color:#E2909A}
.note b{color:var(--t1);font-weight:500}

/* ============ 登录页 ============ */
.login{min-height:100vh;display:grid;grid-template-columns:1fr 404px;align-items:center;
  gap:64px;max-width:1180px;margin:0 auto;padding:60px 32px}
/* 左侧欢迎区：横向品牌锁（图标 + 小标签）+ 站名 + 一句话说明
   v1.11 —— 删掉底部装饰线，文字改为「小标签 → 站名 → 说明」的克制三层 */
.l-left .wl-top{display:flex;align-items:center;gap:15px;margin-bottom:26px}
.l-left .wl-mark{
  width:50px;height:50px;border-radius:16px;display:grid;place-items:center;flex:0 0 auto;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--pri-hi);
  box-shadow:inset 0 1px 0 var(--glass-hi),0 16px 38px rgba(0,0,0,.3);
  backdrop-filter:blur(24px) saturate(150%);-webkit-backdrop-filter:blur(24px) saturate(150%);
}
.l-left .wl-hello{font-size:12px;font-weight:500;color:var(--t3);letter-spacing:.14em}
.l-left .wl-title{margin:0 0 15px;font-size:24px;font-weight:600;line-height:1.3;
  color:var(--pri-hi);letter-spacing:-.01em}
.l-left .wl-lede{margin:0;max-width:44ch;font-size:13.5px;line-height:1.68;color:var(--t2);
  text-wrap:pretty}
.l-card{padding:26px 24px 22px}
.l-card .seg{width:100%;margin-bottom:22px}
.l-card .seg button{flex:1;text-align:center}
.l-card form{display:flex;flex-direction:column;gap:15px}
.l-card .btn-go{margin-top:6px}
.l-note{margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);font-size:12px;color:var(--t3);line-height:1.68}

/* ============ 浮层（示例库 / 弹窗） ============ */
.ovl{position:fixed;inset:0;z-index:80;display:none;
  background:rgba(7,11,22,.62);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);}
.ovl.on{display:grid;place-items:center;padding:34px}
.ovl-card{width:100%;max-width:660px;max-height:76vh;display:flex;flex-direction:column;padding:0;overflow:hidden}
.ovl-head{display:flex;align-items:center;gap:10px;padding:17px 18px;border-bottom:1px solid var(--line-soft)}
.ovl-body{overflow:auto;padding:6px 18px 18px}
.grp{margin-top:16px}
.grp > .lab{display:block;margin-bottom:9px}
.item{display:block;width:100%;text-align:left;padding:11px 13px;border-radius:var(--r-card);
  border:1px solid transparent;transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.item:hover{background:var(--glass);border-color:var(--glass-line)}
.item .r1{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.item .t{font-size:13.5px;font-weight:500;color:var(--t1)}
.item .p{font-size:12px;color:var(--t3);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ============ 本机后台 ============ */
.localbar{position:sticky;top:0;z-index:30;background:rgba(10,16,32,.78);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  border-bottom:1px solid var(--line-soft)}
.localbar .row{height:60px;display:flex;align-items:center;gap:14px}
.lbadge{display:inline-flex;align-items:center;gap:7px;padding:4px 11px;border-radius:var(--r-pill);
  border:1px solid rgba(127,212,245,.24);background:rgba(127,212,245,.08);color:var(--cyan);
  font-size:12px;letter-spacing:.04em}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px}
.stat{display:flex;gap:14px;align-items:flex-start;padding:16px 18px}
.stat .si{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;
  background:var(--glass);border:1px solid var(--glass-line);color:var(--t3);flex:0 0 auto}
.duo{display:grid;grid-template-columns:5fr 7fr;gap:16px;align-items:start}
.duo2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin-top:16px}
.cat{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line-soft)}
.cat:last-of-type{border-bottom:0}
.cat .ci{display:flex;align-items:baseline;gap:9px;min-width:0;flex:1}
.cat .cn{font-size:13.5px;color:var(--t1);font-weight:500;white-space:nowrap}
.cat .cm{font-size:12px;color:var(--t3);letter-spacing:.04em;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.cat .cb{display:flex;gap:6px;flex:0 0 auto}
.bar{height:6px;border-radius:4px;background:rgba(140,170,255,.12);overflow:hidden}
.bar i{display:block;height:100%;background:var(--pri);border-radius:4px;opacity:.85}
.switch{width:38px;height:22px;border-radius:var(--r-pill);background:rgba(76,140,255,.24);
  border:1px solid rgba(76,140,255,.42);position:relative;transition:background var(--dur) var(--ease)}
.switch i{position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:50%;
  background:var(--pri-hi);transition:transform var(--dur) var(--ease)}
.switch.off{background:rgba(255,255,255,.06);border-color:var(--line)}
.switch.off i{transform:translateX(-16px);background:var(--t3)}

/* ============ 原型切换条（评审工具，不属于产品 UI） ============ */
.proto{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:90;
  display:flex;align-items:center;gap:5px;padding:7px 9px;max-width:calc(100vw - 40px);overflow:auto;
  background:rgba(14,21,38,.8);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);border-radius:var(--r-pill);
  box-shadow:var(--sh),inset 0 1px 0 var(--glass-hi)}
.proto .plab{font-size:12px;letter-spacing:.04em;color:var(--t3);padding:0 8px 0 6px;white-space:nowrap}
.proto .pdiv{width:1px;height:16px;background:var(--line);margin:0 4px;flex:0 0 auto}
.proto button{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);
  border:1px solid transparent;color:var(--t3);font-size:12px;letter-spacing:.04em;white-space:nowrap;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.proto button b{font-weight:500;color:var(--t3);font-variant-numeric:tabular-nums;opacity:.7}
.proto button:hover{color:var(--t2);background:var(--glass)}
.proto button.on{background:rgba(76,140,255,.14);border-color:rgba(76,140,255,.3);color:var(--pri-hi)}
.proto button.on b{color:var(--pri-hi);opacity:.85}
.proto .hint{font-size:12px;color:var(--t3);padding:0 8px 0 4px;white-space:nowrap;opacity:.75}

/* ============ 响应式（原型仅覆盖到平板） ============ */
@media (max-width:1180px){
  .work{grid-template-columns:1fr}
  .duo,.duo2{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}
@media (max-width:900px){
  .login{grid-template-columns:1fr;gap:36px;padding:44px 24px}
  .wrap{padding:0 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:1ms !important}
}

/* ============================================================
   以下是真实应用新增的构件（原型里没有的）
   —— 仍然只用同一套色板 / 圆角 / 字号 / 动效语言
   ============================================================ */

/* 顶栏页签：用 a 标签承载路由，视觉与 .seg button 一致 */
.seg a{
  display:inline-block;padding:7px 18px;border-radius:var(--r-pill);
  border:1px solid transparent;color:var(--t3);text-decoration:none;
  font-size:12px;letter-spacing:.04em;
  transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.seg a:hover{color:var(--t2)}
.seg a.on{background:rgba(76,140,255,.14);border-color:rgba(76,140,255,.3);color:var(--pri-hi)}

/* 出图区尺寸提示 */
.stage-head{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.stage-head .r{margin-left:auto;font-size:12px;color:var(--t3);letter-spacing:.04em}

/* 结果图片容器 */
.stage .shot{position:relative;width:100%;display:grid;place-items:center}
.stage .shot img{max-width:100%;max-height:520px;border-radius:10px;display:block}
.stage .badge-tl{position:absolute;left:12px;top:12px}
.stage .gridwrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;width:100%;padding:12px}
.stage .gridwrap .cellw{position:relative;border-radius:var(--r-card);overflow:hidden;border:1px solid var(--line-soft);background:rgba(7,11,22,.3)}
.stage .gridwrap .cellw img{width:100%;display:block}

/* 进度文案 */
.pg-txt{font-size:12px;letter-spacing:.04em;color:var(--t2);text-align:center}

/* 骨架屏 */
.skel{width:100%;height:100%;min-height:300px;border-radius:var(--r-card);
  background:linear-gradient(100deg,rgba(140,170,255,.07) 30%,rgba(140,170,255,.14) 50%,rgba(140,170,255,.07) 70%);
  background-size:220% 100%;animation:skel 1.5s linear infinite}
@keyframes skel{to{background-position:-220% 0}}

/* 数字输入（张数 / 最长字数） */
.num-inp{width:100%;height:38px;padding:0 12px;border-radius:11px;
  background:rgba(255,255,255,.04);border:1px solid var(--line);color:var(--t1);
  font-size:13.5px;outline:none;font-variant-numeric:tabular-nums}
.num-inp:focus{border-color:rgba(76,140,255,.55);box-shadow:0 0 0 3px rgba(76,140,255,.13)}

/* 下拉小标签与说明行 */
.mini{font-size:12px;color:var(--t3);letter-spacing:.04em;line-height:1.6}

/* 历史网格抽屉 */
.drawer{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;margin-top:12px}
.hcell{position:relative;aspect-ratio:1/1;border-radius:var(--r-card);overflow:hidden;
  border:1px solid var(--line);background:rgba(255,255,255,.03);padding:0;cursor:pointer;
  transition:transform var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.hcell:hover{transform:translateY(-2px);border-color:rgba(76,140,255,.36)}
.hcell img{width:100%;height:100%;object-fit:cover;display:block}
.hcell .mk{position:absolute;left:6px;bottom:6px;padding:2px 7px;border-radius:var(--r-pill);
  font-size:11px;letter-spacing:.04em;color:var(--t2);background:rgba(7,11,22,.72);
  border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* 结果卡：可编辑文本 */
.rlt textarea{
  width:100%;min-height:96px;padding:11px 12px;border-radius:11px;resize:vertical;
  background:rgba(7,11,22,.34);border:1px solid var(--line);color:var(--t1);
  font-size:13.5px;line-height:1.68;outline:none}
.rlt textarea:focus{border-color:rgba(76,140,255,.5);box-shadow:0 0 0 3px rgba(76,140,255,.12)}
.rlt .flag{margin-top:8px;font-size:12px;color:var(--warn);letter-spacing:.04em}
.rlt.running{opacity:.72}

/* 场景卡：选中打勾 */
.scn .tick{position:absolute;right:10px;bottom:10px;color:var(--pri-hi);opacity:0;
  transition:opacity var(--dur) var(--ease)}
.scn.on .tick{opacity:1}

/* 场景行的预设/自设标签 */
.tagx{display:inline-flex;align-items:center;padding:2px 8px;border-radius:var(--r-pill);
  font-size:11px;letter-spacing:.04em;border:1px solid var(--line);color:var(--t3)}
.tagx.self{border-color:rgba(127,212,245,.28);color:var(--cyan)}

/* 提示条：toast */
.toasts{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:95;
  display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{max-width:min(560px,90vw);padding:10px 16px;border-radius:var(--r-pill);
  font-size:13.5px;color:var(--t1);background:rgba(14,21,38,.9);
  -webkit-backdrop-filter:blur(24px) saturate(150%);backdrop-filter:blur(24px) saturate(150%);
  border:1px solid var(--glass-line);box-shadow:var(--sh),inset 0 1px 0 var(--glass-hi);
  animation:tin 320ms var(--ease)}
.toast.err{border-color:rgba(210,120,135,.34);color:#F0A7B0}
@keyframes tin{from{opacity:0;transform:translateY(8px)}}

/* 浮层表单 */
.ovl-card .form{display:flex;flex-direction:column;gap:14px;padding:16px 18px 18px}
.ovl-foot{display:flex;gap:10px;padding:14px 18px;border-top:1px solid var(--line-soft)}
.ovl-foot .btn-go{height:38px;flex:1}
.ovl-foot .btn{height:38px}

/* 空态小卡 */
.blank{padding:26px 18px;text-align:center;color:var(--t3);font-size:12.5px;letter-spacing:.04em;
  border:1px dashed rgba(140,170,255,.18);border-radius:var(--r-card);background:rgba(7,11,22,.2)}

/* 拖拽高亮 */
.drop.over{border-color:rgba(76,140,255,.6);background:rgba(76,140,255,.08)}

/* 快捷键提示 */
.kbd{display:inline-block;padding:1px 6px;border-radius:6px;border:1px solid var(--line);
  color:var(--t3);font-size:11px;letter-spacing:.04em}