:root{
  --bg:#0e1015; --bg2:#141823; --panel:#171b26; --panel2:#1d2230;
  --border:#2a3040; --border-light:#363e52;
  --text:#e8ebf2; --text2:#9aa3b5; --text3:#6b7386;
  --accent:#5b8cff; --accent2:#3f6fe0; --accent-soft:rgba(91,140,255,.14);
  --green:#3ecf8e; --red:#ff6b6b; --yellow:#ffc94d;
  --radius:12px; --radius-s:8px;
  --shadow:0 8px 32px rgba(0,0,0,.45);
}
[hidden]{display:none!important}
body[data-workspace="audio"] .platform-tabs,body[data-workspace="audio"] #balVenice,body[data-workspace="audio"] #balWavespeed,body[data-workspace="audio"] #btnHistory,body[data-workspace="audio"] #btnFavAlbum,body[data-workspace="audio"] #btnPromptExpert,body[data-workspace="audio"] #veniceWalletPanel{display:none!important}
body[data-workspace="audio"] #balApimart{display:flex!important}
#audioLayout{display:flex;gap:20px;padding:20px;max-width:1720px;margin:auto;height:calc(100dvh - 102px);overflow:hidden}
#audioPanel{width:390px;flex-shrink:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;overflow-y:auto}
.audio-heading{display:flex;gap:12px;align-items:center;margin-bottom:16px}.audio-heading h2{font-size:18px}.audio-heading p{font-size:11px;color:var(--text3);margin-top:4px}.audio-logo{font-size:30px;color:var(--accent);background:var(--accent-soft);padding:5px 14px;border-radius:12px}
.audio-field{display:flex;flex-direction:column;gap:6px;margin:14px 0;font-size:12px;color:var(--text2)}.audio-field input:not([type=checkbox]),.audio-field select,.audio-field textarea{width:100%;padding:9px 11px;min-width:0}.audio-field textarea{resize:vertical;line-height:1.7}.audio-field small{color:var(--text3)}.audio-field audio{width:100%;height:36px}.audio-check{display:flex;align-items:center;gap:9px;font-size:12px;margin:14px 0}.audio-check input,.audio-format-options input,#modelAccessList input{accent-color:var(--accent)}.audio-format-options{display:flex;gap:16px}.audio-format-options label{display:flex;gap:5px;align-items:center}.audio-upload-item{display:flex;gap:7px;align-items:center;margin:5px 0}.audio-advanced{border-top:1px solid var(--border);padding-top:12px;margin-top:14px;font-size:12px}.audio-advanced summary{cursor:pointer;color:var(--text2)}
.audio-generate{width:100%;padding:13px;margin-top:12px;border-radius:9px;background:var(--accent)!important;color:white;font-size:15px;font-weight:600}.audio-generate:disabled{opacity:.5;cursor:not-allowed}#audioSubmitStatus{margin-top:10px;overflow-wrap:anywhere}
#audioWorkspace{flex:1;min-width:0;overflow-y:auto;padding-right:4px}#audioList{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:16px}.audio-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:18px;align-self:start}.audio-card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}.audio-card-heading h3{font-size:15px}.audio-card-heading small{font-size:10px;color:var(--text3)}.audio-status{font-size:11px;color:var(--accent);white-space:nowrap}.audio-tracks{display:grid;gap:14px}.audio-track{background:var(--bg2);border:1px solid var(--border);border-radius:9px;padding:12px}.audio-track h4{font-size:13px;margin-bottom:10px}.audio-cover{width:64px;height:64px;object-fit:cover;border-radius:8px;float:left;margin:0 10px 10px 0}.audio-card audio{display:block;width:100%;height:38px;margin:10px 0}.audio-card video{width:100%;max-height:360px;display:block;margin:10px 0}.audio-track select{display:block;width:100%;padding:7px;font-size:12px;margin-top:12px;clear:both}.audio-card .video-actions{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}.audio-card details{font-size:12px;margin-top:12px;color:var(--text2)}.audio-card summary{cursor:pointer}.audio-card p,.audio-card pre{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;margin:8px 0}.audio-card pre{font-size:11px}.audio-result-value{font-size:12px;margin:10px 0}.audio-result-value small{color:var(--text3)}.audio-result{max-height:480px;overflow:auto}.audio-card .btn-mini{display:inline-block;font-size:11px}.audio-result-value .btn-mini{margin-right:5px}
@media(max-width:900px){#audioLayout{display:block;height:auto;overflow:visible;padding:12px}#audioPanel{width:100%;margin-bottom:16px}#audioWorkspace{overflow:visible}#audioList{grid-template-columns:1fr}}
#workspaceNav{height:44px;display:flex;align-items:center;gap:5px;padding:5px 24px;background:var(--bg2);border-bottom:1px solid var(--border)}
#workspaceNav button{padding:4px 18px;border-radius:7px;color:var(--text2);font-size:13px}
#workspaceNav button.active{color:var(--text);background:var(--accent-soft);box-shadow:inset 0 -2px var(--accent)}
body[data-workspace="video"] .platform-tabs,body[data-workspace="video"] #balApimart,body[data-workspace="video"] #balWavespeed,body[data-workspace="video"] #btnHistory,body[data-workspace="video"] #btnFavAlbum,body[data-workspace="video"] #btnPromptExpert{display:none!important}
#videoLayout{display:flex;gap:20px;padding:20px;max-width:1720px;margin:auto;height:calc(100dvh - 102px);overflow:hidden}
#videoPanel{width:380px;flex-shrink:0;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:20px;overflow-y:auto}
#videoPanel select{display:block;width:100%;padding:9px 10px;margin-top:5px}
#videoPrompt{width:100%;min-height:180px;resize:vertical;padding:12px;line-height:1.7}
.video-modes{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 8px}
.video-modes button{padding:5px 9px;border:1px solid var(--border);border-radius:7px;font-size:12px;color:var(--text2)}
.video-modes button.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent)}
.video-modes button:disabled{opacity:.35;cursor:not-allowed}
.video-settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;color:var(--text2);font-size:12px}
#videoQuote{padding:12px 0;color:var(--text2);font-size:13px}
#videoGenerate{display:block;width:100%;padding:12px;background:var(--accent);color:white;border-radius:9px;font-weight:600;font-size:15px;margin-bottom:8px}
#videoGenerate:disabled{opacity:.45;cursor:not-allowed}
#videoRefs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.video-ref{position:relative;min-width:0;padding:5px;background:var(--bg2);border:1px solid var(--border);border-radius:8px}
.video-ref img{display:block;width:100%;height:82px;object-fit:contain;border-radius:5px}
.video-ref .ref-delete{position:absolute;right:4px;top:4px;border-radius:50%;background:#000a;width:22px;height:22px}
.video-ref span{font-size:11px;color:var(--text2)}
.video-ref .ref-order{float:right;font-size:12px;padding:0 3px}
.video-upload-actions{display:flex;gap:7px;align-items:center;margin-bottom:8px}
.video-upload-actions label{cursor:pointer}
#videoAudioPreview audio{width:100%;height:34px;margin-top:8px}
#videoAudioInput{max-width:100%;font-size:12px}
#videoWorkspace{min-width:0;flex:1;overflow-y:auto;padding-right:4px}
.video-list-heading{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:20px}
.video-list-heading h2{font-size:17px;font-weight:600}
.video-list-heading input{padding:6px 10px;width:180px;margin-right:6px;font-size:12px}
.video-list-heading button{margin-left:5px}
#videoList{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.video-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;align-self:start}
.video-card video{width:100%;max-height:460px;display:block;background:#07090e;aspect-ratio:16/9;object-fit:contain}
.video-card .video-preview{background:var(--bg2);min-height:150px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text2);padding:20px;text-align:center}
.video-card .video-content{padding:15px}
.video-card h3{font-size:13px;color:var(--accent);font-weight:600}
.video-card p{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;line-height:1.7}
.video-card .video-prompt{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0}
.video-card .video-meta{font-size:11px;color:var(--text3);display:flex;flex-wrap:wrap;gap:8px;margin:5px 0}
.video-card .video-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.video-card details{font-size:12px;color:var(--text2);margin-top:10px}
.video-card details summary{cursor:pointer}
.video-detail-refs{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.video-detail-refs img{width:80px;height:80px;object-fit:contain;border:1px solid var(--border);border-radius:6px}
.video-input-item{display:grid;gap:8px;margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:8px;min-width:0}
.video-input-item>span{font-size:12px;color:var(--text2);overflow-wrap:anywhere}
.video-input-item>.btn-mini{justify-self:start}
#videoClipsInput,#videoAudioInput{max-width:100%;font-size:12px}
#videoPolicyNote{border-left:2px solid var(--accent);padding-left:9px}
.video-error{color:var(--red)!important;font-size:12px!important;margin-top:8px}
#videoPagination{display:flex;align-items:center;justify-content:center;gap:12px;padding:24px}
#videoPickerImages{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
#videoPickerImages button{padding:6px;border:1px solid var(--border);border-radius:8px}
#videoPickerImages img{display:block;width:100%;height:130px;object-fit:contain}
#videoPickerImages small{display:block;text-align:left;font-size:11px;color:var(--text3);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
@media(max-width:900px){#videoLayout{padding:12px;gap:12px}#videoPanel{width:310px;padding:14px}.video-list-heading{align-items:flex-start;flex-direction:column}.video-list-heading input{width:150px}}
@media(max-width:640px){#videoLayout{display:block;overflow-y:auto}#videoPanel{width:100%;margin-bottom:16px;overflow:visible}#videoWorkspace{overflow:visible}#videoList{grid-template-columns:1fr}#workspaceNav{padding-left:12px}}
body[data-platform="wavespeed"]{ --accent:#9d6bff; --accent2:#7f4de8; --accent-soft:rgba(157,107,255,.15); }
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
#histGrid, .modal-mask, #detailMask, .hist-drawer{-webkit-overflow-scrolling:touch}
body{background:var(--bg);color:var(--text);font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;font-size:14px;line-height:1.6}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;transition:all .18s cubic-bezier(0.25, 0.8, 0.25, 1)}
button:active:not(:disabled){transform:scale(0.94);opacity:0.88}
input,textarea,select{font-family:inherit;color:var(--text);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-s);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-thumb{background:#2c3346;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ===== 顶栏 ===== */
#topbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--border);height:58px;flex-shrink:0;z-index:50}
.brand{font-size:16px;font-weight:700;white-space:nowrap;display:flex;align-items:center;gap:6px}
.brand-icon{width:22px;height:22px;border-radius:6px;display:block}
.platform-tabs{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:999px;padding:3px}
.platform-tabs button{padding:5px 16px;border-radius:999px;font-size:13px;color:var(--text2);transition:all .2s;white-space:nowrap}
.platform-tabs button.active{background:var(--accent);color:#fff;font-weight:600}
.balances{display:flex;gap:8px;flex-wrap:nowrap;margin-left:auto}
.bal-chip{display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:12px;background:var(--panel);border:1px solid var(--border);border-radius:999px;color:var(--text2);cursor:pointer;user-select:none;transition:all .2s}
.bal-chip:hover{border-color:var(--accent)}
.bal-chip:active{transform:scale(0.96)}
.bal-chip b{color:var(--green);font-weight:600}
.bal-chip .refresh{display:inline-block}
.bal-chip.loading .refresh{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.top-actions{display:flex;gap:8px}
.top-actions button{padding:6px 14px;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-s);font-size:13px;color:var(--text);transition:all .2s;white-space:nowrap}
.top-actions button:hover{border-color:var(--accent);background:var(--accent-soft)}

/* ===== 主布局 (电脑端左右独立滚动) ===== */
#layout{display:flex;align-items:stretch;gap:16px;padding:16px;max-width:1720px;margin:0 auto;height:calc(100dvh - 102px);overflow:hidden}
#panel{width:400px;flex-shrink:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;height:100%;overflow-y:auto}
#workspace{flex:1;min-width:0;display:flex;flex-direction:column;gap:16px;height:100%;overflow-y:auto;padding-right:4px}
.sec{margin-bottom:18px}
.sec-title{font-size:12px;color:var(--text3);font-weight:600;letter-spacing:.08em;margin-bottom:8px;display:flex;align-items:center;gap:8px}
.sec-title .hint{font-weight:400;letter-spacing:0;color:var(--text3);font-size:11px}
.model-row select{width:100%;padding:8px 10px;font-size:13px}
.auto-badge{display:none;font-size:11px;color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent);border-radius:6px;padding:2px 8px;margin-top:6px}
.auto-badge.show{display:inline-block}

/* 提示词与快捷词 */
#promptInput{width:100%;min-height:160px;padding:10px 12px;font-size:14px;resize:vertical;line-height:1.7}
.prompt-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.char-count{font-size:11px;color:var(--text3)}
.char-count.warn{color:var(--yellow)}
.prompt-tools{display:flex;gap:8px}
.prompt-tools button{font-size:12px;color:var(--text2);padding:3px 10px;border:1px solid var(--border);border-radius:999px;transition:all .18s}
.prompt-tools button:hover{color:var(--accent);border-color:var(--accent)}
.snippet-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:260px;overflow-y:auto;padding:2px}
.snippet{
  display:inline-flex;align-items:center;gap:4px;font-size:12px;padding:6px 12px;
  background:var(--panel2);border:1px solid var(--border);border-radius:var(--radius-s);
  color:var(--text2);transition:all .18s;max-width:100%;cursor:pointer;line-height:1.5;
  white-space:normal !important;word-break:break-all !important;overflow:visible !important;text-overflow:clip !important;
}
.snippet:hover{color:var(--accent);border-color:var(--accent);background:var(--accent-soft)}
.snippet:active{transform:scale(0.96)}
.snippet.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}
.snippet .chk{font-weight:700;margin-right:2px;flex-shrink:0}
.snippet .txt{white-space:normal !important;word-break:break-all !important;overflow:visible !important;text-overflow:clip !important;display:inline}
.snippet .snippet-note{color:var(--accent);font-weight:600;margin-right:4px;opacity:.9}
.snippet.active .snippet-note{color:#fff;opacity:.95}
.snippet.active .del{color:rgba(255,255,255,.85)}
.snippet.pin{border-color:rgba(255,201,77,.4)}
.snippet.active.pin{border-color:var(--accent)}
.snippet .del{color:var(--text3);font-size:14px;line-height:1;padding:0 2px;flex-shrink:0;margin-left:4px}
.snippet .del:hover{color:var(--red)}
.snippet-add{border-style:dashed;color:var(--text3);max-width:none;border-radius:999px;align-items:center}

/* 参考图 */
.ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}
.ref-item{position:relative;aspect-ratio:1;border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--border);background:var(--bg2);cursor:pointer;transition:all .18s}
.ref-item:hover{border-color:var(--accent);transform:scale(1.02)}
.ref-item img{width:100%;height:100%;object-fit:cover;display:block}
.ref-item .rm{position:absolute;top:3px;right:3px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;z-index:5}
.ref-item .rm:hover{background:var(--red)}
.ref-add{aspect-ratio:1;border:1.5px dashed var(--border-light);border-radius:var(--radius-s);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--text3);font-size:11px;transition:all .18s}
.ref-add:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.ref-add .ico{font-size:18px}
.ref-count{font-size:11px;color:var(--text3);margin-top:6px}
.ref-count.warn{color:var(--yellow)}
#refDropHint{display:none;font-size:11px;color:var(--accent);margin-top:6px}
#panel.dragover{outline:2px dashed var(--accent);outline-offset:-8px}

/* ===== 高宽比下拉 ===== */
.dd{position:relative}
.dd-btn{
  width:100%;display:flex;align-items:center;gap:10px;padding:9px 12px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-s);
  font-size:13px;color:var(--text);transition:border-color .2s;
}
.dd-btn:hover,.dd.open .dd-btn{border-color:var(--accent)}
.dd-btn .lab{flex:1;text-align:left;display:flex;align-items:baseline;gap:8px}
.dd-btn .lab .en{color:var(--text3);font-size:12px}
.dd-btn .chev{color:var(--text3);font-size:11px;transition:transform .2s}
.dd.open .chev{transform:rotate(180deg)}
.dd-menu{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:80;
  background:#12141d;border:1px solid var(--border-light);border-radius:var(--radius);
  max-height:0;overflow:hidden;opacity:0;transition:max-height .25s,opacity .2s;
  box-shadow:var(--shadow);
}
.dd.open .dd-menu{max-height:360px;opacity:1;overflow-y:auto}
.dd-item{display:flex;align-items:center;gap:12px;padding:10px 14px;font-size:13px;color:var(--text);cursor:pointer;transition:background .15s}
.dd-item:hover{background:var(--accent-soft);color:var(--text)}
.dd-item.active{color:var(--text);background:rgba(255,255,255,.05)}
.dd-item.active .check{color:var(--accent)}
.dd-item .en{color:var(--text3);font-size:12px;margin-left:auto}
.dd-item .check{width:16px;text-align:center;color:transparent;flex-shrink:0;font-weight:bold}
.ric-box{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.ric{display:inline-block;border:1.5px solid currentColor;border-radius:3px;box-sizing:border-box;opacity:.9}
.ric-auto{border-style:dashed;background:transparent}

/* chips */
.chip-grid{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:5px 12px;font-size:12px;border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text2);background:var(--bg2);transition:all .15s;min-height:32px}
.chip:hover{border-color:var(--accent);color:var(--text)}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600}

