/* extracted block 1 */
html.auth-gate-pending body > .app {
visibility: hidden;
opacity: 0;
transform: translateY(10px) scale(.992);
}
html.auth-gate-ready body > .app {
visibility: visible;
opacity: 1;
transform: none;
}
body > .app {
transition: opacity .26s cubic-bezier(.22,.8,.22,1), transform .26s cubic-bezier(.22,.8,.22,1);
}
@media (prefers-reduced-motion: reduce) {
body > .app { transition: none; }
}
/* extracted block 2 */
:root{--ink:#171821;--muted:#888d9a;--line:#ececf1;--blue:#5a56f4;--cyan:#48d9f0;--bg:#fafafa;--shadow:0 16px 45px rgba(31,35,61,.08)}
*{box-sizing:border-box} body{margin:0;color:var(--ink);background:var(--bg);font-family:Inter,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}button,textarea{font:inherit}button{border:0;cursor:pointer}
.app{min-height:100vh}.banner{height:30px;background:#131313;color:#eee;font-size:11px;display:flex;justify-content:center;align-items:center;gap:12px}.banner b{color:#b9a9ff}.banner button{color:#b9a9ff;background:transparent;font-size:11px}
.header{height:64px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 30px;gap:34px}.logo{font-weight:850;letter-spacing:-.04em;font-size:18px;display:flex;align-items:center;gap:9px}.logo-mark{width:31px;height:31px;border-radius:9px;overflow:hidden;background:#f6f9ff;box-shadow:0 5px 15px rgba(30,92,205,.16);flex:0 0 auto}.logo-mark img{width:100%;height:100%;object-fit:cover;object-position:center 32%}.topnav{display:flex;gap:22px;color:#727785;font-size:12px;flex:1}.topnav a{color:inherit;text-decoration:none}.topnav a:first-child{color:var(--ink);font-weight:700}.head-actions{display:flex;align-items:center;gap:8px}.credit{border:1px solid #e8e9ee;border-radius:999px;background:#fff;padding:8px 11px;color:#606675;font-size:11px}.buy{background:#54c8ef;color:#fff;border-radius:10px;padding:8px 12px;font-size:11px;font-weight:700}.account{position:relative}.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#ff9d73,#7868ee);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}.account-popover{position:absolute;right:0;top:calc(100% + 12px);z-index:30;width:255px;padding:17px;border:1px solid rgba(219,222,243,.95);border-radius:17px;background:rgba(255,255,255,.97);box-shadow:0 22px 55px rgba(45,53,112,.18);backdrop-filter:blur(18px);text-align:left;animation:panelIn .18s ease both}.account-popover::before{content:"";position:absolute;right:10px;top:-6px;width:12px;height:12px;transform:rotate(45deg);border-left:1px solid rgba(219,222,243,.95);border-top:1px solid rgba(219,222,243,.95);background:#fff}.account-name{display:block;color:#20243a;font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-email{display:block;margin-top:4px;color:#858b9d;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.account-plan{display:inline-flex;margin-top:9px;padding:4px 8px;border-radius:999px;background:#eefaff;color:#0aa7c5;font-size:10px;font-weight:800}.account-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0 12px;padding-top:12px;border-top:1px solid #eef0f5}.account-stat{padding:9px 10px;border-radius:11px;background:#fafaff}.account-stat small{display:block;color:#979dad;font-size:9px}.account-stat strong{display:block;margin-top:4px;color:#3d4370;font-size:13px}.account-logout{width:100%;padding:9px 10px;border-radius:10px;background:#fff4f4;color:#e4515a;font-size:11px;font-weight:800;text-align:center;transition:background .18s ease,transform .18s ease}.account-logout:hover{background:#ffe8e9;transform:translateY(-1px)}
.layout{display:flex;min-height:calc(100vh - 94px)}.sidebar{width:184px;background:#fff;border-right:1px solid var(--line);padding:25px 13px;display:flex;flex-direction:column}.side-title{color:#adb0b9;font-size:10px;padding:0 11px;margin:7px 0 12px}.side-nav{display:grid;gap:4px}.side-nav button{background:transparent;color:#707581;text-align:left;padding:11px 12px;border-radius:10px;font-size:12px;display:flex;align-items:center;gap:10px}.side-nav button:hover,.side-nav button.active{background:#f3f1ff;color:var(--blue);font-weight:700}.side-icon{width:17px;text-align:center;color:inherit;font-size:15px}.side-foot{margin-top:auto;border:1px solid #eeeef3;border-radius:12px;padding:12px;color:#9499a6;font-size:11px;line-height:1.6}.side-foot strong{display:block;color:#666b78;margin-bottom:5px}
.main{flex:1;max-width:1180px;margin:0 auto;padding:51px 48px 80px}.welcome{text-align:center}.welcome .kicker{font-size:10px;letter-spacing:.17em;color:#18bcd5;font-weight:800}.welcome h1{font-size:35px;letter-spacing:-.055em;line-height:1.1;margin:13px 0 8px;font-weight:780}.welcome p{color:#24b9d2;margin:0;font-size:13px}
.composer{position:relative;margin:34px auto 0;max-width:770px;border-radius:27px;padding:2px;background:linear-gradient(105deg,#60e8fb,#a77cff 48%,#ffb1ec);box-shadow:0 16px 50px rgba(112,108,238,.13);animation:breathe 5s ease-in-out infinite}.composer:before{content:"";position:absolute;inset:-12px;border-radius:34px;background:linear-gradient(100deg,#88efff,#b58bff,#ffd0ed);filter:blur(28px);opacity:.2;z-index:-1}.composer-inner{border-radius:25px;background:#fff;padding:15px 17px 12px}.add-row{display:flex;gap:12px;align-items:flex-start}.add{width:54px;height:54px;border:1px dashed #c9cbd7;border-radius:14px;background:#fff;color:#27bfd7;font-size:24px;display:grid;place-items:center}.prompt{width:100%;height:88px;border:0;outline:none;box-shadow:none;resize:none;color:var(--ink);font-size:13px;line-height:1.65;padding:5px 0}.prompt:focus{outline:none;box-shadow:none}.prompt::placeholder{color:#a9acb6}.composer-foot{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.chip{border:1px solid #e5e6eb;border-radius:999px;background:#fff;color:#616675;padding:7px 10px;font-size:11px}.chip:hover{border-color:#b3afff;color:var(--blue)}.chip.primary{color:#5551ed;border-color:#cbc7ff;background:#f7f6ff}.dialog{margin-left:auto;background:#f7f7fa;color:#777c88;border-radius:999px;padding:7px 9px;font-size:11px}.send{background:linear-gradient(135deg,#4ec8f1,#7d63f8);width:34px;height:34px;border-radius:50%;color:#fff;font-size:16px;box-shadow:0 8px 18px rgba(90,86,244,.22)}.send:disabled{opacity:.5}
.quick{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:24px auto 0}.quick button{padding:10px 16px;border-radius:999px;background:#fff;border:1px solid #e7e7ed;color:#707582;font-size:12px;transition:.2s}.quick button:hover,.quick button.active{color:var(--blue);border-color:#a9a5ff;box-shadow:0 8px 20px rgba(94,87,236,.12);transform:translateY(-2px)}
.section{max-width:920px;margin:54px auto 0}.section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}.section-head h2{font-size:16px;margin:0;letter-spacing:-.03em}.section-head a{font-size:11px;color:#8c8e98;text-decoration:none}.empty{height:110px;border:1px dashed #e3e4ea;border-radius:16px;display:grid;place-items:center;color:#aaaeba;font-size:12px;background:#fff}.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:16px}.tabs button{background:transparent;color:#9a9da7;padding:0 0 10px;font-size:12px}.tabs button.active{color:var(--blue);border-bottom:2px solid var(--blue);font-weight:700}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.showcase{border:1px solid #ececf2;border-radius:16px;overflow:hidden;background:#fff;transition:.25s}.showcase:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.cover{height:145px;position:relative;overflow:hidden;background:#e8ecf6}.cover img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .55s cubic-bezier(.2,.8,.2,1)}.showcase:hover .cover img{transform:scale(1.06)}.cover:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(9,12,23,.58))}.cover-label{position:absolute;z-index:1;left:11px;bottom:10px;color:#fff;font-size:10px;background:rgba(15,18,30,.45);backdrop-filter:blur(7px);padding:5px 7px;border-radius:6px}.showcase-body{padding:11px}.showcase-body strong{font-size:11px;display:block}.showcase-body span{display:block;color:#9a9da8;font-size:10px;margin-top:4px}.toast{position:fixed;right:25px;bottom:25px;background:#20212b;color:#fff;padding:12px 16px;border-radius:11px;font-size:12px;box-shadow:0 15px 35px rgba(15,20,48,.2);opacity:0;transform:translateY(8px);pointer-events:none;transition:.25s}.toast.show{opacity:1;transform:none}.modal{position:fixed;inset:0;background:rgba(20,20,33,.3);backdrop-filter:blur(5px);display:none;place-items:center;z-index:4}.modal.open{display:grid}.modal-box{background:#fff;border-radius:18px;padding:24px;width:min(580px,calc(100% - 30px));box-shadow:0 24px 80px rgba(20,20,50,.25)}.modal-box header{display:flex;justify-content:space-between;align-items:center}.modal-box h2{font-size:19px;margin:0}.close{width:28px;height:28px;border-radius:50%;background:#f1f1f4;color:#7d818d}.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.price{border:1px solid #ebebf0;border-radius:13px;padding:14px}.price.featured{background:#f5f4ff;border-color:#bcb8ff}.price h3{font-size:12px;margin:0}.price b{display:block;font-size:22px;margin:10px 0}.price small{color:#999eab;line-height:1.6}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-2px)}}
@media(max-width:900px){.sidebar{width:160px}.header{padding:0 18px}.topnav{gap:12px}.main{padding:42px 24px 60px}.cards{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.sidebar{display:none}.header{height:58px}.topnav{display:none}.main{padding:35px 15px}.welcome h1{font-size:29px}.composer{margin-top:27px}.cards{grid-template-columns:repeat(2,1fr)}.prices{grid-template-columns:1fr}.credit{display:none}}
/* extracted block 3 */
/* 第一版增强：保留原有信息层级，只增加更细腻的光晕、入场与交互反馈。 */
html { scroll-behavior: smooth; }
button:focus-visible, .dialog:focus-visible, select:focus-visible { outline: 2px solid rgba(105, 113, 236, .42); outline-offset: 2px; }
body { position: relative; overflow-x: hidden; background: radial-gradient(circle at 7% 12%, rgba(105, 233, 249, .10), transparent 25%), radial-gradient(circle at 96% 20%, rgba(181, 133, 255, .11), transparent 27%), var(--bg); }
body::before, body::after { display: none; }
.app { position: relative; z-index: 1; isolation: isolate; }
.banner { position: relative; z-index: 16; overflow: hidden; background: linear-gradient(90deg, #111217, #1a1b25 55%, #13151c); box-shadow: 0 3px 16px rgba(39, 42, 70, .14); }
.banner::before { display: none; }
.banner > * { position: relative; z-index: 1; }
.banner b { color: #c5baff; text-shadow: 0 1px 8px rgba(95, 92, 214, .18); }
.banner button { color: #c5baff; text-decoration: underline; text-underline-offset: 3px; }
.header { position: sticky; z-index: 15; top: 0; background: rgba(255,255,255,.82); box-shadow: 0 8px 22px rgba(34, 46, 82, .03); backdrop-filter: blur(18px) saturate(1.18); }
.logo-mark { position: relative; border: 1px solid rgba(94,125,236,.12); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
.logo-mark::after { position: absolute; inset: -8px; border: 1px solid rgba(100, 200, 244, .0); border-radius: 14px; content: ""; transition: border-color .28s ease, transform .28s ease; }
.logo:hover .logo-mark { transform: rotate(-4deg) translateY(-1px); box-shadow: 0 8px 24px rgba(30, 130, 226, .22); }
.logo:hover .logo-mark::after { border-color: rgba(100, 200, 244, .36); transform: rotate(8deg); }
.topnav a { position: relative; transition: color .2s ease; }
.topnav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--blue)); content: ""; opacity: 0; transform: scaleX(.3); transition: opacity .2s ease, transform .2s ease; }
.topnav a:hover::after, .topnav a:first-child::after { opacity: 1; transform: scaleX(1); }
.credit { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.credit:hover { border-color: #b9c8fc; box-shadow: 0 7px 17px rgba(89, 113, 231, .12); transform: translateY(-1px); }
.buy { transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.buy:hover { filter: saturate(1.1); box-shadow: 0 8px 20px rgba(79, 184, 231, .25); transform: translateY(-1px); }
.avatar { transition: transform .2s ease, box-shadow .2s ease; }
.avatar:hover { box-shadow: 0 7px 17px rgba(255, 141, 95, .25); transform: translateY(-1px) rotate(4deg); }
.sidebar { position: sticky; top: 94px; height: calc(100vh - 94px); }
.side-nav button { position: relative; overflow: hidden; transition: background .2s ease, color .2s ease, transform .2s ease; }
.side-nav button::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--cyan), var(--blue)); content: ""; opacity: 0; transform: scaleY(.35); transition: opacity .2s ease, transform .2s ease; }
.side-nav button:hover { transform: translateX(2px); }
.side-nav button.active::before { opacity: 1; transform: scaleY(1); }
.main { position: relative; }
.welcome { position: relative; z-index: 20; }
.welcome { animation: fadeRise .8s cubic-bezier(.2,.8,.2,1) both; }
.welcome .kicker { position: relative; display: inline-block; }
.welcome .kicker::after { position: absolute; right: -23px; top: 50%; width: 15px; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); content: ""; }
.welcome h1 { background: linear-gradient(105deg, #171821 18%, #3f4aa2 52%, #171821 84%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.composer { isolation: isolate; overflow: visible; z-index: 1; background-size: 170% 100%; animation: breathe 6s ease-in-out infinite, borderFlow 16s ease-in-out infinite, fadeRise .9s .08s cubic-bezier(.2,.8,.2,1) both; transition: box-shadow .3s ease, transform .3s ease; }
.composer.panel-open { z-index: 20; }
.composer::before { z-index: 0; }
.composer::after { position: absolute; z-index: 0; inset: -2px; border-radius: 29px; background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(91,226,245,.7), rgba(167,121,255,.38) 26%, transparent 62%); content: ""; opacity: 0; filter: blur(10px); pointer-events: none; transition: opacity .3s ease; }
.composer:hover::after, .composer:focus-within::after { opacity: .12; }
.composer:focus-within { box-shadow: 0 0 0 2px rgba(135,157,247,.24), 0 24px 66px rgba(100,105,237,.17), 0 0 44px rgba(81,220,242,.1); transform: translateY(-1px); }
.composer-inner { position: relative; z-index: 1; }
.add-row { position: relative; min-width: 0; }
.add { position: relative; overflow: hidden; transition: border-color .25s ease, background .25s ease, transform .25s ease, box-shadow .25s ease; }
.add.has-file { border-style: solid; border-color: rgba(108,126,225,.5); color: #fff; background-position: center; background-size: cover; text-shadow: 0 1px 6px rgba(20,25,50,.55); }
.add.has-file::before { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgba(17,22,42,.02), rgba(17,22,42,.38)); content: ""; }
.add.has-file { font-size: 18px; }
.add:hover { border-color: #9aa7f6; background-color: #fbfbff; box-shadow: 0 10px 22px rgba(102, 104, 226, .13); transform: translateY(-2px) scale(1.015); }
.prompt { padding-right: 54px; transition: color .2s ease; outline: none !important; box-shadow: none !important; }
.prompt:focus { color: #20243a; }
.prompt-count { position: absolute; right: 3px; bottom: 6px; color: #a3a8b4; font-size: 10px; pointer-events: none; }
.chip { position: relative; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease; }
.chip.primary { box-shadow: inset 0 0 0 1px rgba(91, 85, 238, .05), 0 6px 16px rgba(94, 87, 236, .08); }
.chip.primary:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(91, 85, 238, .06), 0 10px 23px rgba(94, 87, 236, .16); }
.chip.is-open { color: #5d5ae5; border-color: #b9b5ff; background: #f3f2ff; box-shadow: 0 8px 18px rgba(94,87,236,.12); }
.dialog { cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; }
.dialog:hover, .dialog.is-open { color: #5d5ae5; background: #f0efff; transform: translateY(-1px); }
.chip.has-file { color: #4d58b8; border-color: #c8c9fa; background: #f7f7ff; }
.empty.is-processing { color: #6669cf; border-color: #c9c8f4; background: linear-gradient(110deg, #fff, #f8f7ff, #fff); }
.send { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.send::before { position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgba(255,255,255,.72); content: ""; opacity: 0; transform: scale(.6); }
.send:hover { box-shadow: 0 11px 25px rgba(90,86,244,.34); transform: translateY(-2px) scale(1.04); }
.send.is-sent::before { animation: sendRipple .65s ease-out; }
.quick { animation: fadeRise .8s .2s cubic-bezier(.2,.8,.2,1) both; }
.quick button { position: relative; overflow: hidden; }
.section { position: relative; z-index: 1; animation: fadeRise .8s .28s cubic-bezier(.2,.8,.2,1) both; }
.showcase { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; }
.showcase:hover { transform: translateY(-6px) scale(1.012); box-shadow: 0 20px 46px rgba(31,35,61,.13); }
.toast { z-index: 40; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.modal { opacity: 0; pointer-events: none; transition: opacity .24s ease; }
.modal.open { opacity: 1; pointer-events: auto; }
.modal-box { transform: translateY(12px) scale(.97); transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.modal.open .modal-box { transform: none; }
.media-strip { display:flex; align-items:center; gap:8px; margin:0 0 11px; padding:1px 0 2px; min-height:58px; overflow-x:auto; scrollbar-width:none; }
.media-strip::-webkit-scrollbar { display:none; }
.media-items { display:flex; align-items:center; gap:8px; }
.media-thumb { position:relative; flex:0 0 auto; width:58px; height:58px; overflow:hidden; border:1px solid #dfe2f3; border-radius:12px; background:#f4f6fc; box-shadow:0 5px 15px rgba(62,72,137,.09); animation:thumbIn .2s ease both; }
.media-thumb img { display:block; width:100%; height:100%; object-fit:cover; }
.media-thumb button { position:absolute; top:3px; right:3px; display:grid; place-items:center; width:18px; height:18px; border-radius:50%; color:#fff; background:rgba(28,33,60,.7); font-size:13px; line-height:1; opacity:0; transition:opacity .16s ease, transform .16s ease; }
.media-thumb:hover button, .media-thumb button:focus-visible { opacity:1; transform:scale(1.05); }
.media-add { flex:0 0 auto; width:58px; height:58px; border:1px dashed #c9cbd7; border-radius:12px; color:#27bfd7; background:#fff; font-size:23px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease; }
.media-add:hover { border-color:#9aa7f6; background:#fafaff; box-shadow:0 8px 18px rgba(102,104,226,.12); transform:translateY(-2px) scale(1.02); }
.media-strip[hidden] { display:none !important; }
.hidden-file { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
[hidden] { display: none !important; }
.control-panel { position: absolute; z-index: 40; top: calc(100% + 12px); bottom: auto; left: 17px; width: 235px; padding: 12px; border: 1px solid rgba(210,214,245,.9); border-radius: 15px; background: rgba(255,255,255,.97); box-shadow: 0 14px 34px rgba(39,48,100,.15); backdrop-filter: blur(16px); animation: panelIn .2s ease both; }
.control-panel.locale-panel { right: 18px; left: auto; width: 282px; }
.control-panel.character-panel { left: 177px; width: 280px; }
.panel-kicker { margin-bottom: 8px; color: #8a94aa; font-size: 9px; font-weight: 800; letter-spacing: .14em; }
.control-panel > button:not(.panel-apply), .panel-upload { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; margin-top: 5px; padding: 9px 10px; border-radius: 9px; color: #545f79; background: transparent; text-align: left; font-size: 11px; font-weight: 750; transition: background .18s ease, color .18s ease, transform .18s ease; }
.control-panel > button:not(.panel-apply):hover, .panel-upload:hover { color: #5b5de4; background: #f1f1ff; transform: translateX(2px); }
.control-panel > button[aria-pressed="true"] { color: #5551ed; background: #f1f0ff; }
.panel-upload.is-dragover { color: #5551ed; border: 1px dashed #9ea2f5; background: #f1f0ff; transform: translateY(-1px); }
.control-panel button small { color: #a1a9b8; font-size: 9px; font-weight: 500; }
.model-loading, .model-empty { padding: 15px 10px 11px; color: #8a91a5; font-size: 11px; line-height: 1.5; }
.model-empty { color: #b65b67; }
.control-panel label { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 8px; margin-top: 7px; color: #788399; font-size: 10px; }
.control-panel select { width: 100%; padding: 6px 8px; border: 1px solid #e6e8ef; border-radius: 8px; color: #5c667c; background: #fbfcff; font-size: 10px; }
.control-panel select:focus { outline: 2px solid rgba(113,104,236,.18); border-color: #aaa8ee; }
.panel-apply { width: 100%; margin-top: 10px; padding: 8px 10px; border-radius: 9px; color: #fff; background: linear-gradient(135deg,#5fcbe9,#7168ec); font-size: 10px; font-weight: 800; }
.character-panel p { margin: 5px 0 12px; color: #8993a8; font-size: 10px; line-height: 1.55; }
.character-preview { position: relative; overflow: hidden; margin-top: 10px; border-radius: 11px; background: #edf0f7; }
.character-preview img { display: block; width: 100%; height: 132px; object-fit: cover; }
.character-preview button { position: absolute; top: 6px; right: 6px; display: grid; width: 23px; height: 23px; place-items: center; border-radius: 50%; color: #59637a; background: rgba(255,255,255,.9); }
@keyframes fadeRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes borderFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes sendRipple { from { opacity: .8; transform: scale(.6); } to { opacity: 0; transform: scale(1.45); } }
@keyframes panelIn { from { opacity: 0; transform: translateY(-4px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes thumbIn { from { opacity: 0; transform: translateY(4px) scale(.96); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
.control-panel, .control-panel.locale-panel, .control-panel.character-panel { position: fixed; z-index: 100; right: 12px; top: 76px; bottom: auto; left: 12px; width: auto; max-height: calc(100vh - 92px); overflow: auto; }
.control-panel.character-panel { left: 12px; }
.welcome h1 { font-size: 29px; }
.prompt-count { right: 1px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
}
/* extracted block 4 */
/* 大气版排版：保留原有工作台结构，只提高尺度与留白。 */
.header { height: 74px; padding: 0 38px; gap: 42px; }
.logo { font-size: 21px; gap: 11px; }
.logo-mark { width: 38px; height: 38px; border-radius: 11px; }
.topnav { gap: 28px; font-size: 14px; }
.head-actions { gap: 11px; }
.credit { padding: 10px 14px; font-size: 13px; }
.buy { padding: 10px 15px; border-radius: 11px; font-size: 13px; }
.avatar { width: 38px; height: 38px; font-size: 13px; }
.sidebar { width: 220px; top: 104px; height: calc(100vh - 104px); padding: 32px 17px; }
.side-title { font-size: 12px; padding: 0 13px; margin: 8px 0 14px; }
.side-nav { gap: 6px; }
.side-nav button { padding: 13px 14px; border-radius: 12px; font-size: 14px; gap: 12px; }
.side-icon { width: 20px; font-size: 18px; }
.side-foot { display: none; }
.main { max-width: 1360px; padding: 72px 64px 100px; }
.welcome .kicker { font-size: 12px; letter-spacing: .19em; }
.welcome h1 { font-size: 48px; margin: 17px 0 12px; }
.welcome p { font-size: 17px; }
.composer { max-width: 980px; margin-top: 46px; border-radius: 31px; padding: 3px; }
.composer-inner { border-radius: 28px; padding: 22px 24px 18px; }
.add-row { gap: 17px; }
.add { width: 70px; height: 70px; border-radius: 17px; font-size: 31px; }
.prompt { height: 128px; padding-top: 7px; font-size: 17px; line-height: 1.75; }
.prompt::placeholder { color: #a1a5b1; }
.prompt-count { right: 5px; bottom: 9px; font-size: 12px; }
.media-strip { min-height: 74px; gap: 10px; margin-bottom: 14px; }
.media-items { gap: 10px; }
.media-thumb, .media-add { width: 74px; height: 74px; border-radius: 15px; }
.media-add { font-size: 30px; }
.composer-foot { gap: 10px; }
.chip { padding: 10px 14px; font-size: 14px; }
.dialog { padding: 10px 13px; font-size: 14px; }
.send { width: 46px; height: 46px; font-size: 22px; }
.quick { display: none; }
.section { max-width: 1120px; margin-top: 78px; }
.section > .section-head:first-child, .section > .empty { display: none; }
.section > .section-head:nth-of-type(2) { margin-top: 0 !important; }
.section-head { margin-bottom: 18px; }
.section-head h2 { font-size: 22px; }
.section-head a { font-size: 14px; }
.tabs { gap: 28px; margin-bottom: 22px; }
.tabs button { padding-bottom: 13px; font-size: 14px; }
.cards { gap: 18px; }
.showcase { border-radius: 19px; }
.cover { height: 190px; }
.cover-label { left: 14px; bottom: 13px; font-size: 12px; padding: 6px 9px; }
.showcase-body { padding: 15px; }
.showcase-body strong { font-size: 14px; }
.showcase-body span { font-size: 12px; margin-top: 6px; }
.account-popover { width: 300px; }
.account-redeem { margin-top: 14px; padding-top: 14px; border-top: 1px solid #eef0f5; }
.account-redeem-button { width: 100%; padding: 10px 12px; border: 1px solid #ded9f7; border-radius: 11px; color: #655bd0; background: #faf9ff; font-size: 12px; font-weight: 800; text-align: center; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.account-redeem-button:hover { border-color: #bdb4f0; background: #f2efff; transform: translateY(-1px); }
.account-redeem-form { display: flex; gap: 8px; margin-top: 9px; }
.account-redeem-form[hidden] { display: none; }
.account-redeem-form input { min-width: 0; flex: 1; padding: 9px 10px; border: 1px solid #e0e2ed; border-radius: 9px; outline: none; color: #333852; background: #fff; font-size: 11px; letter-spacing: .04em; text-transform: uppercase; }
.account-redeem-form input:focus { border-color: #b8afe9; box-shadow: 0 0 0 3px rgba(137, 125, 225, .12); }
.account-redeem-form button { flex: 0 0 auto; padding: 9px 11px; border-radius: 9px; color: #fff; background: #7569db; font-size: 11px; font-weight: 800; transition: background .18s ease, transform .18s ease; }
.account-redeem-form button:hover:not(:disabled) { background: #6559ce; transform: translateY(-1px); }
.account-redeem-form button:disabled { cursor: wait; opacity: .58; }
.account-redeem-status { display: block; min-height: 15px; margin-top: 7px; color: #8a8fa0; font-size: 10px; line-height: 1.4; }
.account-redeem-status.success { color: #23866f; }
.account-redeem-status.error { color: #d05560; }
@media (max-width: 900px) {
.header { padding: 0 24px; gap: 24px; }
.sidebar { width: 190px; }
.main { padding: 58px 36px 78px; }
.welcome h1 { font-size: 41px; }
.composer { max-width: 100%; }
}
@media (max-width: 640px) {
.header { height: 62px; padding: 0 16px; }
.logo { font-size: 18px; }
.logo-mark { width: 32px; height: 32px; }
.buy { display: none; }
.avatar { width: 34px; height: 34px; }
.sidebar { display: none; }
.main { padding: 44px 16px 64px; }
.welcome h1 { font-size: 33px; }
.welcome p { font-size: 14px; }
.composer { margin-top: 32px; }
.composer-inner { padding: 16px 14px 14px; }
.add { width: 56px; height: 56px; }
.prompt { height: 102px; font-size: 15px; }
.media-thumb, .media-add { width: 60px; height: 60px; }
.chip { padding: 8px 10px; font-size: 12px; }
.dialog { font-size: 12px; }
.send { width: 40px; height: 40px; }
.section { margin-top: 54px; }
.cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cover { height: 135px; }
.showcase-body { padding: 11px; }
.showcase-body strong { font-size: 12px; }
}
/* 账户中心：统一承载个人信息、任务、积分与兑换入口。头像仅写入浏览器本机缓存。 */
.account-center-modal { position: fixed; inset: 0; z-index: 700; display: grid; place-items: center; padding: 24px; background: rgba(28, 34, 46, .27); backdrop-filter: blur(9px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, visibility 0s linear .2s; }
.account-center-modal[hidden] { display: none; }
.account-center-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.account-center-box { width: min(780px, 100%); max-height: min(680px, calc(100vh - 48px)); overflow: hidden; border: 1px solid #e1e4ee; border-radius: 22px; background: rgba(255,255,255,.98); box-shadow: 0 28px 90px rgba(31, 38, 72, .22); transform: translateY(10px) scale(.975); transition: transform .24s cubic-bezier(.2,.8,.2,1); }
.account-center-modal.is-open .account-center-box { transform: none; }
.account-center-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; padding: 25px 28px 19px; border-bottom: 1px solid #eef0f5; }
.account-center-kicker { color: #8580c2; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.account-center-head h2 { margin: 7px 0 5px; color: #252a3f; font-size: 27px; letter-spacing: -.04em; }
.account-center-head p { margin: 0; color: #858b9e; font-size: 12px; }
.account-center-close { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #e3e5ef; border-radius: 50%; color: #747a8b; background: #fff; font-size: 21px; line-height: 1; }
.account-center-close:hover { color: #5f56c8; background: #f5f3ff; border-color: #cfc9f5; }
.account-center-body { display: grid; grid-template-columns: 164px minmax(0, 1fr); min-height: 390px; }
.account-center-tabs { display: grid; align-content: start; gap: 3px; padding: 19px 12px; border-right: 1px solid #eef0f5; background: #fbfbfe; }
.account-center-tab { min-height: 42px; padding: 0 13px; border-radius: 10px; color: #777e91; background: transparent; font-size: 13px; font-weight: 700; text-align: left; }
.account-center-tab:hover { color: #5f56c8; background: #f1efff; }
.account-center-tab.is-active { color: #5f56c8; background: #eeecff; }
.account-center-content { min-width: 0; padding: 24px 28px 28px; }
.account-center-panel { display: none; animation: fadeRise .2s ease both; }
.account-center-panel.is-active { display: block; }
.account-center-panel h3 { margin: 0; color: #252a3f; font-size: 22px; }
.account-center-panel > p { margin: 9px 0 22px; color: #858b9e; font-size: 13px; line-height: 1.65; }
.account-center-profile-card { display: flex; align-items: center; gap: 19px; padding: 16px; border: 1px solid #ececf5; border-radius: 15px; background: #fcfcff; }
.account-center-avatar-wrap { display: grid; justify-items: center; gap: 6px; flex: 0 0 auto; }
.account-center-avatar { display: grid; width: 66px; height: 66px; place-items: center; border-radius: 20px; color: #fff; background: linear-gradient(135deg, #8f82e8, #c18fca); font-size: 20px; font-weight: 800; }
.account-avatar-upload { color: #655bd0; font-size: 11px; font-weight: 750; cursor: pointer; }
.account-avatar-upload input { display: none; }
.account-center-avatar-wrap small { color: #a0a5b4; font-size: 10px; }
.account-center-profile-meta { display: grid; gap: 7px; min-width: 0; }
.account-center-profile-meta .account-email { overflow: hidden; text-overflow: ellipsis; }
.account-center-profile-meta .account-plan { width: max-content; margin: 0; }
.account-center-profile-meta strong { color: #4a4f83; font-size: 18px; }
.account-profile-form { display: grid; gap: 13px; margin-top: 21px; }
.account-profile-form label { display: grid; gap: 7px; color: #5c6476; font-size: 12px; font-weight: 750; }
.account-profile-form input { height: 45px; padding: 0 13px; border: 1px solid #dedfeb; border-radius: 11px; outline: none; color: #30364d; background: #fff; font-size: 14px; }
.account-profile-form input:focus { border-color: #aaa1ee; box-shadow: 0 0 0 4px rgba(127,114,224,.12); }
.account-profile-form label small { color: #9a9faf; font-size: 10px; font-weight: 500; }
.account-profile-form button, .account-center-action { width: max-content; min-width: 112px; height: 42px; padding: 0 16px; border-radius: 11px; color: #fff; background: linear-gradient(135deg, #7568df, #5f87e6); font-size: 13px; font-weight: 800; box-shadow: 0 8px 18px rgba(105,88,203,.15); }
.account-profile-form button:disabled { opacity: .6; cursor: wait; }
.account-profile-status { min-height: 18px; margin: 0; color: #858b9e; font-size: 12px; }
.account-profile-status.success { color: #23866f; }
.account-profile-status.error { color: #d05560; }
.account-center-action:hover { filter: brightness(1.04); transform: translateY(-1px); }
.account-center-coming { display: inline-flex; padding: 8px 12px; border-radius: 999px; color: #8079bf; background: #f1efff; font-size: 12px; font-weight: 800; }
.account-panel-heading { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.account-panel-heading > div { min-width: 0; }
.account-panel-heading > p, .account-panel-heading p { margin-bottom: 0; }
.account-panel-refresh { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #e1e4ee; border-radius: 9px; color: #6f7890; background: #fff; font-size: 11px; }
.account-panel-refresh:hover { color: #5f56c8; border-color: #c9c3f1; background: #f8f7ff; }
.account-embedded-task-list { max-height: 328px; overflow: auto; padding-top: 4px; }
.account-embedded-task-list .task-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; }
.account-embedded-task-list .task-main { grid-column: 1; }
.account-embedded-task-list .task-state { grid-column: 2; grid-row: 1; }
.account-embedded-task-list .task-billing { grid-column: 1; }
.account-embedded-task-list .task-action { grid-column: 2; grid-row: 2; align-self: end; }
.account-embedded-task-list .task-view { justify-self: end; }
.account-embedded-ledger-list { max-height: 328px; overflow: auto; padding-top: 8px; }
.account-center-redeem-form { margin-top: 19px; }
.account-center-redeem-form .redeem-modal-input-row { max-width: 520px; }
@media (max-width: 620px) { .account-center-modal { padding: 12px; } .account-center-box { max-height: calc(100vh - 24px); border-radius: 17px; } .account-center-head { padding: 20px 18px 15px; } .account-center-head h2 { font-size: 23px; } .account-center-body { grid-template-columns: 1fr; } .account-center-tabs { display: flex; overflow-x: auto; padding: 10px; border-right: 0; border-bottom: 1px solid #eef0f5; } .account-center-tab { min-width: max-content; min-height: 37px; padding: 0 11px; font-size: 12px; } .account-center-content { padding: 19px 17px 22px; } }
/* extracted block 5 */
/* 浅蓝精修：降低紫色存在感，让交互反馈与主页保持同一套清爽蓝色。 */
:root { --blue: #3b9fd1; --cyan: #35c7e5; }
body { background: radial-gradient(circle at 8% 12%, rgba(81, 211, 237, .11), transparent 27%), radial-gradient(circle at 94% 18%, rgba(157, 215, 255, .14), transparent 30%), #fbfdff; }
.banner b, .banner button { color: #9de6f4; }
.avatar { background: linear-gradient(135deg, #57cde7, #5c9fe8); }
.avatar:hover { box-shadow: 0 7px 17px rgba(65, 174, 216, .28); }
.welcome h1 { background: linear-gradient(105deg, #172235 18%, #356f95 52%, #172235 84%); }
.composer {
background: linear-gradient(110deg, #66dced 0%, #8dcef1 52%, #b9e6f6 100%);
background-size: 100% 100%;
box-shadow: 0 18px 48px rgba(64, 164, 213, .17);
animation: breathe 6s ease-in-out infinite, fadeRise .9s .08s cubic-bezier(.2,.8,.2,1) both;
}
.composer::before { background: linear-gradient(100deg, #a9f0fa, #b9ddf6, #d8f4fb); opacity: .24; }
.composer::after { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(89, 221, 239, .8), rgba(126, 193, 237, .5) 34%, transparent 66%); }
.composer:focus-within { box-shadow: 0 0 0 2px rgba(87, 195, 229, .28), 0 24px 66px rgba(65, 160, 211, .18), 0 0 44px rgba(81, 220, 242, .13); }
.add:hover { border-color: #79cde5; background-color: #f5fdff; box-shadow: 0 10px 22px rgba(65, 170, 212, .16); }
.chip { border-color: #d7e5eb; }
.chip:hover, .chip.is-open { color: #197fa7; border-color: #9adced; background: #f0fbff; box-shadow: 0 9px 20px rgba(65, 177, 215, .14); }
.chip.primary { color: #197fa7; border-color: #a7dfea; background: #f2fcff; box-shadow: inset 0 0 0 1px rgba(56, 176, 211, .08), 0 6px 16px rgba(65, 177, 215, .1); }
.chip.primary:hover { box-shadow: inset 0 0 0 1px rgba(56, 176, 211, .1), 0 11px 24px rgba(65, 177, 215, .18); }
.dialog:hover, .dialog.is-open { color: #197fa7; background: #edfaff; box-shadow: 0 8px 18px rgba(65, 177, 215, .11); }
.chip.has-file { color: #197fa7; border-color: #9adced; background: #f0fbff; }
.send { background: linear-gradient(135deg, #4bc8e5, #65a9e7); box-shadow: 0 8px 18px rgba(65, 164, 212, .23); }
.send:hover { box-shadow: 0 12px 26px rgba(65, 164, 212, .34); }
.side-nav button:hover, .side-nav button.active { background: #effaff; color: #248db5; }
.side-nav button::before { background: linear-gradient(180deg, #52d8eb, #62a8e9); }
.showcase { border-color: #e0edf2; }
.showcase:hover { border-color: #a9deec; background: #fbfeff; box-shadow: 0 20px 46px rgba(49, 137, 174, .15); }
.tabs button:hover, .tabs button.active { color: #248db5; }
.tabs button.active { border-color: #45bddd; }
.logo.brand-lockup { gap: 12px; color: #11151d; font-size: 22px; font-weight: 780; letter-spacing: -.04em; white-space: nowrap; }
.logo.brand-lockup > span:last-child b { color: #337aff; font-weight: 780; }
.logo.brand-lockup .brand-glyph { position: relative; width: 38px; height: 38px; display: grid; place-items: center; overflow: hidden; border-radius: 11px; background: #11151d; transform: rotate(-3deg); box-shadow: 0 8px 20px rgba(17, 21, 29, .18); }
.logo.brand-lockup .brand-glyph i { position: absolute; width: 19px; height: 6px; border-radius: 99px; background: #fff; transform: rotate(-42deg); }
.logo.brand-lockup .brand-glyph i:first-child { transform: translate(-5px, -5px) rotate(-42deg); }
.logo.brand-lockup .brand-glyph i:last-child { transform: translate(5px, 5px) rotate(-42deg); background: #c8ff72; }
.logo.brand-lockup:hover .brand-glyph { transform: rotate(-3deg) translateY(-2px) scale(1.03); box-shadow: 0 11px 26px rgba(17, 21, 29, .23); }
/* 脚本未执行时也不显示旧的“光武科技视频”标识，保证品牌主线始终是 GUANGWU AIGC。 */
.logo:not(.brand-lockup) { gap: 12px; font-size: 0; }
.logo:not(.brand-lockup)::after { content: "GUANGWU AIGC"; color: #11151d; font-size: 22px; font-weight: 780; letter-spacing: -.04em; }
.logo:not(.brand-lockup) .logo-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: #11151d; transform: rotate(-3deg); }
.logo:not(.brand-lockup) .logo-mark img { display: none; }
.logo:not(.brand-lockup) .logo-mark::before, .logo:not(.brand-lockup) .logo-mark::after { position: absolute; width: 19px; height: 6px; border-radius: 99px; background: #fff; content: ""; transform: rotate(-42deg); }
.logo:not(.brand-lockup) .logo-mark::before { transform: translate(-5px, -5px) rotate(-42deg); }
.logo:not(.brand-lockup) .logo-mark::after { background: #c8ff72; transform: translate(5px, 5px) rotate(-42deg); }
.logo:not(.brand-lockup)::first-letter { color: #11151d; }
.control-panel {
z-index: 200;
min-width: 270px;
padding: 17px;
border-color: #b9e5ef;
color: #28394d;
background: rgba(255, 255, 255, .985);
box-shadow: 0 22px 52px rgba(39, 122, 158, .2), 0 3px 10px rgba(39, 122, 158, .08);
font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.control-panel.locale-panel { right: 0; width: min(340px, calc(100vw - 32px)); }
.control-panel.character-panel { left: 177px; width: min(310px, calc(100vw - 32px)); }
.panel-kicker { margin-bottom: 12px; color: #58a8bf; font-size: 11px; letter-spacing: .16em; }
.control-panel > button:not(.panel-apply), .panel-upload { margin-top: 6px; padding: 11px 12px; border-radius: 10px; color: #35536a; font-size: 13px; }
.control-panel > button:not(.panel-apply):hover, .panel-upload:hover { color: #147eaa; background: #edfaff; transform: translateX(2px); }
.control-panel > button[aria-pressed="true"] { color: #147eaa; background: #eaf9fd; }
.panel-upload.is-dragover { color: #147eaa; border-color: #83d4e6; background: #eaf9fd; }
.control-panel button small { color: #83a0ae; font-size: 11px; }
.control-panel label { gap: 11px; margin-top: 10px; color: #5d7588; font-size: 13px; line-height: 1.35; }
.control-panel select { min-height: 36px; padding: 8px 10px; border-color: #cfe8ef; border-radius: 9px; color: #294155; background: #f8fdff; font-size: 13px; font-family: inherit; }
.control-panel select:hover { border-color: #8fd2e2; background: #f1fbfe; }
.control-panel select:focus { outline: 2px solid rgba(76, 190, 221, .2); border-color: #80cfe1; }
.panel-apply { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: linear-gradient(135deg, #52d2e8, #66aee5); font-size: 13px; box-shadow: 0 8px 18px rgba(66, 166, 207, .2); }
.character-panel p { margin: 6px 0 14px; color: #6d8798; font-size: 12px; line-height: 1.6; }
@media (max-width: 700px) {
.control-panel, .control-panel.locale-panel, .control-panel.character-panel { z-index: 300; left: 12px; right: 12px; width: auto; min-width: 0; }
}
/* extracted block 6 */
/* 淡紫回调：保留厚重结构，降低霓虹感，让页面更有韵味。 */
:root { --blue: #6c63df; --cyan: #79d9ef; }
.banner { display: none !important; }
.layout { min-height: calc(100vh - 74px); }
.sidebar { top: 74px; height: calc(100vh - 74px); }
body { background: radial-gradient(circle at 8% 10%, rgba(206, 201, 255, .18), transparent 28%), radial-gradient(circle at 94% 18%, rgba(244, 218, 247, .2), transparent 30%), #fcfbff; }
.header { background: rgba(255, 255, 255, .9); border-bottom-color: #eceaf7; box-shadow: 0 8px 22px rgba(89, 80, 151, .06); }
.avatar { background: linear-gradient(135deg, #8f82e8, #c18fca); }
.avatar:hover { box-shadow: 0 7px 17px rgba(126, 106, 203, .28); }
.composer {
background: linear-gradient(110deg, #b8edf7 0%, #b5b1fa 53%, #edc8e9 100%);
box-shadow: 0 18px 48px rgba(120, 105, 207, .14);
animation: breathe 6s ease-in-out infinite, fadeRise .9s .08s cubic-bezier(.2,.8,.2,1) both;
}
.composer::before { background: linear-gradient(100deg, #d9f7fb, #d8d3ff, #f5e1f2); opacity: .3; }
.composer::after { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgba(154, 218, 239, .55), rgba(153, 141, 231, .48) 34%, transparent 66%); }
.composer:focus-within { box-shadow: 0 0 0 2px rgba(151, 142, 232, .23), 0 24px 66px rgba(113, 101, 194, .16), 0 0 44px rgba(185, 164, 238, .1); }
.add:hover { border-color: #b0a8ed; background-color: #fbfaff; box-shadow: 0 10px 22px rgba(116, 104, 207, .13); }
.chip { border-color: #e2e0ee; }
.chip:hover, .chip.is-open { color: #6559cf; border-color: #c4bdf4; background: #f6f3ff; box-shadow: 0 9px 20px rgba(118, 103, 207, .13); }
.chip.primary { color: #6559cf; border-color: #c8c1f5; background: #f7f4ff; box-shadow: inset 0 0 0 1px rgba(107, 94, 218, .07), 0 6px 16px rgba(118, 103, 207, .08); }
.chip.primary:hover { box-shadow: inset 0 0 0 1px rgba(107, 94, 218, .1), 0 11px 24px rgba(118, 103, 207, .17); }
.dialog:hover, .dialog.is-open { color: #6559cf; background: #f4f1ff; box-shadow: 0 8px 18px rgba(118, 103, 207, .1); }
.chip.has-file { color: #6559cf; border-color: #c4bdf4; background: #f6f3ff; }
.send { background: linear-gradient(135deg, #8cdbed, #867be0); box-shadow: 0 8px 18px rgba(111, 99, 202, .2); }
.send:hover { box-shadow: 0 12px 26px rgba(111, 99, 202, .3); }
.side-nav button:hover, .side-nav button.active { background: #f3f0ff; color: #665bcf; }
.side-nav button::before { background: linear-gradient(180deg, #8ddfec, #897ce2); }
.showcase { border-color: #e7e3ef; }
.showcase:hover { border-color: #c9c0f0; background: #fdfbff; box-shadow: 0 20px 46px rgba(102, 91, 173, .13); }
.tabs button:hover, .tabs button.active { color: #665bcf; }
.tabs button.active { border-color: #8b80e1; }
.control-panel { border-color: #d3ccf4; box-shadow: 0 22px 52px rgba(83, 74, 145, .18), 0 3px 10px rgba(83, 74, 145, .07); }
.control-panel > button:not(.panel-apply):hover, .panel-upload:hover { color: #6559cf; background: #f4f1ff; }
.control-panel > button[aria-pressed="true"] { color: #6559cf; background: #f1edff; }
.panel-upload.is-dragover { color: #6559cf; border-color: #b9b0ee; background: #f1edff; }
.panel-apply { background: linear-gradient(135deg, #91dced, #897de1); box-shadow: 0 8px 18px rgba(111, 99, 202, .17); }
.control-panel select:hover { border-color: #b9b0ee; background: #faf8ff; }
.control-panel select:focus { outline-color: rgba(132, 119, 222, .2); border-color: #afa5e9; }
/* extracted block 7 */
/* 标题使用实色，避免渐变文字裁剪失效时把整行绘成深色横块。 */
.welcome h1 {
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
color: #25283b !important;
text-shadow: none !important;
}
/* extracted block 8 */
body.template-library-open { overflow: hidden; }
.template-library[hidden] { display: none; }
.side-nav a { position: relative; overflow: hidden; background: transparent; color: #707581; text-align: left; padding: 13px 14px; border-radius: 12px; font-size: 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; }
.side-nav a:hover, .side-nav a.active { background: #f3f0ff; color: #665bcf; font-weight: 700; }
.side-nav a:hover { transform: translateX(2px); }
.side-nav a::before { position: absolute; top: 0; bottom: 0; left: 0; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, #8ddfec, #897ce2); content: ""; opacity: 0; transform: scaleY(.35); transition: opacity .2s ease, transform .2s ease; }
.side-nav a.active::before { opacity: 1; transform: scaleY(1); }
.template-library {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
padding: 24px;
background: rgba(34, 29, 67, .28);
backdrop-filter: blur(9px) saturate(1.05);
opacity: 0;
pointer-events: none;
transition: opacity .22s ease;
}
.template-library.is-open { opacity: 1; pointer-events: auto; }
.template-library-dialog {
width: min(1120px, calc(100vw - 32px));
max-height: min(780px, calc(100vh - 48px));
overflow: auto;
border: 1px solid #e9e5f8;
border-radius: 28px;
background: rgba(255, 255, 255, .98);
box-shadow: 0 28px 90px rgba(49, 43, 104, .24), 0 5px 16px rgba(84, 75, 155, .08);
transform: translateY(12px) scale(.985);
transition: transform .24s cubic-bezier(.2, .8, .2, 1);
}
.template-library.is-open .template-library-dialog { transform: none; }
.template-library-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 26px 28px 16px; }
.template-library-kicker { color: #8c80d9; font-size: 10px; font-weight: 850; letter-spacing: .16em; }
.template-library-head h2 { margin: 6px 0 5px; color: #25283b; font-size: 26px; letter-spacing: -.04em; }
.template-library-head p { margin: 0; color: #8e91a2; font-size: 12px; line-height: 1.6; }
.template-library-close { width: 34px; height: 34px; border: 1px solid #ebe8f5; border-radius: 50%; color: #77758d; background: #faf9ff; font-size: 20px; transition: transform .2s ease, background .2s ease, color .2s ease; }
.template-library-close:hover { color: #6358c9; background: #f2efff; transform: rotate(8deg) scale(1.04); }
.template-library-tools { display: flex; align-items: center; gap: 10px; padding: 0 28px 18px; }
.template-library-search { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid #e8e5f3; border-radius: 12px; outline: none; color: #30344d; background: #fcfbff; font-size: 12px; }
.template-library-search:focus { border-color: #b9b0ee; box-shadow: 0 0 0 3px rgba(137, 125, 225, .12); }
.template-library-filter { min-width: 145px; padding: 10px 12px; border: 1px solid #e8e5f3; border-radius: 12px; color: #55556d; background: #fcfbff; font-size: 12px; }
.template-library-count { flex: 0 0 auto; color: #9895aa; font-size: 11px; white-space: nowrap; }
.template-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; padding: 0 28px 28px; }
.template-library-card { display: flex; min-width: 0; flex-direction: column; padding: 0; overflow: hidden; border: 1px solid #ebe8f4; border-radius: 17px; color: #2b2f46; background: #fff; text-align: left; text-decoration: none; box-shadow: 0 7px 20px rgba(86, 76, 150, .05); transition: transform .22s cubic-bezier(.2, .8, .2, 1), border-color .22s ease, box-shadow .22s ease; }
.template-library-card:hover { border-color: #bcb3ee; box-shadow: 0 18px 34px rgba(102, 91, 173, .16); transform: translateY(-4px); }
.template-library-media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg, #f1efff, #f9f7ff); }
.template-library-media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.template-library-placeholder { width: 100%; height: 100%; display: grid; place-items: center; color: #8c80d9; font-size: 28px; }
.template-library-card:hover .template-library-media img { transform: scale(1.06); }
.template-library-media::after { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgba(18, 19, 38, .58)); content: ""; pointer-events: none; }
.template-library-play { position: absolute; z-index: 1; top: 50%; left: 50%; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .72); border-radius: 50%; color: #fff; background: rgba(79, 70, 156, .62); box-shadow: 0 7px 18px rgba(19, 17, 52, .2); transform: translate(-50%, -50%); opacity: .95; }
.template-library-duration { position: absolute; z-index: 2; right: 9px; bottom: 8px; padding: 4px 7px; border-radius: 6px; color: #fff; background: rgba(20, 20, 40, .52); font-size: 10px; }
.template-library-card-copy { display: flex; min-height: 78px; flex-direction: column; gap: 5px; padding: 12px 13px 13px; }
.template-library-card-copy strong { overflow: hidden; font-size: 13px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.template-library-card-copy small { overflow: hidden; color: #9695a7; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.template-library-cta { margin-top: auto; color: #7469d5; font-size: 11px; font-weight: 800; }
.template-library-empty { grid-column: 1 / -1; padding: 42px 20px; border: 1px dashed #ded9f2; border-radius: 17px; color: #9895aa; background: #fcfbff; text-align: center; font-size: 12px; }
@media (max-width: 900px) { .template-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .template-library { padding: 12px; } .template-library-dialog { width: 100%; max-height: calc(100vh - 24px); border-radius: 22px; } .template-library-head { padding: 21px 18px 13px; } .template-library-head h2 { font-size: 22px; } .template-library-tools { flex-wrap: wrap; padding: 0 18px 15px; } .template-library-search { flex-basis: 100%; } .template-library-filter { flex: 1; } .template-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 0 18px 18px; } .template-library-card-copy { min-height: 70px; padding: 10px; } }
@media (prefers-reduced-motion: reduce) { .template-library, .template-library-dialog, .template-library-card, .template-library-media img, .template-library-close { transition: none; } }
/* extracted block 9 */
/* The composer and option panels use elevated stacking contexts. Keep the
account menu in the header above them so every account action remains
clickable instead of being visually covered by the workspace. */
.header { z-index: 100 !important; }
.account-popover { z-index: 110 !important; }
/* extracted block 10 */
/* 账号中心重排：参考成熟工作台的厚重卡片节奏，统一到 GUANGWU AIGC 的柔和紫色。 */
.head-actions { gap: 13px; }
.credit { min-height: 42px; padding: 0 17px; border-color: #e4e1ef; color: #5d6074; background: #fff; font-size: 14px; font-weight: 700; }
.buy { min-height: 42px; padding: 0 18px; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #68c7ea, #5a9fe7); font-size: 14px; box-shadow: 0 9px 22px rgba(85, 157, 222, .2); }
.buy:hover { box-shadow: 0 12px 26px rgba(85, 157, 222, .28); transform: translateY(-2px); }
.avatar { width: 48px; height: 48px; border: 4px solid #f3f0ff; border-radius: 50%; color: #fff; background: linear-gradient(145deg, #9a85e9, #b48ad7); box-shadow: 0 0 0 2px #c9c0f7, 0 9px 22px rgba(108, 89, 192, .18); font-size: 16px; letter-spacing: .02em; transition: transform .2s ease, box-shadow .2s ease; }
.avatar:hover, .avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px #c9c0f7, 0 11px 26px rgba(108, 89, 192, .25); transform: translateY(-1px); }
.account-popover { top: calc(100% + 18px); right: -10px; width: min(380px, calc(100vw - 28px)); padding: 27px 24px 21px; border: 1px solid #dedaf5; border-radius: 25px; background: rgba(255, 255, 255, .985); box-shadow: 0 28px 74px rgba(52, 46, 105, .2), 0 5px 18px rgba(59, 52, 108, .08); backdrop-filter: blur(22px) saturate(1.04); animation: accountPanelIn .22s cubic-bezier(.2, .8, .2, 1) both; }
.account-popover::before { right: 23px; top: -9px; width: 18px; height: 18px; border-color: #dedaf5; background: #fff; box-shadow: -3px -3px 7px rgba(52, 46, 105, .025); }
.account-name { color: #292842; font-size: 22px; line-height: 1.18; letter-spacing: -.035em; }
.account-email { margin-top: 7px; color: #87889f; font-size: 15px; line-height: 1.35; }
.account-plan { margin-top: 15px; padding: 7px 12px; border-radius: 999px; color: #6655c6; background: #f1efff; font-size: 13px; font-weight: 800; }
.account-stats { gap: 14px; margin: 23px 0 18px; padding-top: 20px; border-top-color: #ebe9f3; }
.account-stat { min-height: 103px; padding: 15px 16px; border: 1px solid #f0eef8; border-radius: 17px; background: #faf9ff; }
.account-stat small { color: #9b9cb1; font-size: 13px; line-height: 1.2; }
.account-stat strong { margin-top: 10px; color: #454477; font-size: 21px; line-height: 1.18; letter-spacing: -.025em; }
.account-redeem { margin-top: 0; padding-top: 0; border-top: 1px solid #ebe9f3; }
.account-redeem-button { min-height: 49px; margin-top: 18px; padding: 0 14px; border: 1px solid #dcd7fa; border-radius: 15px; color: #6655d5; background: #fcfbff; font-size: 16px; font-weight: 800; letter-spacing: .01em; transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.account-redeem-button:hover, .account-redeem-button[aria-expanded="true"] { border-color: #b9aff2; background: #f5f2ff; box-shadow: 0 8px 20px rgba(112, 93, 205, .11); transform: translateY(-1px); }
.account-redeem-form { gap: 10px; margin-top: 12px; }
.account-redeem-form input { height: 49px; padding: 0 13px; border-color: #d9d7e8; border-radius: 14px; color: #353552; background: #fff; font-size: 14px; letter-spacing: .05em; }
.account-redeem-form input:focus { border-color: #aa9bea; box-shadow: 0 0 0 4px rgba(137, 125, 225, .13); }
.account-redeem-form button { min-width: 72px; height: 49px; padding: 0 14px; border-radius: 14px; background: #7464dc; font-size: 14px; box-shadow: 0 8px 18px rgba(105, 88, 203, .16); }
.account-redeem-form button:hover:not(:disabled) { background: #6656d0; box-shadow: 0 10px 22px rgba(105, 88, 203, .23); transform: translateY(-1px); }
.account-redeem-status { min-height: 18px; margin-top: 8px; font-size: 12px; }
.account-logout { display: flex; min-height: 50px; align-items: center; justify-content: center; gap: 8px; margin-top: 19px; padding: 0 12px; border-top: 1px solid #ebe9f3; border-radius: 0 0 15px 15px; color: #e36771; background: #fff7f7; font-size: 16px; font-weight: 800; transition: background .2s ease, color .2s ease, transform .2s ease; }
.account-logout::before { content: "↪"; font-size: 22px; line-height: 1; }
.account-logout:hover { color: #d94e5b; background: #fff0f1; transform: translateY(-1px); }
@keyframes accountPanelIn { from { opacity: 0; transform: translateY(-7px) scale(.975); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
.head-actions { gap: 7px; }
.credit { display: none; }
.buy { min-height: 38px; padding: 0 12px; font-size: 12px; }
.avatar { width: 43px; height: 43px; }
.account-popover { top: calc(100% + 13px); right: -7px; width: min(380px, calc(100vw - 22px)); padding: 23px 18px 17px; border-radius: 21px; }
.account-name { font-size: 20px; }
.account-email { font-size: 14px; }
.account-stat { min-height: 92px; padding: 13px; }
.account-stat strong { font-size: 19px; }
}
/* extracted block 11 */
/* 账号中心第二版：按同行工作台的结构收敛视觉，不改变任何数据与交互。 */
.head-actions { gap: 15px; }
.credit { min-height: 48px; padding: 0 18px; border-color: #e2e3ec; color: #5e6478; background: #fff; font-size: 15px; font-weight: 700; }
.buy { min-height: 48px; padding: 0 19px; border-radius: 16px; color: #fff; background: #55c2e6; font-size: 15px; box-shadow: 0 7px 18px rgba(85, 194, 230, .2); }
.buy:hover { background: #49b7dc; box-shadow: 0 10px 22px rgba(85, 194, 230, .27); transform: translateY(-1px); }
.avatar { width: 52px; height: 52px; border: 0; color: #fff; background: linear-gradient(145deg, #aa93ed, #a179d0); box-shadow: 0 0 0 2px #e6e0ff, 0 8px 18px rgba(108, 89, 192, .16); font-size: 18px; letter-spacing: .02em; }
.avatar:hover, .avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px #d8d0ff, 0 10px 23px rgba(108, 89, 192, .22); transform: translateY(-1px) scale(1.015); }
.account-popover {
width: min(560px, calc(100vw - 34px));
padding: 31px 34px 28px;
border: 1px solid #dfe1f7;
border-radius: 28px;
background: rgba(255, 255, 255, .99);
box-shadow: 0 21px 52px rgba(50, 53, 101, .14), 0 5px 16px rgba(50, 53, 101, .05);
backdrop-filter: blur(16px) saturate(1.02);
}
.account-popover::before {
right: 24px;
top: -10px;
width: 19px;
height: 19px;
border-color: #dfe1f7;
background: #fff;
box-shadow: -3px -3px 7px rgba(50, 53, 101, .018);
}
.account-name { color: #252941; font-size: 25px; line-height: 1.18; letter-spacing: -.045em; }
.account-email { margin-top: 8px; color: #858ba1; font-size: 18px; line-height: 1.35; }
.account-plan { margin-top: 16px; padding: 8px 13px; border-radius: 999px; color: #159fc1; background: #ebfaff; font-size: 15px; font-weight: 800; }
.account-stats { gap: 16px; margin: 27px 0 23px; padding-top: 25px; border-top-color: #ebeaf3; }
.account-stat { min-height: 132px; padding: 18px 20px; border: 0; border-radius: 20px; background: #faf9ff; }
.account-stat small { color: #9a9fb4; font-size: 15px; line-height: 1.2; }
.account-stat strong { margin-top: 11px; color: #454a7b; font-size: 24px; line-height: 1.25; letter-spacing: -.035em; }
.account-redeem { margin-top: 0; padding-top: 0; border-top: 1px solid #ebeaf3; }
.account-redeem-button { min-height: 61px; margin-top: 20px; border: 2px solid #dddafa; border-radius: 17px; color: #665bd0; background: #fcfbff; font-size: 19px; font-weight: 800; }
.account-redeem-button:hover, .account-redeem-button[aria-expanded="true"] { border-color: #bdb4ef; background: #f8f6ff; box-shadow: 0 8px 22px rgba(112, 93, 205, .1); transform: translateY(-1px); }
.account-redeem-form { gap: 12px; margin-top: 13px; }
.account-redeem-form input { height: 61px; padding: 0 16px; border: 2px solid #deddeb; border-radius: 16px; color: #353858; background: #fff; font-size: 16px; letter-spacing: .06em; }
.account-redeem-form input:focus { border-color: #aa9bea; box-shadow: 0 0 0 4px rgba(137, 125, 225, .12); }
.account-redeem-form button { min-width: 87px; height: 61px; padding: 0 18px; border-radius: 16px; background: #7464dc; font-size: 17px; box-shadow: 0 8px 18px rgba(105, 88, 203, .14); }
.account-redeem-form button:hover:not(:disabled) { background: #6656d0; box-shadow: 0 10px 22px rgba(105, 88, 203, .2); transform: translateY(-1px); }
.account-redeem-status { min-height: 19px; margin-top: 9px; font-size: 13px; }
.account-logout { position: relative; min-height: 61px; margin-top: 22px; padding: 0 14px; border-top: 0; border-radius: 16px; color: #e85f6a; background: #fff6f6; font-size: 18px; font-weight: 800; }
.account-logout::before { content: ""; position: absolute; right: 0; bottom: calc(100% + 11px); left: 0; height: 1px; background: #ebeaf3; }
.account-logout:hover { color: #d94e5b; background: #fff0f1; transform: translateY(-1px); }
@media (max-width: 640px) {
.account-popover { width: min(560px, calc(100vw - 22px)); padding: 25px 19px 21px; border-radius: 23px; }
.account-popover::before { right: 18px; }
.account-name { font-size: 21px; }
.account-email { font-size: 15px; }
.account-plan { font-size: 13px; }
.account-stats { gap: 10px; margin-top: 22px; padding-top: 19px; }
.account-stat { min-height: 105px; padding: 15px; border-radius: 16px; }
.account-stat small { font-size: 13px; }
.account-stat strong { font-size: 20px; }
.account-redeem-button, .account-redeem-form input, .account-redeem-form button, .account-logout { min-height: 53px; height: 53px; }
.account-redeem-button { margin-top: 16px; font-size: 16px; }
.account-redeem-form input { font-size: 14px; }
.account-redeem-form button { min-width: 72px; padding: 0 13px; font-size: 15px; }
.account-logout { margin-top: 19px; font-size: 16px; }
}
/* extracted block 12 */
/* 账号中心紧凑版：视觉基准来自 clipcat-account-menu/index.html；保留
当前工作台的真实 /api/me、兑换与退出逻辑，控制为正常下拉菜单尺寸。 */
.head-actions { gap: 11px; }
.credit { min-height: 42px; padding: 0 14px; font-size: 13px; }
.buy { min-height: 42px; padding: 0 15px; border-radius: 13px; font-size: 13px; }
.avatar { width: 46px; height: 46px; font-size: 16px; }
.account-popover { width: min(380px, calc(100vw - 28px)); padding: 23px 21px 19px; border-radius: 21px; }
.account-popover::before { right: 19px; top: -8px; width: 16px; height: 16px; }
.account-name { font-size: 20px; }
.account-email { margin-top: 5px; font-size: 14px; }
.account-plan { margin-top: 11px; padding: 6px 10px; font-size: 12px; }
.account-stats { gap: 10px; margin: 18px 0 15px; padding-top: 16px; }
.account-stat { min-height: 91px; padding: 13px 14px; border-radius: 15px; }
.account-stat small { font-size: 12px; }
.account-stat strong { margin-top: 7px; font-size: 18px; }
.account-redeem-button { min-height: 48px; margin-top: 14px; border-width: 1px; border-radius: 13px; font-size: 15px; }
.account-redeem-button, .account-logout { display: flex; align-items: center; justify-content: center; gap: 9px; }
.account-redeem-button svg, .account-logout svg { width: 19px; height: 19px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-redeem-form { gap: 8px; margin-top: 9px; }
.account-redeem-form input { height: 48px; padding: 0 12px; border-width: 1px; border-radius: 12px; font-size: 13px; }
.account-redeem-form button { min-width: 67px; height: 48px; padding: 0 12px; border-radius: 12px; font-size: 13px; }
.account-redeem-status { min-height: 16px; margin-top: 6px; font-size: 11px; }
.account-logout { min-height: 48px; margin-top: 16px; border-radius: 13px; font-size: 15px; }
.account-logout::before { bottom: calc(100% + 8px); }
@media (max-width: 640px) {
.account-popover { width: min(380px, calc(100vw - 20px)); padding: 20px 16px 17px; border-radius: 19px; }
.account-name { font-size: 19px; }
.account-email { font-size: 13px; }
.account-stat { min-height: 82px; padding: 11px 12px; }
.account-stat strong { font-size: 17px; }
.account-redeem-button, .account-redeem-form input, .account-redeem-form button, .account-logout { min-height: 45px; height: 45px; }
}
/* extracted block 13 */
/* 直接采用 clipcat-account-menu/index.html 的可见菜单结构。 */
.account-popover.account-menu { width: min(380px, calc(100vw - 28px)); padding: 20px 12px 14px; overflow: hidden; border: 1px solid #f0f0f2; border-radius: 22px; background: #fff; box-shadow: 0 12px 28px rgba(0, 0, 0, .14), 0 3px 8px rgba(0, 0, 0, .03); }
.account-popover.account-menu::before { right: 19px; }
.account-profile { padding: 2px 17px 17px; }
.account-profile .account-name { font-size: 20px; font-weight: 750; letter-spacing: -.02em; }
.account-profile .account-email { margin-top: 4px; color: #717171; font-size: 14px; }
.account-profile .account-plan { margin-top: 10px; padding: 5px 9px; border-radius: 9px; color: #0b90b7; background: #edfeff; font-size: 12px; }
.account-divider { height: 1px; margin: 0; border: 0; background: #f1f1f3; }
.account-stats[hidden] { display: none !important; }
.account-menu-list { display: grid; gap: 2px; margin: 0; padding: 7px 7px; }
.account-menu-item, .account-redeem-button, .account-logout { display: flex; width: 100%; min-height: 54px; height: 54px; align-items: center; justify-content: flex-start; gap: 14px; margin: 0; padding: 0 14px; border: 0; border-radius: 10px; color: #3b3b3b; background: transparent; font-size: 16px; font-weight: 650; text-align: left; box-shadow: none; transform: none; }
.account-menu-item:hover, .account-redeem-button:hover, .account-redeem-button[aria-expanded="true"] { color: #303030; background: #f7f9fb; box-shadow: none; transform: none; }
.account-menu-item svg, .account-redeem-button svg, .account-logout svg { width: 21px; height: 21px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.account-redeem { margin: 0; padding: 0; border: 0; }
.account-redeem-form { gap: 8px; margin: 4px 7px 8px; }
.account-redeem-form input { height: 44px; padding: 0 11px; border: 1px solid #dedfe7; border-radius: 10px; font-size: 12px; }
.account-redeem-form button { min-width: 62px; height: 44px; border-radius: 10px; font-size: 12px; }
.account-redeem-status { margin: 0 8px 5px; }
.account-logout { margin-top: 4px; color: #e11f21; }
.account-logout::before { content: none; }
.account-logout:hover { color: #e11f21; background: #fff5f5; transform: none; }
@media (max-width: 640px) {
.account-popover.account-menu { width: min(380px, calc(100vw - 20px)); padding: 18px 10px 12px; border-radius: 20px; }
.account-profile { padding: 2px 14px 14px; }
.account-menu-item, .account-redeem-button, .account-logout { min-height: 50px; height: 50px; padding: 0 12px; font-size: 15px; }
}
/* extracted block 14 */
/* 兑换改为二级弹窗；账号菜单只保留一个干净入口。 */
.account-popover.account-menu { width: min(348px, calc(100vw - 28px)); padding: 18px 10px 12px; }
.account-profile { padding-right: 14px; padding-left: 14px; }
.account-menu-list { padding-right: 5px; padding-left: 5px; }
.account-menu .account-redeem-form, .account-menu .account-redeem-status { display: none !important; }
.redeem-modal { position: fixed; inset: 0; z-index: 240; display: grid; place-items: center; padding: 18px; background: rgba(22, 25, 45, .28); backdrop-filter: blur(7px); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.redeem-modal[hidden] { display: none; }
.redeem-modal.is-open { opacity: 1; pointer-events: auto; }
.redeem-modal-box { width: min(420px, calc(100vw - 36px)); padding: 26px 25px 22px; border: 1px solid rgba(223, 222, 244, .95); border-radius: 22px; background: rgba(255, 255, 255, .985); box-shadow: 0 28px 80px rgba(31, 34, 76, .24); transform: translateY(10px) scale(.975); transition: transform .24s cubic-bezier(.2, .8, .2, 1); }
.redeem-modal.is-open .redeem-modal-box { transform: none; }
.redeem-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.redeem-modal-kicker { color: #8d89bb; font-size: 10px; font-weight: 800; letter-spacing: .16em; }
.redeem-modal-head h2 { margin: 7px 0 8px; color: #252941; font-size: 24px; letter-spacing: -.04em; }
.redeem-modal-head p { margin: 0; color: #878c9e; font-size: 12px; line-height: 1.6; }
.redeem-modal-close { display: grid; flex: 0 0 auto; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: #7b8090; background: #f3f3f8; font-size: 20px; line-height: 1; }
.redeem-modal-close:hover { color: #5755bd; background: #ecebff; }
.redeem-modal-form { margin-top: 23px; }
.redeem-modal-input-row { display: flex; gap: 9px; }
.redeem-modal-form input { min-width: 0; flex: 1; height: 48px; padding: 0 13px; border: 1px solid #dedfe9; border-radius: 12px; outline: none; color: #30354d; background: #fff; font-size: 13px; letter-spacing: .06em; }
.redeem-modal-form input:focus { border-color: #a9a1ed; box-shadow: 0 0 0 4px rgba(127, 114, 224, .12); }
.redeem-modal-submit { display: inline-flex; min-width: 78px; height: 48px; align-items: center; justify-content: center; gap: 7px; padding: 0 14px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #7568df, #5f87e6); font-size: 13px; font-weight: 800; transition: filter .2s ease, transform .2s ease; }
.redeem-modal-submit:hover:not(:disabled) { filter: saturate(1.08) brightness(1.04); transform: translateY(-1px); }
.redeem-modal-submit:disabled { cursor: wait; opacity: .66; }
.redeem-submit-loading { display: inline-flex; align-items: center; gap: 7px; }
.redeem-submit-loading[hidden] { display: none; }
.redeem-spinner { width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: redeemSpin .72s linear infinite; }
.redeem-modal-progress { height: 3px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #f0eff9; }
.redeem-modal-progress::after { display: block; width: 42%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #6b63db, #6cd3e6); content: ""; transform: translateX(-120%); }
.redeem-modal-progress.is-loading::after { animation: redeemProgress 1.15s ease-in-out infinite; }
.redeem-modal-status { min-height: 20px; margin: 10px 2px 0; color: #858a9b; font-size: 12px; line-height: 1.5; }
.redeem-modal-status.success { color: #23866f; }
.redeem-modal-status.error { color: #d05560; }
@keyframes redeemSpin { to { transform: rotate(360deg); } }
@keyframes redeemProgress { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(275%); } }
@media (max-width: 640px) {
.account-popover.account-menu { width: min(348px, calc(100vw - 20px)); }
.redeem-modal-box { padding: 22px 18px 18px; border-radius: 19px; }
.redeem-modal-head h2 { font-size: 22px; }
.redeem-modal-form input, .redeem-modal-submit { height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
.redeem-spinner, .redeem-modal-progress.is-loading::after { animation: none; }
}
/* extracted block 15 */
/* 账号菜单再收紧一档：接近参考工作台的轻量尺寸，避免右侧空白和过大的标题感。 */
.account-popover.account-menu {
width: min(292px, calc(100vw - 28px));
padding: 16px 9px 10px;
border-color: #e7e7ed;
border-radius: 17px;
box-shadow: 0 16px 38px rgba(45, 48, 76, .14), 0 3px 10px rgba(45, 48, 76, .04);
}
.account-popover.account-menu::before { right: 17px; top: -8px; width: 15px; height: 15px; }
.account-profile { padding: 1px 10px 12px; }
.account-profile .account-name { font-size: 17px; font-weight: 700; letter-spacing: -.025em; }
.account-profile .account-email { margin-top: 4px; font-size: 12px; }
.account-profile .account-plan { margin-top: 9px; padding: 4px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; }
.account-menu-list { gap: 1px; padding: 5px 2px; }
.account-menu-item, .account-redeem-button, .account-logout {
min-height: 43px;
height: 43px;
gap: 10px;
padding: 0 10px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
}
.account-menu-item svg, .account-redeem-button svg, .account-logout svg { width: 18px; height: 18px; }
.account-logout { margin-top: 4px; font-size: 14px; font-weight: 650; }
.account-logout::before { content: none !important; }
@media (max-width: 640px) {
.account-popover.account-menu { width: min(292px, calc(100vw - 20px)); padding: 15px 8px 9px; border-radius: 16px; }
.account-profile { padding-right: 9px; padding-left: 9px; }
.account-menu-item, .account-redeem-button, .account-logout { min-height: 41px; height: 41px; padding: 0 9px; font-size: 13px; }
.account-profile .account-name { font-size: 16px; }
.account-profile .account-email { font-size: 11px; }
}
/* extracted block 16 */
/* 积分胶囊使用独立数字节点，避免符号字体导致数字上下跳动。 */
.credit {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
gap: 6px;
padding: 0 16px;
line-height: 1;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.credit-mark { display: inline-block; width: 9px; height: 9px; flex: 0 0 auto; border: 1.5px solid currentColor; border-radius: 50%; opacity: .88; }
.credit-number { display: inline-block; min-width: 1ch; text-align: right; font-variant-numeric: tabular-nums; }
.credit-unit { display: inline-block; white-space: nowrap; }
@media (max-width: 640px) { .credit { min-height: 38px; padding: 0 13px; gap: 5px; font-size: 13px; } }
/* extracted block 17 */
/*
* UI refinement: quiet white workspace inspired by mature creator SaaS.
* This layer intentionally changes presentation only; model loading,
* auth, credits and generation handlers remain untouched below.
*/
:root {
--ink: #20252b;
--muted: #747d87;
--line: #e7ebef;
--blue: #159bc9;
--cyan: #75d3e8;
--bg: #f7f9fb;
--shadow: 0 12px 32px rgba(31, 46, 62, .07);
}
body {
color: var(--ink) !important;
background: linear-gradient(180deg, #f6f8fa 0%, #ffffff 42%, #ffffff 100%) !important;
font-family: Inter, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
.app { background: #fff; }
.banner { display: none !important; }
.header {
position: sticky;
top: 0;
z-index: 100 !important;
height: 72px;
padding: 0 34px;
border-bottom: 1px solid #e9edf0;
background: rgba(255, 255, 255, .98) !important;
box-shadow: none !important;
backdrop-filter: none;
}
.logo.brand-lockup {
gap: 11px;
color: #171b20;
font-size: 20px;
font-weight: 780;
letter-spacing: -.04em;
}
.logo.brand-lockup .brand-glyph {
width: 34px;
height: 34px;
border-radius: 9px;
background: #171b20;
box-shadow: none;
}
.logo.brand-lockup .brand-glyph i { width: 17px; height: 5px; }
.logo.brand-lockup .brand-glyph i:first-child { transform: translate(-4px, -4px) rotate(-42deg); }
.logo.brand-lockup .brand-glyph i:last-child { transform: translate(4px, 4px) rotate(-42deg); background: #c8ff72; }
.logo.brand-lockup:hover .brand-glyph { transform: none; box-shadow: none; }
.topnav { gap: 26px; color: #7b838c; font-size: 13px; }
.topnav a::after { background: var(--blue); height: 1px; bottom: -7px; }
.topnav a:first-child { color: #20252b; }
.head-actions { gap: 10px; }
.credit {
min-height: 40px;
padding: 0 14px;
border: 1px solid #e1e6ea;
border-radius: 10px;
color: #59636d;
background: #fff;
box-shadow: none !important;
font-size: 13px;
}
.credit:hover { border-color: #cbd9e0; box-shadow: none; transform: none; }
.credit-mark { width: 8px; height: 8px; color: #139dcc; }
.buy {
min-height: 40px;
padding: 0 16px;
border-radius: 10px;
color: #fff;
background: #159bc9;
box-shadow: none !important;
font-size: 13px;
}
.buy:hover { background: #108eb9; box-shadow: none; transform: none; filter: none; }
.avatar {
width: 40px;
height: 40px;
border: 0;
border-radius: 11px;
color: #fff;
background: #4f5964 !important;
box-shadow: none !important;
font-size: 14px;
}
.avatar:hover, .avatar[aria-expanded="true"] { box-shadow: none !important; transform: none; }
.layout { min-height: calc(100vh - 72px); background: #fff; }
.sidebar {
position: sticky;
top: 72px;
width: 216px;
height: calc(100vh - 72px);
padding: 27px 16px;
border-right: 1px solid #edf0f2;
background: #fbfcfd;
}
.side-title {
margin: 8px 0 12px;
padding: 0 12px;
color: #a0a7ae;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
}
.side-nav { gap: 2px; }
.side-nav button, .side-nav a {
min-height: 42px;
padding: 0 12px;
border-radius: 9px;
color: #68727c;
font-size: 13px;
font-weight: 560;
}
.side-nav button:hover, .side-nav button.active,
.side-nav a:hover, .side-nav a.active {
color: #128db7;
background: #edf8fc;
font-weight: 700;
transform: none;
}
.side-nav button::before, .side-nav a::before {
width: 2px;
background: #1aa5cf;
border-radius: 0 2px 2px 0;
}
.side-icon { width: 18px; font-size: 16px; }
.side-foot { display: none; }
.main {
max-width: none;
margin: 0;
padding: 54px clamp(28px, 5vw, 78px) 92px;
background: #fff;
}
.welcome {
max-width: 1080px;
margin: 0 auto;
text-align: left;
animation: none;
}
.welcome .kicker {
color: #9aa4ad;
font-size: 11px;
letter-spacing: .13em;
}
.welcome .kicker::after { display: none; }
.welcome h1 {
margin: 13px 0 9px;
color: #1f252b !important;
font-size: clamp(32px, 3.4vw, 43px);
font-weight: 760;
letter-spacing: -.055em;
background: none !important;
-webkit-background-clip: initial !important;
background-clip: initial !important;
text-shadow: none !important;
}
.welcome p { margin: 0; color: #7b858e; font-size: 15px; }
.composer {
width: 100%;
max-width: none;
margin: 32px 0 0;
padding: 0;
border: 1px solid #e1e7eb;
border-radius: 18px;
background: #fff !important;
box-shadow: var(--shadow) !important;
animation: none !important;
transform: none !important;
}
.composer::before, .composer::after { display: none !important; }
.composer.panel-open { z-index: 20; }
.composer:focus-within { box-shadow: 0 0 0 2px rgba(21, 155, 201, .12), var(--shadow) !important; transform: none; }
.composer-inner {
padding: 24px 25px 18px;
border-radius: 18px;
background: #fff !important;
}
.add-row { min-height: 142px; gap: 14px; }
.add {
width: 70px;
height: 70px;
border: 1px dashed #cbd3d9;
border-radius: 12px;
color: #9ba5ad;
background: #fbfcfd;
font-size: 29px;
}
.add:hover { border-color: #91c8d8; background: #f8fcfd; box-shadow: none; transform: none; }
.prompt { height: 128px; padding: 5px 0; color: #252b31; font-size: 15px; line-height: 1.7; }
.prompt::placeholder { color: #9ca5ad; }
.prompt-count { right: 2px; bottom: 7px; color: #9aa3aa; font-size: 11px; }
.composer-foot { display: none !important; }
.chip {
padding: 9px 13px;
border: 1px solid #dfe5e9;
border-radius: 10px;
color: #5e6872;
background: #fff;
font-size: 13px;
box-shadow: none !important;
}
.chip:hover, .chip.is-open { color: #128fb9; border-color: #9ed3e0; background: #f2fbfd; box-shadow: none !important; transform: none; }
.chip.primary { color: #118eb8; border-color: #9ed5e2; background: #f1fbfd; box-shadow: none !important; }
.dialog { margin-left: auto; padding: 9px 12px; border: 1px solid #dfe5e9; border-radius: 10px; color: #68727c; background: #fff; font-size: 13px; }
.dialog:hover, .dialog.is-open { color: #128fb9; background: #f2fbfd; box-shadow: none; transform: none; }
.send { width: 42px; height: 42px; border-radius: 11px; background: #159bc9; box-shadow: none !important; font-size: 18px; }
.send:hover { background: #108eb9; box-shadow: none; transform: none; }
.quick { justify-content: flex-start; gap: 8px; margin: 16px 0 0; animation: none; }
.quick button {
padding: 10px 14px;
border: 1px solid #e1e6ea;
border-radius: 9px;
color: #69737d;
background: #fff;
box-shadow: none !important;
font-size: 13px;
transform: none !important;
}
.quick button:hover, .quick button.active { color: #128fb9; border-color: #a5d7e3; background: #f2fbfd; box-shadow: none !important; transform: none !important; }
.section { max-width: 1080px; margin: 52px auto 0; animation: none; }
.section-head { margin-bottom: 14px; }
.section-head h2 { color: #252b31; font-size: 18px; font-weight: 730; }
.section-head a { color: #8a949d; font-size: 12px; }
.empty { height: 104px; border: 1px dashed #dfe5e9; border-radius: 13px; color: #9aa4ac; background: #fbfcfd; font-size: 13px; }
.tabs { gap: 25px; margin-bottom: 18px; border-bottom-color: #edf0f2; }
.tabs button { padding-bottom: 11px; color: #89939c; font-size: 13px; }
.tabs button:hover, .tabs button.active { color: #128fb9; }
.tabs button.active { border-color: #159bc9; }
.cards { gap: 16px; }
.showcase { border: 1px solid #e5e9ec; border-radius: 13px; box-shadow: none; }
.showcase:hover { border-color: #c8dfe6; background: #fff; box-shadow: 0 12px 26px rgba(31, 46, 62, .08); transform: translateY(-2px); }
.cover { height: 158px; background: #eef2f4; }
.cover-label { border-radius: 5px; background: rgba(20, 28, 35, .46); font-size: 11px; }
.showcase-body { padding: 13px; }
.showcase-body strong { color: #293138; font-size: 13px; }
.showcase-body span { margin-top: 5px; color: #929ba3; font-size: 11px; }
.control-panel {
border-color: #dce7eb !important;
border-radius: 13px !important;
background: rgba(255, 255, 255, .99) !important;
box-shadow: 0 16px 34px rgba(31, 46, 62, .12) !important;
}
.control-panel > button:not(.panel-apply):hover, .panel-upload:hover { color: #128fb9; background: #f2fbfd; transform: none; }
.control-panel > button[aria-pressed="true"] { color: #128fb9; background: #edf9fc; }
.panel-apply { background: #159bc9; box-shadow: none; }
.toast { background: #273139; box-shadow: 0 12px 28px rgba(31, 46, 62, .16); }
@media (min-width: 901px) {
.composer-foot { gap: 6px; flex-wrap: nowrap; }
.chip { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.dialog { padding: 8px 10px; font-size: 12px; white-space: nowrap; }
.send { flex: 0 0 42px; }
}
@media (max-width: 900px) {
.header { padding: 0 22px; }
.sidebar { width: 192px; }
.main { padding-right: 30px; padding-left: 30px; }
}
@media (max-width: 640px) {
.header { height: 62px; padding: 0 15px; }
.layout { min-height: calc(100vh - 62px); }
.sidebar { display: none; }
.logo.brand-lockup { font-size: 18px; }
.logo.brand-lockup .brand-glyph { width: 30px; height: 30px; border-radius: 8px; }
.topnav { display: none; }
.avatar { width: 36px; height: 36px; border-radius: 9px; }
.buy { min-height: 36px; padding: 0 11px; font-size: 12px; }
.main { padding: 34px 15px 60px; }
.welcome h1 { font-size: 31px; }
.welcome p { font-size: 14px; line-height: 1.55; }
.composer { margin-top: 24px; border-radius: 15px; }
.composer-inner { padding: 16px 15px 14px; border-radius: 15px; }
.add-row { min-height: 124px; gap: 10px; }
.add { width: 58px; height: 58px; }
.prompt { height: 112px; font-size: 14px; }
.composer-foot { gap: 7px; padding-top: 13px; }
.chip, .dialog { padding: 8px 10px; font-size: 12px; }
.dialog { margin-left: 0; }
.send { width: 38px; height: 38px; }
.quick { margin-top: 13px; }
.quick button { padding: 9px 11px; font-size: 12px; }
.section { margin-top: 40px; }
.cards { gap: 10px; }
.cover { height: 128px; }
}
/* Workspace navigation: the main page stays focused on one generator. */
.topnav { align-items: center; }
.topnav-action { padding: 8px 0; color: #6f7881; background: transparent; font-size: 13px; white-space: nowrap; }
.topnav-action:hover, .topnav-action:focus-visible { color: #128fb9; }
.topnav-action.is-active { color: #128fb9; font-weight: 700; }
.topnav-current { color: #20252b !important; font-weight: 700; }
.sidebar { display: none !important; }
.layout { display: block; min-height: calc(100vh - 72px); }
.main { max-width: 1360px; margin: 0 auto; }
/* The creator home is intentionally focused on one generator; secondary
showcase content is not rendered on the public workbench. */
.main > .section { display: none !important; }
.character-assets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.character-assets-empty { grid-column: 1 / -1; padding: 12px; border: 1px dashed #dfe6e9; border-radius: 10px; color: #8e9aa2; background: #fbfcfd; font-size: 11px; text-align: center; }
.character-asset-option { position: relative; overflow: hidden; min-height: 72px; padding: 0; border: 1px solid #e0e7ea; border-radius: 10px; background: #f8fafb; cursor: pointer; }
.character-asset-option:hover, .character-asset-option.is-selected { border-color: #84cada; box-shadow: 0 0 0 2px rgba(21, 155, 201, .12); }
.character-asset-option img { display: block; width: 100%; height: 72px; object-fit: cover; }
.character-asset-option span { position: absolute; right: 4px; bottom: 4px; left: 4px; overflow: hidden; padding: 3px 5px; border-radius: 5px; color: #fff; background: rgba(27, 38, 45, .58); font-size: 9px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.workspace-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 26px; background: rgba(22, 31, 38, .28); backdrop-filter: blur(6px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, visibility 0s linear .18s; }
.workspace-modal.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.workspace-modal-box { width: min(900px, 100%); max-height: min(760px, calc(100vh - 52px)); overflow: auto; padding: 28px; border: 1px solid #e1e8eb; border-radius: 18px; background: #fff; box-shadow: 0 24px 70px rgba(28, 43, 53, .16); transform: translateY(8px) scale(.988); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.workspace-modal.is-open .workspace-modal-box { transform: none; }
.workspace-modal-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding-bottom: 19px; border-bottom: 1px solid #edf1f3; }
.workspace-modal-kicker { color: #9aa5ac; font-size: 10px; font-weight: 750; letter-spacing: .14em; }
.workspace-modal-head h2 { margin: 9px 0 6px; color: #20272d; font-size: 25px; letter-spacing: -.04em; }
.workspace-modal-head p { margin: 0; color: #7b8790; font-size: 12px; line-height: 1.6; }
.workspace-modal-close { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border: 1px solid #e2e8eb; border-radius: 9px; color: #71808a; background: #fff; font-size: 21px; }
.workspace-modal-close:hover { color: #128fb9; border-color: #9ed3e0; background: #f2fbfd; }
.workspace-modal-head-actions { display: flex; gap: 8px; align-items: center; }
.workspace-modal-refresh { padding: 8px 11px; border: 1px solid #dfe6e9; border-radius: 8px; color: #687680; background: #fff; font-size: 12px; }
.workspace-modal-refresh:hover { color: #128fb9; border-color: #9ed3e0; background: #f2fbfd; }
.asset-library-toolbar { display: flex; gap: 12px; align-items: center; padding: 18px 0 17px; }
.asset-upload-button { display: inline-flex; min-height: 37px; align-items: center; padding: 0 14px; border-radius: 9px; color: #fff; background: #159bc9; font-size: 12px; cursor: pointer; }
.asset-upload-button:hover { background: #108eb9; }
.asset-library-note { color: #8a969e; font-size: 11px; }
.asset-library-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.asset-library-empty, .task-library-empty { padding: 44px 18px; border: 1px dashed #dfe6e9; border-radius: 12px; color: #8e9aa2; background: #fbfcfd; font-size: 12px; text-align: center; }
.asset-library-empty { grid-column: 1 / -1; }
.asset-card { position: relative; overflow: hidden; border: 1px solid #e2e8eb; border-radius: 12px; background: #fff; }
.asset-card img { display: block; width: 100%; height: 155px; object-fit: cover; background: #f4f7f8; }
.asset-card-body { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 10px 11px; }
.asset-card-body strong { overflow: hidden; color: #35414a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.asset-card-body small { color: #9aa5ac; font-size: 10px; white-space: nowrap; }
.asset-card-delete { position: absolute; top: 8px; right: 8px; display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; color: #fff; background: rgba(27, 38, 45, .55); font-size: 16px; }
.asset-card-delete:hover { background: #d55757; }
.task-library-list { display: grid; gap: 9px; padding-top: 18px; }
.task-row { display: grid; grid-template-columns: minmax(230px, 1fr) minmax(110px, .55fr) minmax(150px, .72fr) auto; gap: 18px; align-items: center; padding: 15px 16px; border: 1px solid #e5eaed; border-radius: 11px; background: #fff; }
.task-row:hover { border-color: #c8dfe6; background: #fbfdfe; }
.task-main, .task-state, .task-billing, .task-action { display: grid; gap: 4px; min-width: 0; align-content: center; }
.task-label { color: #9aa5ac; font-size: 9px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.task-title { overflow: hidden; color: #35414a; font-size: 12px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.task-meta { color: #98a2a9; font-size: 10px; }
.task-id-label { margin-top: 5px; }
.task-id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-date { margin-top: 2px; color: #b0b8bd; font-size: 10px; }
.task-status { display: inline-flex; width: max-content; padding: 5px 8px; border-radius: 6px; color: #66747d; background: #f1f4f5; font-size: 10px; }
.task-status.is-completed { color: #16855e; background: #edf9f3; }
.task-status.is-processing, .task-status.is-queued { color: #9c7215; background: #fff8e8; }
.task-status.is-failed { color: #ba5555; background: #fff1f1; }
.task-cost { color: #35414a; font-size: 12px; }
.task-billing small { color: #9aa5ac; font-size: 9px; }
.task-action-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.task-view { justify-self: start; padding: 7px 10px; border: 1px solid #c7e1e8; border-radius: 7px; color: #128fb9; background: #f1fbfd; font-size: 11px; text-decoration: none; white-space: nowrap; }
.task-view:hover { color: #fff; background: #159bc9; }
.task-view.is-disabled { color: #a0a9af; border-color: #e4e9eb; background: #f7f9fa; pointer-events: none; }
.task-download { justify-self: start; padding: 7px 10px; border: 1px solid #d9dff8; border-radius: 7px; color: #5966c9; background: #f7f8ff; font-size: 11px; text-decoration: none; white-space: nowrap; }
.task-download:hover { color: #fff; background: #5966c9; }
@media (max-width: 900px) { .topnav { gap: 15px; } .asset-library-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ledger-summary { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 15px 0 1px; color: #87939a; font-size: 11px; }
.ledger-summary strong { margin-left: 5px; color: #35414a; font-size: 12px; }
.ledger-list { display: grid; gap: 9px; padding-top: 12px; }
.ledger-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 13px 15px; border: 1px solid #e5eaed; border-radius: 11px; background: #fff; }
.ledger-copy, .ledger-amount { display: grid; gap: 4px; min-width: 0; }
.ledger-copy strong { overflow: hidden; color: #35414a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ledger-copy small, .ledger-amount small { color: #98a2a9; font-size: 10px; }
.ledger-amount { justify-items: end; }
.ledger-amount strong { font-size: 12px; }
.ledger-amount.is-positive strong { color: #16855e; }
.ledger-amount.is-negative strong { color: #ba5555; }
@media (max-width: 640px) { .topnav-action { display: none; } .workspace-modal { padding: 12px; } .workspace-modal-box { padding: 19px 16px; border-radius: 14px; max-height: calc(100vh - 24px); } .workspace-modal-head h2 { font-size: 21px; } .asset-library-toolbar { align-items: flex-start; flex-direction: column; } .asset-library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .asset-card img { height: 120px; } .task-row { grid-template-columns: 1fr auto; gap: 10px 12px; } .task-main { grid-column: 1; } .task-state { grid-column: 2; grid-row: 1; } .task-billing { grid-column: 1; } .task-action { grid-column: 2; grid-row: 2; align-self: end; } .task-action-links { justify-content: flex-end; } .task-view, .task-download { justify-self: end; } .ledger-row { padding: 12px; } }
/* Shared workspace shell: the creator and e-commerce gallery occupy one
horizontal track. Only the e-commerce entry uses this page transition. */
.workspace-viewport { width: 100%; height: calc(100vh - 64px); overflow: hidden; }
.workspace-track { display: flex; width: 300vw; height: 100%; transform: translate3d(0, 0, 0); transition: transform .65s cubic-bezier(.22, .8, .24, 1); will-change: transform; }
.workspace-page { flex: 0 0 100vw; width: 100vw; min-width: 0; height: 100%; min-height: calc(100vh - 64px); overflow: auto; overscroll-behavior-x: contain; }
.creator-page > .layout { min-height: calc(100vh - 64px); }
.ecommerce-page { scrollbar-width: thin; }
.topnav a:first-child::after { opacity: 0; transform: scaleX(.3); }
.topnav a.topnav-current.is-active::after, .topnav a.ecommerce-nav.is-active::after { opacity: 1; transform: scaleX(1); }
.topnav a.topnav-current:not(.is-active), .topnav a.ecommerce-nav:not(.is-active) { color: #727785; font-weight: 500; }
.topnav a.ecommerce-nav { position: relative; padding: 8px 0; white-space: nowrap; }
.topnav a.ecommerce-nav.is-active { color: #128fb9; font-weight: 700; }
@media (max-width: 640px) { .workspace-viewport, .workspace-page { height: calc(100vh - 58px); min-height: calc(100vh - 58px); } .workspace-track { transition-duration: .55s; } }
@media (prefers-reduced-motion: reduce) { .workspace-track { transition: none; } }
/* extracted block 18 */
/* 横向生成规格：模型、语言、国家和报价同一行，避免再用弹层找设置。 */
.generation-specs { margin-top: 22px; padding-top: 20px; }
.generation-specs-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.generation-spec-title { display: flex; align-items: center; gap: 10px; color: #252b31; font-size: 17px; font-weight: 760; letter-spacing: -.025em; }
.generation-spec-index { display: inline-grid; width: 30px; height: 30px; place-items: center; border-radius: 10px; color: #5e65d7; background: #f0f1ff; font-size: 12px; font-weight: 850; }
.generation-spec-hint { color: #8b96a0; font-size: 12px; white-space: nowrap; }
.generation-spec-grid { display: grid; grid-template-columns: minmax(190px, 1.55fr) minmax(130px, 1fr) minmax(130px, 1fr) repeat(2, minmax(86px, .72fr)) minmax(110px, .82fr) minmax(165px, 1.28fr); gap: 10px; align-items: end; }
.generation-spec-field { display: grid; gap: 7px; min-width: 0; }
.generation-spec-field > span { color: #53616d; font-size: 11px; font-weight: 760; }
.generation-spec-field select { width: 100%; min-height: 42px; padding: 0 11px; border: 1px solid #d9e1e6; border-radius: 10px; outline: none; color: #293943; background: #fff; font-size: 12px; font-weight: 650; }
.generation-spec-field select:hover { border-color: #a9d7e4; background: #fbfeff; }
.generation-spec-field select:focus { border-color: #6ec3da; box-shadow: 0 0 0 3px rgba(21, 155, 201, .11); }
.generation-spec-field select:disabled { cursor: wait; color: #98a3ab; background: #f7f9fa; }
.generation-spec-field small { min-height: 14px; overflow: hidden; color: #98a3ab; font-size: 10px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.generation-spec-estimate { display: flex; flex-direction: column; gap: 6px; align-self: end; justify-self: end; min-width: 0; padding: 0 2px 1px; text-align: right; }
.generation-spec-estimate > span { color: #8a96a0; font-size: 11px; }
.generation-spec-estimate strong { display: flex; min-height: 42px; align-items: center; overflow: hidden; color: #5366db; font-size: 20px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.generation-spec-estimate small { min-height: 14px; color: #98a3ab; font-size: 10px; white-space: nowrap; }
.create-generation { align-self: end; justify-self: end; margin-top: 0; min-height: 44px; padding: 0 17px; border-radius: 10px; color: #fff; background: linear-gradient(100deg, #5d6cf0, #8175e8); font-size: 13px; font-weight: 800; white-space: nowrap; box-shadow: 0 8px 18px rgba(100, 103, 218, .16); transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease; }
.create-generation:hover:not(:disabled) { box-shadow: 0 12px 24px rgba(100, 103, 218, .24); transform: translateY(-1px); }
.create-generation:disabled { cursor: wait; opacity: .58; }
.legacy-control-hidden { display: none !important; }
/* 尚未开放的参考视频、固定人物上传与分辨率入口保持隐藏。 */
.temporary-pass { display: none !important; }
@media (max-width: 1080px) { .generation-spec-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .generation-spec-estimate { grid-column: span 1; } .create-generation { width: 100%; } }
@media (max-width: 640px) { .generation-specs { margin-top: 17px; padding-top: 16px; } .generation-specs-head { align-items: flex-start; flex-direction: column; gap: 5px; } .generation-spec-title { font-size: 15px; } .generation-spec-hint { white-space: normal; } .generation-spec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 8px; } .generation-spec-field select { min-height: 40px; padding: 0 8px; font-size: 11px; } .generation-spec-field small { font-size: 9px; } .generation-spec-estimate { grid-column: 1; } .create-generation { grid-column: 2; min-height: 42px; padding: 0 9px; font-size: 12px; } }
/* 账户中心参考版 UI：借鉴成熟的双栏总控节奏，保留光武科技现有功能与数据接口。 */
.account-center-modal { padding: 28px; background: rgba(31, 36, 48, .34); backdrop-filter: blur(12px); }
.account-center-box { width: min(1120px, calc(100vw - 48px)); max-height: min(760px, calc(100vh - 56px)); border-color: #e4e7ee; border-radius: 26px; box-shadow: 0 34px 100px rgba(31, 38, 72, .24); }
.account-center-head { padding: 28px 34px 22px; }
.account-center-kicker { color: #8580c2; font-size: 10px; letter-spacing: .18em; }
.account-center-head h2 { margin-top: 8px; font-size: 30px; }
.account-center-head p { color: #9299aa; font-size: 13px; }
.account-center-close { width: 36px; height: 36px; border-radius: 50%; color: #778092; font-size: 23px; }
.account-center-body { grid-template-columns: 220px minmax(0, 1fr); min-height: 510px; }
.account-center-tabs { gap: 5px; padding: 28px 16px; border-right-color: #eef0f5; background: #fafafd; }
.account-center-tab { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 16px; border: 1px solid transparent; border-radius: 13px; color: #788194; font-size: 14px; font-weight: 720; }
.account-center-tab:hover { color: #5f56c8; background: #f2f0ff; }
.account-center-tab.is-active { color: #534dc2; border-color: #ece9ff; background: #fff; box-shadow: 0 8px 20px rgba(65, 57, 130, .10); }
.account-tab-icon { display: inline-grid; width: 23px; height: 23px; flex: 0 0 23px; place-items: center; color: #8e96a5; font-size: 18px; font-weight: 500; line-height: 1; }
.account-center-tab.is-active .account-tab-icon, .account-center-tab:hover .account-tab-icon { color: #645bd0; }
.account-center-content { padding: 34px 40px 40px; background: #fff; }
.account-center-panel { min-height: 405px; }
.account-center-panel h3 { font-size: 27px; letter-spacing: -.045em; }
.account-center-panel > p { max-width: 680px; margin: 10px 0 25px; color: #9299aa; font-size: 14px; line-height: 1.7; }
.account-panel-heading { align-items: flex-start; margin-bottom: 22px; }
.account-panel-heading h3 { margin-bottom: 7px; }
.account-panel-heading p { margin: 0; color: #9299aa; font-size: 13px; line-height: 1.6; }
.account-panel-refresh { min-height: 36px; padding: 0 14px; border-radius: 10px; color: #737c8d; background: #fff; font-size: 12px; }
.account-panel-refresh:hover { color: #5f56c8; border-color: #cfc9f5; background: #f7f5ff; }
.account-center-profile-card { gap: 24px; padding: 24px; border-color: #ececf5; border-radius: 18px; background: linear-gradient(135deg, #fcfcff, #f9f9fe); }
.account-center-avatar { width: 78px; height: 78px; border-radius: 22px; font-size: 23px; }
.account-center-profile-meta { gap: 9px; }
.account-center-profile-meta .account-email { color: #4a5160; font-size: 17px; font-weight: 700; }
.account-center-profile-meta strong { color: #4f5fd0; font-size: 21px; }
.account-profile-form { margin-top: 20px; padding-top: 20px; border-top-color: #eef0f5; }
.account-profile-form label { color: #697285; font-size: 13px; font-weight: 700; }
.account-profile-form input { min-height: 44px; border-radius: 11px; font-size: 13px; }
.account-profile-form button, .account-center-action { min-height: 44px; border-radius: 11px; font-size: 13px; }
.account-embedded-task-list, .account-embedded-ledger-list { max-height: 390px; padding-top: 4px; }
.account-embedded-task-list .task-row { grid-template-columns: minmax(0, 1fr) auto; padding: 17px 18px; border-radius: 14px; }
.account-embedded-task-list .task-state { grid-column: 2; grid-row: 1; }
.account-embedded-task-list .task-billing, .account-embedded-task-list .task-action { grid-column: 1 / -1; }
.account-embedded-task-list .task-action { display: flex; justify-content: flex-end; }
.account-embedded-ledger-summary { margin: 0 0 8px; padding: 15px 17px; border: 1px solid #ececf5; border-radius: 13px; background: #fbfbff; font-size: 12px; }
.account-embedded-ledger-summary strong { color: #4f5fd0; font-size: 14px; }
.account-embedded-ledger-list .ledger-row { padding: 16px 18px; border-radius: 14px; }
.account-center-redeem-form { max-width: 680px; margin-top: 22px; padding: 22px; border: 1px solid #ececf5; border-radius: 16px; background: #fbfbff; }
.account-center-redeem-form .redeem-modal-input-row { max-width: none; }
.account-center-coming { margin-top: 8px; padding: 9px 14px; border-radius: 999px; font-size: 12px; }
@media (max-width: 760px) {
.account-center-modal { padding: 14px; }
.account-center-box { width: 100%; max-height: calc(100vh - 28px); border-radius: 20px; }
.account-center-head { padding: 22px 20px 17px; }
.account-center-head h2 { font-size: 25px; }
.account-center-body { grid-template-columns: 1fr; min-height: 0; }
.account-center-tabs { display: flex; gap: 5px; overflow-x: auto; padding: 12px; border-right: 0; border-bottom: 1px solid #eef0f5; }
.account-center-tab { min-width: max-content; min-height: 42px; padding: 0 12px; font-size: 12px; }
.account-tab-icon { width: 19px; height: 19px; flex-basis: 19px; font-size: 15px; }
.account-center-content { padding: 24px 20px 26px; }
.account-center-panel { min-height: 320px; }
.account-center-panel h3 { font-size: 23px; }
.account-center-profile-card { align-items: flex-start; padding: 18px; }
}
/* 个人信息独立页：恢复各入口独立弹窗，采用简洁的 Coze 式头像与 ID 编辑布局。 */
.account-center-modal { padding: 24px; background: rgba(31, 36, 48, .30); backdrop-filter: blur(10px); }
.account-center-box { width: min(760px, calc(100vw - 40px)); max-height: min(720px, calc(100vh - 40px)); border-radius: 22px; }
.account-center-head { padding: 26px 32px 20px; }
.account-center-head h2 { font-size: 28px; }
.account-center-body { display: block; min-height: 0; }
.account-profile-page { display: grid; gap: 28px; padding: 34px 42px 38px; }
.account-profile-avatar-button { display: grid; justify-items: start; gap: 10px; width: max-content; padding: 0; color: #6a63c8; background: transparent; font-size: 12px; font-weight: 750; text-align: left; }
.account-profile-avatar-button:hover .account-center-avatar { box-shadow: 0 0 0 5px rgba(117, 104, 223, .13), 0 14px 30px rgba(90, 79, 175, .18); transform: translateY(-1px); }
.account-profile-avatar-button .account-center-avatar { width: 112px; height: 112px; border-radius: 50%; font-size: 31px; transition: transform .18s ease, box-shadow .18s ease; }
.account-profile-fields { display: grid; gap: 0; border-top: 1px solid #eef0f5; }
.account-profile-inline-field, .account-profile-readonly { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: center; min-height: 70px; border-bottom: 1px solid #eef0f5; }
.account-profile-inline-field > span, .account-profile-readonly > span { color: #7e8796; font-size: 13px; font-weight: 700; }
.account-profile-inline-field input { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 10px; outline: none; color: #2f3545; background: #fafbfe; font-size: 16px; font-weight: 650; }
.account-profile-inline-field input:hover, .account-profile-inline-field input:focus { border-color: #d6d1f7; background: #fff; box-shadow: 0 0 0 3px rgba(117, 104, 223, .09); }
.account-profile-inline-field small { grid-column: 2; margin-top: -15px; color: #a0a7b4; font-size: 10px; font-weight: 500; }
.account-profile-readonly strong { overflow: hidden; color: #3f4656; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.account-profile-autosave-form { min-height: 18px; margin: -16px 0 0; }
.account-profile-status { font-size: 12px; }
.account-profile-danger { display: grid; gap: 9px; justify-items: start; margin-top: 8px; padding-top: 25px; border-top: 1px solid #f0e6e8; }
.account-delete-button { min-height: 42px; padding: 0 17px; border: 0; border-radius: 11px; color: #d44855; background: #fff0f1; font-size: 13px; font-weight: 800; }
.account-delete-button:hover { background: #ffe1e4; }
.account-profile-danger p { margin: 0; color: #a1a6b1; font-size: 11px; line-height: 1.6; }
@media (max-width: 620px) {
.account-center-box { width: 100%; max-height: calc(100vh - 24px); }
.account-center-head { padding: 21px 20px 16px; }
.account-profile-page { gap: 22px; padding: 27px 21px 28px; }
.account-profile-avatar-button .account-center-avatar { width: 92px; height: 92px; font-size: 26px; }
.account-profile-inline-field, .account-profile-readonly { grid-template-columns: 82px minmax(0, 1fr); gap: 12px; min-height: 62px; }
.account-profile-inline-field small { grid-column: 2; }
}
/* 个人信息页细节：头像点击即可换图，去掉冗余说明，确保注销入口可见。 */
.account-center-box { overflow: auto; max-height: min(760px, calc(100vh - 28px)); }
.account-profile-page { padding-bottom: 32px; }
.account-profile-avatar-button { gap: 0; }
.account-profile-avatar-button .account-center-avatar { width: 84px; height: 84px; font-size: 24px; }
.account-profile-inline-field small { display: none; }
@media (max-width: 620px) {
.account-center-box { max-height: calc(100vh - 24px); }
.account-profile-avatar-button .account-center-avatar { width: 76px; height: 76px; font-size: 22px; }
}