/* ============================================================================ * 2026-10-21 · T34 首页创作台 v8 * 参数全部来自 image2pro.top 的 getComputedStyle 实测，非目测。 * * 胶囊（对标 .capsule.glass 106×36） * bg linear-gradient(150deg,rgba(255,255,255,.68),rgba(255,255,255,.4) 55%,rgba(255,255,255,.58)) * border 1px solid rgba(255,255,255,.75) * radius 999px | padding 0 15px | font 13px/700 * blur backdrop-filter: blur(11px) saturate(1.6) * ease transform .45s cubic-bezier(.24,1.6,.35,1) ← 带 overshoot，跟手 * 七层阴影（浮起感核心，逐条抄自实测）： * inset 0 1.5px 0 0 rgba(255,255,255,.95) 顶部高光 * inset 0 1.5px 4px 0 rgba(255,255,255,.16) 内侧柔光 * inset 1.2px .5px 0 0 rgba(170,205,225,.22) 左青边 * inset -1.2px -.5px 0 0 rgba(235,195,205,.20) 右粉边 * inset 0 -1px 0 0 rgba(140,120,180,.10) 底部内阴影 * 0 10px 24px 0 rgba(140,120,95,.10) 外投影 * 0 2px 8px 0 rgba(140,120,95,.055) 外投影小 * * 输入卡（对标 .img-composer.glass 720×64） * bg linear-gradient(165deg,rgba(255,255,255,.66),rgba(255,255,255,.42) 55%,rgba(255,255,255,.56)) * radius 999px | padding 9px | blur(12px) saturate(1.6) * textarea 15.5px / line-height 1.5 * * 菜单壳（对标 .seg-shell 192×384） * radius 22px | border 1px rgba(255,255,255,.62) | blur(6px) saturate(1.6) * 外投影更大：0 20px 50px rgba(90,75,55,.13) * ==========================================================================*/ /* 隐藏 React 首页。 【关键】不能只用 opacity:0 —— 元素仍参与 backdrop-filter 采样， React 首页的深色内容会被模糊吸进胶囊，表现为「胶囊内部发灰」 （实测像素 rgb(161,161,160)，不是白）。 改用 visibility:hidden 让元素彻底退出渲染树，backdrop 采不到。 DOM 仍保留，React 路由需要 #root 存在。 */ html.ex-studio-active #root{ position:absolute!important;left:0;top:0;width:100%;height:0; overflow:hidden!important;pointer-events:none!important; visibility:hidden!important;opacity:0!important; } /* ---------- 顶部通知条 ---------- */ #exNoticeBar{ position:fixed;left:50%;top:16px;transform:translateX(-50%); z-index:9500;display:flex;align-items:center;gap:16px; max-width:min(680px,calc(100vw - 40px)); padding:10px 12px 10px 20px;border-radius:999px; background:linear-gradient(150deg,rgba(255,255,255,.78),rgba(255,255,255,.52) 55%,rgba(255,255,255,.68)); border:1px solid rgba(255,255,255,.75); color:#1a1a1a;font-size:13px;line-height:1.5; backdrop-filter:blur(11px) saturate(1.6); -webkit-backdrop-filter:blur(11px) saturate(1.6); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.95), inset 1.2px .5px 0 0 rgba(170,205,225,.22), inset -1.2px -.5px 0 0 rgba(235,195,205,.20), inset 0 -1px 0 0 rgba(140,120,180,.10), 0 10px 24px 0 rgba(140,120,95,.10), 0 2px 8px 0 rgba(140,120,95,.055); animation:exNbIn .5s cubic-bezier(.24,1.6,.35,1); } @keyframes exNbIn{ from{opacity:0;transform:translateX(-50%) translateY(-16px) scale(.94)} to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)} } #exNoticeBar.is-closing{opacity:0;transform:translateX(-50%) translateY(-12px) scale(.96);transition:.26s ease} #exNoticeBar .ex-nb-text{flex:1;min-width:0;color:rgba(26,26,26,.62)} #exNoticeBar .ex-nb-close{ flex:none;padding:7px 16px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.8); background:linear-gradient(150deg,#2c2823,#3d372f); color:#fffdf9;font-size:12.5px;font-weight:700; transition:transform .45s cubic-bezier(.24,1.6,.35,1),box-shadow .3s; box-shadow:inset 0 1.5px 0 0 rgba(255,255,255,.18),0 6px 16px rgba(44,40,35,.22); } #exNoticeBar .ex-nb-close:hover{transform:translateY(-2px) scale(1.04);box-shadow:inset 0 1.5px 0 0 rgba(255,255,255,.18),0 10px 24px rgba(44,40,35,.28)} #exNoticeBar .ex-nb-close:active{transform:scale(.96)} /* ============================================================================ * 根容器 * ==========================================================================*/ #exStudioRoot{ --s-bg:#f5f1ea; --s-ink:#1a1a1a; --s-muted:rgba(26,26,26,.46); --s-muted-2:rgba(26,26,26,.62); --s-glass-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.95), inset 0 1.5px 4px 0 rgba(255,255,255,.16), inset 1.2px .5px 0 0 rgba(170,205,225,.22), inset -1.2px -.5px 0 0 rgba(235,195,205,.20), inset 0 -1px 0 0 rgba(140,120,180,.10), 0 10px 24px 0 rgba(140,120,95,.10), 0 2px 8px 0 rgba(140,120,95,.055); --s-glass-bg:linear-gradient(150deg,rgba(255,255,255,.68),rgba(255,255,255,.40) 55%,rgba(255,255,255,.58)); --s-ease:cubic-bezier(.24,1.6,.35,1); position:fixed;inset:0;z-index:200; background:var(--s-bg);color:var(--s-ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif; overflow:hidden;display:flex;flex-direction:column; } #exStudioRoot *{box-sizing:border-box} #exStudioRoot button,#exStudioRoot a,#exStudioRoot select, #exStudioRoot input,#exStudioRoot textarea{ outline:none!important;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none; } /* ============================================================================ * 顶栏 * ==========================================================================*/ .st-hd{ flex:none;display:flex;align-items:center;justify-content:space-between; gap:10px;padding:9px 16px 0;height:60px; } .st-pill{ display:inline-flex;align-items:center;gap:8px; height:36px;padding:0 15px;border-radius:999px; /* 兜底：先铺一层接近不透明的暖白，再叠渐变。 这样即使 backdrop 采样到异常内容，也不会发灰。 */ background: linear-gradient(150deg,rgba(255,255,255,.68),rgba(255,255,255,.40) 55%,rgba(255,255,255,.58)), #fdfbf7; border:1px solid rgba(255,255,255,.75); color:var(--s-ink); font-size:13px;font-weight:700;line-height:1;white-space:nowrap; text-decoration:none;cursor:pointer; backdrop-filter:blur(11px) saturate(1.6); -webkit-backdrop-filter:blur(11px) saturate(1.6); box-shadow:var(--s-glass-shadow); transition:transform .45s var(--s-ease),box-shadow .35s; } .st-pill:hover{transform:translateY(-2px) scale(1.015)} .st-pill:active{transform:translateY(0) scale(.97)} .st-hd-left{position:relative;display:flex;align-items:center} .st-workspace{gap:9px;padding:0 13px 0 12px} .st-ws-orb{ width:17px;height:17px;border-radius:50%;flex:none; background:radial-gradient(circle at 32% 26%,#ffd98d 0%,#f7a06a 44%,#e0673f 100%); box-shadow:inset 0 -1.5px 3px rgba(180,70,35,.28),inset 0 1px 2px rgba(255,255,255,.6),0 2px 5px rgba(224,103,63,.32); } .st-ws-caret{width:11px;height:11px;flex:none;opacity:.4;transition:transform .45s var(--s-ease)} .st-workspace.is-open .st-ws-caret{transform:rotate(180deg)} .st-ws-menu{ position:absolute;left:0;top:calc(100% + 8px);z-index:9600; width:270px;padding:8px;border-radius:22px; background: linear-gradient(rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 30%), radial-gradient(110% 70% at 18% -10%,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 42%), linear-gradient(150deg,rgba(255,255,255,.68),rgba(255,255,255,.42) 55%,rgba(255,255,255,.58)); border:1px solid rgba(255,255,255,.62); backdrop-filter:blur(6px) saturate(1.6); -webkit-backdrop-filter:blur(6px) saturate(1.6); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.95), inset 0 1.5px 4px 0 rgba(255,255,255,.16), inset 1.5px 1px 0 0 rgba(170,205,225,.16), inset -1.5px -1px 0 0 rgba(235,195,205,.15), inset 0 -1px 0 0 rgba(140,120,95,.08), 0 20px 50px 0 rgba(90,75,55,.13), 0 5px 16px 0 rgba(90,75,55,.08); opacity:0;transform:translateY(-10px) scale(.96);pointer-events:none; transform-origin:top left; transition:opacity .28s var(--s-ease),transform .28s var(--s-ease); } .st-ws-menu.is-open{opacity:1;transform:none;pointer-events:auto} .st-ws-item{ display:flex;align-items:center;gap:11px;width:100%; padding:9px 11px;border-radius:15px;cursor:pointer; border:0;background:transparent;color:var(--s-ink); font:inherit;font-size:13px;text-align:left;text-decoration:none; transition:background .2s,transform .3s var(--s-ease); } .st-ws-item:hover{background:rgba(255,255,255,.55);transform:translateX(2px)} .st-ws-item.is-on{background:rgba(255,255,255,.72)} .st-ws-ico{ flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:11px; background:linear-gradient(150deg,rgba(255,255,255,.9),rgba(255,255,255,.6)); color:rgba(26,26,26,.55); box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 3px rgba(140,120,95,.07); transition:color .2s,background .2s; } .st-ws-ico svg{width:15px;height:15px} .st-ws-item:hover .st-ws-ico,.st-ws-item.is-on .st-ws-ico{ background:linear-gradient(150deg,#fdeee7,#fbdcca);color:#c2522f; } .st-ws-txt{display:flex;flex-direction:column;gap:2px;min-width:0} .st-ws-txt b{font-weight:600;font-size:13px;line-height:1.25} .st-ws-txt small{font-size:11px;color:var(--s-muted);line-height:1.25} .st-ws-sep{height:1px;margin:7px 11px;background:rgba(140,120,95,.10)} .st-hd-right{display:flex;align-items:center;gap:8px} .st-dot-red{ width:7px;height:7px;border-radius:50%;flex:none; background:radial-gradient(circle at 35% 30%,#ff7a6b,#e8452f); box-shadow:0 0 0 3px rgba(232,69,47,.13),inset 0 -1px 2px rgba(150,30,15,.3); } .st-pill-dark{ background:linear-gradient(150deg,#2c2823,#3f3930 60%,#332e27),#2c2823; border-color:rgba(255,255,255,.14);color:#fffdf9; box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.20), inset 0 -1px 0 0 rgba(0,0,0,.28), 0 10px 24px rgba(44,40,35,.24), 0 2px 8px rgba(44,40,35,.16); } .st-pill-dark:hover{background:linear-gradient(150deg,#37322b,#4a443a 60%,#3d372f),#37322b} .st-pill-accent{ background:linear-gradient(150deg,#f5a077,#e0673f 62%,#d95d36),#e0673f; border-color:rgba(255,255,255,.32);color:#fff; box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.38), inset 0 -1px 0 0 rgba(150,50,25,.24), 0 10px 24px rgba(224,103,63,.30), 0 2px 8px rgba(224,103,63,.20); } .st-pill-accent:hover{background:linear-gradient(150deg,#f7ab86,#e5714a 62%,#df6339),#e5714a} .st-avatar{ width:22px;height:22px;border-radius:50%;flex:none; display:grid;place-items:center; background:rgba(255,255,255,.28); border:1px solid rgba(255,255,255,.42); font-size:10px;font-weight:700;color:#fff;overflow:hidden; } .st-avatar svg{width:12px;height:12px} /* ============================================================================ * 主区 * ==========================================================================*/ .st-body{ flex:1;min-height:0;display:flex;flex-direction:column; align-items:center;justify-content:center; padding:0 20px;overflow-y:auto; } .st-hero{text-align:center;max-width:780px;width:100%;animation:exRise .7s var(--s-ease)} @keyframes exRise{from{opacity:0;transform:translateY(20px) scale(.98)}to{opacity:1;transform:none}} .st-orb{ position:relative; width:48px;height:48px;margin:0 auto 22px;border-radius:50%; background:radial-gradient(circle at 32% 26%,#ffdd94 0%,#f9a96c 40%,#e0673f 100%); box-shadow: inset 0 -4px 9px rgba(180,70,35,.26), inset 0 3px 7px rgba(255,255,255,.58), 0 6px 18px rgba(224,103,63,.34); animation:exOrb 6s ease-in-out infinite; } .st-orb::before,.st-orb::after{ content:'';position:absolute;top:39%; width:5px;height:6px;border-radius:50%; background:rgba(90,35,15,.72); box-shadow:inset 0 -1px 1px rgba(255,255,255,.35); } .st-orb::before{left:31%} .st-orb::after{right:31%} @keyframes exOrb{ 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-7px) scale(1.025)} } .st-hero h1{ margin:0 0 10px;font-size:29px;font-weight:700;line-height:1.2; letter-spacing:-.03em;color:var(--s-ink); } .st-hero p{ margin:0 0 28px;font-size:13px;line-height:1.55; color:var(--s-muted-2);letter-spacing:-.005em; } .st-hints{display:flex;flex-wrap:wrap;gap:9px;justify-content:center} .st-hint{ height:33px;padding:0 16px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.7); background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.38) 55%,rgba(255,255,255,.52)),#fdfbf7; color:var(--s-muted-2); font:inherit;font-size:12px;font-weight:500;line-height:1; backdrop-filter:blur(9px) saturate(1.5); -webkit-backdrop-filter:blur(9px) saturate(1.5); box-shadow: inset 0 1.2px 0 0 rgba(255,255,255,.9), inset 1px .5px 0 0 rgba(170,205,225,.16), inset -1px -.5px 0 0 rgba(235,195,205,.15), 0 6px 16px rgba(140,120,95,.07), 0 2px 6px rgba(140,120,95,.045); transition:transform .45s var(--s-ease),box-shadow .3s,color .2s; } .st-hint:hover{ transform:translateY(-2px) scale(1.02); color:#c2522f; box-shadow: inset 0 1.2px 0 0 rgba(255,255,255,.95), inset 1px .5px 0 0 rgba(170,205,225,.22), inset -1px -.5px 0 0 rgba(235,195,205,.22), 0 10px 24px rgba(140,120,95,.105), 0 3px 9px rgba(140,120,95,.065); } .st-hint:active{transform:translateY(0) scale(.97)} .st-float{ position:absolute;right:26px;bottom:230px;z-index:40; display:inline-flex;align-items:center;gap:7px; height:34px;padding:0 15px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.75); background:var(--s-glass-bg),#fdfbf7; color:var(--s-muted-2);font:inherit;font-size:12px;font-weight:600; backdrop-filter:blur(11px) saturate(1.6); -webkit-backdrop-filter:blur(11px) saturate(1.6); box-shadow:var(--s-glass-shadow); transition:transform .45s var(--s-ease),box-shadow .3s,color .2s; } .st-float:hover{transform:translateY(-2px) scale(1.02);color:#c2522f} .st-float:active{transform:scale(.96)} .st-float svg{width:12px;height:12px} /* ============================================================================ * 底部输入区 * ==========================================================================*/ .st-ft{ flex:none;width:100%;max-width:920px; margin:0 auto;padding:0 20px 20px; display:flex;flex-direction:column;gap:9px; } .st-ctrl{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .st-mini{ display:inline-flex;align-items:center;gap:6px; height:29px;padding:0 13px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.68); background:linear-gradient(150deg,rgba(255,255,255,.58),rgba(255,255,255,.34) 55%,rgba(255,255,255,.48)),#fdfbf7; color:var(--s-muted-2); font:inherit;font-size:11.5px;font-weight:600;line-height:1; backdrop-filter:blur(9px) saturate(1.5); -webkit-backdrop-filter:blur(9px) saturate(1.5); box-shadow: inset 0 1.2px 0 0 rgba(255,255,255,.9), inset 1px .5px 0 0 rgba(170,205,225,.15), inset -1px -.5px 0 0 rgba(235,195,205,.14), 0 5px 14px rgba(140,120,95,.065); transition:transform .45s var(--s-ease),box-shadow .3s,color .2s; } .st-mini:hover{transform:translateY(-1px) scale(1.015);color:var(--s-ink)} .st-mini:active{transform:scale(.97)} .st-mini select{ border:0;background:transparent;color:inherit;font:inherit;cursor:pointer; outline:none;padding:0 2px; } .st-mini-name{ flex:0 0 auto; max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } .st-mini-name:empty::before{content:'选择模型';opacity:.6} #exModelBtn{gap:7px} #exModelBtn svg{flex:none;width:10px;height:10px;opacity:.45} .st-mini-dot{ width:7px;height:7px;border-radius:50%;flex:none; background:radial-gradient(circle at 35% 30%,#a8e59a,#4fae5a); box-shadow:0 0 0 2.5px rgba(79,174,90,.13); } .st-mini-free{color:#c2522f} /* ---------- 一体化输入卡：工具岛在卡内顶部 ---------- */ .st-composer{ border-radius:26px; padding:10px 12px 10px 16px; background:linear-gradient(165deg,rgba(255,255,255,.68) 0%,rgba(255,255,255,.44) 55%,rgba(255,255,255,.58) 100%),#fdfbf7; border:1px solid rgba(255,255,255,.72); backdrop-filter:blur(12px) saturate(1.6); -webkit-backdrop-filter:blur(12px) saturate(1.6); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,1), inset 0 2px 6px 0 rgba(255,255,255,.28), inset 2px 1px 0 0 rgba(170,205,225,.24), inset -2px -1px 0 0 rgba(235,195,205,.22), inset 0 -1px 0 0 rgba(140,120,180,.08), 0 14px 38px 0 rgba(140,120,95,.12), 0 3px 12px 0 rgba(140,120,95,.07); transition:box-shadow .35s,transform .45s var(--s-ease); } .st-composer:focus-within{ transform:translateY(-2px); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,1), inset 0 2px 6px 0 rgba(255,255,255,.30), inset 2px 1px 0 0 rgba(170,205,225,.28), inset -2px -1px 0 0 rgba(235,195,205,.26), inset 0 -1px 0 0 rgba(140,120,180,.08), 0 20px 48px 0 rgba(140,120,95,.145), 0 4px 14px 0 rgba(140,120,95,.08); } /* 工具岛行（比例 / 模型 / 张数）—— 放在卡内，与输入区同属一个视觉块 */ .st-tools{ display:flex;align-items:center;gap:7px;flex-wrap:wrap; padding:0 0 9px; margin-bottom:7px; border-bottom:1px solid rgba(140,120,95,.10); } .st-island{ display:inline-flex;align-items:center;gap:6px; height:28px;padding:0 12px;border-radius:999px;cursor:pointer; border:1px solid rgba(140,120,95,.13); background:#fff; color:var(--s-ink); font:inherit;font-size:11.5px;font-weight:600;line-height:1; box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 1px 2px rgba(140,120,95,.06); transition:transform .45s var(--s-ease),box-shadow .3s,color .2s,border-color .2s; } .st-island:hover{ transform:translateY(-1px); border-color:rgba(205,111,71,.42); box-shadow: inset 0 1px 0 rgba(255,255,255,1), 0 4px 12px rgba(205,111,71,.14); } .st-island:active{transform:translateY(0) scale(.97)} .st-island-k{color:var(--s-muted);font-weight:500;font-size:11px} .st-island select{ border:0;background:transparent;color:inherit;font:inherit;cursor:pointer; outline:none;padding:0 1px; } .st-island-model{gap:6px} .st-island-model .st-mini-name{max-width:190px} .st-island-model svg{flex:none;width:10px;height:10px;opacity:.45} .st-island-hint{ margin-left:auto;font-size:11px;font-weight:600;color:var(--s-muted); white-space:nowrap;padding-right:2px; } .st-island-hint.st-mini-free{color:#c2522f} /* 输入行 */ .st-composer-input{display:flex;align-items:flex-end;gap:10px;padding:0 0 0 2px} .st-composer-input textarea{ flex:1;min-width:0;resize:none;border:0;outline:0;background:transparent; color:var(--s-ink);font:inherit;font-size:15.5px;line-height:1.5; max-height:180px;padding:7px 4px; } .st-composer-input textarea::placeholder{color:var(--s-muted);opacity:.85} .st-send{ flex:none;display:grid;place-items:center; width:44px;height:44px;border-radius:50%;cursor:pointer; border:1px solid rgba(255,255,255,.34);color:#fff; background:radial-gradient(circle at 34% 27%,#f9ab7f,#e0673f 76%,#d85b34); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.42), inset 0 -2px 5px rgba(160,55,25,.26), 0 6px 16px rgba(224,103,63,.38); transition:transform .45s var(--s-ease),box-shadow .3s,filter .2s; } .st-send svg{width:17px;height:17px} .st-send:hover:not(:disabled){ transform:translateY(-2px) scale(1.06); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.5), inset 0 -2px 5px rgba(160,55,25,.26), 0 12px 28px rgba(224,103,63,.48); filter:brightness(1.04); } .st-send:active:not(:disabled){transform:translateY(0) scale(.94)} .st-send:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .st-note{text-align:center;font-size:11px;color:var(--s-muted);opacity:.85} /* ============================================================================ * 结果卡 * ==========================================================================*/ .st-stage{width:100%;max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:14px} .st-result{ padding:20px 22px;border-radius:26px; background:linear-gradient(165deg,rgba(255,255,255,.7),rgba(255,255,255,.46) 55%,rgba(255,255,255,.58)),#fdfbf7; border:1px solid rgba(255,255,255,.75); backdrop-filter:blur(12px) saturate(1.6); -webkit-backdrop-filter:blur(12px) saturate(1.6); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.95), inset 2px 1px 0 0 rgba(170,205,225,.16), inset -2px -1px 0 0 rgba(235,195,205,.15), 0 14px 38px rgba(140,120,95,.10), 0 3px 12px rgba(140,120,95,.055); animation:exRise .5s var(--s-ease); } .st-res-top{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:14px;font-size:12px} .st-res-prompt{ flex:1;min-width:0;color:var(--s-muted-2);line-height:1.55; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .st-res-status{flex:none;font-weight:700;color:#c2522f;white-space:nowrap} .st-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px} .st-fig{margin:0;overflow:hidden;border-radius:18px;background:rgba(255,255,255,.6)} .st-fig img{width:100%;height:auto;display:block;transition:transform .6s var(--s-ease)} .st-fig:hover img{transform:scale(1.035)} .st-text{font-size:14px;line-height:1.85;white-space:pre-wrap;color:var(--s-ink)} .st-err{ padding:13px 16px;border-radius:15px;font-size:13px;line-height:1.65; color:#a8452f;background:rgba(168,69,47,.07);border:1px solid rgba(168,69,47,.18); } .st-dots{display:flex;gap:7px;padding:14px 2px} .st-dots i{ width:6px;height:6px;border-radius:50%;background:#e0673f;opacity:.28; animation:exDot 1.15s infinite cubic-bezier(.5,0,.5,1); } .st-dots i:nth-child(2){animation-delay:.14s} .st-dots i:nth-child(3){animation-delay:.28s} @keyframes exDot{ 0%,80%,100%{opacity:.22;transform:scale(.82)} 40%{opacity:1;transform:scale(1)} } /* ============================================================================ * 模型下拉 * ==========================================================================*/ .st-model-menu{ position:fixed;z-index:9600; max-height:340px;overflow-y:auto;padding:8px;border-radius:22px; background: linear-gradient(rgba(255,255,255,.30) 0%,rgba(255,255,255,0) 30%), linear-gradient(150deg,rgba(255,255,255,.72),rgba(255,255,255,.46) 55%,rgba(255,255,255,.62)); border:1px solid rgba(255,255,255,.66); backdrop-filter:blur(16px) saturate(1.65); -webkit-backdrop-filter:blur(16px) saturate(1.65); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.98), inset 0 1.5px 4px 0 rgba(255,255,255,.2), inset 1.5px 1px 0 0 rgba(170,205,225,.18), inset -1.5px -1px 0 0 rgba(235,195,205,.17), inset 0 -1px 0 0 rgba(140,120,95,.08), 0 22px 54px 0 rgba(90,75,55,.145), 0 6px 18px 0 rgba(90,75,55,.085); opacity:0;transform:translateY(10px) scale(.96); transition:opacity .26s var(--s-ease),transform .26s var(--s-ease); scrollbar-width:thin; } .st-model-menu.is-open{opacity:1;transform:none} .st-mm-item{ display:flex;align-items:center;gap:9px;width:100%; padding:9px 11px;border-radius:14px;cursor:pointer; border:0;background:transparent;color:var(--s-ink); font:inherit;font-size:13px;text-align:left; transition:background .18s,transform .3s var(--s-ease); } .st-mm-item:hover{background:rgba(255,255,255,.6);transform:translateX(2px)} .st-mm-item.is-on{background:rgba(255,255,255,.78)} .st-mm-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500} .st-mm-tags{ flex:none;font-size:10.5px;color:var(--s-muted); padding:2px 8px;border-radius:999px;background:rgba(255,255,255,.62); } .st-mm-check{flex:none;font-size:12px;color:#e0673f;font-weight:700} #exToast{ position:fixed;left:50%;bottom:36px;transform:translate(-50%,16px) scale(.96); z-index:9700;padding:11px 22px;border-radius:999px; background:linear-gradient(150deg,rgba(255,255,255,.85),rgba(255,255,255,.6)); border:1px solid rgba(255,255,255,.8);color:var(--s-ink); font-size:13px;font-weight:600; backdrop-filter:blur(14px) saturate(1.6); -webkit-backdrop-filter:blur(14px) saturate(1.6); box-shadow: inset 0 1.5px 0 0 rgba(255,255,255,.95), 0 16px 40px rgba(140,120,95,.13), 0 4px 12px rgba(140,120,95,.08); opacity:0;pointer-events:none; transition:opacity .3s var(--s-ease),transform .3s var(--s-ease); } #exToast.is-show{opacity:1;transform:translate(-50%,0) scale(1)} /* ============================================================================ * 响应式 * ==========================================================================*/ @media (max-width:1080px){ .st-float{right:18px;bottom:210px} } @media (max-width:760px){ .st-hd{padding:8px 10px 0;height:54px;gap:5px} /* 顶栏必须放得下：缩小内边距与字号，否则「登录」会被裁 */ .st-pill{height:32px;padding:0 10px;font-size:11.5px;gap:6px} .st-pill .st-avatar{width:19px;height:19px;font-size:9px} .st-hd-right{gap:5px} .st-hd-right .st-pill:nth-child(1){display:none} /* 购买积分：挪进菜单 */ .st-workspace{padding:0 10px 0 9px;gap:6px} .st-ws-orb{width:15px;height:15px} .st-ws-caret{width:10px;height:10px} /* 菜单文字保留：这是主要导航，隐藏后只剩图标无法辨认 */ .st-ws-txt b{font-size:12.5px} .st-ws-txt small{font-size:10.5px} .st-body{padding:0 16px} .st-hero h1{font-size:22px} .st-hero p{font-size:12px;margin-bottom:20px} .st-orb{width:42px;height:42px;margin-bottom:16px} .st-hint{height:30px;padding:0 13px;font-size:11.5px} .st-float{display:none} .st-ft{padding:0 14px 16px;gap:8px} /* 工具岛在窄屏收紧，保证一行放得下（比例+模型+张数） */ .st-tools{gap:5px;padding-bottom:8px;margin-bottom:6px} .st-island{height:26px;padding:0 9px;font-size:11px;gap:4px} .st-island-k{font-size:10.5px} .st-island-model{gap:4px} .st-island-model .st-mini-name{max-width:96px} .st-island-hint{display:none} /* 窄屏隐藏计费提示，避免换行 */ .st-mini{height:27px;padding:0 11px;font-size:11px} .st-mini-name{max-width:150px} .st-input{padding:8px 8px 8px 18px} .st-input textarea{font-size:14.5px;padding:7px 3px} .st-send{width:40px;height:40px} .st-ws-menu{width:min(270px, calc(100vw - 28px))!important} #exNoticeBar{top:auto;bottom:14px;left:14px;right:14px;transform:none;max-width:none; border-radius:20px;padding:10px 12px 10px 18px;animation:exNbInM .48s cubic-bezier(.24,1.6,.35,1)} #exNoticeBar.is-closing{transform:translateY(10px)} @keyframes exNbInM{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}} #exNoticeBar .ex-nb-text{font-size:12px} } @media (prefers-reduced-motion:reduce){ #exStudioRoot *,#exStudioRoot *::before,#exStudioRoot *::after{ animation-duration:.01ms!important;animation-iteration-count:1!important; transition-duration:.01ms!important; } } /* ---------- 最近提示词行（对标站输入框上方那排胶囊）---------- */ .st-recent{ display:flex;align-items:center;gap:7px;flex-wrap:wrap; min-height:0; } .st-recent:empty{display:none} .st-rc{ display:inline-flex;align-items:center;gap:6px; height:27px;padding:0 12px;border-radius:999px;cursor:pointer; border:1px solid rgba(255,255,255,.6); background:linear-gradient(150deg,rgba(255,255,255,.5),rgba(255,255,255,.26) 55%,rgba(255,255,255,.42)),#fdfbf7; color:var(--s-muted); font:inherit;font-size:11px;font-weight:500;line-height:1; max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; backdrop-filter:blur(8px) saturate(1.45); -webkit-backdrop-filter:blur(8px) saturate(1.45); box-shadow: inset 0 1px 0 0 rgba(255,255,255,.85), inset 1px .5px 0 0 rgba(170,205,225,.12), inset -1px -.5px 0 0 rgba(235,195,205,.11), 0 4px 11px rgba(140,120,95,.05); transition:transform .45s var(--s-ease),box-shadow .3s,color .2s; } .st-rc:hover{transform:translateY(-1px) scale(1.015);color:#c2522f} .st-rc:active{transform:scale(.97)} .st-rc b{color:rgba(26,26,26,.72);font-weight:600} .st-rc-sep{ flex:none;width:1px;height:14px; background:rgba(120,100,160,.16); } /* ============================================================================ * 防止 site.css 的全局规则污染创作台 * * site.css 有一条：header > div, [data-slot="sidebar-inner"] { * background: color-mix(in srgb, var(--background) 83%, transparent) !important; * backdrop-filter: blur(24px) saturate(125%); * border-color: var(--border) !important; * } * 会把我们的顶栏子元素染成深色（实测 rgb(161,161,160)）， * 表现为胶囊周围一圈「黑边」。 * * 已把
/