.form-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.form-row label{font-size:13px;color:var(--text2);min-width:64px}
.form-row select,.form-row input[type="number"],.form-row input[type="text"]{padding:6px 10px;font-size:13px;flex:1;min-width:0}
.switch{position:relative;width:38px;height:22px;background:var(--bg);border:1px solid var(--border);border-radius:999px;cursor:pointer;transition:all .2s;flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--text3);transition:all .2s}
.switch.on{background:var(--accent);border-color:var(--accent)}
.switch.on::after{left:18px;background:#fff}
details.adv{border:1px solid var(--border);border-radius:var(--radius-s);padding:8px 12px;margin-bottom:12px}
details.adv summary{font-size:12px;color:var(--text3);cursor:pointer;user-select:none}
details.adv textarea{width:100%;min-height:70px;margin-top:8px;font-size:12px;font-family:Consolas,monospace;padding:8px}

.cost-line{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:var(--text2);background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-s);padding:8px 12px;margin-bottom:10px}
.cost-line b{color:var(--yellow);font-weight:600}

/* 生成按钮平滑流畅按压与提交状态过渡 */
#btnGenerate{
  width:100%;padding:13px;font-size:15px;font-weight:700;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  background-size:200% 200%;
  border-radius:var(--radius);
  transition:all 0.3s cubic-bezier(0.25,0.8,0.25,1);
  letter-spacing:.05em;
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
#btnGenerate:hover:not(:disabled){filter:brightness(1.12);transform:translateY(-1px);box-shadow:0 4px 16px rgba(91,140,255,0.3)}
#btnGenerate:active:not(:disabled){transform:scale(0.97)}
/* 移动端触摸按压反馈（触摸设备的 :active 不稳定，用 touch-pressed 类驱动） */
#btnGenerate.touch-pressed:not(:disabled){
  transform:scale(0.96);
  filter:brightness(1.22);
  box-shadow:0 2px 10px rgba(0,0,0,.35),0 0 0 2px rgba(255,255,255,.18) inset;
  transition:transform .08s ease,filter .08s ease,box-shadow .08s ease;
}
#btnGenerate::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at center,rgba(255,255,255,.35),transparent 60%);opacity:0;transition:opacity .12s;pointer-events:none}
#btnGenerate:active:not(:disabled)::after{opacity:1}
#btnGenerate.submitting{
  opacity:0.92;
  transform:scale(0.98);
  background:linear-gradient(135deg,var(--accent2),var(--accent));
  animation:btnPulse 1.2s ease-in-out infinite alternate;
  box-shadow:0 0 16px var(--accent-soft);
}
@keyframes btnPulse{
  0%{box-shadow:0 0 8px rgba(91,140,255,0.3)}
  100%{box-shadow:0 0 20px rgba(91,140,255,0.75)}
}
.kbd-hint{text-align:center;font-size:11px;color:var(--text3);margin-top:6px}

/* ===== 工作区 ===== */
.ws-empty{border:1.5px dashed var(--border);border-radius:var(--radius);padding:60px 20px;text-align:center;color:var(--text3)}
.ws-empty .big{font-size:44px;margin-bottom:10px}
.task-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:16px}
.task-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.task-head .model-tag{font-size:11px;background:var(--accent-soft);color:var(--accent);border-radius:6px;padding:2px 8px;font-weight:600}
.task-head .plat-tag{font-size:11px;background:var(--panel2);color:var(--text2);border-radius:6px;padding:2px 8px}
.task-head .time{font-size:11px;color:var(--text3);margin-left:auto}
.btn-del-head{width:24px;height:24px;border-radius:6px;border:1px solid var(--border);color:var(--text3);font-size:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .18s}
.btn-del-head:hover{border-color:var(--red);color:var(--red);background:rgba(255,107,107,.1)}
.task-prompt{font-size:13px;color:var(--text2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:10px;word-break:break-all}
.task-status{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text2);flex-wrap:wrap}
.spinner{width:18px;height:18px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;flex-shrink:0}
.elapsed{color:var(--accent);font-variant-numeric:tabular-nums;font-weight:600}

