:root{color-scheme:light;--paper:#f6f5f0;--panel:#fffefa;--ink:#211f28;--sub:#625e6b;--line:#e3dfd8;--accent:#44315f;--soft:#efe9f4;--danger:#9c2837;--green:#337358;--rail:224px;font-family:"Source Sans 3","Microsoft YaHei","PingFang SC",sans-serif}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);line-height:1.55;font-size:15px}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.65}
:focus-visible{outline:3px solid #9568bd;outline-offset:3px}
[hidden]{display:none!important}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip:focus{position:fixed;z-index:5;top:8px;left:8px;background:#fff;padding:12px}
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);display:flex;flex-direction:column;padding:31px 21px 21px;background:#26212d;color:#fefaf4}
.brand{display:flex;align-items:center;gap:13px;margin:1px 0 49px 5px;width:max-content}
.brand strong{display:block;font-size:18px;letter-spacing:.09em;line-height:1.3}
.brand small{display:block;margin-top:5px;letter-spacing:.115em;font-size:9px;color:#d2c7dd}
.mark{display:grid;gap:4px;width:36px;height:36px;align-content:center;padding:6px;background:#d7bcf2;border-radius:12px;rotate:-9deg}
.mark i{height:3px;background:#372244;border-radius:8px}
.mark i:nth-child(2){width:65%}
.mark i:nth-child(3){width:85%;margin-left:auto}
.rail nav{display:grid;gap:7px}
.rail nav a{display:flex;align-items:center;gap:14px;padding:10px 14px;min-height:46px;color:#e2dae8;border:1px solid transparent;border-radius:9px}
.rail nav a:hover,.rail nav a[aria-current]{background:#3a3044;color:#fff4ff;border-color:#554860}
.rail nav a span{color:#d4bbeb;width:16px;text-align:center;font-size:18px}
.rail-bottom{margin-top:auto;display:flex;align-items:center;gap:9px;padding:12px 7px;color:#ded2e8;font-size:13px;border-top:1px solid #514459}
.dot{width:8px;height:8px;border-radius:50%;background:#c3abc5}.dot.online{background:#88d1ae}
.frame{margin-left:var(--rail)}
.topbar{min-height:66px;background:var(--panel);border-bottom:1px solid var(--line);padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--sub);font-size:14px}
.slash{color:#a09aa8;margin:0 7px}.account{background:transparent;border:1px solid var(--line);border-radius:8px;min-height:44px;padding:0 15px;color:var(--ink);max-width:50%;overflow-wrap:anywhere}
main{max-width:1610px;margin:auto;padding:40px clamp(20px,5vw,72px) 60px}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:23px}
h1,h2,h3,p{margin:0}
h1{font-size:clamp(30px,4.4vw,45px);font-weight:740;line-height:1.22;letter-spacing:-.04em}
h2{font-size:18px;line-height:1.35}
.page-heading p{margin-top:9px;color:var(--sub)}
.model{display:inline-flex;gap:8px;align-items:center;white-space:nowrap;color:var(--accent);background:var(--soft);padding:8px 12px;border-radius:7px;font-weight:700}
.model span{font-size:17px}
.work-grid{display:grid;grid-template-columns:minmax(315px,1.05fr) minmax(300px,1fr);gap:21px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 3px 12px #23182b08;min-width:0}
.composer,.preview,.table-panel{padding:20px}
.panel-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.panel-heading>span,.prompt-label>span{font-size:13px;color:var(--sub)}
.tabs{border:0;background:#efede9;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin:17px 0;border-radius:8px;gap:4px}
.tabs label{position:relative;cursor:pointer;text-align:center;min-width:0}
.tabs input{position:absolute;opacity:0;inset:0;cursor:pointer}
.tabs span{display:block;padding:10px 6px;min-height:44px;border:1px solid transparent;border-radius:6px;color:var(--sub);font-weight:600}
.tabs input:checked+span{background:var(--panel);border-color:#dfd9df;color:var(--accent)}
.tabs input:focus-visible+span{outline:3px solid #9568bd}
.label{color:var(--ink);font-size:14px;font-weight:650;display:block}
.prompt-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
textarea,input:not([type=radio]),select{border:1px solid #d9d4da;border-radius:8px;background:#fff;color:var(--ink);padding:10px 11px;min-height:44px}
textarea{display:block;width:100%;resize:vertical;min-height:125px;line-height:1.65}
textarea::placeholder{color:#776f7b}
select{display:block;width:100%;margin-top:5px}
input[type=file]{width:100%}
#reference-field{margin-bottom:14px}#reference-field .label{margin-bottom:5px}#reference-field small{color:var(--sub)}
#reference-thumb{height:55px;max-width:120px;object-fit:cover;display:block;border-radius:5px;margin:6px 0}
.settings{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin:15px 0}
.submit-row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:10px}
.primary,.secondary,.text-button{border-radius:8px;min-height:44px;padding:9px 14px;font-weight:650}
.primary{background:var(--accent);color:#fff;border:1px solid var(--accent)}
.primary:hover{background:#352447}
.primary span{margin-left:17px;color:#e9d4f5}
.secondary{background:#fffefa;border:1px solid #dbd4de;color:var(--accent)}
.secondary:hover,.text-button:hover,.account:hover{background:var(--soft)}
.text-button{color:var(--sub);background:transparent;border:1px solid transparent}
.screen{margin-top:14px;aspect-ratio:16/10;background:#211e24;border-radius:9px;overflow:hidden;display:grid;place-items:center}
.screen video{display:block;width:100%;height:100%;object-fit:contain;max-height:470px}
.preview-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px}
.preview-footer h3{font-size:16px}.preview-footer p{color:var(--sub);font-size:13px;margin-top:2px}
.examples{margin-top:27px}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:13px}
.sample{padding:0;overflow:hidden;display:block;width:100%;text-align:left;color:var(--ink)}
.sample:hover,.sample[aria-pressed=true]{border-color:#9378a6}
.sample img{width:100%;aspect-ratio:22/10;display:block;object-fit:cover;background:#e5dcd0}
.sample span{display:block;padding:10px 13px;font-weight:600}
.error{color:var(--danger);font-size:14px;margin:9px 0}
#banner{background:#f1ecf7;border-left:3px solid #9070ae;padding:10px 13px;margin:0 0 18px;color:#483656;border-radius:3px}
.table-panel>label{width:min(200px,100%);margin-bottom:15px}
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;text-align:left}
th,td{padding:10px 9px;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-weight:620;color:var(--sub)}
td:first-child{max-width:420px;min-width:155px;overflow-wrap:anywhere}
td:last-child{white-space:nowrap}
td .secondary{display:inline-block;margin-right:5px;font-size:13px}
.task-details{display:block;color:var(--sub);font-size:12px;font-weight:400;margin-top:4px}
.status-pill{white-space:nowrap;background:var(--soft);color:var(--accent);border-radius:5px;padding:4px 7px;font-size:13px}
.status-pill.done{background:#e4f0e8;color:#24614a}.status-pill.failed{background:#f7e7e8;color:var(--danger)}
.empty{padding:24px 0;color:var(--sub)}
.usage-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.metric{padding:20px}.metric strong{display:block;font-size:34px;margin-top:7px;color:var(--accent)}
dialog{border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink);width:min(435px,calc(100vw - 28px));padding:23px;box-shadow:0 16px 45px #21162730}
dialog::backdrop{background:#1e15246b}
dialog p{color:var(--sub);margin:6px 0 14px}
dialog .label{margin:10px 0}
dialog input{display:block;width:100%;margin-top:5px}
dialog .primary{margin-top:8px;width:100%}
@media(max-width:1050px){:root{--rail:182px}.rail{padding-inline:13px}.topbar{padding-inline:25px}main{padding-inline:25px}.work-grid{gap:13px}.composer,.preview{padding:16px}}
@media(max-width:850px){.work-grid{grid-template-columns:1fr}.screen{aspect-ratio:16/9}.brand{margin-bottom:34px}}
@media(max-width:620px){.rail{position:static;width:auto;padding:13px 16px;gap:13px}.brand{margin:0}.rail nav{display:flex;gap:4px}.rail nav a{flex:1;padding:6px;justify-content:center;gap:6px;font-size:13px}.rail-bottom{display:none}.frame{margin:0}.topbar{padding:0 16px;min-height:56px}main{padding:23px 16px 40px}.page-heading{align-items:flex-start}.model{font-size:12px;margin-top:3px;padding:6px 8px}.sample-grid{gap:8px}.sample span{padding:8px;font-size:12px}.usage-grid{grid-template-columns:1fr}}