:root{
  font-family:"Aptos","Segoe UI Variable",ui-sans-serif,system-ui,sans-serif;
  color-scheme:dark;--ink:#0b0c0e;--cloth:#111316;--cloth-2:#171a1e;--seam:#2b3036;
  --text:#f3f0e9;--muted:#8d9298;--gold:#d7a85c;--gold-hi:#f0c777;--mint:#b6d2bd;
  --red:#ee8f82;--radius:14px
}

.client-api-head-actions{display:flex;align-items:center;gap:6px}.client-api-docs-top{padding:6px 8px!important;font-size:10px!important;white-space:nowrap}.client-api-delete{color:#efb0a5!important}.client-api-docs{margin-top:14px;border-top:1px solid #39352f;padding-top:10px}.client-api-docs summary{cursor:pointer;color:#d8c18f;font-size:12px;font-weight:700;list-style:none}.client-api-docs summary::-webkit-details-marker{display:none}.client-api-docs summary:before{content:'＋';display:inline-block;margin-right:6px;color:#caa66a}.client-api-docs[open] summary:before{content:'－'}.client-api-docs-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:9px 0 7px;color:#9d9b92;font-size:10px}.client-api-docs-head button{padding:6px 8px!important;white-space:nowrap}.client-api-docs-text{max-height:280px;overflow:auto;margin:0;padding:10px;border:1px solid #39352f;border-radius:8px;background:#0e0e0d;color:#c8c0b3;white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace}
*{box-sizing:border-box}html,body{width:100vw;height:100vh;min-width:0;min-height:0;overflow:hidden}
body{margin:0;background:var(--ink);color:var(--text)}button,select,textarea,input{font:inherit}button{cursor:pointer}
.hidden{display:none!important}.customer-admin-hidden{display:none!important}
.eyebrow{font-size:10px;letter-spacing:.16em;color:#72787e;font-weight:800;text-transform:uppercase}
.muted{color:var(--muted);font-size:12px;margin:4px 0 0}.brand-mark{display:grid;place-items:center;width:38px;height:38px;border:1px solid #725832;border-radius:11px;color:var(--gold-hi);background:#1a1711;font-size:16px;font-weight:900;box-shadow:inset 0 0 0 1px #2d2418}.brand-mark--yunshuai{position:relative;overflow:hidden;background:#f6f4ef;border-color:#4a5763;box-shadow:0 5px 14px #0006,inset 0 0 0 1px #ffffff8c}.brand-mark--yunshuai img{position:absolute;top:0;left:50%;display:block;width:160%;height:auto;max-width:none;transform:translateX(-50%);pointer-events:none}
.auth-gate{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;padding:24px;background:#090a0b}.auth-panel{width:min(390px,100%);padding:34px;border:1px solid var(--seam);border-radius:20px;background:var(--cloth);box-shadow:0 30px 80px #0008}.auth-panel .brand-mark{margin-bottom:22px}.auth-panel h2{font-size:25px;letter-spacing:-.03em;margin:0}.auth-panel p{font-size:13px;color:var(--muted);margin:8px 0 22px}.auth-panel form{display:grid;gap:11px}.auth-panel input{width:100%;padding:13px 14px;border:1px solid var(--seam);border-radius:10px;background:#0b0d0f;color:var(--text);outline:none}.auth-panel input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d7a85c1c}.auth-panel form button{padding:13px;border:0;border-radius:10px;background:var(--gold);color:#18130b;font-weight:850}.auth-switch{margin-top:14px;border:0;background:none;color:var(--gold-hi);font-size:12px}.auth-status{min-height:18px;margin-top:12px;color:var(--red);font-size:12px}
.app-shell{display:grid;grid-template-columns:250px 1px minmax(360px,1fr) 1px 290px;width:100vw;height:100vh;background:#0c0e10}.pane-resizer{background:#24282d;cursor:col-resize}.pane-resizer:hover{background:var(--gold)}
.sidebar{display:flex;flex-direction:column;min-width:0;padding:24px 18px 16px;background:#101214;border-right:1px solid #1f2429;overflow:hidden}.sidebar-brand{display:flex;align-items:center;gap:11px;padding:2px 4px 24px;border-bottom:1px solid #24282c}.sidebar-brand h1{font-size:17px;margin:0;letter-spacing:-.02em}.sidebar-account{padding:20px 4px 14px}.account-select-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:8px}.account-select-row select{min-height:39px}.account-delete-btn{height:39px;padding:0 10px;border:1px solid #563538;border-radius:9px;background:#211617;color:#ed9a90;font-size:11px}.account-actions{display:flex;gap:7px;margin-top:8px}.pill-btn,.square-action,.mini-action{min-height:34px;padding:0 11px;border:1px solid var(--seam);border-radius:9px;background:#191c20;color:#d6d8d7;font-size:11px;font-weight:750}.pill-btn.accent{border-color:var(--gold);background:var(--gold);color:#1b1409}.pill-btn:hover,.square-action:hover,.mini-action:hover{border-color:#6a7075;background:#22262b}.account-add-panel{margin-top:10px;padding:12px;border:1px solid #34302a;border-radius:11px;background:#171716}.account-add-panel.hidden{display:none}.account-add-head{display:flex;justify-content:space-between}.account-add-head b{font-size:12px}.account-add-head small,.account-add-option small{display:block;color:#89847b;font-size:9px;margin-top:3px}.account-add-close{border:0;background:none;color:#9a9b9b;font-size:18px}.account-add-option{width:100%;margin-top:8px;padding:10px;text-align:left;border:1px solid var(--seam);border-radius:9px;background:#1b1e21;color:#e6e2d9}.account-add-option.incognito{border-color:#5c4a2e;background:#211c14}.account-add-option.warn{border-color:#5d3932;background:#241715}.batch-login-panel{margin-top:10px;padding-top:10px;border-top:1px solid var(--seam)}.batch-login-panel summary{font-size:11px;color:#c9c5bc;cursor:pointer}.batch-login-panel textarea{margin-top:8px;min-height:90px;font-size:10px}.batch-login-help{font-size:9px;line-height:1.45;color:#797d80;margin-top:7px}.account-add-status{margin-top:8px;padding:8px;border-radius:8px;background:#101214;color:#92979b;font-size:9px;line-height:1.4}.account-identity{margin-top:10px;padding:9px;border:1px solid #292d31;border-radius:9px;color:#91969b;font-size:10px;line-height:1.5;word-break:break-word}.identity-ok{color:var(--mint)}.credits-badge{margin-top:8px;padding:9px 10px;border:1px solid #4d4029;border-radius:9px;background:#1c1811;color:var(--gold-hi);font-size:11px;font-weight:800}.logout-all{width:100%;margin-top:9px;padding:8px;border:1px solid #573334;border-radius:9px;background:#201516;color:#ec9b91;font-size:10px}.sidebar-history{min-height:0;display:flex;flex-direction:column;flex:1;padding:16px 4px 0;border-top:1px solid #24282c}.history-head{display:flex;justify-content:space-between;align-items:end}.history-head h3{font-size:14px;margin:4px 0 0}.history-count{color:var(--gold)}.history-actions{display:flex;gap:6px;margin:10px 0}.history-sync-status{font-size:10px;color:#777d82;margin-bottom:8px}.history-list{min-height:0;overflow:auto}.history-item{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:10px 0;border-bottom:1px solid #202428}.history-item strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.history-item small,.history-item span{font-size:9px;color:#7f858a}.history-item span{grid-column:1/-1;color:var(--mint)}.history-empty{padding:18px 0;color:#777d82;font-size:11px}.sidebar-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 4px 0;color:#6f7479;font-size:10px}.icon-btn{width:30px;height:30px;border:1px solid var(--seam);border-radius:8px;background:#181b1e;color:#bfc1bf;font-size:16px}
.workspace{min-width:0;display:flex;flex-direction:column;background:#0d0f11}.workspace-header{display:flex;align-items:end;justify-content:space-between;gap:16px;padding:26px 34px 18px;border-bottom:1px solid #24282c}.workspace-header h2{font-size:24px;letter-spacing:-.04em;margin:5px 0 0}.customer-mode-badge{padding:6px 9px;border:1px solid #4d4029;border-radius:999px;color:var(--gold-hi);font-size:10px;letter-spacing:.08em}.workspace-scroll{min-height:0;overflow:auto;padding:28px 34px 60px}.hero-card{max-width:820px;margin:0 auto;padding:0;background:transparent;border:0}.model-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end}.model-select-wrap label,label{display:block;margin:0 0 7px;color:#b9bdbe;font-size:11px;font-weight:800}.model-row select{min-height:43px}.square-action{min-height:43px}.model-meta{margin-top:8px;padding:9px 11px;border-left:2px solid var(--gold);background:transparent;color:#8e9599;font-size:10px;line-height:1.5}.prompt-dock{position:relative;margin-top:24px;padding:18px 18px 14px;border:1px solid #30363c;border-radius:15px;background:#131619}.prompt-dock:focus-within{border-color:#876b3d;box-shadow:0 0 0 3px #d7a85c12}.prompt-dock-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px}.hero-card.studio-panel .prompt-dock-head label{margin:0;color:var(--text);font-size:12px}.prompt-dock-tip{font-size:10px;color:#858b8e}.prompt-dock textarea{min-height:126px;resize:vertical;background:#0c0e10!important;border:0;border-bottom:1px solid #2d3338;border-radius:0;padding:8px 0;color:var(--text);font-size:15px;line-height:1.55}.prompt-dock textarea:focus{box-shadow:none;border-color:var(--gold)}.prompt-dock-actions{display:flex;justify-content:flex-end;margin-top:10px}.prompt-action-btn{padding:7px 11px;border:1px solid #5e4a2b;border-radius:8px;background:#201b14;color:var(--gold-hi);font-size:10px;font-weight:800}.asset-library-panel{margin-top:13px;padding:10px 0 0;border-top:1px solid #272c31}.asset-library-head{display:flex;justify-content:space-between}.asset-library-label{font-size:10px;color:#b9bdbe;font-weight:800}.asset-library-status{font-size:9px;color:#858b8e}.asset-library-actions{display:flex;gap:6px;margin-top:8px}.asset-library-btn{padding:6px 9px;border:1px solid var(--seam);border-radius:8px;background:#181b1e;color:#c5c9c8;font-size:9px}.draft-status{margin-top:10px;color:#7d8488;font-size:10px}.mention-menu{position:absolute;z-index:40;left:18px;right:18px;top:calc(100% - 20px);max-height:220px;overflow:auto;padding:6px;border:1px solid #5e4a2b;border-radius:10px;background:#15130f;box-shadow:0 18px 40px #0009}.mention-menu.hidden{display:none}.mention-option{width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;padding:8px;border:1px solid transparent;border-radius:7px;background:none;color:#d8d4cb;text-align:left}.mention-option:hover,.mention-option.active{border-color:#806337;background:#211b12}.mention-option-token{color:var(--gold-hi);font-size:10px;font-weight:900}.mention-option-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.mention-option-source{font-size:8px;color:#7c817f}.schema-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:24px}.schema-field{padding:13px;border:1px solid #2a3035;border-radius:11px;background:#121518}.schema-field label{font-size:11px}.schema-field input,.schema-field select{margin-top:7px}.schema-field small{display:block;margin-top:6px;color:#777e82;font-size:9px;line-height:1.4}.schema-field input[type=checkbox]{width:auto;accent-color:var(--gold)}select,textarea,input[type=text],input[type=number],input[type=url]{width:100%;padding:10px 11px;border:1px solid #30363c;border-radius:9px;background:#0b0d0f;color:var(--text);outline:none}select:focus,textarea:focus,input:focus{border-color:var(--gold);box-shadow:0 0 0 3px #d7a85c16}
.media-box{margin-top:24px;padding:18px;border:1px solid #30363c;border-radius:15px;background:#121518}.media-title-row{display:flex;justify-content:space-between;align-items:center}.media-title{font-size:14px;font-weight:850}.total-badge{padding:5px 8px;border:1px solid #4d4029;border-radius:99px;color:var(--gold-hi);font-size:9px}.ref-limit-hint,.media-help{margin-top:6px;color:#7d8488;font-size:10px;line-height:1.45}.media-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}.media-role{min-width:0;padding:12px;border:1px solid #2a3035;border-radius:10px;background:#0f1214}.media-role-head{display:flex;justify-content:space-between;margin-bottom:8px}.media-role-head b{font-size:11px}.role-count,.counter{font-size:9px;color:#7d8488}.file-picker{display:block;padding:10px;border:1px dashed #4b5156;border-radius:8px;background:#13171a;color:#aeb4b4;font-size:10px;cursor:pointer}.file-picker:hover{border-color:var(--gold)}.file-picker input{display:none}.file-picker span{display:block;color:var(--gold-hi);font-weight:800}.file-picker em{display:block;margin-top:4px;color:#747b7f;font-style:normal}.url-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px;margin-top:7px}.url-row input{font-size:9px}.mini-button{padding:0 9px;border:1px solid var(--seam);border-radius:8px;background:#1b1e21;color:#c8cdcb;font-size:9px}.role-list{display:grid;gap:5px;margin-top:8px}.ref-row{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 7px;border-radius:7px;background:#1a1e21;color:#b4b9b8;font-size:9px}.ref-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ref-row button{border:0;background:none;color:#a17670;font-size:14px}.upload-panel,.advanced-panel{margin-top:14px;border-top:1px solid #2a3035;padding-top:12px}.upload-panel summary,.advanced-panel summary{cursor:pointer;color:#aeb4b4;font-size:11px;font-weight:800}.upload-status{margin:10px 0 0;padding:10px;border-radius:8px;background:#0b0d0f;color:#868d91;font-size:9px;white-space:pre-wrap}.cost-card{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding:15px 17px;border:1px solid #735932;border-radius:12px;background:#1b1710}.cost-label{font-size:10px;letter-spacing:.1em;color:#a68a58;text-transform:uppercase}.cost-value{margin-top:4px;color:var(--gold-hi);font-size:22px;font-weight:900}.cost-hint{color:#c9b790;font-size:10px;text-align:right}.generate-btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:52px;margin-top:13px;border:1px solid var(--gold);border-radius:11px;background:var(--gold);color:#1d160b;font-size:14px;font-weight:900;letter-spacing:.01em}.generate-btn:hover{background:var(--gold-hi)}.generate-btn:disabled{opacity:.6;cursor:wait}.generate-icon{font-size:18px}.task-status{min-height:20px;margin-top:10px;color:var(--red);font-size:11px}.task-status.ok{color:var(--mint)}
.inspector{display:flex;flex-direction:column;min-width:0;background:#101214;overflow:hidden}.inspector-head{padding:26px 20px 18px;border-bottom:1px solid #24282c}.inspector-head h3{margin:5px 0 0;font-size:17px}.inspector-scroll{min-height:0;overflow:auto;padding:18px 16px}.task-card,.result-card,.debug-panel{margin:0 0 12px;padding:14px;border:1px solid #2c3237;border-radius:12px;background:#14171a}.task-card-head,.result-card-head{display:flex;justify-content:space-between;gap:10px;align-items:start}.task-title{margin-top:4px;font-size:12px;font-weight:850}.task-badge{padding:4px 7px;border:1px solid #4d4029;border-radius:99px;color:var(--gold-hi);font-size:9px}.task-badge.completed{color:var(--mint);border-color:#385344}.task-badge.failed{color:var(--red);border-color:#5d3932}.task-steps{display:grid;gap:8px;margin:17px 0}.task-step{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;color:#737b80}.task-step>span{display:grid;place-items:center;width:22px;height:22px;border:1px solid #394046;border-radius:50%;font-size:9px}.task-step b{display:block;color:#aeb4b4;font-size:10px}.task-step small{font-size:9px}.task-step.done>span,.task-step.active>span{border-color:var(--gold);color:var(--gold-hi)}.task-step.done b,.task-step.active b{color:var(--text)}.task-step.failed>span{border-color:var(--red);color:var(--red)}.task-meta{display:grid;gap:7px;padding-top:10px;border-top:1px solid #292f34}.task-meta div{display:flex;justify-content:space-between;gap:8px;font-size:9px}.task-meta span{color:#747c80}.task-meta code{max-width:150px;overflow:hidden;text-overflow:ellipsis;color:#b9bdbe}.result-card h3{margin:5px 0 0;font-size:16px}.result{display:flex;flex-direction:column;gap:10px;margin-top:14px}.result video,.result img{width:100%;max-height:220px;object-fit:contain;border-radius:8px;background:#090b0c}.result a{color:var(--gold-hi);font-size:10px;word-break:break-all}.output{max-width:100%;max-height:200px;overflow:auto;font-size:9px;color:#858b8e;white-space:pre-wrap}
@media(max-width:1050px){.app-shell{grid-template-columns:215px 1px minmax(320px,1fr) 1px 240px}.workspace-header,.workspace-scroll{padding-left:24px;padding-right:24px}}
@media(max-width:760px){html,body{overflow:auto}.app-shell{display:flex;flex-direction:column;height:auto;min-height:100vh}.sidebar,.workspace,.inspector{height:auto}.sidebar{padding:16px}.sidebar-history{max-height:260px}.pane-resizer{display:none}.workspace-header{padding:22px 18px 16px}.workspace-scroll{padding:20px 18px 40px}.inspector-head{padding:20px 18px 15px}.inspector-scroll{padding:15px 18px 35px}.media-grid,.schema-grid{grid-template-columns:1fr}.prompt-dock textarea{min-height:110px}.cost-card{align-items:flex-start;flex-direction:column}.cost-hint{text-align:left}}

/* v0.52 canvas re-layout: one continuous page with a left rail and activity deck */
html,body{overflow:auto;background:#090a0b}
.model-meta{border-left:0!important}
.hidden-select{display:none!important}
.workspace-hero-image{display:block;width:100%;height:150px;object-fit:cover;border:1px solid #3a4147;filter:saturate(.82) contrast(1.05);}
.app-shell{display:grid;grid-template-columns:224px minmax(0,1fr);grid-template-rows:auto auto;width:100%;height:auto;min-height:100vh;background:#0d0f11}
.sidebar{grid-column:1;grid-row:1 / span 2;position:sticky;top:0;height:100vh;min-height:0;display:flex;flex-direction:column;padding:26px 16px 18px;background:#0e1012;border-right:1px solid #262b30;overflow:hidden}
.leftResizer,.rightResizer{display:none}
.workspace{grid-column:2;grid-row:1;min-height:0;background:#111417}
.workspace-header{position:sticky;top:0;z-index:20;align-items:center;padding:24px clamp(24px,5vw,72px) 22px;background:#111417;border-bottom:1px solid #2a3035}
.workspace-header h2{font-size:30px;letter-spacing:-.055em}.workspace-header .eyebrow{color:var(--gold);letter-spacing:.22em}
.workspace-scroll{overflow:visible;padding:clamp(28px,5vw,68px) clamp(24px,7vw,110px) 90px}
.hero-card{max-width:980px;margin:0 auto}.model-row{grid-template-columns:minmax(0,1fr) 118px}.model-row select{min-height:48px}.square-action{min-height:48px;border-radius:6px}
.prompt-dock{margin-top:34px;padding:24px 26px 18px;border-radius:4px;background:#171b1e;border-color:#3a4147;box-shadow:12px 12px 0 #0a0c0d}
.prompt-dock-head{margin-bottom:14px}.prompt-dock textarea{min-height:168px;font-size:17px;letter-spacing:.005em}.prompt-action-btn{border-radius:4px;padding:9px 14px}
.schema-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:36px}.schema-field{border-radius:4px;background:#15191c;padding:16px}.schema-field label{letter-spacing:.04em}
.media-box{margin-top:34px;border-radius:4px;padding:22px;background:#15191c}.media-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.media-role{border-radius:4px;padding:14px;background:#101316}.file-picker{border-radius:4px;min-height:74px;display:flex;flex-direction:column;justify-content:center}
.upload-panel,.advanced-panel{margin-top:22px}.cost-card{margin-top:34px;border-radius:4px;padding:19px 22px}.generate-btn{margin-top:12px;border-radius:4px;min-height:58px;font-size:15px;letter-spacing:.08em;text-transform:uppercase}
.inspector{grid-column:2;grid-row:2;height:auto;min-height:0;background:#0d0f11;border-top:1px solid #2a3035}.inspector-head{display:flex;align-items:center;padding:22px clamp(24px,7vw,110px) 15px}.inspector-scroll{display:grid;grid-template-columns:minmax(260px,1fr) minmax(300px,1.4fr);gap:16px;padding:10px clamp(24px,7vw,110px) 54px}.inspector .task-card,.inspector .result-card{margin:0;border-radius:4px}.task-steps{grid-template-columns:repeat(3,1fr);gap:10px}.task-step{grid-template-columns:24px 1fr}.result-card .result{max-width:560px}
.sidebar-brand{padding-bottom:22px}.credits-badge{font-size:20px;padding:15px 12px;border-radius:4px}.sidebar-history{display:flex;flex:1;min-height:0;flex-direction:column;padding-top:12px}.history-list{max-height:none;min-height:0;flex:1;overflow-y:auto}.sidebar-footer{flex:0 0 auto;margin-top:10px}
@media(max-width:900px){.app-shell{grid-template-columns:190px minmax(0,1fr)}.workspace-scroll{padding-left:24px;padding-right:24px}.inspector-scroll{padding-left:24px;padding-right:24px}.media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.app-shell{display:flex;flex-direction:column}.sidebar{position:relative;grid-column:auto;grid-row:auto;width:100%;height:auto;max-height:none;border-right:0;border-bottom:1px solid #262b30;padding:16px}.sidebar-history{max-height:210px}.history-list{max-height:120px}.workspace-header{position:relative;padding:22px 18px 18px}.workspace-header h2{font-size:25px}.workspace-scroll{padding:22px 18px 50px}.schema-grid,.media-grid{grid-template-columns:1fr}.prompt-dock{box-shadow:7px 7px 0 #0a0c0d;padding:18px}.prompt-dock textarea{min-height:130px;font-size:15px}.inspector{border-top:1px solid #2a3035}.inspector-head,.inspector-scroll{padding-left:18px;padding-right:18px}.inspector-scroll{display:block}.inspector .task-card,.inspector .result-card{margin-bottom:12px}.task-steps{grid-template-columns:1fr}}
.workspace-hero-image{height:118px}
.prompt-length-note{margin-top:10px;color:#d7b879;font-size:11px;line-height:1.45}
.resolution-cost{display:block;margin-top:8px;color:var(--gold-hi)!important;font-size:11px!important;font-weight:800}

/* v0.58 visual rhythm: a single type scale with calmer density and clearer
   action hierarchy. */
:root{--fs-1:11px;--fs-2:12px;--fs-3:14px;--fs-4:16px;--fs-5:20px;--fs-6:28px}
body{font-size:var(--fs-3);line-height:1.5;letter-spacing:.002em}
.eyebrow{font-size:var(--fs-1);letter-spacing:.14em}.muted{font-size:var(--fs-2);line-height:1.45}
.sidebar-brand h1{font-size:18px}.sidebar-account{padding-top:22px}.account-identity,.account-add-status{font-size:var(--fs-1);line-height:1.55}.credits-badge{font-size:18px;line-height:1.2}
.history-head h3{font-size:16px}.history-item strong{font-size:var(--fs-2)}.history-item small,.history-item span{font-size:var(--fs-1)}
.workspace-header h2{font-size:26px;line-height:1.2;letter-spacing:-.035em}.workspace-header{padding-top:22px;padding-bottom:20px}
.model-select-wrap label,label{font-size:var(--fs-2);letter-spacing:.01em}.model-meta{font-size:var(--fs-1);line-height:1.55}
.prompt-dock-head label{font-size:var(--fs-3)!important}.prompt-dock-tip{font-size:var(--fs-1)}.prompt-dock textarea{font-size:var(--fs-4);line-height:1.65}
.asset-library-label,.schema-field label,.media-role-head b{font-size:var(--fs-2)}.asset-library-status,.draft-status,.schema-field small,.ref-limit-hint,.media-help{font-size:var(--fs-1);line-height:1.5}
.schema-field{padding:15px}.schema-field small{margin-top:7px}.media-title{font-size:16px}.role-count,.counter{font-size:var(--fs-1)}
.file-picker,.url-row input,.mini-button{font-size:var(--fs-1)}.cost-label{font-size:var(--fs-1)}.cost-value{font-size:24px}.cost-hint{font-size:var(--fs-2)}
.generate-btn{font-size:15px;letter-spacing:.03em}.task-title{font-size:var(--fs-3)}.task-badge{font-size:var(--fs-1)}.task-step b{font-size:var(--fs-2)}.task-step small,.task-meta div{font-size:var(--fs-1)}
.prompt-length-note{font-size:var(--fs-2);line-height:1.55}.total-badge{font-size:var(--fs-1)}

/* Credit usage activity rail */
.credit-usage-panel{margin-top:16px;padding:14px 4px 0;border-top:1px solid #24282c}
.credit-usage-head{display:flex;align-items:center;justify-content:space-between;color:#b9bdbe;font-size:var(--fs-2);font-weight:800}
.credit-usage-head button{padding:4px 8px;border:1px solid var(--seam);border-radius:7px;background:#181b1e;color:#aeb4b4;font-size:var(--fs-1)}
.credit-usage-list{margin-top:8px;max-height:190px;overflow:auto}
.credit-usage-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 8px;padding:8px 0;border-bottom:1px solid #202428}
.credit-usage-row b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d7d5ce;font-size:var(--fs-1)}
.credit-usage-row small{display:block;color:#747c80;font-size:10px}
.credit-usage-row strong{color:var(--gold-hi);font-size:var(--fs-1);white-space:nowrap}
.credit-usage-row em{grid-column:1/-1;color:#697177;font-size:10px;font-style:normal}
.credit-usage-refund strong{color:var(--mint)}
.credit-usage-adjustment strong{color:var(--gold-hi)}
.history-item{cursor:pointer;grid-template-columns:auto minmax(0,1fr) auto}.history-item:hover{background:#171b1e}.history-index{grid-row:1 / span 2;display:grid;place-items:center;min-width:22px;color:#8f989e!important;font-size:10px!important;font-variant-numeric:tabular-nums;font-weight:700}.history-status{grid-column:2 / -1!important}.history-pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0 2px}.history-pagination button{padding:4px 8px;border:1px solid var(--seam);border-radius:7px;background:#181b1e;color:#aeb4b4;font-size:10px}.history-pagination button:disabled{opacity:.35;cursor:default}.history-pagination span{color:#888f93;font-size:10px}
.task-notice{max-width:720px;margin:9px 0 0;color:#8d969b;font-size:11px;line-height:1.6}
.credit-usage-pagination,.usage-pagination{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 0}.credit-usage-pagination button,.usage-pagination button{padding:4px 9px;border:1px solid var(--seam);border-radius:7px;background:#181b1e;color:#aeb4b4;font-size:10px}.credit-usage-pagination button:disabled,.usage-pagination button:disabled{opacity:.35;cursor:default}.credit-usage-pagination span,.usage-pagination span{color:#888f93;font-size:10px}
.result-item{display:flex;flex-direction:column;gap:10px;margin-top:12px}.result-item video{width:100%;max-height:420px;border-radius:12px;background:#080a0c}.result-actions{display:flex;gap:10px}.result-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:38px;padding:0 18px;border-radius:9px;border:1px solid var(--seam);color:var(--text);text-decoration:none;font-weight:600}.result-actions a:first-child{border-color:var(--lime);color:var(--lime)}.result-actions .result-download{border-color:var(--mint);color:var(--mint)}
:where(button,a,input,select,textarea):focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* Depth Card recreation: pointer-responsive perspective and layered lift. */
.depth-card{--depth-rx:0deg;--depth-ry:0deg;--depth-x:50%;--depth-y:50%;position:relative!important;isolation:isolate;transform:perspective(1100px) rotateX(var(--depth-rx)) rotateY(var(--depth-ry)) translateZ(0);transform-style:preserve-3d;will-change:transform;transition:transform 220ms cubic-bezier(.2,.75,.25,1),box-shadow 220ms ease,border-color 220ms ease}
.depth-card::before,.depth-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.depth-card::before{z-index:-1;background:radial-gradient(circle at var(--depth-x) var(--depth-y),rgba(255,235,190,.18),transparent 34%),linear-gradient(135deg,rgba(255,255,255,.08),transparent 32%,rgba(255,255,255,.015) 72%);opacity:0;mix-blend-mode:screen;transition:opacity 220ms ease}
.depth-card::after{z-index:3;border:1px solid rgba(240,199,119,0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.025);transition:border-color 220ms ease,box-shadow 220ms ease}
.depth-card.depth-card-active{box-shadow:0 24px 54px rgba(0,0,0,.34),0 8px 18px rgba(0,0,0,.16)!important}.depth-card.depth-card-active::before{opacity:1}.depth-card.depth-card-active::after{border-color:rgba(240,199,119,.24);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 0 0 1px rgba(240,199,119,.05)}
.depth-card>*{transform:translateZ(10px);transform-style:preserve-3d}.depth-card .eyebrow,.depth-card h3,.depth-card h2,.depth-card .task-title,.depth-card .result-actions,.depth-card .task-badge{transform:translateZ(18px)}
@media(prefers-reduced-motion:reduce){.depth-card{transform:none!important;transition:none}.depth-card>*{transform:none}.depth-card::before{display:none}}

/* v0.59 finishing pass: quieter surfaces, one interaction language. */
:root{--surface-0:#0b0d0f;--surface-1:#111519;--surface-2:#171c20;--surface-3:#20272c;--focus-ring:rgba(240,199,119,.28);--lime:var(--gold-hi)}
::selection{background:rgba(215,168,92,.34);color:#fffaf0}*{scrollbar-width:thin;scrollbar-color:#4a5359 transparent}*::-webkit-scrollbar{width:9px;height:9px}*::-webkit-scrollbar-track{background:transparent}*::-webkit-scrollbar-thumb{border:3px solid transparent;border-radius:99px;background:#586169;background-clip:padding-box}*::-webkit-scrollbar-thumb:hover{background:#78828a;background-clip:padding-box}
button,a,input,select,textarea{transition:border-color .18s ease,background-color .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}button:active{transform:translateY(1px)}button:disabled{transform:none}.sidebar{background:var(--surface-0)}.workspace,.workspace-header{background:var(--surface-1)}.inspector{background:var(--surface-0)}
.workspace-header{padding-top:24px;padding-bottom:21px}.workspace-header h2{font-size:27px;letter-spacing:-.04em}.workspace-header .eyebrow{color:#bda779;letter-spacing:.16em}.workspace-hero-image{border:0;border-radius:12px;box-shadow:0 18px 36px rgba(0,0,0,.22)}
.prompt-dock{border:0;border-radius:14px;background:var(--surface-2);box-shadow:0 18px 42px rgba(0,0,0,.2)}.prompt-dock:focus-within{box-shadow:0 18px 42px rgba(0,0,0,.22),0 0 0 2px var(--focus-ring)}.prompt-dock textarea{border-bottom-color:#384149}.schema-field,.media-box,.media-role{border-color:#303940;background:var(--surface-2);border-radius:12px}.media-role{background:#101417}.file-picker{border-color:#4b555d;background:#13181c}.file-picker:hover{background:#171e22;border-color:#bb9859}
select,textarea,input[type=text],input[type=number],input[type=url]{min-height:43px;border-color:#374149;background:#0c1013}select:hover,textarea:hover,input:hover{border-color:#55616a}select:focus,textarea:focus,input:focus{border-color:#d5ae69;box-shadow:0 0 0 3px var(--focus-ring)}
.generate-btn{border:0;border-radius:10px;background:#d7a85c;box-shadow:0 10px 22px rgba(215,168,92,.16)}.generate-btn:hover{background:#ebc27b;box-shadow:0 12px 26px rgba(215,168,92,.24)}.generate-btn:disabled{box-shadow:none}.cost-card{border-color:#5c4a2e;background:#1b1812}.task-card,.result-card{border-color:#303940;background:#14191d}.task-badge{font-variant-numeric:tabular-nums}.history-item{border-radius:8px;padding-inline:8px}.history-item:hover{background:#171d21}.credit-usage-row{padding-inline:4px}.result-actions a:first-child{border-color:#bfa66f;color:#f0c777}.result-actions .result-download{border-color:#709879;color:#c4dfca}.result-actions a:hover{background:#1e2529}
@media(max-width:680px){.workspace-header h2{font-size:24px}.workspace-hero-image{height:104px;border-radius:10px}.prompt-dock{border-radius:12px;box-shadow:none}.schema-field,.media-box,.media-role{border-radius:10px}.generate-btn{min-height:54px}.result-actions{flex-direction:column}.result-actions a{width:100%}}

/* Background Paper Shaders — canvas-backed paper fibre surface. */
.paper-shader-header{isolation:isolate;position:sticky;min-height:154px;align-items:stretch;padding:0!important;overflow:hidden;background:#111519}
.paper-shader-header::after{position:absolute;z-index:1;inset:0;content:"";pointer-events:none;border-bottom:1px solid rgba(240,199,119,.16);box-shadow:inset 0 -60px 90px rgba(4,6,8,.42)}
.paper-shader-canvas{position:absolute;z-index:0;inset:0;width:100%;height:100%;pointer-events:none}
.paper-shader-header-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;min-height:154px;padding:28px clamp(24px,7vw,110px);color:#f3f0e9}
.paper-shader-kicker{font-size:clamp(22px,3vw,34px);font-weight:760;letter-spacing:-.035em;line-height:1.12}
.paper-shader-header-copy p{max-width:52ch;margin:8px 0 0;color:#b8b5ac;font-size:12px;line-height:1.6}
.header-account{position:absolute;z-index:3;top:20px;right:clamp(24px,7vw,110px);display:grid;justify-items:end;gap:5px;color:#eef0ee}.header-account-label{color:#b8b5ac;font-size:10px;font-weight:700;letter-spacing:.12em}.header-account .credits-badge{margin:0;padding:0;border:0;background:none;color:#f0c777;font-size:18px;font-variant-numeric:tabular-nums}.header-account-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.header-account .account-support{margin:0;color:#c2c6c3;font-size:10px}.header-account .logout-all{width:auto;margin:0;padding:3px 0;border:0;background:transparent;color:#c2a16e;font-size:10px}.header-account .logout-all:hover{color:#f0c777;text-decoration:underline;text-underline-offset:3px}
@media(max-width:680px){.paper-shader-header,.paper-shader-header-copy{min-height:146px}.paper-shader-header-copy{padding:22px 18px}.paper-shader-kicker{font-size:24px}.paper-shader-header-copy p{max-width:34ch;font-size:11px}.header-account{top:16px;right:18px}.header-account .credits-badge{font-size:15px}.header-account-actions{gap:7px}.header-account .account-support,.header-account .logout-all{font-size:9px}}

/* Customer support stays with account actions, not production controls. */
.account-support{margin:12px 0 0;color:#9da4a8;font-size:11px;line-height:1.5;text-align:center}.account-support strong{color:#f0c777;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums}

/* Client diamond-card redemption sits directly below the account actions. */
.redeem-card-form{width:min(286px,calc(100vw - 36px));margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.12);text-align:left}
.redeem-card-form label{display:block;margin:0 0 5px;color:#b8b5ac;font-size:10px;font-weight:700;letter-spacing:.04em}
.redeem-card-row{display:flex;align-items:center;gap:7px}
.redeem-card-row input{min-width:0;flex:1;height:32px;margin:0;padding:6px 9px;border:1px solid #374149;border-radius:7px;background:#0c1013;color:#f2f4f5;font-size:11px}
.redeem-card-row input::placeholder{color:#747d83}
.redeem-card-row input:focus{border-color:#d5ae69;box-shadow:0 0 0 3px rgba(240,199,119,.16)}
.redeem-card-row button{flex:0 0 auto;height:32px;padding:0 10px;border:1px solid #d7a85c;border-radius:7px;background:#d7a85c;color:#211709;font-size:10px;font-weight:800}
.redeem-card-row button:hover{background:#ebc27b}
.redeem-card-row button:disabled{opacity:.6;cursor:wait}
.redeem-card-status{min-height:16px;margin-top:5px;color:#9da4a8;font-size:10px;line-height:1.4;overflow-wrap:anywhere}
.redeem-card-status:not(:empty){color:#c9b789}
.trial-card-badge{display:inline-flex;align-items:center;min-height:25px;margin-top:7px;padding:3px 9px;border:1px solid rgba(240,199,119,.46);border-radius:999px;background:rgba(215,168,92,.12);color:#f0c777;font-size:11px;font-weight:800;letter-spacing:.02em}.trial-card-badge span{margin-left:3px;font-variant-numeric:tabular-nums}.trial-card-badge.hidden{display:none}
@media(max-width:680px){.redeem-card-form{width:100%;max-width:340px}.redeem-card-row{align-items:stretch}.redeem-card-row input,.redeem-card-row button{height:36px}.redeem-card-row button{padding:0 12px}}

/* Asset controls use the same readable type scale as the rest of the studio. */
.asset-library-label{font-size:14px;font-weight:800}.asset-library-status{font-size:12px;line-height:1.5}.asset-library-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}.asset-library-btn{min-height:34px;padding:7px 11px;font-size:12px;font-weight:700}.draft-status{margin-top:12px;font-size:12px;line-height:1.5}
.asset-library-mention-hint{flex:1 1 280px;min-width:0;color:var(--text-muted,#8c969b);font-size:var(--type-meta,12px);line-height:1.5;overflow-wrap:anywhere}
@media(max-width:760px){.asset-library-mention-hint{flex-basis:100%}}

/* Keep @ asset choices adjacent to the editor instead of below its controls. */
.prompt-editor{position:relative;z-index:2}.prompt-editor .mention-menu{left:0;right:0;top:calc(100% + 6px);z-index:60}.prompt-editor .mention-menu:not(.hidden){animation:mention-menu-in 160ms ease-out}@keyframes mention-menu-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
/* Preflight guidance is instructional, not an error state. */
.task-status.guide{color:var(--muted)}

/* First/last-frame image generation — compact tools within the existing asset slots. */
.frame-tools{display:grid;gap:9px;margin-top:12px;padding:12px;border:1px solid #38424a;border-radius:10px;background:#12171a}
.frame-tool-title{color:#e5e2da;font-size:12px;font-weight:800;letter-spacing:.01em}
.frame-model-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:9px;align-items:center}
.frame-model-row select,.frame-note{min-width:0;min-height:36px;padding:7px 9px;font-size:11px}
.frame-model-row select option{background:#0b0d0f;color:#f3f0e9}
.frame-ratio-label{display:grid!important;gap:6px;margin:0!important;color:#b9bdbe;font-size:11px;font-weight:800}.frame-ratio-label select{min-height:36px;padding:7px 9px;font-size:11px}
.frame-cost{padding:0 2px;color:#f0c777;font-size:11px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums}

/* v0.63 customer type system: exactly three readable roles across the client. */
:root{--type-title:30px;--type-body:14px;--type-meta:12px}
body{font-size:var(--type-body);line-height:1.55}
h1,h2,.paper-shader-kicker{font-size:var(--type-title)!important;line-height:1.15;letter-spacing:-.035em}
h3,.media-title,.result-card h3,.history-head h3,.task-title{font-size:var(--type-body)!important;line-height:1.35}
label,button,input,select,textarea,.prompt-dock-tip,.asset-library-label,.asset-library-btn,.draft-status,.model-meta,.task-status,.cost-hint,.task-step b,.task-notice,.promo-rail-head p,.promo-slot strong{font-size:var(--type-body)!important;line-height:1.5}
.eyebrow,.muted,small,.account-support,.header-account-label,.asset-library-status,.schema-field small,.ref-limit-hint,.media-help,.role-count,.counter,.file-picker,.url-row input,.mini-button,.cost-label,.task-badge,.task-step small,.task-meta div,.promo-rail-kicker,.promo-slot span,.history-item small,.history-item span,.credit-usage-row small,.credit-usage-row em,.resolution-cost,.prompt-length-note{font-size:var(--type-meta)!important;line-height:1.5}
.credits-badge,.cost-value{font-size:var(--type-body)!important;line-height:1.35}
.prompt-dock textarea{font-size:var(--type-body)!important;line-height:1.6}
@media(max-width:680px){h1,h2,.paper-shader-kicker{font-size:24px!important}.credits-badge{font-size:var(--type-body)!important}}

/* Final type rhythm: three deliberate levels for the activity inspector.
   Keep labels quiet, content readable, and the current task unmistakable. */
.inspector{--inspector-title:18px;--inspector-body:13px;--inspector-meta:11px}
.inspector .eyebrow,.inspector .task-badge{font-size:var(--inspector-meta)!important;line-height:1.35;letter-spacing:.12em}
.inspector .inspector-head h3,.inspector .result-card h3{font-size:var(--inspector-title)!important;line-height:1.25;letter-spacing:-.02em}
.inspector .task-title{font-size:var(--inspector-body)!important;line-height:1.4;font-weight:700}
.inspector .task-step b{font-size:var(--inspector-body)!important;line-height:1.35;font-weight:700}
.inspector .task-step small,.inspector .task-meta span,.inspector .task-meta code{font-size:var(--inspector-meta)!important;line-height:1.4}
.inspector .task-meta strong{font-size:var(--inspector-body)!important;line-height:1.4;font-weight:700}
.inspector .task-notice{font-size:var(--inspector-meta)!important;line-height:1.5}
.inspector .task-prompt-record>b{font-size:var(--inspector-body)!important;line-height:1.4}
.inspector .task-prompt-record pre{font-size:var(--inspector-meta)!important;line-height:1.6}

/* Sidebar rhythm: history and diamond ledger share one typographic system. */
.sidebar-history,.credit-usage-panel{--rail-title:16px;--rail-body:12px;--rail-meta:11px}
.sidebar-history h3,.credit-usage-head>div>span{font-size:var(--rail-title)!important;line-height:1.3;font-weight:750;letter-spacing:-.015em}
.sidebar-history .eyebrow,.credit-usage-kicker{font-size:var(--rail-meta)!important;line-height:1.3;letter-spacing:.14em;font-weight:800;color:#7f8990}
.history-sync-status,.history-item strong,.credit-usage-row b{font-size:var(--rail-body)!important;line-height:1.45}
.history-item small,.history-item span,.credit-usage-row small,.credit-usage-row em{font-size:var(--rail-meta)!important;line-height:1.45}
.credit-usage-head{font-size:var(--rail-body)!important;line-height:1.3}
.credit-usage-head button,.history-actions .mini-action{font-size:var(--rail-meta)!important;line-height:1.3}
.credit-usage-row strong{font-size:var(--rail-body)!important;line-height:1.35}
.app-shell code,.app-shell pre{font-family:inherit}

/* v0.60 desktop studio frame: keep the creator in a stable center column and
   reserve a dedicated rail for future campaign/media placements. */
@media(min-width:1101px){
  .app-shell{grid-template-columns:224px minmax(680px,1fr) minmax(360px,420px);grid-template-rows:auto auto;align-items:start}
  .sidebar{grid-column:1;grid-row:1 / span 2}
  .workspace{grid-column:2;grid-row:1;min-width:0}
  .workspace-header{position:sticky;top:0}
  .workspace-scroll{padding-left:clamp(28px,4vw,72px);padding-right:clamp(28px,4vw,72px)}
  .hero-card{max-width:980px}
  .promo-rail{grid-column:3;grid-row:1 / span 2;position:sticky;top:24px;display:flex;flex-direction:column;gap:14px;min-width:0;height:calc(100vh - 48px);margin:24px 24px 24px 8px;padding:22px 18px;border:1px solid #2f383e;border-radius:16px;background:#101519;box-shadow:0 18px 44px rgba(0,0,0,.2)}
  .promo-rail-head{padding:2px 2px 14px;border-bottom:1px solid #293138}
  .promo-rail-kicker{color:#bda779;font-size:10px;font-weight:800;letter-spacing:.16em}
  .promo-rail-head h2{margin:8px 0 0;color:#eef0ec;font-size:20px;letter-spacing:-.03em}
  .promo-rail-head p{margin:6px 0 0;color:#879197;font-size:11px;line-height:1.55}
  .promo-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px dashed #48535a;border-radius:12px;background:#131a1e;color:#b8c0c1;text-align:center}
  .promo-slot--primary{flex:1;min-height:260px;padding:24px}
  .promo-slot-icon{display:grid;place-items:center;width:42px;height:42px;border:1px solid #6a5a3d;border-radius:50%;color:#e8be71;font-size:24px;font-weight:300}
  .promo-slot strong{color:#d8d9d4;font-size:13px;font-weight:750}
  .promo-slot span{color:#77838a;font-size:10px}
  .promo-slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .promo-slot--small{min-height:110px}
  .inspector{grid-column:2;grid-row:2}
}
@media(min-width:1101px) and (max-width:1500px){
  .app-shell{grid-template-columns:210px minmax(620px,1fr) 340px}
  .promo-rail{margin-right:16px;padding-inline:14px}
}
@media(max-width:1100px){
  .app-shell{grid-template-rows:auto auto auto}
  .promo-rail{grid-column:2;grid-row:2}
  .inspector{grid-column:2;grid-row:3}
  .promo-rail{display:flex;flex-direction:column;gap:12px;padding:18px 24px 28px;border-top:1px solid #2a3338;background:#0f1417}
  .promo-rail-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
  .promo-rail-head h2{margin:0;font-size:17px}
  .promo-rail-head p{margin:0;font-size:10px}
  .promo-slot{min-height:90px;padding:14px}
  .promo-slot--primary{min-height:150px}
  .promo-slot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:680px){
  .app-shell{display:flex;flex-direction:column}
  .promo-rail,.inspector{grid-column:auto;grid-row:auto}
  .promo-rail{padding:16px 18px 24px}
  .promo-slot--primary{min-height:130px}
}

/* v0.61 alignment pass: remove the dead gutters around the studio and keep
   the reserved media rail in the same flat, editorial language as the history
   rail. */
@media(min-width:1101px){
  .workspace-scroll{padding-left:40px;padding-right:40px}
  .hero-card{width:100%;max-width:none}
  .paper-shader-header-copy{padding-left:40px;padding-right:40px}
  .header-account{right:40px}
  .promo-rail{top:0;height:100vh;margin:0;padding:26px 18px 24px;border:0;border-left:1px solid #262b30;border-radius:0;background:var(--surface-0);box-shadow:none}
  .promo-rail-head{padding:2px 0 16px}
  .promo-slot{border-radius:10px;background:#101519}
}
@media(min-width:1101px) and (max-width:1500px){
  .workspace-scroll{padding-left:32px;padding-right:32px}
  .paper-shader-header-copy{padding-left:32px;padding-right:32px}
  .header-account{right:32px}
}

/* v0.62 shared header rhythm: all three desktop rails meet on one baseline. */
@media(min-width:1101px){
  /* The sidebar has a 26px outer top inset; subtract it from the brand band
     so its bottom rule lands exactly on the workspace and promo-rail rule. */
  .sidebar-brand{height:86px;min-height:86px;padding-top:0;padding-bottom:18px;align-items:center}
  .paper-shader-header,.paper-shader-header-copy{min-height:112px;height:112px}
  .paper-shader-header-copy{padding-top:18px;padding-bottom:18px}
  .paper-shader-kicker{font-size:30px}
  .paper-shader-header-copy p{font-size:12px}
  .promo-rail{padding-top:0}
  .promo-rail-head{height:112px;min-height:112px;padding-top:0;padding-bottom:16px;justify-content:center}
  .promo-rail-head h2{font-size:18px}
  .promo-rail-head p{font-size:11px}
}

/* v0.64 activity alignment: keep the customer notice on one stable line and
   share the same horizontal rhythm as the studio content above it. */
@media(min-width:1101px){
  .inspector-head,.inspector-scroll{padding-left:40px;padding-right:40px}
  .task-notice{max-width:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.5}
}
@media(min-width:1101px) and (max-width:1500px){
  .inspector-head,.inspector-scroll{padding-left:32px;padding-right:32px}
}

/* Keep the pre-submit guidance as one calm line beneath the primary action. */
.task-status{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.task-meta strong{font-variant-numeric:tabular-nums}
.frame-note{width:100%;border-radius:8px}
.frame-generate-button{min-height:38px;border:1px solid #b9914e;border-radius:8px;background:#d7a85c;color:#211709;font-size:12px;font-weight:850;letter-spacing:.01em}
.frame-generate-button:hover{background:#ecc67f}.frame-generate-button:disabled{cursor:wait;opacity:.65}
.frame-help{margin:0;color:#899298;font-size:10px;line-height:1.55}
.frame-result{display:grid;gap:8px}.frame-result:empty{display:none}
.frame-result img{display:block;width:100%;max-height:210px;object-fit:contain;border-radius:8px;background:#090d0f}
.frame-result-preview{cursor:zoom-in;outline:none;transition:filter .18s ease,transform .18s ease}.frame-result-preview:hover,.frame-result-preview:focus-visible{filter:brightness(1.1);transform:scale(1.01);box-shadow:0 0 0 2px rgba(225,179,105,.8)}
.frame-result-actions{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:7px;color:#c4dfca;font-size:10px;font-weight:700}
.frame-preview-button,.frame-download-button{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:4px 8px;border:1px solid #58636a;border-radius:7px;background:#1a2125;color:#dde4e6;font:inherit;text-decoration:none;cursor:pointer}.frame-preview-button:hover,.frame-download-button:hover{border-color:#d7a85c;color:#f0c777;background:#252d31}.frame-preview-button:focus-visible,.frame-download-button:focus-visible{outline:2px solid #e1b369;outline-offset:2px}
.frame-delete-button{padding:5px 7px;border:1px solid #70474b;border-radius:7px;background:#241619;color:#f0aaa5;font-size:10px}
.frame-delete-button:hover{background:#321c20}
.frame-preview-dialog{width:min(920px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid #4a555b;border-radius:14px;background:#111719;color:#eff3f1;box-shadow:0 24px 80px rgba(0,0,0,.6)}.frame-preview-dialog::backdrop{background:rgba(3,6,8,.78);backdrop-filter:blur(4px)}.frame-preview-shell{display:grid;gap:12px;padding:14px}.frame-preview-image{display:block;width:100%;max-height:calc(100dvh - 130px);object-fit:contain;border-radius:9px;background:#080c0e}.frame-preview-actions{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:900px){.frame-model-row{grid-template-columns:minmax(0,1fr) auto}.frame-cost{grid-column:auto}}

/* A selected task either renders its own video, or an explicit result state. */
.result-card.is-waiting{background:#141a1d}.result-card.is-result-error{background:#181517}.result-waiting{display:grid;justify-items:center;align-content:center;min-height:280px;padding:30px 22px;text-align:center;color:#e8eceb}.result-waiting-spinner{width:38px;height:38px;margin-bottom:15px;border:3px solid #3b464b;border-top-color:#e1b369;border-radius:50%;animation:result-wait-spin 1.05s cubic-bezier(.55,.1,.38,.9) infinite}.result-waiting strong{font-size:15px;letter-spacing:-.01em}.result-waiting p{max-width:31ch;margin:8px 0 13px;color:#aeb8bc;font-size:12px;line-height:1.65}.result-waiting small{max-width:100%;overflow:hidden;color:#748087;font-size:10px;text-overflow:ellipsis;white-space:nowrap;font-variant-numeric:tabular-nums}.result-waiting.is-error strong{color:#e9b0ae}.result-waiting.is-error p{color:#c5aaa8}@keyframes result-wait-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.result-waiting-spinner{animation:none}}

/* Submitted prompt is task metadata, readable without reopening the editor. */
.result-waiting .result-waiting-timer{margin-top:8px;color:#e1b369;font-size:12px;font-weight:800}
.task-prompt-record{display:grid;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid #303940}.task-prompt-record>b{color:#c9d1d5;font-size:11px;letter-spacing:.02em}.task-prompt-record pre{max-height:180px;margin:0;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;color:#d9dedf;font:12px/1.65 inherit}.task-prompt-record.is-empty pre{color:#7e898f}.history-item:has(.history-prompt){grid-template-columns:minmax(0,1fr) auto}.history-prompt{grid-column:1/-1;display:-webkit-box;overflow:hidden;color:#8d979c!important;font-size:10px!important;line-height:1.45!important;-webkit-box-orient:vertical;-webkit-line-clamp:2}

/* Writing controls remain in the prompt surface, immediately before a task
   continues into its materials. The two choices collapse into a clear stack
   on narrow screens without changing keyboard order. */
.prompt-dock .prompt-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px;padding-top:14px;border-top:1px solid #2f373e}
.prompt-dock .prompt-settings-grid .schema-field{padding:0;border:0;border-radius:0;background:transparent}
.prompt-dock .prompt-settings-grid .schema-field label{margin-bottom:7px;color:#c2c8c9;font-size:11px}
.prompt-dock .prompt-settings-grid .schema-field select{min-height:42px;margin-top:0}
.prompt-dock .prompt-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.prompt-dock .prompt-settings-grid .schema-field{min-width:0}
.prompt-dock .prompt-settings-grid select:disabled{opacity:.72;cursor:not-allowed;border-color:#5b4a2f;color:#d7c39a}
.prompt-dock .prompt-settings-grid .schema-field small{margin-top:7px;color:var(--gold-hi);font-size:10px;font-weight:750}
@media(max-width:680px){
  .prompt-dock .prompt-settings-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
    margin-top:14px;
    padding-top:13px;
  }
  .prompt-dock .prompt-settings-grid .schema-field{min-width:0;padding:0 2px}
  .prompt-dock .prompt-settings-grid .schema-field label{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .prompt-dock .prompt-settings-grid select{min-width:0;padding-left:6px;padding-right:6px;font-size:11px}
}
@media(min-width:681px) and (max-width:900px){.prompt-dock .prompt-settings-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.prompt-dock .prompt-settings-grid .schema-field{padding:0 4px}}

/* Make history states easy to scan in the customer rail. */
.history-item span{color:#f0c777!important;font-weight:800}

/* Result actions: one readable control voice across the result card. */
.inspector .result-card-head{align-items:center}
.inspector .result-card h3{font-size:16px!important;line-height:1.35;font-weight:750;color:#edf1ef}
.inspector .result-card .mini-action,
.inspector .result-actions a{
  font-size:13px!important;
  line-height:1.35;
  font-weight:700;
  color:#dfe5e3;
  border-color:#4b565d;
}
.inspector .result-card .mini-action{min-height:36px;padding:0 12px;border-radius:8px;background:#171d21}
.inspector .result-actions{gap:8px}
.inspector .result-actions a{min-height:38px;padding:0 16px;border-radius:8px;background:#171d21}
.inspector .result-actions a:first-child,.inspector .result-actions .result-download{border-color:#4b565d;color:#dfe5e3}
.inspector .result-card .mini-action:hover,.inspector .result-actions a:hover{border-color:#c4a66b;background:#20272c;color:#f3d28b}

/* Global type system: exactly three sizes and one calm neutral text palette. */
:root{
  --font-ui:"Aptos","Segoe UI Variable","Microsoft YaHei",ui-sans-serif,system-ui,sans-serif;
  --type-display:24px;
  --type-body:14px;
  --type-meta:12px;
  --text-main:#edf1ef;
  --text-secondary:#c2c9c8;
  --text-muted:#8c969b;
}
html,body,button,select,textarea,input{font-family:var(--font-ui)!important}
body{font-size:var(--type-body)!important;line-height:1.55;color:var(--text-main)}
h1,h2,.paper-shader-kicker{font-size:var(--type-display)!important;line-height:1.2!important;font-weight:760;color:var(--text-main)}
h3,.media-title,.result-card h3,.history-head h3,.task-title{font-size:var(--type-body)!important;line-height:1.4!important;font-weight:720;color:var(--text-main)}
label,button,select,textarea,input,.prompt-dock-tip,.asset-library-label,.asset-library-btn,.draft-status,.model-meta,.task-status,.cost-hint,.task-step b,.task-notice,.promo-rail-head p,.promo-slot strong{font-size:var(--type-body)!important;line-height:1.5!important;color:var(--text-secondary)}
.eyebrow,.muted,small,.account-support,.header-account-label,.asset-library-status,.schema-field small,.ref-limit-hint,.media-help,.role-count,.counter,.file-picker,.url-row input,.mini-button,.cost-label,.task-badge,.task-step small,.task-meta div,.promo-rail-kicker,.promo-slot span,.history-item small,.history-item span,.credit-usage-row small,.credit-usage-row em,.resolution-cost,.prompt-length-note{font-size:var(--type-meta)!important;line-height:1.5!important;color:var(--text-muted)}
.workspace-header-copy,.header-account,.sidebar-brand,.history-head,.inspector-head,.result-card-head{color:var(--text-main)}
.credits-badge,.cost-value,.frame-cost{font-size:var(--type-body)!important;line-height:1.4!important}
.generate-btn,.frame-generate-button{color:#211709!important}
/* Keep the primary action discoverable if a transient render clears its
   children while the client bundle is initializing. */
#generateBtn:empty::after{content:'↗ 预提交';display:inline-flex;align-items:center;gap:9px;color:#211709;font:inherit}
.result-actions a,.inspector .result-card .mini-action{font-size:var(--type-body)!important;line-height:1.35!important;color:var(--text-secondary)}
.task-status.ok,.identity-ok,.task-badge.completed{color:#b9d7c2}
.task-status:not(.ok),.task-badge.failed{color:#d2a7a3}

/* v0.82: keep activity visible in a dedicated right rail and remove the
   temporary inspiration surface. The creator remains the primary workspace. */
.promo-rail{display:none!important}
@media(min-width:901px){
  .app-shell{
    grid-template-columns:190px minmax(0,1fr) 340px!important;
    grid-template-rows:minmax(0,1fr)!important;
    width:100vw!important;
    height:100vh!important;
    min-height:0!important;
  }
  .sidebar{grid-column:1!important;grid-row:1!important;height:100vh!important}
  .workspace{grid-column:2!important;grid-row:1!important;min-height:0!important}
  .inspector{
    display:flex!important;
    grid-column:3!important;
    grid-row:1!important;
    height:100%!important;
    min-height:0!important;
    border-left:1px solid #262d32;
    border-top:0!important;
  }
  .inspector-head{padding:22px 18px 16px!important}
  .inspector-scroll{
    display:block!important;
    min-height:0!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    padding:16px 18px 32px!important;
  }
  .inspector .task-card,.inspector .result-card{margin-bottom:12px!important}
}

/* API key management: compact multi-key list with per-key quota visibility. */
.client-api-create-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.client-api-create-grid .client-api-label{margin-top:0}.client-api-list{display:grid;gap:8px;margin-top:14px;max-height:260px;overflow:auto}.client-api-item{padding:10px;border:1px solid #39352f;border-radius:10px;background:#111312}.client-api-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.client-api-item-head strong{font-size:12px;color:#f2e7d0}.client-api-item-status{font-size:10px}.client-api-item-status.is-on{color:#b6d8a1}.client-api-item-status.is-off{color:#e6a99c}.client-api-item-key{margin-top:5px;color:#d7b875;font-size:10px}.client-api-item-note{margin-top:4px;color:#9d9b92;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.client-api-item-actions{display:flex;gap:5px;flex-wrap:wrap;margin-top:8px}.client-api-item-actions button{padding:5px 7px!important;font-size:10px!important}.client-api-empty{padding:12px;border:1px dashed #39352f;border-radius:10px;color:#9d9b92;font-size:11px;text-align:center}
@media(max-width:900px){
  .promo-rail{display:none!important}
  .inspector{grid-column:auto!important;grid-row:auto!important}
}

/* v0.83: restore a readable account/history rail after the three-column
   activity layout. The rail must not squeeze history titles into fragments. */
@media(min-width:901px){
  .app-shell{grid-template-columns:224px minmax(0,1fr) 340px!important}
}
@media(min-width:901px) and (max-width:1180px){
  .app-shell{grid-template-columns:210px minmax(0,1fr) 320px!important}
}

/* Unified gold control language for the highlighted utility actions. */
.history-actions .mini-action,
.history-pagination button,
.credit-usage-head button,
.prompt-action-btn,
.asset-library-mention-btn,
.total-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  height:30px;
  padding:0 10px;
  border:1px solid var(--gold)!important;
  border-radius:7px;
  background:var(--gold)!important;
  color:#211709!important;
  font-size:12px!important;
  line-height:1!important;
  font-weight:760;
  white-space:nowrap;
}
.history-actions .mini-action:hover,
.history-pagination button:hover:not(:disabled),
.credit-usage-head button:hover,
.prompt-action-btn:hover,
.asset-library-mention-btn:hover{
  border-color:var(--gold-hi)!important;
  background:var(--gold-hi)!important;
  color:#211709!important;
}
.history-pagination button:disabled{opacity:.42;color:#211709!important}
.history-pagination,.credit-usage-pagination{gap:8px}

/* The pre-submit price is stated once, next to the confirmation action. */
.cost-card{justify-content:flex-end}

/* v0.84: branded waiting interaction supplied by the product team. It stays
   silent, loops continuously, and yields to the real result as soon as one
   is available. */
.result-waiting-video{
  display:block;
  width:min(100%,300px);
  aspect-ratio:16 / 9;
  margin:0 auto 16px;
  object-fit:cover;
  border:1px solid #39444a;
  border-radius:12px;
  background:#0a0d0f;
  box-shadow:0 14px 30px rgba(0,0,0,.24);
}
@media(prefers-reduced-motion:reduce){
  .result-waiting-video{animation:none}
}

/* v0.85: use the supplied Yunshuai wordmark as the sole sidebar brand and
   keep the signed-in phone beside the workspace account label. */
.sidebar-brand{display:flex;align-items:center;justify-content:center;min-height:86px;padding:10px 4px 14px!important}
.sidebar-wordmark{display:block;width:100%;max-width:190px;height:68px;object-fit:contain;border-radius:8px;background:#050505}
.header-account-identity{display:flex;align-items:baseline;justify-content:flex-end;gap:5px;max-width:100%;white-space:nowrap}
.membership-row{display:flex;align-items:center;gap:5px;justify-content:flex-end}.membership-label{color:#b8b5ac;font-size:10px}.membership-badge{font-size:12px;font-weight:800}.membership-star{color:#d5d0c5}.membership-gold{color:#e1b866}.membership-diamond{color:#7dd3c7}
.header-account-identity .header-account-label{letter-spacing:.04em}
.header-account-identity strong{max-width:170px;overflow:hidden;color:#f2eee5;font-size:var(--type-body);font-weight:760;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
@media(max-width:680px){
  .sidebar-wordmark{max-width:220px;height:64px}
  .header-account-identity strong{max-width:135px}
}

/* Static login surface. */
.auth-gate{isolation:isolate;overflow:hidden;background:#0b0d0f!important}
.auth-panel{position:relative;width:min(430px,calc(100% - 32px));padding:38px 36px 32px;border:1px solid rgba(218,180,111,.38);border-radius:18px;background:rgba(17,20,22,.84);box-shadow:0 30px 80px rgba(0,0,0,.52),inset 0 1px 0 rgba(255,255,255,.06);backdrop-filter:blur(14px)}
.auth-brand-lockup{display:flex;justify-content:center;margin:-4px auto 24px;width:min(280px,100%);height:86px;overflow:hidden;border-radius:10px;background:#050505}
.auth-brand-lockup img{display:block;width:100%;height:100%;object-fit:contain}
.auth-panel h2{text-align:center;font-size:25px!important;letter-spacing:-.035em;color:#f3eee4}
.auth-panel>p{text-align:center;color:#aaa9a3}
.auth-panel form button{box-shadow:0 10px 24px rgba(214,168,92,.2)}
@media(max-width:680px){.auth-panel{padding:30px 24px 26px}.auth-brand-lockup{height:72px;margin-bottom:20px}.auth-panel h2{font-size:22px!important}}

/* v0.87 login composition: black-and-cream Yunshuai visual language with a
   single phone flow. The alternate-method icon row is intentionally absent
   and no decorative control receives a click handler. */
.auth-gate{background:#080909!important}
.auth-gate::before,.auth-gate::after{content:"";position:absolute;pointer-events:none;inset:-18%;z-index:-1}
.auth-gate::before{background:radial-gradient(ellipse at 50% 35%,rgba(205,166,99,.14),transparent 42%),radial-gradient(ellipse at 87% 78%,rgba(229,200,157,.08),transparent 28%)}
.auth-gate::after{border:1px solid rgba(232,205,165,.08);transform:rotate(-9deg) scale(1.18);border-radius:42%}
.auth-panel{width:min(600px,calc(100% - 32px));padding:40px 52px 34px;border:1px solid rgba(224,190,132,.72);border-radius:24px;background:rgba(13,14,14,.78);box-shadow:0 28px 100px rgba(0,0,0,.66),inset 0 0 0 1px rgba(255,238,205,.06);backdrop-filter:blur(10px)}
.auth-brand-lockup{width:min(470px,100%);height:154px;margin:-4px auto 24px;background:transparent;border-radius:0}
.auth-brand-lockup img{object-fit:contain;filter:brightness(1.08) contrast(1.04)}
.auth-panel h2{display:none!important}
.auth-panel>p{margin:0 0 26px;color:#ded3c0;font-size:15px;letter-spacing:.03em}
.auth-panel form{gap:14px}
.auth-panel form input{min-height:56px;padding:14px 18px;border:1px solid #4b4b47;border-radius:999px;background:rgba(20,21,21,.72);color:#f5efe4;font-size:15px}
.auth-panel form input::placeholder{color:#85827b}
.auth-panel form button{min-height:58px;margin-top:5px;border-radius:999px;background:#f1d7aa;color:#191510;font-size:17px;font-weight:850;letter-spacing:.08em}
.auth-switch{display:block;margin:18px auto 0;color:#e6c993;font-size:13px}
.auth-status{text-align:center;color:#edaaa0}

/* Login remains a static surface so focus and pointer input stay reliable. */
.auth-gate{isolation:isolate;background:
  radial-gradient(ellipse at 50% 24%,rgba(205,166,99,.16),transparent 42%),
  radial-gradient(ellipse at 88% 82%,rgba(229,200,157,.07),transparent 28%),
  #080909!important}
.auth-panel{z-index:1;isolation:isolate;pointer-events:auto;backdrop-filter:none!important}
.auth-panel form,.auth-panel input,.auth-panel button{position:relative;z-index:2;pointer-events:auto}
.account-action{padding:3px 0;border:0;background:transparent;color:#d5b477;font-size:var(--type-meta);cursor:pointer}
.account-action:hover{color:#f0c777;text-decoration:underline;text-underline-offset:3px}
.account-action-primary{padding:8px 14px;border:1px solid var(--gold);border-radius:8px;background:var(--gold);color:#211709;text-decoration:none!important}
.purchase-inline-btn{flex:0 0 auto;height:32px;padding:0 10px;border:1px solid #705936;border-radius:7px;background:transparent;color:#e6c78f;font-size:10px;font-weight:800;cursor:pointer;white-space:nowrap}
.purchase-inline-btn:hover{border-color:#d7a85c;background:#d7a85c;color:#211709}
.account-purchase-action{padding:6px 11px;font-weight:800;letter-spacing:.01em}
.account-purchase-action:hover{background:#ebc27b;color:#17120b;text-decoration:none}
.password-panel{position:absolute;top:calc(100% + 12px);right:0;z-index:50;width:min(320px,calc(100vw - 36px));display:grid;gap:7px;padding:16px;border:1px solid #6d5838;border-radius:14px;background:#151719;box-shadow:0 18px 42px rgba(0,0,0,.5);text-align:left}
.password-panel.hidden{display:none}
.password-panel label{margin:0;color:#b9bdbe;font-size:var(--type-meta)!important}
.password-panel input{min-height:36px;padding:8px 10px;border:1px solid #30363c;border-radius:8px;background:#0b0d0f;color:var(--text);font-size:var(--type-meta)}
.password-panel-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:5px}
.password-status{min-height:18px;color:#c7d9c9;font-size:var(--type-meta);line-height:1.4}
@media(max-width:680px){.auth-panel{padding:28px 22px 25px}.auth-brand-lockup{height:104px;margin-bottom:18px}.auth-panel>p{font-size:13px;margin-bottom:20px}.auth-panel form input{min-height:50px}.auth-panel form button{min-height:52px}.header-account-actions{flex-wrap:wrap;max-width:210px}.password-panel{right:-4px}}

/* v0.88: the resizer elements remain in the DOM for compatibility, but must
   not occupy grid columns. Removing them from flow keeps all three rails
   joined from the header through the bottom of the scrollable page. */
#leftResizer,#rightResizer{display:none!important}

/* v1.00: carry the paper shader behind the complete studio surface instead of
   stopping at the header band. Content rails remain readable but share one
   continuous background canvas down to the bottom edge. */
.app-shell{position:relative;isolation:isolate;background:#0d0f11!important}
.page-paper-shader{position:fixed!important;z-index:0!important;inset:0!important;width:100vw!important;height:100vh!important;pointer-events:none}
.client-api-fab{position:fixed;right:22px;bottom:22px;z-index:1200;display:flex;align-items:center;gap:8px;border:1px solid #d7a85c80;border-radius:12px;padding:10px 14px;background:#181513eF;color:#f5d79e;box-shadow:0 12px 32px #0008;backdrop-filter:blur(12px);font:700 12px/1.2 inherit;cursor:pointer;transition:transform .2s ease,background .2s ease,border-color .2s ease}.client-api-fab:hover{transform:translateY(-2px);background:#252019f2;border-color:#d7a85c}.client-api-fab span{font-size:18px;line-height:10px}.client-api-panel{position:fixed;right:22px;bottom:74px;z-index:1201;width:min(360px,calc(100vw - 32px));padding:18px;border:1px solid #d7a85c66;border-radius:16px;background:#171716f5;color:#f3eee4;box-shadow:0 20px 60px #000b;backdrop-filter:blur(16px)}.client-api-panel.hidden{display:none}.client-api-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px}.client-api-kicker{font-size:10px;letter-spacing:.13em;color:#caa66a}.client-api-head h2{margin:4px 0 0;font-size:18px;line-height:1.2}.client-api-close{border:0;background:transparent;color:#bcb4a8;font-size:22px;line-height:1;cursor:pointer}.client-api-copy{margin:0 0 14px;color:#bdb6ab;font-size:12px;line-height:1.6}.client-api-label{display:block;margin:10px 0 5px;color:#d8c18f;font-size:11px;font-weight:700}.client-api-panel input{box-sizing:border-box;width:100%;height:34px;border:1px solid #39352f;border-radius:8px;padding:0 9px;background:#0e0e0d;color:#e9e1d3;font-size:11px}.client-api-copy-row{display:grid;grid-template-columns:1fr auto;gap:6px}.client-api-panel button:not(.client-api-close){border:1px solid #4b4337;border-radius:8px;padding:7px 10px;background:#27231d;color:#e5d4ac;font-size:11px;font-weight:700;cursor:pointer}.client-api-panel button:not(.client-api-close):hover{border-color:#d7a85c;color:#ffe5aa}.client-api-state{min-height:18px;margin:12px 0 8px;color:#a9a095;font-size:11px}.client-api-actions{display:flex;gap:7px;flex-wrap:wrap}.client-api-actions .client-api-primary{background:#d7a85c;color:#1b160f;border-color:#d7a85c}.client-api-actions .client-api-danger{color:#efb0a5}.client-api-secret{display:grid;gap:8px;margin-top:12px;padding:10px;border:1px dashed #d7a85c80;border-radius:9px;background:#241e15;color:#e5d4ac;font-size:11px}.client-api-secret.hidden{display:none}.client-api-secret code{display:block;overflow-wrap:anywhere;color:#fff1cb;font:11px/1.5 ui-monospace,monospace}
@media(max-width:680px){.client-api-fab{right:14px;bottom:14px}.client-api-panel{right:14px;bottom:66px}}

/* v1.23: unified typography for the highlighted guidance, prompt, history,
   upload and ledger text. These areas now share one family, size, leading and
   neutral tone; semantic action/amount accents remain on their controls. */
:root{--highlight-font:"Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,sans-serif;--highlight-size:12px;--highlight-leading:1.5;--highlight-color:#d2d6d4;--highlight-muted:#aeb6b9}
body .app-shell.app-shell .system-announcement-head,
body .app-shell.app-shell .system-announcement p,
body .app-shell.app-shell .task-notice,
body .app-shell.app-shell .task-prompt-record>b,
body .app-shell.app-shell .task-prompt-record pre,
body .app-shell.app-shell .history-prompt,
body .app-shell.app-shell .credit-usage-row b,
body .app-shell.app-shell .credit-usage-row small,
body .app-shell.app-shell .credit-usage-row em,
body .app-shell.app-shell .file-picker,
body .app-shell.app-shell .file-picker em,
body .app-shell.app-shell .upload-status,
body .app-shell.app-shell .asset-library-mention-hint,
body .app-shell.app-shell .result-waiting p,
body .app-shell.app-shell .result-waiting small,
body .app-shell.app-shell .task-status,
body .app-shell.app-shell .history-sync-status{
  font-family:var(--highlight-font)!important;
  font-size:var(--highlight-size)!important;
  line-height:var(--highlight-leading)!important;
  letter-spacing:0!important;
}
body .app-shell.app-shell .system-announcement-head,
body .app-shell.app-shell .task-prompt-record>b{color:var(--highlight-color)!important;font-weight:700}
body .app-shell.app-shell .system-announcement p,
body .app-shell.app-shell .task-notice,
body .app-shell.app-shell .task-prompt-record pre,
body .app-shell.app-shell .history-prompt,
body .app-shell.app-shell .credit-usage-row b,
body .app-shell.app-shell .file-picker,
body .app-shell.app-shell .upload-status,
body .app-shell.app-shell .asset-library-mention-hint,
body .app-shell.app-shell .result-waiting p,
body .app-shell.app-shell .result-waiting small,
body .app-shell.app-shell .history-sync-status{color:var(--highlight-muted)!important}
body .app-shell.app-shell .credit-usage-row small,
body .app-shell.app-shell .credit-usage-row em{color:var(--highlight-muted)!important}
body .app-shell.app-shell .file-picker span{font:700 var(--highlight-size)/var(--highlight-leading) var(--highlight-font)!important;color:var(--highlight-color)!important}
body .app-shell.app-shell .task-status{color:var(--highlight-color)!important}

/* v1.24: make confirmed @asset references visible inside the prompt editor. */
body .app-shell.app-shell .prompt-editor{position:relative!important;isolation:isolate}
body .app-shell.app-shell .prompt-editor .prompt-highlight{
  display:none!important;
}
body .app-shell.app-shell .prompt-editor #prompt{
  position:relative!important;z-index:2!important;background:#111619!important;
  color:var(--text-main)!important;-webkit-text-fill-color:var(--text-main)!important;caret-color:var(--line-gold-hi)!important;
  text-shadow:none!important;
}
body .app-shell.app-shell .prompt-editor #prompt::placeholder{color:var(--text-muted)!important;-webkit-text-fill-color:var(--text-muted)!important;opacity:1!important}
body .app-shell.app-shell .prompt-editor #prompt::selection{background:rgba(240,199,119,.36)!important;color:#fffaf0!important}
body .app-shell.app-shell .prompt-editor .prompt-asset-mention{
  display:inline!important;padding:1px 4px!important;border-radius:4px!important;
  background:rgba(215,168,92,.22)!important;color:#f0c777!important;
  font-family:inherit!important;font-size:inherit!important;line-height:inherit!important;font-weight:800!important;
  box-shadow:inset 0 0 0 1px rgba(240,199,119,.42)!important;
}
.prompt-asset-mentions{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:9px 0 2px;padding:8px 0 0;border-top:1px solid rgba(215,168,92,.22)}
.prompt-asset-mentions-label{color:var(--text-muted);font-size:11px;font-weight:700}
.prompt-asset-mention-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:3px 7px;border:1px solid rgba(240,199,119,.55);border-radius:5px;background:rgba(215,168,92,.16);color:var(--gold-hi);font-size:12px;font-weight:850;line-height:1.35}
@media(max-width:680px){.prompt-asset-mentions{gap:6px}.prompt-asset-mentions-label{width:100%}.prompt-asset-mention-tag{max-width:100%}}
.sidebar,.workspace,.inspector{position:relative;z-index:1}
.sidebar{background:rgba(14,16,18,.94)!important}
.workspace,.workspace-header{background:rgba(17,20,23,.94)!important}
.inspector{background:rgba(13,15,17,.94)!important}
@media(min-width:901px){
  .app-shell{grid-template-columns:224px minmax(0,1fr) 340px!important;grid-template-rows:minmax(0,1fr)!important;align-items:stretch!important}
  .sidebar,.workspace,.inspector{min-height:100vh!important}
}

/* v0.89: activity guidance must remain fully readable. Let the header grow
   with the Chinese copy instead of clipping it to a single line. */
.inspector-head .task-notice{
  max-width:100%!important;
  margin:9px 0 0!important;
  white-space:normal!important;
  overflow:visible!important;
  text-overflow:clip!important;
  overflow-wrap:anywhere;
  word-break:break-word;
}
@media(min-width:901px){
  .inspector-head{height:auto!important;min-height:112px!important;align-items:flex-start!important}
}

/* v0.90: the studio header and the activity header share one desktop band.
   The activity copy now wraps by design, so the workspace header must use the
   same measured height for their bottom rules to meet on a single baseline. */
@media(min-width:901px){
  .workspace-header.paper-shader-header,
  .workspace-header.paper-shader-header .paper-shader-header-copy,
  .inspector-head{
    height:144px!important;
    min-height:144px!important;
  }
  .inspector-head{align-items:flex-start!important;}
}

.mention-empty{padding:10px 9px;color:#92999d;font-size:11px;line-height:1.4}

/* v0.93: compact balance display with a consistent diamond mark and rate. */
.credits-row{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.credit-rate{color:#c8b27f;font-size:var(--type-meta);font-weight:700;white-space:nowrap}
.frozen-credits-badge{color:#aeb6bc;font-size:var(--type-meta);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.credit-freeze-hint{margin:8px 0 0;color:var(--muted);font-size:var(--type-meta);line-height:1.5}
@media(max-width:680px){.credits-row{gap:7px}.credit-rate{font-size:10px}}

/* v0.96 prompt workspace: give long prompts a comfortable editing area while
   keeping the control stack compact on phones. */
.prompt-dock textarea{min-height:240px;max-height:60vh;overflow-y:auto}
@media(max-width:680px){.prompt-dock textarea{min-height:190px;max-height:52vh}}

/* Purchase-page visual language: warm graphite surfaces, quiet gold accents,
   and restrained motion shared across the customer workspace. */
:root{font-family:"Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,sans-serif;--ink:#0b0d0f;--cloth:#131719;--cloth-2:#171c1e;--seam:#303940;--text:#f3eee4;--muted:#a5a19a;--gold:#d7a85c;--gold-hi:#f0c777;--mint:#b6d2bd;--red:#ee8f82;--radius:14px}
body{background:radial-gradient(900px 500px at 82% -10%,rgba(215,168,92,.15),transparent 62%),#0b0d0f;color:var(--text)}
.app-shell{background:radial-gradient(900px 620px at 68% -16%,rgba(215,168,92,.08),transparent 58%),#0b0d0f!important}
.page-paper-shader{opacity:.18!important;mix-blend-mode:screen}
.sidebar{background:rgba(19,23,25,.94)!important;border-right-color:#303940!important}
.workspace,.workspace-header{background:rgba(19,23,25,.92)!important}
.inspector{background:rgba(15,18,19,.96)!important}
.sidebar-brand{border-bottom-color:#303940!important}.sidebar-brand h1{font-weight:800;letter-spacing:-.035em}.sidebar-brand p{color:#a5a19a}
.workspace-header{border-bottom-color:#303940!important}.workspace-header .eyebrow{color:#c4a36e!important}.paper-shader-header::after{border-bottom-color:rgba(215,168,92,.2)!important;box-shadow:inset 0 -60px 90px rgba(4,6,8,.34)}
.prompt-dock,.media-box,.schema-field,.media-role,.task-card,.result-card{border-color:#303940!important;background:rgba(23,28,30,.9)!important;box-shadow:0 18px 42px rgba(0,0,0,.16)}
.prompt-dock:hover,.media-box:hover,.schema-field:hover,.media-role:hover{border-color:#4a5359!important}
.prompt-dock:focus-within{border-color:#9a7743!important;box-shadow:0 18px 42px rgba(0,0,0,.2),0 0 0 2px rgba(240,199,119,.18)!important}
select,textarea,input[type=text],input[type=number],input[type=url],.auth-panel input{border-color:#303940!important;background:#0f1315!important;color:#f3eee4!important}
select:hover,textarea:hover,input:hover{border-color:#59656d!important}.file-picker{border-color:#59656d!important;background:#151a1c!important}.file-picker:hover{border-color:#d7a85c!important;background:#1b201f!important}
.credits-badge,.cost-card,.total-badge,.customer-mode-badge{border-color:#6b5532!important;background:#1b1812!important;color:#f0c777!important}
.cost-card{box-shadow:0 12px 28px rgba(0,0,0,.18)}.generate-btn{background:#d7a85c!important;color:#1a140b!important;box-shadow:0 10px 22px rgba(215,168,92,.16)!important}.generate-btn:hover{background:#f0c777!important;transform:translateY(-1px);box-shadow:0 13px 28px rgba(215,168,92,.24)!important}
.pill-btn.accent{background:#d7a85c!important;border-color:#d7a85c!important;color:#1a140b!important}.pill-btn.accent:hover{background:#f0c777!important;border-color:#f0c777!important}
.prompt-action-btn,.asset-library-btn,.mini-action,.mini-button,.square-action{border-color:#4b555d!important;background:#171c1e!important;color:#d8c29a!important}.prompt-action-btn:hover,.asset-library-btn:hover,.mini-action:hover,.mini-button:hover,.square-action:hover{border-color:#9a7743!important;background:#211c14!important;color:#f0c777!important}
.history-item{border-bottom-color:#303940!important}.history-item:hover{background:#1b201f!important}.task-badge,.plan-dot{border-color:#6b5532!important;color:#f0c777!important}.task-badge.completed{border-color:#385344!important;color:#b6d2bd!important}
.auth-gate{background:radial-gradient(700px 500px at 70% 0%,rgba(215,168,92,.13),transparent 66%),#0b0d0f!important}.auth-panel{border-color:#303940!important;border-radius:14px!important;background:#131719!important;box-shadow:0 30px 80px rgba(0,0,0,.36)!important}.auth-panel h2{font-weight:800}.auth-panel form button{background:#d7a85c!important;color:#1a140b!important;transition:background .18s ease,transform .18s ease}.auth-panel form button:hover{background:#f0c777!important;transform:translateY(-1px)}.auth-switch{color:#f0c777!important}
.studio-panel>*{animation:purchase-fade-in .28s ease both}.studio-panel>*:nth-child(2){animation-delay:.04s}.studio-panel>*:nth-child(3){animation-delay:.08s}.studio-panel>*:nth-child(4){animation-delay:.12s}
@keyframes purchase-fade-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Gold-line pass: unify the canvas background and use one restrained gold
   seam for structural borders across the customer home screen. */
.app-shell,.sidebar,.workspace,.workspace-header,.inspector,.workspace-scroll{background:#131719!important}
.app-shell{background:radial-gradient(900px 620px at 70% -16%,rgba(215,168,92,.08),transparent 58%),#131719!important}
.sidebar,.workspace-header,.inspector,.sidebar-brand,.prompt-dock,.media-box,.schema-field,.media-role,.task-card,.result-card,.debug-panel,.account-identity,.account-add-panel,.history-card,.credit-usage-panel,.asset-library-panel,.upload-panel,.advanced-panel,.cost-card,.file-picker,.auth-panel,.auth-panel input,select,textarea,input[type=text],input[type=number],input[type=url]{border-color:#6b5532!important}
.pane-resizer{background:#6b5532!important}.pane-resizer:hover{background:#d7a85c!important}
.history-item,.task-meta,.prompt-dock textarea,.upload-panel,.advanced-panel{border-color:#6b5532!important}
.platform-nav{border-bottom-color:#6b5532!important}.platform-nav-brand,.platform-nav-section,.header-account{border-color:#6b5532!important}
.auth-panel{box-shadow:0 30px 80px rgba(0,0,0,.36),0 0 0 1px rgba(215,168,92,.12)!important}

/* v0.94: give both utility rails a little more breathing room while the
   center studio remains fluid. */
@media(min-width:1200px){
  .app-shell{grid-template-columns:260px minmax(0,1fr) 380px!important}
}
@media(min-width:901px) and (max-width:1199px){
  .app-shell{grid-template-columns:244px minmax(0,1fr) 360px!important}
}

/* v0.95: image references use a visual thumbnail grid; other media retain
   the compact filename row treatment. */
.media-role[data-role="image_references"] .role-list,
.media-role[data-role="start_image"] .role-list,
.media-role[data-role="end_image"] .role-list{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:9px}
.ref-row-image{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;min-height:118px;padding:0;overflow:hidden;border:1px solid #303a40;background:#0b0f11}
.ref-row-image .ref-thumb{display:block;width:100%;height:88px;object-fit:cover;background:#11171b}
.ref-row-image>span{padding:7px 26px 7px 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#d1d6d3;font-size:10px}
.ref-row-image>button{position:absolute;top:5px;right:5px;width:24px;height:24px;border:1px solid rgba(255,255,255,.18);border-radius:6px;background:rgba(7,10,12,.78);color:#f0b5a9;font-size:16px;line-height:1}
.ref-row-image>button:hover{border-color:#d7a85c;background:#211b12;color:#f0c777}

/* v0.97: desktop brand, studio and activity bands end on one shared baseline. */
@media(min-width:901px){
  .sidebar-brand{height:118px!important;min-height:118px!important}
}

/* v0.98: enlarge the Yunshuai mark while preserving its native 16:9 ratio. */
.sidebar-wordmark{max-width:240px!important;height:94px!important}
@media(max-width:680px){.sidebar-wordmark{max-width:240px!important;height:76px!important}}

/* Ensure the continuous canvas remains visible beneath every desktop and
   mobile surface after the component-specific theme rules above. */
.page-paper-shader{z-index:0!important}
.workspace-header.paper-shader-header{background:rgba(17,21,25,.9)!important}
.sidebar,.workspace,.inspector{background-color:rgba(14,16,18,.94)!important}
.workspace{background-color:rgba(17,20,23,.94)!important}

/* v1.01: keep the three desktop rails on one continuous surface.  The
   previous per-rail fills made the empty areas beside the stacked studio
   sections read as detached bands, especially where the center column has a
   natural gap between panels.  A shared translucent surface lets the paper
   shader and page background run uninterrupted from top to bottom. */
.app-shell{background:transparent!important}
.sidebar,.workspace,.inspector,
.workspace-header,.inspector-head,.sidebar-history{
  background:rgba(14,17,19,.88)!important;
}
.workspace-scroll,.inspector-scroll{background:transparent!important}
@media(min-width:901px){
  .sidebar,.workspace,.inspector{min-height:100vh!important}
}

/* v1.02: remove the last perceived seam between the upper controls and the
   lower reference section.  All three rails now share the same base plate;
   individual cards keep their borders so the content hierarchy remains clear
   while the empty side areas no longer read as a separate layer. */
.app-shell{background:#15191c!important}
.sidebar,.workspace,.inspector,
.workspace-header,.inspector-head,.sidebar-history,
.workspace-scroll,.inspector-scroll{background:#15191c!important}
.page-paper-shader{opacity:.32!important}

/* v1.03: the reference-material section belongs to the same creation flow as
   the prompt controls above it.  Dock the two surfaces together so the
   workspace does not appear to stop and restart at the 34px card margin. */
@media(min-width:681px){
  .workspace-scroll .prompt-dock{margin-bottom:0!important;border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
  .workspace-scroll #schemaFields{margin-top:20px!important;gap:10px!important;align-items:stretch!important}
  .workspace-scroll #schemaFields .schema-field{min-height:104px!important;box-sizing:border-box!important;padding:15px 16px 14px!important;border-radius:11px 11px 5px 5px!important;background:rgba(23,28,30,.94)!important}
  .workspace-scroll #schemaFields .schema-field select{min-height:43px!important}
  .workspace-scroll .media-box{margin-top:0!important;border-top-left-radius:0!important;border-top-right-radius:0!important;border-top-color:#303940!important}
  .workspace-scroll #mediaFields .media-box{border-radius:5px 5px 14px 14px!important;padding-top:19px!important}
}

/* v1.04: use the supplied transparent wordmark as a full-width brand plate.
   Its native 16:9 canvas is kept intact, so the cat mark and underline stay
   fully visible over the existing dark surface without a black image box. */
@media(min-width:681px){
  /* Align the brand divider with the workspace header divider.  The sidebar
     itself used to add a 26px top inset, pushing this rule below the header. */
  .sidebar{padding-top:0!important}
  .sidebar-brand{height:144px!important;min-height:144px!important;padding:0 0 10px!important;align-items:flex-start!important}
  .sidebar-wordmark{display:block;width:100%!important;max-width:none!important;height:auto!important;aspect-ratio:1672 / 941;object-fit:contain!important;border-radius:0!important;background:transparent!important}
}

/* v1.05: lock the utility rails to the viewport.  Only the center studio
   surface participates in page scrolling; the history and activity rails keep
   their own bounded lists so their headers never drift away from the content. */
@media(min-width:901px){
  html,body{height:100%!important;overflow:hidden!important}
  .app-shell{height:100vh!important;min-height:0!important;overflow:hidden!important;grid-template-rows:minmax(0,1fr)!important}
  .sidebar,.workspace,.inspector{height:100vh!important;min-height:0!important;overflow:hidden!important}
  .workspace{display:flex!important;flex-direction:column!important;min-width:0!important}
  .workspace-header{flex:0 0 auto!important}
  .workspace-scroll{flex:1 1 auto!important;min-height:0!important;overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain;scrollbar-gutter:stable}
  .sidebar-history{min-height:0!important;overflow:hidden!important}
  .history-list,.credit-usage-list,.inspector-scroll{overscroll-behavior:contain}
}

/* v1.06: match the studio label to the activity rail and reserve the header
   center for the Yunshuai wordmark.  The three header blocks now share one
   baseline, while account controls retain their stable right-side position. */
.sidebar-studio-head{flex:0 0 auto;padding:22px 20px 16px;border-bottom:1px solid #2a3035}
.sidebar-studio-head h3{margin:5px 0 0;font-size:17px;line-height:1.2;letter-spacing:-.025em}
.sidebar-studio-head p{max-width:100%;margin:9px 0 0;color:var(--text-muted);font-size:var(--type-meta);line-height:1.5;overflow-wrap:anywhere}
.workspace-header.paper-shader-header{position:relative;justify-content:center}
.workspace-brand-center{position:absolute;left:50%;top:50%;display:grid;place-items:center;transform:translate(-50%,-50%);width:min(248px,30vw);pointer-events:none}
.workspace-wordmark{display:block;width:100%;height:auto;aspect-ratio:1672 / 941;object-fit:contain}
.workspace-header.paper-shader-header{overflow:visible!important}
.workspace-brand-center{z-index:4!important;overflow:visible!important}
.workspace-wordmark{max-height:132px}
.workspace-header .paper-shader-header-copy{display:none!important}
@media(min-width:901px){
  .sidebar-studio-head,.workspace-header.paper-shader-header,.inspector-head{height:144px!important;min-height:144px!important}
  .sidebar-studio-head{display:flex;flex-direction:column;justify-content:flex-start;padding:22px 20px 16px}
}
@media(min-width:901px) and (max-width:1500px){
  /* The account block occupies the right side of a narrow workstation. Shift
     the mark within the remaining visual field so neither group overlaps. */
  .workspace-brand-center{left:calc(50% - 122px);width:208px}
}
@media(max-width:900px){
  .sidebar-studio-head{padding:18px}
  .workspace-brand-center{width:min(210px,44vw)}
}
@media(max-width:680px){
  .sidebar-studio-head{padding:16px 18px}
  .sidebar-studio-head h3{font-size:18px}
  .workspace-brand-center{width:154px}
}

/* v1.07: the three rail headers share one uninterrupted divider and base
   surface.  The activity heading mirrors the studio heading, with a small
   lower optical offset requested for the denser right-hand rail. */
.sidebar-studio-head,.workspace-header.paper-shader-header,.inspector-head{border-bottom:1px solid #2a3035!important}
.sidebar,.workspace,.inspector,.sidebar-studio-head,.workspace-header,.workspace-scroll,.inspector-head,.inspector-scroll,.sidebar-history{background:#15191c!important}
.inspector-head{padding-top:28px!important}
.inspector-head h3{margin:5px 0 0!important;font:760 17px/1.2 inherit!important;letter-spacing:-.025em!important}
.inspector-head .task-notice{margin:9px 0 0!important;color:var(--text-muted)!important;font-size:var(--type-meta)!important;line-height:1.5!important}
@media(max-width:900px){.inspector-head{padding-top:22px!important}}

/* v1.08: restore the desktop studio as one stable three-rail workstation.
   Earlier visual additions used overlapping rail and header rules, which
   allowed the regions to drift apart at common desktop widths. This final
   layout layer owns only the shell geometry and scrolling boundaries. */
@media(min-width:901px){
  html,body{
    width:100%;
    height:100%;
    overflow:hidden!important;
  }

  .app-shell{
    display:grid!important;
    grid-template-columns:260px minmax(0,1fr) 380px!important;
    grid-template-rows:minmax(0,1fr)!important;
    width:100vw!important;
    height:100vh!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#15191c!important;
  }

  .sidebar,.workspace,.inspector{
    height:100vh!important;
    min-height:0!important;
    overflow:hidden!important;
    background:#15191c!important;
  }

  .sidebar{
    display:flex!important;
    flex-direction:column!important;
    padding:0 18px 16px!important;
    border-right:1px solid #2a3035!important;
  }

  .workspace{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
    border-right:1px solid #2a3035!important;
  }

  .inspector{
    display:flex!important;
    flex-direction:column!important;
    min-width:0!important;
  }

  .sidebar-studio-head,.workspace-header.paper-shader-header,.inspector-head{
    height:144px!important;
    min-height:144px!important;
    flex:0 0 144px!important;
    margin:0!important;
    border-bottom:1px solid #2a3035!important;
    background:#15191c!important;
  }

  .sidebar-studio-head{
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    padding:22px 2px 16px!important;
  }

  .workspace-header.paper-shader-header{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
    overflow:hidden!important;
  }

  .workspace-brand-center{
    position:absolute!important;
    left:50%!important;
    top:50%!important;
    width:min(248px,30vw)!important;
    transform:translate(-50%,-50%)!important;
  }

  .header-account{
    top:20px!important;
    right:34px!important;
  }

  .inspector-head{
    display:flex!important;
    align-items:flex-start!important;
    padding:22px 20px 16px!important;
  }

  .workspace-scroll{
    flex:1 1 auto!important;
    min-height:0!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior:contain!important;
    scrollbar-gutter:stable!important;
    background:#15191c!important;
  }

  .sidebar-history,.inspector-scroll{
    min-height:0!important;
    background:#15191c!important;
  }

  .sidebar-history{overflow:hidden!important}
  .history-list,.credit-usage-list,.inspector-scroll{
    overscroll-behavior:contain!important;
  }
}

@media(min-width:901px) and (max-width:1199px){
  .app-shell{grid-template-columns:244px minmax(0,1fr) 360px!important}
  .workspace-brand-center{width:208px!important}
  .header-account{right:24px!important}
}

/* v1.09: keep the centered brand anchored when the redeem form receives
   focus.  The account controls may grow below the header band, but they must
   not resize, scroll, or clip the header/logo layer. */
.workspace-header.paper-shader-header{
  overflow:visible!important;
}
.workspace-brand-center{
  pointer-events:none!important;
  z-index:5!important;
}
.workspace-wordmark{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-height:none!important;
  object-fit:contain!important;
}
.header-account{
  max-width:min(340px,calc(100% - 24px));
  max-height:calc(100% - 12px);
  overflow:visible!important;
  scrollbar-width:none;
}
.header-account::-webkit-scrollbar{display:none}
.redeem-card-form{position:relative;z-index:6}
@media(min-width:901px){
  .workspace-header.paper-shader-header{isolation:isolate;overflow:visible!important}
  .workspace-brand-center{left:50%!important;top:50%!important}
}

/* Keep the redeem control in place while lifting the account summary slightly
   on the compact header, stopping above the lower header guide line. */
@media(max-width:680px){
  .header-account-identity,
  .header-account .credits-row,
  .header-account .header-account-actions{
    position:relative;
    top:-32px;
  }
}

/* v1.10: keep the account summary and card redemption control inside the
   compact header band. The visible label is redundant with the placeholder,
   so the single-line control now occupies the former empty header slot. */
@media(min-width:901px){
  .header-account{
    top:10px!important;
    gap:3px!important;
  }

  .redeem-card-form{
    width:266px;
    margin-top:2px;
    padding-top:5px;
  }

  .redeem-card-row{
    height:32px;
  }
}

/* v1.11 platform shell: Open WebUI-inspired monochrome navigation layer.
   This owns presentation only. Existing studio IDs, upload controls, task
   polling and account actions stay untouched. */
:root{
  --gold:#d7dce3;
  --gold-hi:#f5f7fa;
  --seam:#2b3138;
  --text:#f3f5f7;
  --muted:#929aa4;
  --surface-0:#0b0d0f;
  --surface-1:#111418;
  --surface-2:#171b20;
}

.platform-nav{
  grid-column:auto!important;
  grid-row:auto!important;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:22px;
  padding:18px 12px 14px;
  border-right:1px solid #292f36;
  background:#0c0f12;
  color:#e7eaee;
  z-index:3;
}
.platform-nav-brand{display:grid;justify-items:center;align-content:center;gap:7px;min-height:148px;padding:12px 8px 14px;border-bottom:1px solid #252b31}
.platform-nav-brand img{display:block;width:100%;height:104px;object-fit:contain;object-position:center center;filter:grayscale(1) brightness(2.2);opacity:.92}
.platform-nav-brand span{color:#8e97a1;font-size:9px;font-weight:800;letter-spacing:.18em;text-align:center}
.platform-nav-section{display:grid;gap:4px}
.platform-nav-section-label{padding:0 10px 5px;color:#727b85;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.platform-nav-item{position:relative;display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:1px solid transparent;border-radius:8px;background:transparent;color:#aeb6bf;font-size:12px;font-weight:650;text-align:left;text-decoration:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease}
.platform-nav-item:hover{background:#171c22;border-color:#2e353d;color:#f4f6f8}
.platform-nav-item.is-active{background:#e8ebef;border-color:#f4f6f8;color:#111419;box-shadow:0 8px 18px rgba(0,0,0,.18)}
.platform-nav-item.is-active .platform-nav-icon{color:#111419}
.platform-nav-item:disabled{cursor:default;opacity:.55}
.platform-nav-item:disabled:hover{background:transparent;border-color:transparent;color:#aeb6bf}
.platform-nav-icon{display:grid;place-items:center;width:17px;color:#8d97a2;font-size:16px;line-height:1}
.platform-nav-item small{margin-left:auto;color:#69727d;font-size:9px;font-weight:600}
.platform-nav-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding:12px 9px 0;border-top:1px solid #252b31;color:#737c86;font-size:9px}
.platform-nav-status{display:inline-flex;align-items:center;gap:6px}.platform-nav-status i{width:6px;height:6px;border-radius:50%;background:#84b79a;box-shadow:0 0 0 3px rgba(132,183,154,.12)}
.platform-nav-version{font-variant-numeric:tabular-nums}

.platform-page-heading{position:absolute;left:28px;top:25px;z-index:4;display:grid;gap:3px;pointer-events:none}
.platform-page-kicker{color:#7f8994;font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.platform-page-heading h1{margin:0;color:#f4f6f8;font-size:24px;font-weight:720;letter-spacing:-.035em;line-height:1.15}
.platform-page-heading p{margin:2px 0 0;color:#8d969f;font-size:11px;line-height:1.4}

@media(min-width:1200px){
  .app-shell{grid-template-columns:188px 250px minmax(0,1fr) 380px!important;grid-template-rows:minmax(0,1fr)!important}
  .platform-nav,.sidebar,.workspace,.inspector{grid-column:auto!important;grid-row:auto!important;height:100vh!important;min-height:0!important;overflow:hidden!important}
  .workspace-header.paper-shader-header{justify-content:flex-end!important;padding-right:34px!important}
  .workspace-brand-center{display:none!important}
  .platform-page-heading{left:30px}
}
@media(min-width:901px) and (max-width:1199px){
  .app-shell{grid-template-columns:64px 214px minmax(320px,1fr) 320px!important;grid-template-rows:minmax(0,1fr)!important}
  .platform-nav,.sidebar,.workspace,.inspector{grid-column:auto!important;grid-row:auto!important;height:100vh!important;min-height:0!important;overflow:hidden!important}
  .platform-nav{align-items:center;padding:14px 8px 12px;gap:14px}
  .platform-nav-brand{width:48px;min-height:0;height:auto;padding:3px 0 12px;justify-items:center}.platform-nav-brand img{width:42px;height:38px;object-position:center}.platform-nav-brand span{display:none}
  .platform-nav-section{width:48px}.platform-nav-section-label,.platform-nav-item span:not(.platform-nav-icon),.platform-nav-item small,.platform-nav-footer{display:none}
  .platform-nav-item{justify-content:center;min-height:38px;padding:0}.platform-nav-item.is-active{box-shadow:none}.platform-nav-icon{width:auto}
  .platform-page-heading{left:24px}.workspace-brand-center{display:none!important}.workspace-header.paper-shader-header{justify-content:flex-end!important;padding-right:24px!important}
}
@media(max-width:900px){
  .platform-nav{order:0;display:flex;flex-direction:row;align-items:center;gap:10px;width:100%;min-height:58px;height:58px;padding:8px 12px;border-right:0;border-bottom:1px solid #292f36;overflow-x:auto}
  .platform-nav-brand{display:flex;align-items:center;gap:9px;min-width:128px;min-height:0;height:auto;padding:0 10px 0 0;border:0;border-right:1px solid #292f36}.platform-nav-brand img{width:86px;height:34px}.platform-nav-brand span{font-size:8px;white-space:nowrap}
  .platform-nav-section{display:flex;align-items:center;gap:4px;min-width:max-content}.platform-nav-section-label,.platform-nav-footer{display:none}
  .platform-nav-item{width:auto;min-height:36px;padding:0 10px;white-space:nowrap}.platform-nav-item small{display:none}
  .platform-page-heading{position:relative;left:auto;top:auto;display:block;padding:0 18px;pointer-events:auto}.platform-page-heading h1{font-size:21px}.platform-page-heading p{display:none}
  .workspace-header.paper-shader-header{display:grid!important;grid-template-columns:1fr auto!important;align-items:center!important;gap:8px;padding:16px 18px!important;min-height:116px!important}
  .workspace-brand-center{display:none!important}.header-account{position:relative!important;top:auto!important;right:auto!important;max-width:220px!important}
  .app-shell{display:flex!important;flex-direction:column!important;height:auto!important;min-height:100vh!important}.platform-nav,.sidebar,.workspace,.inspector{height:auto!important;min-height:0!important;overflow:visible!important}
  .sidebar{order:1}.workspace{order:2}.inspector{order:3}
}

/* v1.13: compact the three desktop rail headers into one aligned title band.
   This intentionally comes after the legacy header overrides above so their
   baseline, type scale and lower divider remain identical at every wide size. */
@media(min-width:901px){
  .sidebar-studio-head,
  .workspace-header.paper-shader-header,
  .inspector-head{
    height:112px!important;
    min-height:112px!important;
    flex-basis:112px!important;
    box-sizing:border-box!important;
  }

  .sidebar-studio-head,
  .inspector-head{
    padding-top:18px!important;
    padding-bottom:14px!important;
  }

  .platform-page-heading{
    top:18px!important;
    gap:3px!important;
  }

  .sidebar-studio-head h3,
  .platform-page-heading h1,
  .inspector-head h3{
    margin:4px 0 0!important;
    font-size:20px!important;
    font-weight:760!important;
    line-height:1.2!important;
    letter-spacing:-.025em!important;
  }

  .sidebar-studio-head .eyebrow,
  .platform-page-kicker,
  .inspector-head .eyebrow{
    font-size:10px!important;
    font-weight:800!important;
    line-height:1.25!important;
    letter-spacing:.14em!important;
  }

  .sidebar-studio-head p,
  .inspector-head .task-notice{
    margin-top:7px!important;
    font-size:10px!important;
    line-height:1.4!important;
  }
}

/* v1.12 monochrome finish: keep semantic status colors, but remove the
   legacy gold/brown treatment from primary controls so the new platform shell
   reads as a compact Open WebUI-style black/white/gray interface. */
:root{--gold:#cfd5dc;--gold-hi:#f4f6f8;--focus-ring:rgba(214,220,226,.24)}
.generate-btn{background:#e2e6ea!important;color:#11151a!important;box-shadow:0 10px 22px rgba(0,0,0,.2)!important}
.generate-btn:hover{background:#f4f6f8!important;box-shadow:0 12px 26px rgba(0,0,0,.28)!important}
.cost-card{border-color:#3a424a!important;background:#181c20!important}
.cost-label{color:#969fa8!important}.cost-value{color:#f4f6f8!important}.cost-hint{color:#aeb7c0!important}
.prompt-dock:focus-within{border-color:#aeb7c0!important;box-shadow:0 18px 42px rgba(0,0,0,.22),0 0 0 2px var(--focus-ring)!important}
.prompt-action-btn,.asset-library-mention-btn,.total-badge,.task-badge{border-color:#4b555e!important;background:#1b2025!important;color:#dbe0e5!important}
.prompt-action-btn:hover,.asset-library-mention-btn:hover{border-color:#c7cdd3!important;background:#252b31!important;color:#f4f6f8!important}
.file-picker:hover{border-color:#c7cdd3!important;background:#171d22!important}

/* v1.14: align the navigation wordmark band with the creation header. */
@media(min-width:1200px){
  .platform-nav{padding-top:0!important}
  .platform-nav-brand{
    min-height:112px!important;
    height:112px!important;
    padding:0 8px 6px!important;
    align-content:start!important;
    box-sizing:border-box!important;
  }
  .platform-nav-brand img{
    height:104px!important;
     transform:translateY(8px);
  }
}
select:focus,textarea:focus,input:focus{border-color:#c7cdd3!important;box-shadow:0 0 0 3px var(--focus-ring)!important}
.client-api-fab{border-color:#4b555e!important;background:#181d22!important;color:#e1e5e9!important}
.client-api-fab:hover{background:#252b31!important;border-color:#c7cdd3!important}
.client-api-panel{border-color:#4b555e!important;background:#15191dF5!important}
.client-api-kicker,.client-api-label{color:#c5ccd3!important}
.client-api-panel button:not(.client-api-close){border-color:#4b555e!important;background:#20262b!important;color:#dbe0e5!important}
.client-api-panel button:not(.client-api-close):hover{border-color:#c7cdd3!important;color:#f4f6f8!important}
.client-api-actions .client-api-primary{background:#e2e6ea!important;color:#11151a!important;border-color:#e2e6ea!important}
.client-api-secret{border-color:#68737d!important;background:#20262b!important;color:#dbe0e5!important}
.client-api-secret code{color:#f4f6f8!important}
.result-actions a:first-child{border-color:#9da8b2!important;color:#e1e5e9!important}
.result-actions a:hover{background:#20272c!important}
.auth-panel{border-color:#3a424a!important;background:#15191d!important;box-shadow:0 30px 80px rgba(0,0,0,.55)!important}
.auth-panel form button{background:#e2e6ea!important;color:#11151a!important}
.auth-panel form button:hover{background:#f4f6f8!important}
.auth-switch{color:#dbe0e5!important}

/* Workbench order: keep the navigation and account/history rail at the edges,
   with video creation as the primary center-left surface and activity/task
   results immediately beside it. IDs and behavior remain unchanged. */
@media(min-width:1200px){
  .app-shell{grid-template-columns:188px minmax(0,1fr) 380px 250px!important}
  .platform-nav{grid-column:1!important;grid-row:1!important}
  .workspace{grid-column:2!important;grid-row:1!important;border-right:1px solid #2a3035!important}
  .inspector{grid-column:3!important;grid-row:1!important;border-left:1px solid #2a3035!important;border-right:0!important}
  .sidebar{grid-column:4!important;grid-row:1!important;border-right:0!important;border-left:1px solid #2a3035!important}
}
@media(min-width:901px) and (max-width:1199px){
  .app-shell{grid-template-columns:64px minmax(0,1fr) 320px 214px!important}
  .platform-nav{grid-column:1!important;grid-row:1!important}
  .workspace{grid-column:2!important;grid-row:1!important;border-right:1px solid #2a3035!important}
  .inspector{grid-column:3!important;grid-row:1!important;border-left:1px solid #2a3035!important;border-right:0!important}
  .sidebar{grid-column:4!important;grid-row:1!important;border-right:0!important;border-left:1px solid #2a3035!important}
}

/* v1.14 image studio page: mirrors the video workbench density and spacing
   while keeping its controls isolated from the existing video DOM. */
.image-studio-view{min-height:0!important}
.image-studio-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid #303940}
.image-studio-intro h2{margin:5px 0 0;color:#f4f6f8;font-size:26px;letter-spacing:-.04em}
.image-studio-intro p{margin:7px 0 0;color:#929aa4;font-size:12px}
.image-studio-badge{padding:7px 10px;border:1px solid #4b555e;border-radius:999px;color:#c7cdd3;font-size:10px;white-space:nowrap}
.image-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:18px}
.image-feature-card{display:flex;align-items:center;gap:10px;min-height:68px;padding:12px;border:1px solid #303940;border-radius:11px;background:#151a1f;color:#dbe0e5;text-align:left;font:inherit;cursor:pointer}
.image-feature-card.is-selected{border-color:#aeb7c0;background:#20262b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.04)}
.image-feature-card:focus-visible{outline:0;border-color:#e2e6ea;box-shadow:0 0 0 3px rgba(226,230,234,.18)}
.image-feature-icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid #4b555e;border-radius:8px;color:#eef1f4;font-size:14px}
.image-feature-card strong{display:block;font-size:12px}.image-feature-card small{display:block;margin-top:4px;color:#8e98a2;font-size:10px}
.image-storyboard-format{display:flex;align-items:center;gap:18px;margin:-4px 0 18px;padding:12px 14px;border:1px solid #303940;border-radius:10px;background:#12171b}
.image-storyboard-format[hidden]{display:none!important}
.image-storyboard-label{flex:0 0 auto;color:#c7cdd3;font-size:11px;font-weight:750}
.image-storyboard-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0;max-width:530px;width:100%}
.image-storyboard-option{display:grid;gap:3px;min-height:48px;padding:8px 11px;border:1px solid #3c4750;border-radius:7px;background:#171d22;color:#c7cdd3;font:inherit;text-align:left;cursor:pointer}
.image-storyboard-option strong{font-size:11px}.image-storyboard-option small{color:#8e98a2;font-size:10px}
.image-storyboard-option:hover{border-color:#76828c;background:#1d242a}.image-storyboard-option.is-selected{border-color:#c9d1d8;background:#283138;color:#f2f5f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.image-storyboard-option:focus-visible{outline:2px solid #e2e6ea;outline-offset:2px}
.image-studio-form{display:grid;gap:14px;padding:18px;border:1px solid #303940;border-radius:14px;background:#151a1f}
.image-studio-field{display:grid;gap:7px;color:#c7cdd3;font-size:11px;font-weight:750}
.image-studio-field textarea{min-height:132px;resize:vertical}
.image-studio-field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.image-studio-assets{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-top:1px solid #303940;border-bottom:1px solid #303940}
.image-studio-assets-copy{min-width:0}.image-studio-assets strong{display:block;color:#dbe0e5;font-size:12px}.image-studio-assets span{display:block;margin-top:4px;color:#8e98a2;font-size:10px}
.image-studio-assets-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex:0 0 auto}
.image-studio-asset-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,112px));gap:10px;padding:12px 0 2px}.image-upload-thumb{position:relative;min-width:0;overflow:hidden;border:1px solid #303940;border-radius:9px;background:#12171b}.image-upload-thumb img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;background:#090b0c}.image-upload-thumb-meta{display:flex;align-items:center;gap:6px;padding:7px 8px}.image-upload-thumb-meta span{min-width:0;margin:0;overflow:hidden;color:#b9c2c9;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.image-remove-action{min-height:26px;margin:0 0 0 auto;padding:3px 7px;border:1px solid #45515b;border-radius:6px;background:#171d22;color:#cbd3d9;font:inherit;font-size:10px;line-height:1;cursor:pointer}.image-upload-thumb .image-remove-action{position:absolute;top:6px;right:6px;min-width:26px;padding:3px;background:rgba(15,19,23,.88);font-size:15px}.image-remove-action:hover{border-color:#b96868;background:#332023;color:#ffe2e2}.image-remove-action:focus-visible{outline:2px solid #d9ad69;outline-offset:2px}
.image-studio-action-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.image-studio-note{color:#b8c1ca;font-size:13px;font-weight:700;line-height:1.45}
.image-studio-submit{min-height:42px;padding:0 18px;border:0;border-radius:9px;background:#e2e6ea;color:#11151a;font-size:12px;font-weight:850;opacity:.55;cursor:default}
.app-shell.image-mode .image-studio-intro{display:none!important}
@media(max-width:680px){.image-studio-intro{display:grid}.image-feature-grid,.image-studio-field-grid{grid-template-columns:1fr}.image-storyboard-format{align-items:stretch;flex-direction:column;gap:9px}.image-storyboard-options{max-width:none}.image-studio-action-row{align-items:stretch;flex-direction:column}.image-studio-submit{width:100%}}

/* v1.15 browser canvas: a restrained node editor surface inside the same
   platform shell. The board is deliberately independent of video controls. */
.canvas-studio-view{padding:22px 24px 30px!important;overflow:hidden!important}
.ai-canvas-frame{display:block;width:100%;height:100%;min-height:640px;border:0;border-radius:14px;background:#080a10}
.canvas-legacy-shell{display:none!important}
.canvas-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 auto 16px;max-width:1320px;padding-bottom:16px;border-bottom:1px solid #303940}
.canvas-toolbar-title{display:grid;gap:3px}.canvas-toolbar-title h2{margin:0;color:#f4f6f8;font-size:25px;letter-spacing:-.04em}.canvas-toolbar-title span{color:#8e98a2;font-size:11px}
.canvas-toolbar-actions{display:flex;gap:7px;flex-wrap:wrap}.canvas-tool-button{min-height:34px;padding:0 11px;border:1px solid #4b555e;border-radius:8px;background:#171d22;color:#dbe0e5;font-size:11px;font-weight:700}.canvas-tool-button:hover{border-color:#c7cdd3;background:#232a30}.canvas-tool-primary{background:#e2e6ea;color:#11151a;border-color:#e2e6ea}.canvas-tool-primary:hover{background:#f4f6f8}.canvas-tool-danger{color:#dfada7;border-color:#64474a}
.canvas-layout{display:grid;grid-template-columns:184px minmax(0,1fr) 244px;gap:12px;max-width:1320px;height:calc(100% - 70px);min-height:460px;margin:0 auto}.canvas-palette,.canvas-inspector{min-width:0;padding:13px;border:1px solid #303940;border-radius:12px;background:#12171b}.canvas-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:11px;color:#dbe0e5;font-size:12px}.canvas-panel-heading span{color:#7f8993;font-size:10px;font-weight:500}
.canvas-palette{display:flex;flex-direction:column;gap:7px}.canvas-palette-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px;border:1px solid #303940;border-radius:9px;background:#171d22;color:#dbe0e5;text-align:left}.canvas-palette-item:hover{border-color:#9da8b2;background:#20272c}.canvas-palette-item i{display:grid;place-items:center;width:26px;height:26px;border:1px solid #4b555e;border-radius:7px;color:#edf1f4;font-style:normal}.canvas-palette-item b{display:block;font-size:11px}.canvas-palette-item small{display:block;margin-top:2px;color:#7f8993;font-size:9px}.canvas-palette-foot{margin-top:auto;padding-top:11px;border-top:1px solid #303940;color:#76818b;font-size:9px;line-height:1.6}
.canvas-board{position:relative;min-width:0;overflow:auto;border:1px solid #303940;border-radius:12px;background:#0f1418;isolation:isolate}.canvas-board-grid{position:absolute;inset:0;z-index:-1;opacity:.45;background-image:radial-gradient(circle,#354049 1px,transparent 1px);background-size:22px 22px}.canvas-board-hint{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:5px;color:#b5bec7;pointer-events:none}.canvas-board-hint strong{font-size:14px}.canvas-board-hint span{color:#77828c;font-size:11px}
.canvas-node{position:absolute;width:176px;min-height:136px;border:1px solid #3b464e;border-radius:11px;background:#151b20;box-shadow:0 12px 24px rgba(0,0,0,.24);user-select:none;cursor:grab}.canvas-node:active{cursor:grabbing}.canvas-node.is-selected{border-color:#d5dce2;box-shadow:0 0 0 2px rgba(213,220,226,.14),0 16px 28px rgba(0,0,0,.3)}.canvas-node-head{display:flex;align-items:center;gap:7px;padding:9px 9px 8px;border-bottom:1px solid #303940}.canvas-node-head strong{font-size:11px;color:#e7ebee}.canvas-node-icon{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#20272d;color:#f1f3f5;font-size:12px}.canvas-node-menu{margin-left:auto;border:0;background:none;color:#7e8993;font-size:16px;line-height:1}.canvas-node-menu:hover{color:#e2a7a0}.canvas-node-body{padding:9px}.canvas-node-body p{display:-webkit-box;min-height:36px;margin:0;overflow:hidden;color:#aeb8c0;font-size:10px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:3}.canvas-node-preview{display:block;width:100%;height:72px;margin-top:7px;object-fit:cover;border-radius:6px;background:#090c0e}.canvas-node-footer{display:flex;align-items:center;gap:5px;padding:7px 8px;border-top:1px solid #303940;color:#78848e;font-size:9px}.canvas-node-footer>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-node-handle,.canvas-node-run{padding:3px 6px;border:1px solid #414c54;border-radius:5px;background:#1b2227;color:#c8d0d6;font-size:9px}.canvas-node-run{color:#edf1f4}.canvas-node-handle:hover,.canvas-node-run:hover{border-color:#bfc8cf}.canvas-edge{position:absolute;height:1px;transform-origin:0 50%;background:#71808c;opacity:.7;pointer-events:none;z-index:0}.canvas-edge::after{position:absolute;right:-1px;top:-3px;content:"";border:4px solid transparent;border-left-color:#9aa8b3}
.canvas-inspector{display:flex;flex-direction:column}.canvas-inspector-empty{padding:14px 2px;color:#7f8993;font-size:10px;line-height:1.6}.canvas-inspector-form{display:grid;gap:12px}.canvas-inspector-form label{display:grid;gap:6px;margin:0;color:#bfc7ce;font-size:10px}.canvas-inspector-form input,.canvas-inspector-form textarea,.canvas-inspector-form select{min-height:36px;padding:8px 9px;font-size:10px}.canvas-inspector-actions{display:flex;gap:6px;flex-wrap:wrap}.canvas-inspector-actions .canvas-tool-button{flex:1}.canvas-node-status{min-height:18px;padding-top:8px;border-top:1px solid #303940;color:#8b969f;font-size:10px;line-height:1.5}.canvas-node-status.is-ok{color:#b7d5bf}.canvas-studio-view.hidden{display:none!important}
/* Image activity is a separate surface from the video task rail. Keep its
   empty state quiet and reserve result styling for image assets only. */
[data-activity-view="image"]{display:none!important}
.app-shell.image-mode [data-activity-view="image"]{display:block!important}
.app-shell.image-mode .inspector-head[data-activity-view="image"],.app-shell.image-mode .sidebar-history[data-activity-view="image"]{display:flex!important}
.app-shell.image-mode [data-activity-view="video"]{display:none!important}
.activity-empty-state{display:grid;justify-items:start;gap:8px;padding:28px 8px;color:#8e98a2}
.activity-empty-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid #4b555e;border-radius:9px;color:#dbe0e5;font-size:16px}
.activity-empty-state strong{color:#dbe0e5;font-size:13px}
.activity-empty-state p{max-width:28ch;margin:0;color:#7f8993;font-size:11px;line-height:1.6}
 .image-result{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}.image-result-item{min-width:0;border:1px solid #303940;border-radius:9px;background:#12171b;overflow:hidden}.image-result-item img{display:block;width:100%;aspect-ratio:1/1;max-height:none;object-fit:contain;border-radius:0;background:#090b0c;cursor:zoom-in}.image-result-meta{display:grid;gap:4px;padding:8px}.image-result-meta strong{overflow:hidden;color:#dbe0e5;font-size:11px;text-overflow:ellipsis;white-space:nowrap}.image-result-meta small{overflow:hidden;color:#7f8993;font-size:9px;text-overflow:ellipsis;white-space:nowrap}.image-result-actions{display:flex;align-items:center;justify-content:space-between;gap:6px}.image-result-meta .result-download{display:inline-block;font-size:10px}.image-preview-dialog{width:min(92vw,900px);max-width:none;padding:14px;border:1px solid #4b555e;border-radius:12px;background:#101418;color:#edf1f4}.image-preview-dialog::backdrop{background:rgba(0,0,0,.78)}.image-preview-dialog img{display:block;width:100%;max-height:78vh;object-fit:contain;border-radius:8px;background:#090b0c}.image-preview-dialog .mini-action{display:block;margin:12px auto 0}

/* Image creation has its own activity rail. The former right-side studio rail
   is video-only, preventing duplicate workbench copy and video diamond data. */
@media(min-width:1200px){.app-shell.image-mode{grid-template-columns:188px minmax(0,1fr) 480px!important}.app-shell.image-mode .sidebar{display:none!important}.app-shell.image-mode .inspector{grid-column:3!important}.app-shell.image-mode .image-activity-scroll{padding-left:20px!important;padding-right:20px!important}.app-shell.image-mode .image-result{gap:12px}}
@media(min-width:901px) and (max-width:1199px){.app-shell.image-mode{grid-template-columns:64px minmax(0,1fr) 400px!important}.app-shell.image-mode .sidebar{display:none!important}.app-shell.image-mode .inspector{grid-column:3!important}}
@media(max-width:900px){.app-shell.image-mode .sidebar{display:none!important}.app-shell.image-mode .image-result{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:1050px){.canvas-layout{grid-template-columns:164px minmax(0,1fr) 214px}.canvas-toolbar{align-items:flex-start;flex-direction:column}.canvas-toolbar-actions{width:100%}}
@media(max-width:680px){.canvas-studio-view{padding:18px!important;overflow:visible!important}.canvas-layout{display:flex;flex-direction:column;height:auto;min-height:0}.canvas-palette{order:0}.canvas-board{order:1;height:520px;min-height:520px}.canvas-inspector{order:2}.canvas-palette-foot{margin-top:8px}.canvas-palette{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.canvas-panel-heading,.canvas-palette-foot{grid-column:1/-1}}

/* v1.16 full-stage canvas route.
   The canvas is the product surface, rather than a card inside the video
   workbench. The activity rail becomes a compact bottom-left drawer and the
   fixed API entry remains available at bottom-right. */
@media(min-width:901px){
  .app-shell.canvas-mode{grid-template-columns:188px minmax(0,1fr)!important;grid-template-rows:minmax(0,1fr)!important}
  .app-shell.canvas-mode .platform-nav{grid-column:1!important;grid-row:1!important}
  .app-shell.canvas-mode .workspace{grid-column:2!important;grid-row:1!important;position:relative;min-width:0;min-height:0;border:0!important}
  .app-shell.canvas-mode .sidebar,
  .app-shell.canvas-mode .pane-resizer{display:none!important}
  .app-shell.canvas-mode .workspace-header{position:absolute!important;inset:0 0 auto 0!important;height:76px!important;min-height:76px!important;padding:14px 24px!important;border:0!important;background:linear-gradient(180deg,rgba(17,20,24,.98),rgba(17,20,24,.72),transparent)!important;z-index:25;pointer-events:none}
  .app-shell.canvas-mode .platform-page-heading,.app-shell.canvas-mode .workspace-brand-center{display:none!important}
  .app-shell.canvas-mode .header-account{margin-left:auto;pointer-events:auto;transform:scale(.92);transform-origin:top right}
  .app-shell.canvas-mode .header-account .redeem-card-form{display:none!important}
  /* Canvas is the whole right-hand stage: remove the former top breathing
     room so the working surface starts at the page edge and remains usable
     behind the compact header overlay. */
  .app-shell.canvas-mode #ai-canvas-view{display:flex!important;flex:1 1 auto;flex-direction:column;position:absolute!important;inset:0!important;z-index:2;min-height:0;padding:0!important;overflow:hidden!important}
  .app-shell.canvas-mode #aiCanvasFrame{flex:1 1 auto;min-height:0;height:100%;border-radius:0}
  .app-shell.canvas-mode .canvas-toolbar{flex:0 0 auto;max-width:none;margin:0 0 12px;padding:0 0 13px}
  .app-shell.canvas-mode .canvas-layout{flex:1 1 auto;width:100%;max-width:none;height:auto;min-height:0;grid-template-columns:224px minmax(0,1fr) 280px;gap:14px}
  .app-shell.canvas-mode .canvas-board{min-height:0;border-radius:14px}
  .app-shell.canvas-mode .canvas-palette,.app-shell.canvas-mode .canvas-inspector{border-radius:14px}
  .app-shell.canvas-mode .inspector{display:block!important;position:absolute!important;left:22px;bottom:22px;width:318px;max-height:270px;z-index:40;border:1px solid #4b555e!important;border-radius:13px;background:rgba(15,19,23,.96)!important;box-shadow:0 20px 55px rgba(0,0,0,.46);pointer-events:auto}
  .app-shell.canvas-mode .inspector-head{display:none!important}
  .app-shell.canvas-mode .inspector-scroll{display:block!important;max-height:270px;padding:12px!important;overflow:auto}
  .app-shell.canvas-mode .inspector-scroll .task-card,.app-shell.canvas-mode .inspector-scroll .result-card{margin:0 0 10px;background:#171d22;border-color:#3b464e}
  .app-shell.canvas-mode .inspector-scroll .debug-panel{display:none!important}
  .app-shell.canvas-mode .result video,.app-shell.canvas-mode .result img{max-height:130px}
}
@media(min-width:901px) and (max-width:1199px){
  .app-shell.canvas-mode{grid-template-columns:64px minmax(0,1fr)!important}
  .app-shell.canvas-mode #ai-canvas-view{padding:0!important}
  .app-shell.canvas-mode .canvas-layout{grid-template-columns:190px minmax(0,1fr) 238px}
  .app-shell.canvas-mode .inspector{left:16px;bottom:16px;width:290px}
}
@media(max-width:900px){
  .app-shell.canvas-mode .sidebar,.app-shell.canvas-mode .inspector{display:none!important}
  .app-shell.canvas-mode .workspace{position:relative;min-height:calc(100vh - 58px)!important}
  .app-shell.canvas-mode .workspace-header{position:absolute!important;inset:58px 0 auto 0!important;z-index:25;min-height:92px!important;height:92px!important;padding:12px 18px!important;pointer-events:none}
  .app-shell.canvas-mode .header-account{pointer-events:auto;transform:scale(.86);transform-origin:top right}
  .app-shell.canvas-mode #ai-canvas-view{display:flex!important;flex-direction:column;padding:0!important;overflow:auto!important}
  .app-shell.canvas-mode #aiCanvasFrame{height:100%;min-height:600px;border-radius:0}
  .app-shell.canvas-mode .canvas-toolbar{align-items:flex-start;flex-direction:column}
  .app-shell.canvas-mode .canvas-layout{display:flex;flex-direction:column;height:auto;min-height:0}
  .app-shell.canvas-mode .canvas-board{order:1;height:calc(100vh - 390px);min-height:440px}
  .app-shell.canvas-mode .canvas-palette{order:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .app-shell.canvas-mode .canvas-inspector{order:2}
}

/* v1.17 account dock: keep the account controls in the lower-left rail.
   The controls retain their IDs and event handlers; only their presentation
   and containing rail change. */
.platform-nav > .header-account{
  position:relative!important;
  inset:auto!important;
  top:auto!important;
  right:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr);
  width:100%;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  margin-top:auto!important;
  padding:7px 7px;
  gap:3px;
  border:1px solid #252b31;
  border-radius:10px;
  background:#111418;
  box-sizing:border-box;
  overflow:visible!important;
  z-index:4;
}
.platform-nav > .header-account .header-account-identity{
  justify-content:flex-start;
  min-width:0;
  white-space:nowrap;
}
.platform-nav > .header-account .header-account-label{font-size:8px}
.platform-nav > .header-account .header-account-identity strong{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px;
}
.platform-nav > .header-account .credits-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:5px;
}
.platform-nav > .header-account .credits-badge{font-size:12px}
.platform-nav > .header-account .credit-rate{font-size:8px}
.platform-nav > .header-account .header-account-actions{
  justify-content:flex-start;
  flex-wrap:wrap;
  gap:2px 5px;
}
.platform-nav > .header-account .account-support,
.platform-nav > .header-account .account-action,
.platform-nav > .header-account .logout-all{font-size:8px}
.platform-nav > .header-account .redeem-card-form{
  width:100%;
  margin:1px 0 0;
  padding-top:4px;
}
.platform-nav > .header-account .redeem-card-row{height:30px}
.platform-nav > .header-account .redeem-card-row input{font-size:10px}
.platform-nav > .header-account .redeem-card-row button{padding:0 7px;font-size:9px}
.platform-nav > .header-account .redeem-card-status{min-height:0;margin-top:2px;font-size:8px!important}
/* Compact announcement card replaces the inactive API placeholder links. */
.system-announcement{margin-top:10px;padding:11px 12px;border:1px solid #2e373e;border-radius:10px;background:#12171b;color:#cfd5d9}
.system-announcement-head{display:flex;align-items:center;gap:7px;color:#e8edf0;font-size:11px;font-weight:800;letter-spacing:.02em}
.system-announcement-icon{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#d7a85c;color:#1b160c;font-size:10px}
.system-announcement p{margin:8px 0 0;color:#9ca6ad;font-size:10px;line-height:1.6;letter-spacing:.01em}
.media-role-hint{display:block;margin:-3px 0 7px;color:#8e98a0;font-size:9px;line-height:1.4}

/* Keep both diamond actions as an equal-width first row, with the card key
   field spanning the full-width row below. */
.platform-nav > .header-account .redeem-card-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:4px;height:auto;min-height:0}
.platform-nav > .header-account .redeem-card-row input{order:2;grid-column:1 / -1;width:100%;min-width:0}
.platform-nav > .header-account .redeem-card-row button{order:1;min-width:0;width:100%;height:28px;padding:0 4px;font-size:10px!important;line-height:1;white-space:nowrap}
.platform-nav > .header-account .password-panel{
  top:auto;
  bottom:calc(100% + 10px);
  left:0;
  right:auto;
  width:100%;
  max-width:100%;
  padding:12px 10px;
}
.platform-nav > .platform-nav-footer{margin-top:0}
.app-shell.canvas-mode .platform-nav > .header-account{
  margin-left:0!important;
  transform:none!important;
}
.app-shell.canvas-mode .platform-nav > .header-account .redeem-card-form{
  display:block!important;
}
@media(max-width:900px){
  .platform-nav > .header-account{display:none!important}
}

/* v1.18: the account dock follows a clear, centered vertical reading order.
   A taller card pulls its top edge upward while keeping account details and
   the redemption action inside one stable, easy-to-scan group. */
@media(min-width:901px){
  .platform-nav > .header-account{
    min-height:198px;
    padding:14px 10px 12px;
    gap:4px;
    align-content:center;
    text-align:center;
  }

  .platform-nav > .header-account .header-account-identity,
  .platform-nav > .header-account .membership-row,
  .platform-nav > .header-account .credits-row{
    display:grid!important;
    justify-content:center!important;
    justify-items:center;
    gap:1px;
  }

  .platform-nav > .header-account .header-account-label,
  .platform-nav > .header-account .membership-label{
    color:#8e98a2;
    font-size:9px;
    line-height:1.3;
  }

  .platform-nav > .header-account .header-account-identity strong,
  .platform-nav > .header-account .membership-badge{
    max-width:100%;
    color:#eef1f4;
    font-size:12px;
    line-height:1.3;
    text-align:center;
  }

  .platform-nav > .header-account .membership-diamond{color:#8ed8cf;}
  .platform-nav > .header-account .membership-gold{color:#e6bd6c;}
  .platform-nav > .header-account .membership-star{color:#d6dbe0;}

  .platform-nav > .header-account .credits-badge{
    color:#f2cf7d;
    font-size:14px;
    line-height:1.25;
  }

  .platform-nav > .header-account .credit-rate{
    color:#9ba4ad;
    font-size:8px;
    line-height:1.25;
  }

  .platform-nav > .header-account .header-account-actions{
    justify-content:center;
    gap:4px 9px;
    margin-top:2px;
  }

  .platform-nav > .header-account .account-action,
  .platform-nav > .header-account .logout-all{
    font-size:9px;
    line-height:1.35;
  }

  .platform-nav > .header-account .redeem-card-form{
    margin-top:6px;
    padding-top:8px;
    border-top-color:#303840;
  }

  .platform-nav > .header-account .redeem-card-row{
    min-height:32px;
  }
}

/* v1.19: account details use one compact label/value system instead of three
   competing centered type scales. The balance is the only deliberate accent. */
@media(min-width:901px){
  .platform-nav > .header-account{
    min-height:190px;
    padding:13px 11px 11px;
    gap:6px;
    align-content:start;
    text-align:left;
  }

  .platform-nav > .header-account .header-account-identity,
  .platform-nav > .header-account .membership-row{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:baseline;
    justify-content:normal!important;
    justify-items:normal;
    gap:8px;
    width:100%;
  }

  .platform-nav > .header-account .header-account-label,
  .platform-nav > .header-account .membership-label{
    color:#98a2ab;
    font-size:10px;
    font-weight:650;
    line-height:1.4;
    letter-spacing:0;
  }

  .platform-nav > .header-account .header-account-identity strong,
  .platform-nav > .header-account .membership-badge{
    max-width:90px;
    color:#e8edf1;
    font-size:11px;
    font-weight:750;
    line-height:1.4;
    text-align:right;
  }

  .platform-nav > .header-account .credits-row{
    display:flex!important;
    align-items:baseline;
    justify-content:space-between!important;
    justify-items:normal;
    width:100%;
    gap:8px;
    padding-top:1px;
  }

  .platform-nav > .header-account .credits-badge{
    color:#f1cf7d;
    font-size:13px;
    font-weight:800;
    line-height:1.35;
  }

  .platform-nav > .header-account .credit-rate{
    color:#98a2ab;
    font-size:9px;
    font-weight:650;
    line-height:1.35;
  }

  .platform-nav > .header-account .header-account-actions{
    justify-content:flex-start;
    gap:8px;
    margin-top:0;
  }

  .platform-nav > .header-account .account-action,
  .platform-nav > .header-account .logout-all{
    color:#d2d8de;
    font-size:10px;
    font-weight:650;
    line-height:1.4;
  }

  .platform-nav > .header-account .redeem-card-form{
    margin-top:2px;
    padding-top:7px;
  }

  .platform-nav > .header-account .redeem-card-row input,
  .platform-nav > .header-account .redeem-card-row button{
    font-size:10px;
  }
}

/* Final purchase-page alignment overrides (kept last so legacy bundles cannot
   override the shared visual language). */
:root{font-family:"Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,sans-serif!important;--ink:#0b0d0f;--cloth:#131719;--cloth-2:#171c1e;--seam:#303940;--text:#f3eee4;--muted:#a5a19a;--gold:#d7a85c;--gold-hi:#f0c777}
body{font-family:"Microsoft YaHei","Noto Sans SC","Segoe UI",system-ui,sans-serif!important;background:radial-gradient(900px 500px at 82% -10%,rgba(215,168,92,.15),transparent 62%),#0b0d0f!important;color:#f3eee4!important}
.app-shell{background:radial-gradient(900px 620px at 68% -16%,rgba(215,168,92,.08),transparent 58%),#0b0d0f!important}.page-paper-shader{opacity:.18!important}
.sidebar{background:rgba(19,23,25,.94)!important;border-right-color:#303940!important}.workspace,.workspace-header{background:rgba(19,23,25,.92)!important}.inspector{background:rgba(15,18,19,.96)!important}
.sidebar-brand,.workspace-header{border-color:#303940!important}.workspace-header .eyebrow{color:#c4a36e!important}
.prompt-dock,.media-box,.schema-field,.media-role,.task-card,.result-card{border-color:#303940!important;background:rgba(23,28,30,.9)!important;box-shadow:0 18px 42px rgba(0,0,0,.16)!important}.prompt-dock:focus-within{border-color:#9a7743!important;box-shadow:0 18px 42px rgba(0,0,0,.2),0 0 0 2px rgba(240,199,119,.18)!important}
select,textarea,input[type=text],input[type=number],input[type=url],.auth-panel input{border-color:#303940!important;background:#0f1315!important}.auth-gate{background:radial-gradient(700px 500px at 70% 0%,rgba(215,168,92,.13),transparent 66%),#0b0d0f!important}.auth-panel{border-color:#303940!important;border-radius:14px!important;background:#131719!important}.auth-panel form button{background:#d7a85c!important;color:#1a140b!important}.auth-panel form button:hover{background:#f0c777!important}.auth-switch{color:#f0c777!important}
.credits-badge,.cost-card,.total-badge,.customer-mode-badge{border-color:#6b5532!important;background:#1b1812!important;color:#f0c777!important}.generate-btn,.pill-btn.accent{background:#d7a85c!important;color:#1a140b!important;border-color:#d7a85c!important}.generate-btn:hover,.pill-btn.accent:hover{background:#f0c777!important}
.file-picker{border-color:#59656d!important;background:#151a1c!important}.file-picker:hover{border-color:#d7a85c!important;background:#1b201f!important}.prompt-action-btn,.asset-library-btn,.mini-action,.mini-button,.square-action{border-color:#4b555d!important;background:#171c1e!important;color:#d8c29a!important}.prompt-action-btn:hover,.asset-library-btn:hover,.mini-action:hover,.mini-button:hover,.square-action:hover{border-color:#9a7743!important;color:#f0c777!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* v1.22: Unified fine gold seam system. Replaces legacy stacked gold-line overrides. */
:root{--seam:#9a7743;--line-gold:#9a7743;--line-gold-hi:#c8a465}
.app-shell *{border-color:var(--line-gold)!important}
.app-shell hr{border-color:var(--line-gold)!important}
.app-shell .canvas-edge{background:var(--line-gold)!important;opacity:.8}
.app-shell .canvas-edge::after{border-left-color:var(--line-gold-hi)!important}
.app-shell .prompt-dock:focus-within,
.app-shell select:focus,
.app-shell textarea:focus,
.app-shell input:focus{border-color:var(--line-gold-hi)!important}
.app-shell :where(button,a,input,select,textarea):focus-visible{outline-color:var(--line-gold-hi)!important}

/* Structural seams remain one physical pixel across every application pane. */
body .app-shell.app-shell{column-gap:0!important;row-gap:0!important}
body .app-shell.app-shell .pane-resizer{width:1px!important;min-width:1px!important;background:var(--line-gold)!important;border:0!important}
body .app-shell.app-shell .platform-nav,
body .app-shell.app-shell .sidebar,
body .app-shell.app-shell .workspace,
body .app-shell.app-shell .inspector,
body .app-shell.app-shell .promo-rail,
body .app-shell.app-shell .workspace-header,
body .app-shell.app-shell .inspector-head,
body .app-shell.app-shell .sidebar-studio-head{border-color:var(--line-gold)!important;border-width:1px!important}

/* The left navigation shares the exact same surface as the workspace beside it. */
body .app-shell.app-shell .platform-nav{background:rgba(19,23,25,.92)!important}

/* Framed working surfaces share the same fine seam. */
body .app-shell.app-shell .prompt-dock,
body .app-shell.app-shell .prompt-dock textarea,
body .app-shell.app-shell .media-box,
body .app-shell.app-shell .schema-field,
body .app-shell.app-shell .media-role,
body .app-shell.app-shell .task-card,
body .app-shell.app-shell .result-card,
body .app-shell.app-shell .upload-panel,
body .app-shell.app-shell .advanced-panel,
body .app-shell.app-shell .canvas-palette,
body .app-shell.app-shell .canvas-board,
body .app-shell.app-shell .canvas-inspector,
body .app-shell.app-shell .image-studio-form,
body .app-shell.app-shell .image-studio-assets,
body .app-shell.app-shell .file-picker,
body .app-shell.app-shell select,
body .app-shell.app-shell input,
body .app-shell.app-shell textarea{border-color:var(--line-gold)!important;border-width:1px!important}
body .app-shell.app-shell .asset-library-panel{border:0!important}
body .app-shell.app-shell .schema-field{border-top:0!important}

/* The prompt is the first stage of the creation flow: retain its complete frame. */
body .app-shell.app-shell .workspace-scroll .prompt-dock{box-sizing:border-box!important;border:1px solid var(--line-gold)!important;border-radius:14px 14px 0 0!important}

/* Active navigation retains the shared dark surface instead of a pale fill. */
body .app-shell.app-shell .platform-nav-item.is-active{background:transparent!important;border-color:var(--line-gold)!important;color:var(--line-gold-hi)!important;box-shadow:none!important}
body .app-shell.app-shell .platform-nav-item.is-active .platform-nav-icon{color:var(--line-gold-hi)!important}

/* Every material card reserves one guidance row, keeping upload controls aligned. */
body .app-shell.app-shell .task-card-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:10px}
body .app-shell.app-shell .task-card-head>div{min-width:0}
body .app-shell.app-shell .task-title{overflow-wrap:anywhere;word-break:break-word}
body .app-shell.app-shell .task-badge{display:inline-flex;align-items:center;justify-self:end;gap:5px;padding:2px 0!important;border:0!important;border-radius:0!important;background:transparent!important;white-space:nowrap}
body .app-shell.app-shell .task-badge::before{content:'↗';display:inline-grid;place-items:center;width:16px;height:16px;font-size:12px;line-height:1;color:currentColor}
body .app-shell.app-shell .task-badge.completed::before{content:'✓'}
body .app-shell.app-shell .task-badge.failed::before{content:'×'}
body .app-shell.app-shell .task-badge.running::before{content:'…'}
body .app-shell.app-shell .media-role .media-role-hint{min-height:14px;margin:-3px 0 7px!important}

/* The editable prompt is a distinct input surface and keeps a full fine seam. */
body .app-shell.app-shell .prompt-dock textarea{box-sizing:border-box!important;border:1px solid var(--line-gold)!important;border-radius:0!important}

/* Terminal tasks expose one deliberate path back to the composer. */
body .app-shell.app-shell .task-redo-btn{width:100%;min-height:36px;margin-top:12px;border:1px solid var(--line-gold)!important;border-radius:8px;background:#171c1e;color:var(--line-gold-hi);font:750 11px/1.2 inherit;cursor:pointer}
body .app-shell.app-shell .task-redo-btn:hover:not(:disabled){border-color:var(--line-gold-hi)!important;background:#202520;color:#f0d18b}
body .app-shell.app-shell .task-redo-btn:disabled{cursor:not-allowed;opacity:.42}

/* A history prompt expands in place, matching the previous task-view workflow. */
body .app-shell.app-shell .history-item-actions{grid-column:1 / -1;display:flex;align-items:center;gap:8px;margin-top:2px}
body .app-shell.app-shell .history-prompt-toggle{padding:0;border:0!important;background:transparent;color:var(--line-gold-hi);font:700 var(--rail-meta)/1.4 inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
body .app-shell.app-shell .history-prompt-toggle:hover{color:#f0d18b}
body .app-shell.app-shell .history-prompt.is-expanded{display:block!important;max-height:180px;overflow:auto!important;white-space:pre-wrap;color:#c8d1d5!important;-webkit-line-clamp:unset!important}

/* History and balance rows are dividers, not clipped boxes. Keep the four
   history fields in dedicated grid areas so long model names cannot collapse
   the timestamp or status into a narrow, wrapping column. */
body .app-shell.app-shell .history-list{overflow-x:hidden!important}
body .app-shell.app-shell .history-item{box-sizing:border-box!important;display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;grid-template-areas:"title index" "time status" "actions actions" "prompt prompt"!important;align-items:start!important;gap:4px 8px!important;width:100%!important;border:0!important;border-bottom:1px solid var(--line-gold)!important;border-radius:0!important;padding-inline:8px!important}
body .app-shell.app-shell .history-item .history-index{grid-area:index!important;grid-column:auto!important;align-self:start!important;color:var(--line-gold-hi)!important;font-variant-numeric:tabular-nums;font-weight:800}
body .app-shell.app-shell .history-item strong{grid-area:title!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body .app-shell.app-shell .history-item small:not(.history-prompt){grid-area:time!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
body .app-shell.app-shell .history-item .history-status{grid-area:status!important;grid-column:auto!important;justify-self:end!important;white-space:nowrap!important}
body .app-shell.app-shell .history-item .history-item-actions{grid-area:actions!important;grid-column:auto!important}
body .app-shell.app-shell .history-item .history-prompt{grid-area:prompt!important;grid-column:auto!important;min-width:0!important}
body .app-shell.app-shell .history-item:first-child{border-top:1px solid var(--line-gold)!important}
body .app-shell.app-shell .credit-usage-row{box-sizing:border-box!important;width:100%!important;border:0!important;border-bottom:1px solid var(--line-gold)!important;padding-inline:4px!important}
body .app-shell.app-shell .credit-usage-row:first-child{border-top:1px solid var(--line-gold)!important}