.btn-cancel{font-size:11px;padding:3px 12px;border:1px solid var(--border);border-radius:999px;color:var(--text3)}
.btn-cancel:hover{border-color:var(--red);color:var(--red)}
.task-error{color:var(--red);font-size:13px;background:rgba(255,107,107,.08);border:1px solid rgba(255,107,107,.3);border-radius:var(--radius-s);padding:10px 12px;margin-top:8px;word-break:break-all}
.task-cancelled{color:var(--text3);font-size:13px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-s);padding:10px 12px;margin-top:8px}
.result-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin-top:12px}
.result-item{position:relative;border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--border);background:var(--bg2)}
.result-img-wrap{position:relative;overflow:hidden}
.result-item img{width:100%;height:auto;max-height:480px;object-fit:contain;display:block;cursor:zoom-in}
.result-actions{position:absolute;left:0;right:0;bottom:0;display:flex;gap:4px;padding:6px;background:linear-gradient(transparent,rgba(0,0,0,.85));opacity:0;transition:opacity .2s}
.result-item:hover .result-actions,.result-item.touch .result-actions{opacity:1}
.result-actions button{flex:1;font-size:11px;padding:5px 2px;background:rgba(255,255,255,.12);border-radius:6px;color:#fff;backdrop-filter:blur(4px);white-space:nowrap;transition:all .18s}
.result-actions button:hover{background:var(--accent)}
.task-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--text3);margin-top:10px;align-items:center}
.task-meta b{color:var(--yellow)}

/* 通用按钮增强动画与成功/失败视觉交互状态 */
.btn-mini{
  font-size:12px;padding:4px 12px;border:1px solid var(--border);border-radius:999px;
  color:var(--text2);transition:all .18s cubic-bezier(0.25, 0.8, 0.25, 1);user-select:none;
}
.btn-mini:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.btn-mini:active{transform:scale(0.93);opacity:0.85}
.btn-success{
  border-color:var(--green)!important;color:var(--green)!important;
  background:rgba(62,207,142,0.18)!important;box-shadow:0 0 10px rgba(62,207,142,0.3);
  transform:scale(1.03);
}
.btn-danger-active{
  border-color:var(--red)!important;color:var(--red)!important;
  background:rgba(255,107,107,0.18)!important;
}

/* 最近生成 */
.recent-strip{display:flex;gap:8px;overflow-x:auto;padding:4px 2px;min-height:48px;align-items:center}
.recent-thumb{position:relative;width:76px;height:76px;flex-shrink:0;border-radius:var(--radius-s);overflow:hidden;border:1px solid var(--border);cursor:pointer;transition:all .18s}
.recent-thumb img{width:100%;height:100%;object-fit:cover}
.recent-thumb:hover{border-color:var(--accent)}
.recent-thumb.selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
.recent-thumb .chk-badge{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;font-size:12px;font-weight:bold;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.5)}
.recent-thumb .use-ref{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);color:#fff;font-size:11px;opacity:0;transition:opacity .2s;text-align:center}
.recent-thumb:hover .use-ref{opacity:1}
.recent-thumb.selected .use-ref{background:rgba(62,207,142,.4)}

/* 分页控件 */
.page-btn{padding:5px 12px;font-size:12px;border:1px solid var(--border);border-radius:999px;color:var(--text2);background:var(--panel2);transition:all .18s}
.page-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text)}
.page-btn:disabled{opacity:.4;cursor:not-allowed}

/* ===== 云端常用参考图模态框 ===== */
.common-ref-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:14px}
.common-ref-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius-s);overflow:hidden;cursor:pointer;transition:all .18s}
.common-ref-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.common-ref-card.selected{border-color:var(--green);box-shadow:0 0 0 2px var(--green)}
.common-ref-card .thumb{aspect-ratio:1;background:var(--bg2);position:relative}
.common-ref-card .thumb img{width:100%;height:100%;object-fit:cover;display:block}
.common-ref-card .chk-badge{position:absolute;top:6px;left:6px;z-index:15;width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;font-size:13px;font-weight:bold;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.6)}
.common-ref-card .btn-del-common-badge{
  position:absolute;top:6px;right:6px;z-index:15;width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,0.65);border:1px solid var(--border);color:#fff;
  font-size:13px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all .15s;
}
.common-ref-card .btn-del-common-badge:hover{background:var(--red);border-color:var(--red)}
.common-ref-card .info{padding:6px 8px;font-size:11px;color:var(--text2);background:var(--panel);display:flex;align-items:center;justify-content:space-between;gap:6px}
.common-ref-card .info .name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== 全屏模态框 ===== */
.modal-mask{position:fixed;inset:0;background:rgba(5,7,12,.78);backdrop-filter:blur(6px);z-index:100;display:none;align-items:stretch;justify-content:center}
.modal-mask.open{display:flex}
/* 设置弹窗：固定宽度居中，四周留出空白（点击空白/✕ 关闭），内容多时内部滚动 */
.set-modal{width:100%;max-width:440px;max-height:88vh;overflow-y:auto;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:18px 22px;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.modal-full{width:100%;height:100%;background:var(--bg);display:flex;flex-direction:column}
@media(min-width:900px){.modal-full{margin:2.5vh 2.5vw;width:95vw;height:95dvh;border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}}
.modal-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.modal-head h2{font-size:16px}
.modal-head .spacer{flex:1}
.modal-close{width:36px;height:36px;border-radius:50%;border:1px solid var(--border);font-size:16px;color:var(--text2);display:flex;align-items:center;justify-content:center;transition:all .18s}
.modal-close:hover{border-color:var(--red);color:var(--red)}
.modal-body{flex:1;overflow-y:auto;padding:16px 18px}
.filter-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filter-row input[type="search"]{padding:6px 12px;font-size:13px;width:180px;border-radius:999px}
.hist-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.hist-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:all .15s;position:relative}
.hist-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.hist-card.compare-picked{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent);transform:translateY(-2px)}
.hist-card .thumb{aspect-ratio:1;background:var(--bg2);position:relative}
.hist-card .thumb img{width:100%;height:100%;object-fit:cover}
.hist-card .info{padding:8px 10px}
.hist-card .info .p{font-size:12px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist-card .info .m{font-size:11px;color:var(--text3);display:flex;justify-content:space-between;gap:6px;margin-top:2px}
.hist-card .sel-box{position:absolute;top:6px;left:6px;z-index:2;width:22px;height:22px;border-radius:6px;border:2px solid rgba(255,255,255,.8);background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;color:#fff;font-size:14px}
.hist-grid.manage .sel-box{display:flex}
.hist-card.selected .sel-box{background:var(--accent);border-color:var(--accent)}
.hist-card.selected{border-color:var(--accent)}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:4px}
.status-ok{background:var(--green)}.status-fail{background:var(--red)}.status-run{background:var(--yellow)}.status-cancel{background:var(--text3)}
.hist-empty{text-align:center;color:var(--text3);padding:60px 0}
.manage-bar{display:none;gap:10px;align-items:center}
.manage-bar.show{display:flex}

/* 图片详情弹窗 */
#detailMask{position:fixed;inset:0;background:rgba(3,4,8,.92);z-index:200;display:none}
#detailMask.open{display:flex}
.detail-wrap{display:flex;width:100%;height:100%;flex-direction:row;position:relative}
.detail-img{flex:1;display:flex;flex-direction:column;min-height:0;padding:8px;gap:6px}
.detail-img-main{flex:1;display:flex;align-items:center;justify-content:center;min-height:0}
.detail-img-main img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.detail-img-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 10px;flex-shrink:0}
.detail-side{width:380px;background:var(--panel);border-left:1px solid var(--border);padding:20px;overflow-y:auto;flex-shrink:0}
.detail-side h3{font-size:13px;color:var(--text3);margin:14px 0 6px}
.detail-side h3:first-child{margin-top:0}
.detail-prompt{font-size:13px;background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-s);padding:10px;word-break:break-all;user-select:text}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:12px}
.kv .k{color:var(--text3);white-space:nowrap}.kv .v{color:var(--text);word-break:break-all}
.refs-thumbs{display:flex;gap:8px;flex-wrap:wrap}
.refs-thumbs img{width:64px;height:64px;object-fit:cover;border-radius:8px;border:1px solid var(--border);cursor:zoom-in;transition:all .2s}
.refs-thumbs img:hover{border-color:var(--accent);transform:scale(1.05)}
.detail-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.detail-btns button{font-size:12px;padding:7px 14px;border:1px solid var(--border);border-radius:var(--radius-s);color:var(--text);transition:all .18s}
.detail-btns button:hover{border-color:var(--accent);background:var(--accent-soft)}
.detail-btns button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.detail-btns button.danger:hover{border-color:var(--red);color:var(--red);background:rgba(255,107,107,.1)}
.detail-close{position:absolute;top:14px;right:14px;z-index:35;width:38px;height:38px;border-radius:50%;background:rgba(20,24,35,.85);border:1px solid var(--border);font-size:16px;display:flex;align-items:center;justify-content:center;color:#fff}
.detail-close:hover{border-color:var(--red);color:var(--red)}

.btn-side-toggle{display:none}

/* 手机端响应式 */
@media(max-width:900px){
  html,body{overflow-y:auto!important;height:auto!important;-webkit-overflow-scrolling:touch}
  #topbar{position:sticky;top:0;height:auto;flex-wrap:wrap;z-index:50}
  #layout{flex-direction:column;padding:12px;height:auto;overflow:visible;padding-bottom:80px;-webkit-overflow-scrolling:touch}
  #panel{width:100%;position:static;height:auto;max-height:none;order:1;overflow:visible}
  #workspace{order:2;width:100%;height:auto;overflow:visible;display:flex;flex-direction:column}
  /* 移动端生成按钮 fixed 在底部 */
  #btnGenerate{position:fixed;bottom:0;left:0;right:0;z-index:60;border-radius:0;padding:14px 16px;font-size:15px;box-shadow:0 -4px 16px rgba(0,0,0,.4)}
  #btnGenerate.submitting{position:fixed}
  .kbd-hint{display:none}
  .cost-line{margin-bottom:6px}
  #recentSec{order:1}
  .task-list-header, #taskList, #wsEmpty, #paginationBottom {order:2}
  .brand{font-size:14px}
  .top-actions{flex-wrap:wrap;width:100%;gap:6px}
  .top-actions button{padding:6px 10px;font-size:12px}
  .detail-wrap{flex-direction:column}
  .detail-img{flex:1;height:100%;padding:12px}
  .detail-side{
    position:absolute;bottom:0;left:0;right:0;max-height:65dvh;
    z-index:30;background:rgba(20,24,35,0.96);backdrop-filter:blur(12px);
    border-top:1px solid var(--border-light);border-left:none;
    padding:16px;transform:translateY(100%);transition:transform .25s ease;
    box-shadow:0 -8px 32px rgba(0,0,0,.6);
  }
  .detail-side.show{transform:translateY(0)}
  .btn-side-toggle{
    display:flex;align-items:center;gap:4px;padding:6px 14px;border-radius:999px;
    background:rgba(20,24,35,0.6);border:1px solid var(--border-light);color:var(--text2);font-size:12px;
  }
  /* 手机端无鼠标悬停：生图操作按钮（作为参考图/下载/复制链接）常显 */
  .result-item .result-actions{opacity:1}
  /* iPhone 安全区（刘海/底部 Home 条）适配 */
  #btnGenerate{padding-bottom:calc(14px + env(safe-area-inset-bottom))}
  #layout{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  .detail-side{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
}
@media(max-width:480px){
  body{font-size:13px}
  #topbar{padding:8px 10px;gap:6px}
  .brand span{display:none}
  .platform-tabs button{padding:5px 10px;font-size:12px}
  .balances{width:100%;margin-left:0}
  .bal-chip{flex:1;justify-content:center}
  .top-actions button{padding:5px 8px;font-size:11px}
  #layout{padding:8px;gap:10px}
  #panel{padding:12px}
  .result-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
  .result-actions{flex-wrap:wrap;gap:3px;padding:5px}
  .result-actions button{font-size:10px;padding:6px 2px;white-space:normal;line-height:1.25;min-height:26px}
  .hist-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .chip{padding:5px 9px;font-size:11px}
  .ref-grid{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}
  .modal-body{padding:10px}
}
@media(max-width:340px){
  .hist-grid{grid-template-columns:1fr 1fr}
  .brand span{display:none}
}
.category-bar{display:flex;gap:6px;overflow-x:auto;margin:8px 0 6px;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.category-bar:hover{scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.category-bar::-webkit-scrollbar{height:0;width:0;transition:height .2s ease}
.category-bar:hover::-webkit-scrollbar{height:3px}
.category-bar::-webkit-scrollbar-track{background:transparent}
.category-bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.category-bar:hover::-webkit-scrollbar-thumb{background:var(--text3);border-radius:3px}
.cat-chip{padding:3px 10px;font-size:11px;border-radius:12px;background:var(--panel2);border:1px solid var(--border);color:var(--text2);cursor:pointer;white-space:nowrap;transition:all .15s;display:inline-flex;align-items:center;gap:4px;flex-shrink:0}
.cat-chip:hover{border-color:var(--accent);color:var(--text)}
.cat-chip.active{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:600}
.cat-chip .cat-del{opacity:0.5;margin-left:2px;font-size:10px;border:none;background:none;color:inherit;cursor:pointer}
.cat-chip .cat-del:hover{opacity:1;color:var(--red)}
.cat-add{border-style:dashed}
.ref-cat-badge{font-size:10px;padding:1px 6px;border-radius:10px;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);cursor:pointer;white-space:nowrap;transition:all .15s;display:inline-block}
.ref-cat-badge:hover{background:var(--accent);color:#fff}
.cat-picker-popover{position:absolute;z-index:10000;background:var(--panel2,#1a1c23);border:1px solid var(--border,rgba(255,255,255,0.15));box-shadow:0 10px 30px rgba(0,0,0,0.5);border-radius:10px;padding:6px;min-width:130px;display:flex;flex-direction:column;gap:3px;animation:popIn 0.15s ease-out}
.cat-picker-item{padding:6px 12px;font-size:12px;color:var(--text,#eee);border-radius:6px;background:transparent;border:none;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;transition:all .12s ease}
.cat-picker-item:hover{background:var(--accent-soft,rgba(99,102,241,0.15));color:var(--accent,#818cf8)}
.cat-picker-item.active{color:var(--accent,#818cf8);font-weight:600}
.cat-picker-divider{height:1px;background:var(--border,rgba(255,255,255,0.1));margin:3px 0}

/* ===== 参考图拖拽排序 ===== */
.ref-item.dragging{opacity:0.4;transform:scale(0.9)}
.ref-item.drag-over{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent)}
.ref-item .ref-edit-btn{position:absolute;bottom:3px;left:3px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:5;opacity:0;transition:opacity .18s}
.ref-item:hover .ref-edit-btn{opacity:1}
/* 参考图排序（手机端：按钮放在图下方，避免挤在缩略图里） */
.ref-item-card{display:flex;flex-direction:column;gap:5px}
.ref-sort{display:flex;gap:5px}
.ref-sort button{flex:1;height:30px;font-size:12px;color:var(--accent);background:var(--panel2);border:1px solid var(--border);border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ref-sort button:active{background:var(--accent-soft)}
/* 移动端：禁用双击缩放延迟、去掉点击高亮 */
button,a,input,textarea,select,.hist-card,.result-item,.ref-item,.snippet,.chip,.cat-chip,.recent-thumb,.common-ref-card,.bal-chip,.platform-tabs button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
@media(max-width:900px){.ref-item .ref-edit-btn{opacity:1}
  #promptInput{min-height:140px;font-size:16px}
}
@media(max-width:480px){
  #promptInput{min-height:130px;font-size:16px}
}

/* ===== 快捷提示词排序菜单 ===== */
.snippet-sort-menu{position:fixed;z-index:500;background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:6px;min-width:140px;display:flex;flex-direction:column;gap:2px;animation:popIn .15s ease}
.snippet-sort-menu .ssm-header{font-size:11px;color:var(--text3);padding:4px 10px;border-bottom:1px solid var(--border);margin-bottom:2px}
.snippet-sort-menu .ssm-btn{padding:7px 12px;border:none;background:transparent;color:var(--text2);font-size:13px;text-align:left;border-radius:var(--radius-s);cursor:pointer;transition:all .12s}
.snippet-sort-menu .ssm-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent)}
.snippet-sort-menu .ssm-btn:disabled{opacity:0.35;cursor:not-allowed}
.snippet-sort-menu .ssm-close{border-top:1px solid var(--border);margin-top:2px;color:var(--text3)}
/* 移动端底部 sheet */
.snippet-sort-menu.ssm-mobile{left:0!important;right:0!important;top:auto!important;bottom:0;width:100%;min-width:unset;border-radius:14px 14px 0 0;padding:8px 12px 16px;transform:translateY(100%);opacity:0;transition:transform .22s ease,opacity .22s ease;max-width:100%}
.snippet-sort-menu.ssm-mobile.ssm-show{transform:translateY(0);opacity:1}
.snippet-sort-menu.ssm-mobile .ssm-header{text-align:center;font-size:13px;padding:6px 10px 8px}
.snippet-sort-menu.ssm-mobile .ssm-btn{padding:12px 16px;font-size:15px;text-align:center}
.snippet-sort-menu.ssm-mobile .ssm-close{margin-top:4px;padding:10px;font-size:14px;color:var(--text3)}
.ssm-divider{height:1px;background:var(--border);margin:6px 0}
.ssm-label{font-size:12px;color:var(--text3);padding:2px 4px 4px}
.ssm-cat-btn{font-size:12px;padding:6px 12px}
.ssm-cat-btn.active{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
/* 移动端遮罩 */
.ssm-backdrop{position:fixed;inset:0;z-index:499;background:rgba(0,0,0,.4);opacity:0;transition:opacity .22s ease}
.ssm-backdrop.show{opacity:1}
@keyframes popIn{from{opacity:0;transform:translateY(-6px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}

/* ===== 参考图编辑器弹窗 ===== */
/* ===== 一键再生成按钮 ===== */
.btn-reroll{font-size:12px;padding:4px 12px;border:1px solid var(--accent);border-radius:999px;color:var(--accent);background:var(--accent-soft);transition:all .18s;display:inline-flex;align-items:center;gap:4px}
.btn-reroll:hover{background:var(--accent);color:#fff}

/* 生成进度条 */
.task-progress{width:100%;height:6px;background:var(--bg2);border-radius:999px;overflow:hidden;margin-top:8px}
.task-progress-bar{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:999px;transition:width .5s ease}
.task-progress-text{font-size:11px;color:var(--text3);margin-top:4px}

/* ===== 折叠屏 / 中尺寸屏适配 ===== */
/* 完全弃用媒体查询，用 JS 动态添加 class */
#detailMask.compact-mode .detail-wrap{flex-direction:column!important}
#detailMask.compact-mode .detail-img{flex:1;min-height:0;padding:8px}
#detailMask.compact-mode .detail-side{
  width:100%!important;max-width:100%!important;
  max-height:60dvh!important;
  border-left:none!important;border-top:1px solid var(--border-light)!important;
  transform:translateY(100%);
  transition:none;
  position:absolute;bottom:0;left:0;right:0;z-index:30;
  background:rgba(20,24,35,0.97);backdrop-filter:blur(12px);
  box-shadow:0 -8px 32px rgba(0,0,0,.6);
  overflow-y:auto;
  will-change:transform;
}
#detailMask.compact-mode .detail-side.show{transform:translateY(0)!important;transition:transform .25s ease}
#detailMask.compact-mode .btn-side-toggle{display:flex!important}

/* ===== 访问密码登录遮罩 ===== */
.auth-mask{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:radial-gradient(1200px 800px at 50% 0%,#1a2030,#0e1015 60%);padding:24px}
html.auth-ok .auth-mask{display:none}
.auth-box{width:100%;max-width:340px;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:32px 28px;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.auth-box .lock{font-size:42px;margin-bottom:10px}
.auth-box h2{margin:0 0 6px;font-size:18px;color:var(--text)}
.auth-box p{margin:0 0 22px;font-size:13px;color:var(--text3)}
.auth-box input{width:100%;padding:12px 14px;font-size:16px;border:1px solid var(--border);border-radius:10px;background:var(--bg2);color:var(--text);text-align:center;letter-spacing:.25em;margin-bottom:10px;-webkit-tap-highlight-color:transparent}
.auth-box input:focus{outline:none;border-color:var(--accent)}
.auth-box button{width:100%;padding:13px;font-size:15px;font-weight:700;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;border:none;cursor:pointer;transition:filter .15s}
.auth-box button:active{transform:scale(.98)}
.auth-err{color:var(--red);font-size:12px;min-height:18px;margin-bottom:8px}

/* ===== 手感与体验优化 ===== */
/* Toast 提示 */
#toasts{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:99999;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:auto;max-width:92vw}
.toast{background:rgba(20,24,35,.94);border:1px solid var(--border);color:var(--text);font-size:13px;padding:9px 16px;border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.45);animation:toastIn .25s ease;backdrop-filter:blur(8px);line-height:1.5}
.toast.ok{border-color:var(--green);color:#d3f6e0}
.toast.err{border-color:var(--red);color:#ffd6d6}
@keyframes toastIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:900px){#toasts{top:auto;bottom:calc(74px + env(safe-area-inset-bottom));transform:translateX(-50%)}}

/* 生图完成动效 */
@keyframes taskDone{0%{transform:scale(.96);box-shadow:0 0 0 0 rgba(91,140,255,.0)}55%{transform:scale(1.012);box-shadow:0 0 26px var(--accent-soft)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(91,140,255,0)}}
.task-card.done-anim{animation:taskDone .6s ease}
/* 图片淡入 */
@keyframes imgIn{from{opacity:0}to{opacity:1}}
.result-grid img,.recent-thumb img,.hist-card .thumb img{animation:imgIn .4s ease}
/* 新图角标 */
.new-badge{position:absolute;top:6px;left:6px;z-index:4;font-size:10px;background:var(--accent);color:#fff;border-radius:6px;padding:1px 6px;font-weight:700;box-shadow:0 2px 6px rgba(0,0,0,.4);animation:toastIn .3s ease}
/* 通用按钮按压反馈 */
.btn-mini:active:not(:disabled),.tool-btn:active:not(:disabled),.chip:active,.cat-chip:active,.snippet:active,.bal-chip:active,.platform-tabs button:active:not(.active),.modal-close:active,.btn-reroll:active,.ref-add:active{transform:scale(.95)}
/* 卡片悬停增强（PC） */
@media(min-width:901px){
  .hist-card:hover,.common-ref-card:hover{box-shadow:0 6px 18px rgba(0,0,0,.35)}
  .task-card{transition:box-shadow .2s,transform .2s}
  .task-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.25)}
}

/* 记录图片存储状态角标（卡片时间左边）：☁️VDS / 💾本机 / 🌐上游 */
.rec-badges{display:inline-flex;align-items:center;gap:3px;font-size:11px}
.rec-badges .rb{line-height:1;cursor:default}
.rec-badges .rb.pending{opacity:.5;cursor:pointer}
.rec-badges .rb.pending:hover{opacity:1}
/* 网络连接状态指示灯 */
.conn-status{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;font-size:15px;cursor:pointer;border:1px solid var(--border);background:var(--panel2);transition:all .2s}
.conn-status.ok{border-color:rgba(34,197,94,.4);box-shadow:0 0 8px rgba(34,197,94,.15)}
.conn-status.warn{border-color:rgba(245,158,11,.5);background:rgba(245,158,11,.12)}
.conn-status.bad{border-color:rgba(239,68,68,.5);background:rgba(239,68,68,.12);animation:connBlink 1s ease-in-out infinite}
@keyframes connBlink{0%,100%{opacity:1}50%{opacity:.5}}


/* ===== Seedream 5.0 Pro 提示词工坊 Modal (全端自适应 + 强制文字换行约束) ===== */
#promptLabMask {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(8, 10, 15, 0.92);
  backdrop-filter: blur(8px);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
}
#promptLabMask.open { display: flex; }
.pl-container {
  width: 100%;
  max-width: 1560px;
  height: 90vh;
  max-height: 90vh;
  min-height: 520px;
  background: var(--bg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}
.pl-privacy-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 16px;
  background: #090c12;
  border-bottom: 1px solid rgba(42, 48, 64, 0.6);
  font-size: 11.5px;
  color: var(--text3);
  flex-shrink: 0;
}
.pl-privacy-banner i { color: var(--green); margin-right: 5px; }
.pl-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 8px;
}
.pl-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
}
.pl-brand i { color: #9d6bff; }
.pl-stats {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pl-stat-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 12px;
  color: var(--text2);
  white-space: nowrap;
}
.pl-stat-chip b { color: var(--green); }
.pl-stat-chip select {
  background: transparent;
  border: none;
  outline: none;
  color: var(--text);
  font-size: 12px;
  cursor: pointer;
  padding: 2px 0;
  max-width: 100%;
}
.pl-stat-chip select option { background: var(--bg2); color: var(--text); }
.pl-thumbs { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.pl-thumb { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.pl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pl-thumb button { position: absolute; top: 2px; right: 2px; width: 16px; height: 16px; border-radius: 50%; border: none; background: rgba(0,0,0,.65); color: #fff; font-size: 11px; line-height: 1; cursor: pointer; }
.pl-thumb button:hover { background: var(--red); }
.pl-actions { display: flex; align-items: center; gap: 6px; }
.pl-actions button {
  padding: 5px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  font-size: 12px;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  cursor: pointer;
}
.pl-actions button:hover { border-color: var(--accent); color: var(--accent); }

/* 移动端 Tab 栏 */
.pl-mobile-tabs {
  display: none;
  background: var(--bg2);
  border-bottom: 1px solid var(--border);
  padding: 4px 8px;
  gap: 8px;
  flex-shrink: 0;
}
.pl-mobile-tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--text2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: none;
}
.pl-mobile-tab-btn.active {
  background: var(--accent-soft);
  color: var(--accent);
}

/* PC 端双栏 Grid */
.pl-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  overflow: hidden;
}
.pl-left {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
  background: var(--bg);
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}
.pl-chat-stream {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  word-break: break-word;
  overflow-wrap: anywhere;
  box-sizing: border-box;
}
.pl-input-area {
  padding: 12px 16px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.pl-input-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-input-box:focus-within { border-color: var(--accent); }
.pl-input-box textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  color: #fff;
  font-size: 13.5px;
  line-height: 1.5;
}
.pl-right {
  background: #11141e;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pl-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-card.highlight {
  border-color: rgba(91, 140, 255, 0.35);
  background: linear-gradient(180deg, #181d2a 0%, var(--panel) 100%);
}
.pl-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
}
.pl-btn-apply {
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius-s);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(91, 140, 255, 0.3);
}
.pl-btn-apply:hover { background: var(--accent2); }
.pl-prompt-ta {
  width: 100%;
  height: 130px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 8px 10px;
  color: #38bdf8;
  font-family: monospace;
  font-size: 12.5px;
  line-height: 1.5;
  resize: vertical;
  outline: none;
}
.pl-chips-row { display: flex; flex-wrap: wrap; gap: 6px; }
.pl-chip {
  padding: 2px 8px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--text2);
  cursor: pointer;
}
.pl-chip.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

/* 深度思考气泡 */
.pl-think-box {
  background: #090c12;
  border: 1px solid rgba(91, 140, 255, 0.25);
  border-radius: var(--radius-s);
  margin-bottom: 8px;
  overflow: hidden;
  font-size: 11.5px;
  max-width: 100%;
}
.pl-think-header {
  padding: 6px 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}
.pl-think-body {
  padding: 8px 10px;
  color: var(--text2);
  font-family: monospace;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  max-height: 200px;
  overflow-y: auto;
}
.pl-think-box.collapsed .pl-think-body { display: none; }

/* 消息气泡与文字强制换行 */
.pl-msg-bubble {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.pl-msg-content {
  color: var(--text);
  line-height: 1.6;
  max-width: 100%;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.pl-msg-content p {
  margin: 0 0 8px 0;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}
.pl-msg-content pre {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 8px 0;
  max-width: 100%;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;
}
.pl-msg-content pre code,
.pl-msg-content code {
  white-space: pre-wrap !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  font-family: monospace;
  display: inline-block;
  max-width: 100%;
}
.pl-msg-content ul, .pl-msg-content ol {
  padding-left: 20px;
  margin: 6px 0;
}
.pl-msg-content li {
  margin-bottom: 4px;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
}

/* 历史抽屉 */
.pl-drawer-mask {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 1050;
}
.pl-drawer-mask.open { display: block; }
.pl-drawer {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 340px;
  max-width: 85vw;
  background: var(--panel);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  box-shadow: 6px 0 25px rgba(0,0,0,0.6);
}
.pl-drawer-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 600;
}
.pl-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pl-history-card {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
}
.pl-history-card:hover, .pl-history-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

/* Skill Modal Z-Index Fix */
#plSkillModal {
  z-index: 2100 !important;
}

/* 响应式断点 (仅在小于等于 900px 时启用单栏 Tab 切换) */
@media (max-width: 900px) {
  #promptLabMask { padding: 0; }
  .pl-container {
    height: 100dvh;
    max-height: 100dvh;
    min-height: 0;
    border-radius: 0;
    border: none;
  }
  .pl-privacy-banner span {
    max-width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
  }
  .pl-brand span { display: none; }
  .pl-mobile-tabs { display: flex; }
  /* 顶栏在窄屏下换行，避免按钮与关闭键溢出被 container 裁剪导致点不到 */
  .pl-header {
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 8px 10px;
  }
  .pl-brand { order: 1; }
  .pl-actions { order: 2; flex-wrap: wrap; margin-left: auto; }
  .pl-stats { order: 3; width: 100%; flex-wrap: wrap; }
  .pl-stat-chip { max-width: 100%; min-width: 0; }
  .pl-body {
    display: block;
    position: relative;
    flex: 1;
    min-height: 0;
    height: auto;
  }
  .pl-left, .pl-right {
    display: none;
    height: 100%;
    width: 100%;
    border-right: none;
  }
  .pl-left.mobile-active, .pl-right.mobile-active {
    display: flex;
  }
  .pl-input-area {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}


.original-save-status{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:8px 0;font-size:12px;color:var(--text2)}
.original-save-status>span:first-child{color:var(--accent)}

body[data-platform="venice"]{--accent:#a78bfa;--accent2:#c4b5fd;}
.venice-wallet-panel{flex-shrink:0;min-width:0;max-width:220px;margin-left:4px;}
.venice-wallet-panel select{width:190px;font-size:12px;}
@media(min-width:901px) and (max-width:1300px){.venice-wallet-panel select{width:150px}.platform-tabs button{padding-left:10px;padding-right:10px}.top-actions button{padding-left:9px;padding-right:9px}#topbar{gap:7px}}
.venice-wallet-panel select,.venice-wallet-settings select{max-width:100%;background:var(--bg2);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:6px;}
.venice-wallet-settings{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid var(--border);}
.bal-chip{white-space:nowrap;flex-shrink:0}
@media(max-width:1450px){
  body[data-platform="venice"] .balances .bal-chip:not(#balVenice),
  body[data-platform="apimart"] .balances .bal-chip:not(#balApimart),
  body[data-platform="wavespeed"] .balances .bal-chip:not(#balWavespeed){display:none}
}

body[data-workspace="video"] #balVenice{display:flex!important}
@media(max-width:900px){#videoLayout{height:auto;overflow:visible;display:block}#videoPanel{width:100%;margin-bottom:16px}#videoWorkspace{overflow:visible}}

/* Visual finish: neutral studio surfaces. Existing dimensions, order and breakpoints stay intact. */
:root,body[data-platform]{
  color-scheme:dark;
  --bg:#101010;--bg2:#151515;--panel:#191919;--panel2:#222222;
  --border:#303030;--border-light:#454545;
  --text:#f2f1ef;--text2:#b5b3af;--text3:#85837f;
  --accent:#f0a16d;--accent2:#e58a52;--accent-soft:rgba(240,161,109,.09);
  --green:#80c3a0;--red:#f08080;--yellow:#dcb879;
  --radius:9px;--radius-s:6px;
  --shadow:0 16px 48px rgba(0,0,0,.4);
}
body{background-color:var(--bg);background-image:radial-gradient(#ffffff05 .6px,transparent .6px);background-size:5px 5px;-webkit-font-smoothing:antialiased}
#topbar{background:#131313;box-shadow:0 1px 0 #ffffff02}
#workspaceNav{background:#151515}
#workspaceNav button{border-radius:5px}
#workspaceNav button.active{background:#ffffff06;color:#f2f1ef;box-shadow:inset 0 -2px var(--accent)}
.platform-tabs{background:#0e0e0e;border-radius:8px}
.platform-tabs button{border-radius:5px}
.platform-tabs button.active{background:#eeedeb;color:#171717;box-shadow:0 1px 5px #0003}
.bal-chip{background:#1c1c1c;border-radius:7px}
.bal-chip b{font-variant-numeric:tabular-nums}
.top-actions button,.conn-status{background:#1b1b1b;box-shadow:inset 0 1px 0 #ffffff03}
#btnPromptExpert{color:var(--text)!important;border-color:var(--border)!important}
#panel,#videoPanel,#audioPanel{background:#191919;border-color:#323232;box-shadow:0 4px 18px #0002,inset 0 1px 0 #ffffff03}
.task-card,.audio-card,.video-card,.hist-card{background:#191919;border-color:#323232;box-shadow:0 3px 12px #0002}
.task-card:hover,.audio-card:hover,.video-card:hover{border-color:#414141}
input:not([type=checkbox]):not([type=radio]),select,textarea{background-color:#131313;border-color:#353535;color:var(--text);box-shadow:inset 0 1px 2px #0002}
input::placeholder,textarea::placeholder{color:#77746f}
input:focus,select:focus,textarea:focus{border-color:#bd8d6b;box-shadow:0 0 0 2px #f0a16d14;outline:none}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sec-title{color:#aaa7a1}
.btn-mini,.tool-btn,.prompt-tools button,.snippet,.cat-chip{border-radius:6px}
.btn-mini:hover,.tool-btn:hover,.prompt-tools button:hover{background:#ffffff06;border-color:#55504a;color:var(--text)}
.snippet{background:#202020}
.snippet.active,.chip.active,.cat-chip.active{background:#2c251f;color:#f3c49f;border-color:#6a4c37}
.snippet.active .snippet-note,.snippet.active .del{color:#f3c49f}
#btnGenerate,#btnGenerate.submitting,#videoGenerate,.audio-generate,#authBtn,.pl-btn-apply{background:#eeedeb!important;color:#191919;box-shadow:0 2px 6px #0003;animation:none}
#btnGenerate:hover:not(:disabled),#videoGenerate:hover:not(:disabled),.audio-generate:hover:not(:disabled),.pl-btn-apply:hover{background:#fff!important;box-shadow:0 3px 12px #0004;filter:none}
#btnGenerate .spinner{border-top-color:#333!important}
#btnGenerate:disabled,#videoGenerate:disabled,.audio-generate:disabled{opacity:.5}
.cost-line{background:#171512;border-color:#3b3228;color:#ddbb9e;line-height:1.65;overflow-wrap:anywhere}
#audioPrice,#videoQuote{color:#ddbb9e;line-height:1.7}
.audio-logo{background:#27221c;color:#eab58c}
.audio-track,.video-ref{background:#141414}
.audio-status{color:#d8b08c}
.audio-card audio,#audioPanel audio,#videoAudioPreview audio{opacity:.92}
.set-modal,.modal-full,.pl-window,.pl-modal,.auth-box{background:#191919;border-color:#383838;box-shadow:var(--shadow)}
.modal-head,.pl-header,.pl-preview-header{background:#171717;border-color:#333}
.pl-chat-shell,.pl-sidebar,.pl-preview,.pl-composer,.pl-input-box,.pl-output-card{background:#171717;border-color:#333}
.pl-preview-card,.pl-code,.pl-result,.pl-input-area{background:#141414}
.pl-message.assistant{background:#1c1c1c}
.toast{background:rgba(30,29,27,.97);border-color:#454039}
.ws-empty{background:#16161680;border-color:#353535}
::-webkit-scrollbar-thumb{background:#3b3936;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#55514c}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}

/* Topbar controls share one visual baseline. Estimates appear above generation buttons. */
#topbar .platform-tabs,#topbar .bal-chip,#topbar .top-actions>button,#topbar .conn-status{height:36px;box-sizing:border-box}
#topbar .platform-tabs{align-items:center}
#topbar .platform-tabs button{height:28px;padding-top:0;padding-bottom:0;line-height:28px}
#topbar .top-actions,#topbar .balances{align-items:center}
#topbar .top-actions>button{display:inline-flex;align-items:center;justify-content:center;gap:5px}
#topbar .conn-status{width:32px}
#veniceWalletPanel{position:relative;height:36px;margin-left:4px;border-radius:7px}
#veniceWalletSelect{display:block;height:36px;box-sizing:border-box;margin:0;border-radius:7px;background-color:#1b1b1b;border-color:#353535;padding:6px 10px;font-size:12px;line-height:20px;cursor:pointer;box-shadow:inset 0 1px 0 #ffffff03;transition:border-color .16s,background-color .16s,box-shadow .16s}
#veniceWalletSelect:hover{background-color:#23211f;border-color:#514b44}
#veniceWalletSelect:focus:not(:focus-visible){border-color:#514b44;box-shadow:none}
#veniceWalletSelect:focus-visible{outline:2px solid #b98b68;outline-offset:2px;box-shadow:none}
.top-actions button,.btn-mini,.tool-btn,.chip,.cat-chip,.snippet,.bal-chip,.platform-tabs button,.modal-close,.btn-reroll,.ref-add{transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .1s}
.btn-mini:active:not(:disabled),.tool-btn:active:not(:disabled),.chip:active,.cat-chip:active,.snippet:active,.bal-chip:active,.platform-tabs button:active:not(.active),.modal-close:active,.btn-reroll:active,.ref-add:active{transform:translateY(1px)}
#btnGenerate:hover:not(:disabled){transform:none}
#btnGenerate:active:not(:disabled),#btnGenerate.touch-pressed:not(:disabled){transform:translateY(1px);filter:none}
@media(max-width:900px){#topbar .top-actions>button,#topbar .conn-status{height:32px}}
@media(min-width:901px) and (max-width:1200px){
  #topbar .brand span{display:none}
  body[data-workspace="video"] #topbar .brand span,body[data-workspace="audio"] #topbar .brand span{display:inline}
  .video-list-heading input{width:130px}
  #topbar .top-actions{gap:6px}
  #topbar .top-actions>button{width:34px;padding-left:0;padding-right:0}
  #topbar #btnRefreshSync,#topbar #btnPromptExpert,#topbar #btnHistory{font-size:0}
  #topbar #btnRefreshSync::before{content:'↻';font-size:20px}
  #topbar #btnHistory::before{content:'▧';font-size:20px}
  #topbar #btnPromptExpert i{font-size:14px}
}

/* Image details: clear actions, reserved close area and a quiet media status. */
#detailMask{background:rgba(8,8,8,.96)}
.detail-side{background:#181818;border-left-color:#343434;padding:20px;scrollbar-gutter:stable;overscroll-behavior:contain}
.detail-side-header{position:sticky;top:-20px;z-index:2;margin:-20px -20px 20px;padding:18px 60px 16px 20px;background:#181818;border-bottom:1px solid var(--border)}
.detail-side-header h2{font-size:17px;font-weight:650;line-height:1.4;margin:0;color:var(--text)}
.detail-side-header p{font-size:11px;color:var(--text3);line-height:1.5;margin:5px 0 0;overflow-wrap:anywhere}
.detail-close{top:14px;right:16px;width:32px;height:32px;border-radius:7px;background:#222;border-color:#3a3a3a;color:#aaa;font-size:15px;transition:background-color .15s,color .15s}
.detail-close:hover{background:#303030;border-color:#555;color:#fff}
.detail-section-label{font-size:11px;font-weight:600;color:var(--text3);letter-spacing:.06em;margin-bottom:9px}
.detail-action-section{padding-bottom:18px;border-bottom:1px solid var(--border);margin-bottom:20px}
.detail-btns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 0}
.detail-btns button,.detail-record-actions button{display:flex;align-items:center;justify-content:center;gap:5px;min-height:36px;padding:7px 10px;font-size:12px;font-weight:500;line-height:1.45;border:1px solid #373737;background:#202020;border-radius:6px;white-space:normal;transition:background-color .15s,border-color .15s,transform .1s}
.detail-btns button:hover{background:#292724;border-color:#655344;color:var(--text)}
.detail-btns button.primary{background:#eeedeb;border-color:#eeedeb;color:#1b1b1b;font-weight:650}
.detail-btns button.primary:hover{background:#fff;border-color:#fff;color:#111}
.detail-file-actions{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
.detail-file-actions button{background:transparent;color:#b7b2aa;font-size:11px}
.detail-file-actions button.is-favorite{color:#e5bd75;border-color:#665330;background:#342b1c}
.detail-action-section>.btn-mini{margin-top:12px}
.detail-record-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;border-top:1px solid var(--border);padding-top:18px;margin-top:24px;margin-bottom:8px}
.detail-record-actions button{background:transparent;color:var(--text2)}
.detail-record-actions .danger{color:#d99090;border-color:#513535}
.detail-record-actions .danger:hover{color:#f2aaaa;border-color:#985454;background:#402525}
.detail-btns button:active,.detail-record-actions button:active{transform:translateY(1px)}
.detail-side h3{font-size:12px;font-weight:600;color:#aba59c;margin:22px 0 10px;letter-spacing:.025em}
.detail-side h3 small{display:block;margin-top:5px;line-height:1.5}
.detail-prompt{padding:12px 13px;line-height:1.8;white-space:pre-wrap;word-break:normal;overflow-wrap:anywhere;background:#121212;border-color:#333}
.detail-side .kv{grid-template-columns:72px minmax(0,1fr);gap:10px 12px;line-height:1.5;padding:4px 0}
.detail-side .kv .k{color:#868078}.detail-side .kv .v{color:#d4d0ca;font-size:12px;word-break:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.detail-img{padding:18px;gap:12px;min-width:0}
.detail-img-main{overflow:hidden}
.detail-img-main img{box-shadow:0 8px 40px #0004}
.detail-img-bar{gap:12px;padding:6px 0;flex-wrap:wrap}
#detailImgStatus{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;font-size:11px;color:var(--text2);background:#1b1b1b;border:1px solid #333;padding:7px 12px;border-radius:6px;line-height:1.5}
#detailImgStatus:empty{display:none}
.media-save-state.is-saved{color:var(--green)}.media-page{color:var(--text3);font-variant-numeric:tabular-nums}
.original-save-status{align-items:center;gap:12px;font-size:11px;line-height:1.6}
.original-save-status>span:first-child{color:var(--green)}
.original-save-status>span+span{color:var(--text3)}
.task-head .model-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d6b394;background:#27211c}
.task-meta{gap:9px;align-items:center;line-height:1.65}
.task-meta>.btn-mini{min-height:28px;padding:4px 9px}
.task-prompt{line-height:1.8;color:#bcb6ad}
@media(min-width:1450px){.detail-side{width:410px;padding:24px}.detail-side-header{top:-24px;margin:-24px -24px 22px;padding:20px 62px 18px 24px}.detail-close{top:18px}}
#detailMask.compact-mode .detail-side{background:#191919fa;border-radius:14px 14px 0 0}
#detailMask.compact-mode .detail-side-header{padding-right:20px}
#detailMask.compact-mode .detail-img{padding:12px}
.model-access-group{border:1px solid var(--border);background:#141414;border-radius:7px;margin:12px 0;overflow:hidden}
.model-access-heading{display:flex;align-items:center;gap:6px;padding:10px 11px;background:#202020;border-bottom:1px solid var(--border)}
.model-access-heading h4{flex:1;font-size:12px;font-weight:600;margin:0;color:var(--text2)}
.model-access-heading small{font-size:10px;margin-left:4px;color:var(--text3);font-weight:400}
.model-access-heading .btn-mini{font-size:10px;padding:3px 7px;border-radius:4px;min-height:25px}
.model-access-option{display:flex;align-items:center;gap:10px;padding:9px 12px;font-size:12px;color:var(--text2);cursor:pointer;line-height:1.45;border-bottom:1px solid #ffffff04;transition:background-color .14s}
.model-access-option:hover{background:#ffffff04}.model-access-option input{flex:0 0 auto;width:14px;height:14px;cursor:pointer}.model-access-option:has(input:checked){color:var(--text)}
#modelAccessSearch{width:100%;padding:9px 11px;margin:8px 0}
.video-actions .btn-mini,.audio-card .video-actions .btn-mini{min-height:28px;line-height:18px;padding:4px 9px;border-radius:5px}

/* Persistent, touch-sized controls for browsers whose native player UI fails to paint. */
.studio-media{min-width:0;width:100%;clear:both;background:#121212;border:1px solid var(--border);border-radius:9px;overflow:hidden;color:var(--text)}
.studio-media-audio{margin:10px 0}.audio-upload-item>.studio-media{flex:1;min-width:0}
.studio-media-controls{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;padding:8px;min-width:0}
.studio-media-controls button{flex:none;min-height:40px;padding:7px 10px;border:1px solid var(--border);border-radius:7px;background:var(--panel2);color:var(--text);font:inherit;font-size:12px;white-space:nowrap;touch-action:manipulation}
.studio-media-controls .media-toggle{min-width:78px;color:var(--accent);background:var(--accent-soft)}
.studio-media-controls .media-time{font-size:11px;font-variant-numeric:tabular-nums;color:var(--text2);white-space:nowrap;min-width:82px}
.studio-media-controls input.media-seek{flex:1 1 100%;order:2;min-width:0;width:100%;height:30px;margin:0;padding:0;accent-color:var(--accent);touch-action:pan-y;cursor:pointer}
.studio-media-controls .media-mute{margin-left:auto}
.studio-media .media-message{margin:0;padding:0 10px 8px;font-size:12px;line-height:1.5;white-space:normal;color:var(--text2);overflow-wrap:anywhere}
.studio-media .media-open{display:inline-block;margin:0 10px 10px;color:var(--accent);font-size:12px;text-decoration:underline;min-height:30px}
.studio-media[data-ready] audio{display:none!important}
.studio-media-video>video{display:block;width:100%;max-width:100%;margin:0;background:#090909;object-fit:contain;cursor:pointer}
.studio-media:fullscreen{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%;border:0;border-radius:0;background:#000}
.studio-media:fullscreen>video{flex:1;min-height:0;max-height:calc(100% - 108px)!important;aspect-ratio:auto}
.studio-media:fullscreen>.studio-media-controls{flex:none;padding-bottom:max(8px,env(safe-area-inset-bottom))}
.studio-media button:focus-visible,.studio-media input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* One responsive layer for the three workspaces. No fixed assumption about header height. */
:root{--studio-chrome-height:102px;--studio-visible-height:100dvh}
#topbar{height:auto;min-height:58px;flex-wrap:wrap;align-items:center;gap:8px 10px;position:relative;max-width:100%;padding:10px max(12px,env(safe-area-inset-right)) 10px max(12px,env(safe-area-inset-left))}
#topbar>*{min-width:0;max-width:100%}
#topbar .brand,#topbar .platform-tabs{flex-shrink:0}
#topbar .balances{display:flex;flex-wrap:wrap;align-items:center;flex:1 1 auto;width:auto;min-width:0;justify-content:flex-end;gap:6px;margin-left:auto}
#topbar .bal-chip{flex:0 1 auto;max-width:100%;min-width:0;overflow:hidden}
#topbar .bal-chip b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#topbar .top-actions{display:flex;flex:0 1 auto;flex-wrap:wrap;width:auto;min-width:0;gap:6px;margin-left:auto}
#topbar .top-actions>button{flex-shrink:0}
#veniceWalletPanel{flex:0 1 190px;max-width:220px;min-width:130px}
#veniceWalletSelect{width:100%;max-width:100%}
#workspaceNav{height:auto;min-height:44px;flex-wrap:wrap;flex-shrink:0;padding:5px max(12px,env(safe-area-inset-left));gap:4px}
#workspaceNav button{white-space:nowrap;min-height:34px}
#layout,#videoLayout,#audioLayout{width:100%;min-width:0;max-width:1720px;height:calc(100dvh - var(--studio-chrome-height));margin:0 auto}
#panel,#videoPanel,#audioPanel,#workspace,#videoWorkspace,#audioWorkspace{min-width:0;min-height:0}
#videoList,#audioList{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.video-list-heading{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.video-list-heading>div{min-width:0;max-width:100%}
.video-list-heading>div:last-child{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.video-list-heading input{flex:1 1 130px;min-width:80px;max-width:100%;width:160px;margin:0}
.video-list-heading button{margin:0;flex-shrink:0}
.task-head,.task-meta,.prompt-meta,.sec-title,.form-row{min-width:0;flex-wrap:wrap}
.task-head .model-tag{min-width:0;max-width:100%}
.task-head .time{white-space:nowrap}
.prompt-meta{gap:6px}.prompt-tools{flex-wrap:wrap;gap:6px}
.sec-title>div{flex-wrap:wrap}.form-row input,.form-row select{min-width:0;max-width:100%}
input,textarea,select{max-width:100%}
.result-grid,.hist-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr))}
.modal-mask{padding:12px;overscroll-behavior:contain}
.set-modal,.ref-editor,.pl-container{min-height:0;max-width:100%;max-height:calc(var(--studio-visible-height) - 24px)}
.modal-full{max-width:100%;max-height:calc(var(--studio-visible-height) - 24px)}
.modal-head,.filter-row,.manage-bar{flex-wrap:wrap;min-width:0;gap:8px}
.filter-row input[type=search]{min-width:80px;max-width:100%}
#detailMask{height:var(--studio-visible-height);bottom:auto;overflow:hidden}
.detail-wrap{min-height:0;overflow:hidden}
.detail-img,.detail-img-main{min-width:0;min-height:0}
.detail-img-main{overflow:hidden}
#detailImg{width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;touch-action:pan-x pan-y pinch-zoom}
.pl-header,.pl-stats,.pl-actions{flex-wrap:wrap;min-width:0}
.pl-stat-chip{min-width:0;max-width:100%}.pl-stat-chip select{min-width:0;max-width:100%}
.pl-container{width:100%;height:calc(var(--studio-visible-height) - 24px)}

/* Expanded foldables/tablets have room for a compact editor and a result pane. */
@media(min-width:760px) and (min-height:560px){
  html,body{height:100%;overflow:hidden!important}
  #layout,#videoLayout,#audioLayout{display:flex;flex-direction:row;align-items:stretch;gap:16px;padding:16px;height:calc(100dvh - var(--studio-chrome-height));overflow:hidden}
  #panel,#videoPanel,#audioPanel{position:static;flex:0 0 clamp(290px,30vw,400px);width:clamp(290px,30vw,400px);height:100%;max-height:none;padding:16px;margin:0;overflow-y:auto;overscroll-behavior-y:contain}
  #workspace{width:auto;height:100%;flex:1;overflow-y:auto;display:flex;flex-direction:column}
  #videoWorkspace,#audioWorkspace{width:auto;flex:1;overflow-y:auto}
  #btnGenerate,#btnGenerate.submitting{position:relative;inset:auto;border-radius:var(--radius);padding:13px;box-shadow:0 2px 6px #0003}
  .kbd-hint{display:block}
  .detail-wrap{flex-direction:row}
  .detail-side{position:relative;inset:auto;width:clamp(300px,38vw,410px);height:100%;max-height:none;transform:none;transition:none;border-top:none;border-left:1px solid var(--border);padding:20px;overflow-y:auto}
  .detail-side-header{top:-20px;margin:-20px -20px 20px;padding:18px 56px 16px 20px}
  .detail-img{height:auto}
  .btn-side-toggle{display:none}
}

/* Narrow phones and short landscape screens use page scrolling, not nested panes. */
@media(max-width:759px),(max-height:559px){
  html,body{height:auto;min-height:100%;overflow-y:auto!important}
  #topbar{position:static}
  #workspaceNav{position:relative}
  #layout,#videoLayout,#audioLayout{display:block;height:auto;overflow:visible;padding:12px;max-width:100%}
  #panel,#videoPanel,#audioPanel{width:100%;height:auto;max-height:none;overflow:visible;padding:14px;margin:0 0 16px}
  #workspace,#videoWorkspace,#audioWorkspace{width:100%;height:auto;overflow:visible;padding:0;display:block}
  #workspace>*{margin-bottom:16px}
  #btnGenerate,#btnGenerate.submitting{position:relative;inset:auto;transform:none;width:100%;min-height:44px;padding:12px;border-radius:8px;box-shadow:none}
  #videoGenerate,.audio-generate{min-height:44px}
  #layout,#audioLayout,#videoLayout{padding-bottom:max(18px,env(safe-area-inset-bottom))}
  #providerPrice{margin-top:12px}
  .result-actions{opacity:1;flex-wrap:wrap}
  .result-actions button{min-height:36px}
  .detail-wrap{flex-direction:column}
  .detail-side,#detailMask.compact-mode .detail-side{width:100%;max-width:100%;max-height:75%;padding:16px;padding-bottom:max(18px,env(safe-area-inset-bottom));border-radius:12px 12px 0 0}
  #detailMask.compact-mode .detail-side{max-height:75%!important}
  .detail-side-header{top:-16px;margin:-16px -16px 16px;padding:16px}
  .detail-side .detail-side-header{padding-right:16px}
  .detail-img{height:100%;padding:12px}
  .detail-img-bar{padding-bottom:env(safe-area-inset-bottom)}
  .btn-side-toggle{display:flex;min-height:40px;align-items:center;justify-content:center}
  .modal-mask{padding:8px}
  .set-modal,.modal-full,.ref-editor,.pl-container{max-height:calc(var(--studio-visible-height) - 16px)}
  .set-modal{padding:16px}.modal-body{padding:12px}.modal-head{padding:12px}
  .pl-container{height:calc(var(--studio-visible-height) - 16px)}
  .ref-editor-canvas-wrap{min-height:100px}
  #toasts{top:auto;bottom:max(16px,env(safe-area-inset-bottom));max-width:calc(100vw - 24px)}
}

@media(max-width:759px){
  #topbar{padding:8px;gap:8px}
  #topbar .brand{flex:0 0 24px}#topbar .brand span{display:none!important}
  #topbar .platform-tabs{flex:1 1 calc(100% - 40px);min-width:0;height:40px}
  #topbar .platform-tabs button{flex:1;min-width:0;padding:0 6px;height:32px;line-height:32px;font-size:12px}
  #veniceWalletPanel{flex:1 1 44%;min-width:0;max-width:none;height:40px;margin:0}
  #veniceWalletSelect{height:40px;padding:6px 9px}
  #topbar .balances{flex:1 1 44%;min-width:0;justify-content:stretch;margin:0}
  #topbar .balances .bal-chip{flex:1;justify-content:center;height:40px;padding:5px 8px;font-size:11px}
  #topbar .top-actions{flex:1 1 100%;width:100%;justify-content:flex-end;margin:0;gap:6px}
  #topbar .top-actions>button,#topbar .conn-status{width:44px;height:40px;padding:0;font-size:14px}
  #topbar #btnRefreshSync,#topbar #btnPromptExpert,#topbar #btnHistory{font-size:0}
  #topbar #btnRefreshSync::before{content:'↻';font-size:22px}
  #topbar #btnHistory::before{content:'▧';font-size:22px}
  #topbar #btnPromptExpert::before{content:'✦';font-size:20px}
  #topbar #btnPromptExpert i{display:none}
  #workspaceNav{padding:5px 8px;flex-wrap:nowrap}
  #workspaceNav button{flex:1;min-width:0;padding:5px 6px;font-size:12px;min-height:40px}
  #audioList,#videoList{grid-template-columns:1fr}
  .video-settings-grid{gap:10px}
  .video-list-heading>div:last-child{width:100%}
  .task-head .time{margin-left:0;font-size:10px}
  .task-head .model-tag{max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .kv{grid-template-columns:70px minmax(0,1fr)}
}
@media(pointer:coarse){
  input:not([type=checkbox]):not([type=radio]),textarea,select,#veniceWalletSelect{font-size:16px!important}
  .chip,.btn-mini,.ref-add,.filter-row button{min-height:36px}
  .result-actions,.ref-edit-btn{opacity:1}
}
.optimizer-tools{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;gap:6px;max-width:100%;min-width:0;letter-spacing:0}
:is(#panel,#videoPanel) .optimizer-tools select{flex:1 1 150px;width:150px;max-width:190px;min-width:90px;height:30px;margin:0;padding:3px 24px 3px 9px;font-size:11.5px;line-height:normal;border-radius:8px;text-overflow:ellipsis;background-color:var(--panel2);color:var(--text2)}
.optimizer-tools .btn-mini{flex:0 0 auto;min-height:30px;padding:4px 9px;color:var(--accent);background:var(--accent-soft);white-space:nowrap}
@media(max-width:480px){.sec-title:has(.optimizer-tools){gap:7px}.optimizer-tools{flex:1 1 100%;justify-content:flex-start}:is(#panel,#videoPanel) .optimizer-tools select{max-width:none}.optimizer-tools .btn-mini{font-size:11.5px}}
@media(pointer:coarse){:is(#panel,#videoPanel) .optimizer-tools select,.optimizer-tools .btn-mini{height:38px;min-height:38px}}
.model-order-row{display:flex;align-items:center;gap:5px;padding:8px 0;border-bottom:1px solid var(--border)}
.model-order-row>span{flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px}.model-order-row .btn-mini{flex:none;padding:5px 8px}
#modelOrderList{max-height:340px;overflow:auto;margin:10px 0}#modelOrderDetails summary{cursor:pointer;font-weight:600;margin-bottom:12px}#modelOrderChannel{width:100%;margin:8px 0}

.model-order-row>span input{width:100%;min-width:0;font-size:13px;padding:7px 8px;box-sizing:border-box}.model-order-row>span small{display:block;color:var(--text3);font-size:10px;overflow-wrap:anywhere;margin-top:4px}

/* Reference editor: screen transforms are separate from original image pixels. */
#refEditorMask{position:fixed;inset:0;background:rgba(0,0,0,.82);z-index:300;display:none;align-items:center;justify-content:center;padding:16px;overscroll-behavior:contain}
#refEditorMask.open{display:flex}
#refEditorMask .ref-editor{display:flex;flex-direction:column;width:min(1100px,100%);height:min(900px,calc(var(--studio-visible-height,100dvh) - 32px));max-height:calc(var(--studio-visible-height,100dvh) - 32px);min-height:0;background:var(--panel);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 24px 80px #0008}
#refEditorMask button{min-height:36px;padding:6px 11px;border:1px solid var(--border);border-radius:8px;color:var(--text2);background:var(--panel2);font-size:12px;white-space:nowrap;touch-action:manipulation}
#refEditorMask button:hover{color:var(--text);border-color:var(--accent)}
#refEditorMask button:disabled{opacity:.4;cursor:default}
#refEditorMask button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
#refEditorMask button.active,#refEditorMask .btn-confirm,#refEditorApplyCrop{background:var(--accent);color:#151515;border-color:var(--accent);font-weight:600}
.ref-editor-head{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--border);flex-shrink:0}.ref-editor-head>div{flex:1;min-width:0}.ref-editor-head h2{font-size:16px;margin:0 0 3px}.ref-editor-head small{color:var(--text3);font-size:11px}
.ref-editor-tools{display:flex;gap:6px;padding:10px 16px 6px;overflow:auto;flex-shrink:0}.ref-editor-options{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 16px 12px;font-size:11px;color:var(--text2);flex-shrink:0}.ref-editor-options input[type=range]{width:100px;min-width:50px;accent-color:var(--accent);padding:0}.ref-editor-options>span{min-width:30px}
.ref-editor-colors{display:flex;gap:4px;margin-right:8px}#refEditorMask button.color-swatch{background:var(--swatch);padding:0;width:26px;min-height:26px;border:3px solid var(--panel);border-radius:50%}#refEditorMask button.color-swatch.active{box-shadow:0 0 0 2px var(--accent)}
#refEditorStage{position:relative;flex:1;min-height:100px;overflow:hidden;touch-action:none;user-select:none;background-color:#181818;background-image:conic-gradient(#222 25%,transparent 0 50%,#222 0 75%,transparent 0);background-size:24px 24px;border-block:1px solid var(--border);padding:0}
#refEditorStage[data-tool=pan]{cursor:grab}#refEditorStage:not([data-tool=pan]){cursor:crosshair}
#refEditorPlane{position:absolute;inset:0 auto auto 0;transform-origin:0 0;pointer-events:none}#refEditorCanvas{display:block;max-width:none;max-height:none;border:0;border-radius:0;width:100%;height:100%}#refEditorCropBox{position:absolute;box-sizing:border-box;border:2px dashed #fff;box-shadow:0 0 0 10000px #0006;pointer-events:none}
.ref-editor-viewbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px;padding:8px 16px;flex-shrink:0}.ref-editor-zoom,#refEditorCropActions{display:flex;gap:4px;align-items:center}#refEditorCropSize{font-size:11px;color:var(--text3)}#refEditorZoom{min-width:66px;font-variant-numeric:tabular-nums}.ref-editor-hint{padding:0 16px 8px;margin:0;font-size:11px;color:var(--text3);flex-shrink:0}.ref-editor-foot{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--border);padding:12px 16px;flex-shrink:0}
#refEditorMask [hidden]{display:none!important}
@media(max-height:540px){#refEditorMask{padding:4px}#refEditorMask .ref-editor{height:calc(var(--studio-visible-height,100dvh) - 8px);max-height:calc(var(--studio-visible-height,100dvh) - 8px)}#refEditorMask .ref-editor-head,#refEditorMask .ref-editor-options,#refEditorMask .ref-editor-viewbar,#refEditorMask .ref-editor-foot{padding:4px 8px}#refEditorMask .ref-editor-tools{padding:4px 8px}#refEditorMask .ref-editor-hint,#refEditorMask .ref-editor-head small{display:none}#refEditorMask #refEditorStage{min-height:40px}#refEditorMask button{min-height:30px;padding:4px 9px}}
@media(max-width:759px){#refEditorMask{padding:0}#refEditorMask .ref-editor{height:var(--studio-visible-height,100dvh);max-height:var(--studio-visible-height,100dvh);border-radius:0;border:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}#refEditorMask button{min-height:40px;padding:7px 10px}.ref-editor-head{padding:8px 10px}.ref-editor-tools{padding:8px 10px 6px}.ref-editor-options{padding:8px 10px;gap:6px}.ref-editor-options input[type=range]{width:74px}.ref-editor-viewbar{padding:6px 10px}.ref-editor-hint{padding:0 10px 6px}.ref-editor-foot{padding:8px 10px}.ref-editor-foot>button{flex:1;padding:7px 6px!important}.ref-editor-head small{font-size:10px}#refEditorMask button.color-swatch{width:28px;min-height:28px}.ref-editor-colors{gap:2px;margin-right:0}}