:root{--ink:#17191d;--muted:#848b98;--line:#eceef1;--soft:#f7f8fa;--lime:#0059ff;--green:#0059ff;--pink:#ff7d1b;--shadow:0 18px 48px rgba(34,39,49,.08);font-family:'DM Sans','Noto Sans SC',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:1024px;min-height:100vh;background:#fff;font-size:14px}button,input,textarea{font:inherit;color:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #0059ff;outline-offset:2px}.sidebar{position:fixed;z-index:10;left:0;top:0;bottom:0;width:80px;border-right:1px solid #e7e8eb;background:#fff;display:flex;flex-direction:column;align-items:center}.brand{height:74px;width:100%;display:grid;place-items:center;text-decoration:none;color:#141619}.brand-mark{font-size:30px;line-height:1;transform:rotate(-25deg)}.side-nav{display:flex;flex-direction:column;gap:7px;margin:auto 0;width:100%;align-items:center}.nav-item{position:relative;width:61px;height:66px;border:0;background:transparent;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:600;color:#383b41}.nav-item.active{background:#f4f4f5;color:#17191d}.nav-icon{height:29px;display:grid;place-items:center;font-size:23px;font-weight:400}.nav-item.beta{margin-top:0}.nav-item small{position:absolute;top:-7px;right:1px;border-radius:9px;background:#e6f3d6;color:#0059ff;font-size:9px;padding:2px 6px}.avatar-mini img,.profile img{width:100%;height:100%;object-fit:cover;border-radius:50%}.profile{overflow:visible}.case-thumbs img{width:47px;height:50px;object-fit:cover;margin-left:-5px;border:3px solid #fff;border-radius:15px;box-shadow:0 3px 8px #0002}.case-thumbs img:first-child{margin-left:0}.side-bottom{height:124px;width:100%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:15px;border-top:1px solid #f0f1f2}.avatar-mini,.profile{border:0;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#e6f3d6,#ff7d1b);color:#31504a;font-weight:700}.avatar-mini{width:31px;height:31px;font-size:12px}.settings{border:0;background:none;font-size:21px;color:#7e8389}.topbar{position:fixed;z-index:8;top:0;left:80px;right:0;height:70px;padding:0 26px;display:flex;align-items:center;justify-content:flex-end;background:rgba(255,255,255,.95);border-bottom:1px solid rgba(235,236,239,.65);backdrop-filter:blur(14px)}.page-label{margin-right:auto;display:none;align-items:center;gap:12px;font-weight:700;font-size:15px}.page-label i{display:block;width:3px;height:19px;background:#15171b;border-radius:4px}.top-actions{display:flex;align-items:center;gap:10px}.top-pill{height:44px;padding:0 16px;border-radius:24px;background:#fff;border:1px solid #eceef0;box-shadow:0 4px 12px rgba(27,33,42,.06);display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:600;color:#2d3035}.top-pill small{font-size:11px;color:#85898f;background:#f4f4f4;padding:4px 7px;border-radius:12px}.top-pill.coral{background:#ff7d1b;color:white;border-color:#ff7d1b;box-shadow:0 7px 18px #ff7d1b33}.top-pill.tutorial{color:#ff7d1b;background:#ff7d1b;border-color:#ff7d1b}.top-pill.recharge{background:#ff7d1b;color:#fff;border-color:#ff7d1b;box-shadow:0 8px 17px #ff7d1b3d}.top-pill.points{border-color:#e6f3d6}.top-pill.points b{font-size:15px}.top-pill.partner{background:#101a1a;color:#0059ff;border-color:#0b6153}.top-pill.invite{padding:0 15px}.profile{position:relative;width:45px;height:45px;font-size:16px}.notice{position:absolute;right:-2px;bottom:-1px;width:17px;height:17px;background:#ff7d1b;color:white;border:2px solid #fff;border-radius:50%;font-size:11px;display:grid;place-items:center}main{margin-left:80px;padding-top:70px}.page{display:none;min-height:calc(100vh - 70px)}.page.shown{display:block}.home-page{position:relative;min-height:calc(100vh - 70px);padding:0 36px 190px}.home-hero{max-width:1200px;margin:0 auto;padding-top:217px;text-align:center}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:16px;font-weight:700}.eyebrow span{width:8px;height:8px;background:#08090a;border-radius:50%}.home-hero h1{margin:15px 0 11px;font-size:54px;line-height:1.2;letter-spacing:1px;font-weight:700}.hero-subtitle{font-size:17px;letter-spacing:.5px;color:#7e8084;margin:18px 0 27px}.prompt-card{position:relative;background:#fff;border:1px solid #f0f1f2;border-radius:30px;box-shadow:var(--shadow);text-align:left;overflow:visible}.prompt-main{min-height:151px;padding:20px;display:flex;align-items:flex-start;gap:27px;border-bottom:1px solid #f2f3f4}.reference-tile,.upload-video{position:relative;flex:0 0 100px;height:117px;border-radius:15px;background:#f5f6f8;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:#718095;font-size:12px;transform:rotate(-4deg);cursor:pointer}.reference-tile .optional,.upload-video .optional{position:absolute;left:7px;top:7px;background:white;padding:2px 7px;border-radius:10px;font-size:10px}.plus{font-size:32px;color:#aab4c1;font-weight:300;line-height:1}.prompt-main textarea{flex:1;min-height:105px;resize:vertical;border:0;outline:none;padding:12px 10px;background:transparent;font-size:16px;line-height:1.7}.prompt-main textarea::placeholder,.url-entry input::placeholder,.extra-prompt input::placeholder{color:#91a2bd}.expand-btn{margin:5px 8px 0 0;width:37px;height:37px;border:1px solid #f0f1f2;background:white;border-radius:50%;box-shadow:0 5px 12px #0000000c;color:#6c7e98;font-size:19px}.prompt-toolbar{min-height:75px;padding:13px 19px;display:flex;justify-content:space-between;align-items:center;gap:14px}.control-group,.submit-group{display:flex;align-items:center;gap:9px;position:relative}.select-control{height:45px;padding:0 13px;border:1px solid #e9ebef;border-radius:14px;background:white;display:flex;align-items:center;gap:9px;white-space:nowrap;font-weight:600;font-size:13px}.select-control.green{background:#e6f3d6;border-color:#e6f3d6}.control-icon{font-size:16px}.count-control{min-width:86px}.dropdown{display:none;position:absolute;z-index:30;top:calc(100% + 7px);left:0;min-width:172px;padding:6px;background:white;border:1px solid #eceef1;border-radius:14px;box-shadow:0 14px 36px #252b351c}.dropdown.open{display:flex;flex-direction:column}.dropdown button{border:0;background:white;text-align:left;padding:10px 12px;border-radius:9px;white-space:nowrap}.dropdown button:hover{background:#e6f3d6}.submit-group{justify-content:flex-end;gap:14px}.shortcut{position:relative;background:#ff7d1b;border:1px solid #ff7d1b;color:#ff7d1b;border-radius:12px;height:42px;padding:0 13px;font-weight:700}.shortcut b{position:absolute;width:10px;height:10px;background:#ff7d1b;right:-2px;top:-3px;border-radius:50%}.text-link{border:0;background:none;font-weight:600;color:#515867;white-space:nowrap}.remaining{color:#9ba4b5;white-space:nowrap}.cost{font-weight:700;white-space:nowrap}.submit-arrow{width:46px;height:46px;border:0;border-radius:50%;background:#f1f2f4;color:#8c96a4;font-size:21px}.submit-arrow.ready{background:#0059ff;color:#0059ff}.home-feedback{display:none;padding:0 25px 12px;color:#0059ff;font-size:13px}.home-feedback.visible{display:block}.tool-groups{display:flex;justify-content:center;max-width:1070px;margin:20px auto 0}.tool-group{padding:0 27px;border-right:1px solid #eceef0}.tool-group:last-child{border:0}.group-title{font-size:14px;color:#999da4;margin-bottom:18px}.tool-list{display:flex;align-items:flex-start;gap:20px}.tool-list button{position:relative;width:59px;min-height:64px;padding:0;border:0;background:transparent;display:flex;align-items:center;flex-direction:column;gap:7px;white-space:nowrap;font-size:12px}.tool-list button>span{height:31px;width:31px;display:grid;place-items:center;background:#f5f6f7;font-size:20px;color:#292e33;border-radius:5px}.tool-list em{position:absolute;right:-7px;top:-6px;background:#e6f3d6;border-radius:8px;padding:2px 5px;font-size:9px;font-style:normal}.case-card{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);height:96px;padding:12px 20px;border:1px solid #eceef0;border-radius:28px;background:#fff;box-shadow:0 12px 27px #20293518;display:flex;align-items:center;gap:19px;text-align:left;white-space:nowrap}.case-thumbs{display:flex;padding-left:5px}.case-thumbs span{display:grid;place-items:center;width:47px;height:50px;margin-left:-5px;border:3px solid white;border-radius:15px;background:#e6f3d6;font-size:24px;box-shadow:0 3px 8px #0002}.case-card strong,.case-card small{display:block}.case-card strong{font-size:16px}.case-card small{font-size:12px;color:#858a91;margin-top:4px}.case-arrow{display:grid;place-items:center;margin-left:4px;width:44px;height:44px;border-radius:50%;background:#050607;color:white;font-size:23px}.video-page{height:calc(100vh - 70px);min-height:760px;display:none;grid-template-columns:575px minmax(400px,1fr)}.video-page.shown{display:grid}.video-panel{overflow-y:auto;border-right:1px solid #e3e5e9;padding:20px 17px 28px 18px;scrollbar-width:thin}.current-function{height:103px;border:1px solid #eceef1;border-radius:22px;box-shadow:0 8px 25px #252b3507;padding:15px 14px;display:flex;align-items:center;gap:14px}.function-symbol{width:54px;height:54px;flex:0 0 54px;display:grid;place-items:center;border-radius:16px;background:#e6f3d6;font-size:25px}.function-copy{min-width:0;flex:1}.function-copy small{font-size:12px;color:#8a8f98}.function-copy h2{margin:3px 0 3px;font-size:18px}.function-copy p{margin:0;color:#777d86;font-size:12px;white-space:nowrap}.switch-function{border:1px solid #e6f3d6;background:#e6f3d6;border-radius:18px;padding:6px 13px;font-weight:700;font-size:12px;white-space:nowrap}.panel-section{border:1px solid #eceef0;border-radius:21px;padding:19px 17px}.image-types{margin-top:15px;min-height:186px}.section-heading{font-weight:700;font-size:14px}.section-heading small{color:#0059ff;font-size:12px;margin-left:6px}.type-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:14px}.type-chip{height:43px;border:1px solid #dfe2e7;border-radius:14px;background:#f9fafb;font-weight:600;color:#353c48}.type-chip.selected{border-color:#e6f3d6;background:#e6f3d6;color:#0059ff}.source-section{border:0;padding:20px 0 0}.source-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.source-heading h3{margin:0 0 6px;font-size:14px}.source-heading p{max-width:380px;margin:0;color:#858a93;font-size:12px;line-height:1.6}.trim-btn{flex:none;margin-top:0;border:1px solid #e6f3d6;background:#e6f3d6;color:#0059ff;border-radius:17px;padding:8px 12px;font-size:12px;font-weight:700}.video-input-row{display:flex;align-items:center;gap:16px;margin-top:13px}.upload-video{flex:0 0 95px;height:119px;border-radius:14px;transform:none}.url-entry{height:72px;flex:1;min-width:0;display:flex;align-items:center;gap:8px;border:1px solid #e6e8ec;border-radius:40px;padding:7px 8px 7px 10px;box-shadow:0 6px 18px #22283108}.link-icon{width:37px;height:37px;flex:0 0 37px;display:grid;place-items:center;border-radius:50%;background:#d9f0ff;color:#5b55a1;font-size:19px}.url-entry input{min-width:0;width:100%;height:52px;border:0;outline:none;font-size:12px}.url-entry button{height:44px;padding:0 17px;border:0;border-radius:24px;background:#0059ff;color:white;font-weight:700}.upload-preview{display:none;margin:9px 0 0 108px;color:#0059ff;font-size:12px}.upload-preview.visible{display:block}.retain-audio{display:flex;align-items:flex-start;gap:10px;margin:27px 0 34px;font-size:12px;font-weight:600;cursor:pointer;line-height:1.5}.retain-audio input{position:absolute;opacity:0}.checkbox-custom{width:22px;height:22px;flex:0 0 22px;display:grid;place-items:center;border-radius:6px;background:#151a21;color:white;font-weight:700}.retain-audio input:not(:checked)+.checkbox-custom{background:#fff;border:1px solid #cfd3d9;color:transparent}.video-options{border:1px solid #eceef0;border-radius:21px;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:12px}.option-card{height:68px;position:relative;border:1px solid #e8eaed;border-radius:16px;background:#fff;padding:10px 12px;display:flex;align-items:center;gap:12px;text-align:left}.option-icon{width:37px;height:37px;display:grid;place-items:center;border-radius:12px;background:#d9f0ff;color:#4d418b;font-size:19px}.option-card small,.option-card strong{display:block}.option-card small{font-size:11px;color:#8b8f97}.option-card strong{font-size:13px;margin-top:3px;white-space:nowrap}.option-chevron{margin-left:auto;color:#777}.option-card .dropdown{top:calc(100% + 5px);min-width:190px}.extra-prompt{margin-top:18px;display:flex;align-items:center;gap:10px;color:#6f7886;font-size:12px;font-weight:600}.extra-prompt>div{height:46px;display:flex;flex:1;align-items:center;border:1px solid #e0e3e8;border-radius:14px;background:#f8f9fb;padding:0 12px}.extra-prompt input{width:100%;border:0;outline:none;background:transparent;font-size:12px}.extra-prompt span{color:#9ca4b0;font-weight:400;white-space:nowrap}.generate-video{width:100%;height:57px;margin-top:19px;border:0;border-radius:30px;background:#d0d8e3;color:#fff;font-size:16px;font-weight:700}.generate-video.enabled{background:#0059ff;color:#fff}.video-feedback{min-height:22px;text-align:center;color:#0059ff;font-size:12px;padding-top:8px}.results-area{min-width:0;position:relative;display:flex;flex-direction:column}.results-toolbar{height:61px;border-bottom:1px solid #edeff1;display:flex;flex-direction:column;padding:0 29px}.results-title{height:60px;display:flex;align-items:center;font-weight:700;font-size:15px}.result-filters{position:absolute;top:70px;left:30px;right:30px;height:42px;display:flex;align-items:center;gap:8px}.result-filters button{height:39px;border:1px solid #e7e9ed;border-radius:22px;background:#f8f9fa;padding:0 15px;color:#596273;font-size:12px;font-weight:600}.result-filters .filter-active{background:#0059ff;border-color:#e6f3d6;color:#0059ff}.result-filters .filter-btn{margin-left:auto;background:#0059ff;border-color:#e6f3d6;color:#0059ff;padding:0 18px}.empty-results{margin:auto;display:flex;flex-direction:column;align-items:center;transform:translateY(-34px)}.empty-icon{width:59px;height:59px;display:grid;place-items:center;background:#e6f3d6;color:#242a20;border-radius:16px;font-size:28px;margin-bottom:16px}.empty-results strong{font-size:15px}.empty-results p{font-size:13px;color:#9ba6b8;margin:10px 0}.task-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;padding:130px 28px 28px}.task-card{border:1px solid #eceef0;border-radius:18px;padding:16px;box-shadow:0 7px 24px #242a3510}.task-thumb{height:140px;display:grid;place-items:center;background:#f7f8fa;border-radius:12px;color:#858d9b;font-size:26px}.task-card strong{display:block;margin-top:12px}.task-card small{color:#818894}.toast{position:fixed;z-index:50;left:50%;bottom:32px;transform:translate(-50%,20px);padding:11px 18px;border-radius:24px;background:#22272d;color:#fff;opacity:0;pointer-events:none;transition:.2s;box-shadow:0 10px 30px #0002}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:1450px){.top-actions{gap:6px}.top-pill{padding:0 11px;font-size:12px}.home-hero{padding-top:165px}.home-hero h1{font-size:46px}.tool-group{padding:0 16px}.tool-list{gap:12px}.video-page{grid-template-columns:500px minmax(360px,1fr)}.video-panel{padding-left:14px;padding-right:14px}.type-grid{gap:7px}.type-chip{font-size:12px}.top-pill.invite{display:none}}
@media(max-height:850px){.home-hero{padding-top:90px}.case-card{bottom:16px}.home-page{padding-bottom:145px}.tool-groups{margin-top:14px}.video-panel{padding-top:12px}.image-types{min-height:175px}.retain-audio{margin:17px 0 20px}}

/* Local Lucide SVG icon sizing */
.brand-mark{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.nav-icon img{width:22px;height:22px;display:block}.settings img{width:21px;height:21px;display:block}.top-pill>img{width:17px;height:17px;flex:0 0 17px}.control-icon{width:17px;height:17px;flex:0 0 17px}.chevron-icon{width:14px;height:14px;flex:0 0 14px;color:#737b86}.expand-btn img{width:17px;height:17px;display:block;margin:auto}.shortcut img,.text-link img,.cost img,.submit-arrow img{width:17px;height:17px;vertical-align:middle}.submit-arrow img{width:19px;height:19px}.tool-list button>span img{width:22px;height:22px;display:block}.function-symbol img{width:26px;height:26px}.switch-function img{width:14px;height:14px;vertical-align:middle;margin-left:2px}.trim-btn img{width:15px;height:15px;vertical-align:middle}.link-icon img{width:17px;height:17px}.option-icon img{width:19px;height:19px}.option-chevron{width:15px;height:15px;margin-left:auto}.result-filters button img{width:14px;height:14px;vertical-align:middle}.empty-icon img{width:26px;height:26px}
/* Explicit status labels for features that still open a placeholder or are not connected. */
.nav-item .nav-development{position:static;display:block;margin-top:-1px;padding:0;border-radius:0;background:transparent;color:#8e98a6;font-size:8px;line-height:10px;white-space:nowrap}
.tool-list button{position:relative}
.tool-list .tool-development-label{position:absolute;top:4px;right:5px;padding:2px 5px;border:1px solid #e5e9ef;border-radius:8px;background:#f5f7fa;color:#8994a3;font-size:8px;font-style:normal;line-height:1.2;white-space:nowrap}
.video-tool-item strong .feature-development,.nav-tools-copy strong .feature-development{margin-left:5px;padding:2px 5px;border-radius:8px;background:#f1f3f5;color:#8792a0;font-size:9px;font-style:normal;font-weight:500;white-space:nowrap}
.page-development-tag{display:inline-block;margin-left:4px;padding:3px 7px;border-radius:10px;background:#f1f3f5;color:#8792a0;font-size:10px;font-style:normal;font-weight:600;vertical-align:middle}
/* Translucent fixed navigation so the page backdrop remains visible. */
.topbar{background:rgba(255,255,255,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

.toast{padding:12px 48px 12px 18px;max-width:min(900px,calc(100vw - 32px));line-height:1.5}.toast.show{pointer-events:auto}.toast-close{position:absolute;right:11px;top:50%;transform:translateY(-50%);width:27px;height:27px;border:0;border-radius:50%;background:#ffffff20;color:#fff;font-size:22px;line-height:1;display:grid;place-items:center}.toast-close:hover{background:#ffffff38}

.generate-page{position:relative;height:calc(100vh - 70px);min-height:760px;overflow:hidden;background:#fff}
.generate-header{position:absolute;z-index:3;left:0;right:0;top:0;height:59px;border-bottom:1px solid #f0f1f3;background:#fff;display:flex;align-items:center;padding:0 28px;gap:26px}
.generate-heading{display:flex;align-items:center;gap:11px;white-space:nowrap;font-size:13px}
.heading-bar{width:3px;height:18px;border-radius:4px;background:#17191d}
.generate-tabs{display:flex;align-items:center;gap:7px;margin-left:auto}
.generate-tabs button{height:29px;padding:0 13px;border:1px solid #eceef1;background:#f8f9fa;border-radius:18px;font-size:12px;color:#535b68;white-space:nowrap}
.generate-tabs button.active{background:#e6f3d6;border-color:#e6f3d6;color:#0059ff}
.image-record-filter{display:flex;align-items:center;gap:7px;margin-left:auto;color:#7b8491;font-size:11px;white-space:nowrap}
.image-record-filter select{height:34px;max-width:190px;padding:0 28px 0 11px;border:1px solid #e6eaf0;border-radius:18px;background:#fff;color:#354052;font:inherit;font-size:12px;outline:none}
.layout-filter{display:flex;align-items:center;gap:8px}
.layout-filter button{height:37px;border:1px solid #eceef1;background:#fff;border-radius:20px;padding:0 12px;font-size:12px;font-weight:600;white-space:nowrap}
.layout-filter .layout-control-wrap>button>img:first-child{width:15px;height:15px;vertical-align:middle;margin-right:5px}
.layout-filter small{font-weight:400;color:#9198a3}
.layout-filter .chevron-icon{width:13px;height:13px;vertical-align:middle;margin-left:7px}
.layout-filter .filter-btn{background:#0059ff;border-color:#e6f3d6;padding:0 17px}
.layout-filter .filter-btn img{width:15px;height:15px;vertical-align:middle;margin-right:5px}
.image-tools-panel{position:absolute;z-index:5;left:0;top:4px;bottom:330px;width:360px;background:#fff;border:1px solid #eceef0;border-radius:0 21px 21px 0;box-shadow:0 14px 35px #20283212;overflow:hidden}
.generate-page>.image-tools-panel{display:none}
.image-tools-heading{height:50px;padding:0 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f1f3;font-size:13px}
.image-tools-heading span{font-size:12px;color:#969ba3}
.image-tools-grid{height:calc(100% - 50px);overflow-y:auto;padding:10px 9px 14px;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:51px;column-gap:8px;align-content:start;scrollbar-width:thin}
.image-tool{height:45px;border:1px solid transparent;background:#fff;border-radius:14px;display:flex;align-items:center;gap:9px;padding:0 8px;text-align:left;font-size:12px;font-weight:600;white-space:nowrap}
.image-tool:hover{background:#e6f3d6}
.image-tool.active{background:#e6f3d6;border-color:#e5ebe5}
.image-tool-icon{width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;background:#f0f2f1;border-radius:9px}
.image-tool-icon img{width:17px;height:17px}
.image-results{position:absolute;inset:60px 0 0;display:grid;place-items:center}
.image-empty{display:flex;flex-direction:column;align-items:center;text-align:center;transform:translateY(-26px)}
.image-empty-icon{width:59px;height:59px;border-radius:16px;background:#e6f3d6;display:grid;place-items:center;margin-bottom:15px}
.image-empty-icon img{width:23px;height:23px;color:#89938b}
.image-empty strong{font-size:14px}
.image-empty p{font-size:12px;color:#a1adbd;margin:8px 0}
.feature-guide{position:absolute;z-index:4;left:354px;top:4px;width:min(550px,42vw);padding:0;border-radius:21px;background:#fff;box-shadow:0 13px 35px #17212f22;overflow:hidden;border:1px solid #eef0f3}
.generate-page>.feature-guide{display:none}
.feature-guide img{display:block;width:100%;height:auto;object-fit:contain}
.image-composer-wrap{position:absolute;z-index:6;left:50%;bottom:18px;transform:translateX(-50%);width:min(1210px,calc(100% - 48px));display:flex;align-items:flex-end;gap:12px}
.template-recommend{height:39px;flex:0 0 auto;padding:0 13px;border:1px solid #d9f0ff;border-radius:22px;background:#fff;box-shadow:0 5px 18px #26273a08;font-size:12px;font-weight:700}
.template-recommend img{width:14px;height:14px;vertical-align:middle;margin-right:4px}
.material-library[hidden]{display:none}
.material-library{position:absolute;z-index:45;left:0;bottom:calc(100% + 10px);width:min(380px,calc(100vw - 32px));height:min(584px,calc(100vh - 120px));display:flex;flex-direction:column;padding:15px;border:1px solid #e3e8f0;border-radius:23px;background:linear-gradient(145deg,#fff,#fafbff);box-shadow:0 18px 48px #20283225;color:#17243a}
.material-library.source-menu{gap:8px}
.reference-source-panel[hidden]{display:none}
 .reference-source-panel:not([hidden]){container-type:inline-size;position:fixed;z-index:44;left:16px;bottom:120px;display:flex;width:min(760px,calc(100vw - 32px));height:min(470px,calc(100vh - 210px));min-height:260px;max-height:calc(100vh - 32px);box-sizing:border-box;flex-direction:column;overflow:hidden;padding:12px;border:1px solid #e3e8f0;border-radius:15px;background:#fff;box-shadow:0 18px 48px #20283225;color:#17243a}
.reference-source-panel>.material-library-heading,.reference-source-panel>.material-library-tabs,.reference-source-panel>p{flex:none}
.style-library-categories{display:flex;flex:none;flex-wrap:nowrap;gap:4px;overflow-x:auto;overflow-y:hidden;padding:3px 0 8px;scrollbar-width:thin}
.style-library-categories button{flex:0 0 auto;min-height:30px;padding:4px 8px;border:1px solid #e6e4ff;border-radius:12px;background:#fff;color:#536078;font-size:10px;font-weight:650;line-height:1.2;text-align:center;white-space:nowrap}
.style-library-categories button.active{border-color:#7bc30c;background:#7bc30c;color:#fff;box-shadow:0 3px 8px #69af0e38}
.reference-source-panel>.material-library-grid.style-library-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(120px,1fr);max-height:none;flex:1;min-height:120px}
.style-library-card>span{display:flex;flex-direction:column;gap:4px}
.style-library-card>span small{font-size:9px;font-weight:500;opacity:.8}
.style-library-grid [hidden]{display:none}
.reference-source-panel>.reference-source-empty{display:grid;place-items:center;flex:1;color:#8793a5;font-size:12px}
.reference-source-panel>.material-library-grid{flex:1;min-height:150px;max-height:min(365px,44vh);grid-auto-rows:min(190px,calc(55vh - 110px));}
.reference-source-panel>.material-library-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:min(190px,calc(55vh - 110px));}
.material-library-heading{display:flex;align-items:center;gap:10px;min-height:34px}
.material-library-heading strong{font-size:14px}
.material-library-mark{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:#eaf5df;color:#75bd12;font-size:14px}
.material-library-close{margin-left:auto;width:28px;height:28px;border:0;background:transparent;color:#8792a4;font-size:25px;line-height:1}
.material-library>p{margin:12px 0;color:#8993a5;font-size:12px}
.material-library-tabs{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;padding:3px;border:1px solid #e6e4ff;border-radius:18px;background:#fff;max-height:none;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:thin}
.material-library-tabs button{height:30px;min-width:0;padding:0 3px;border:0;border-radius:12px;background:transparent;color:#536078;font-size:11px;font-weight:650;white-space:nowrap}
.material-library-tabs button.active{background:#7bc30c;color:#fff;box-shadow:0 3px 8px #69af0e38}
.material-library-subgroups{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));flex:none;gap:4px;overflow:visible;padding:2px 0 6px}
.material-library-subgroups button{min-width:0;min-height:30px;padding:3px 4px;border:1px solid #e6e4ff;border-radius:12px;background:#fff;color:#536078;font-size:11px;font-weight:650;line-height:1.2;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.material-library-subgroups button.active{border-color:#7bc30c;background:#7bc30c;color:#fff;box-shadow:0 3px 8px #69af0e38}
.material-library-subgroups.emoji-subgroups{grid-template-columns:repeat(3,minmax(0,1fr))}
.material-library-filter{display:flex;align-items:center;gap:8px;margin:10px 0;padding:0 1px}
.material-library-filter span{padding:4px 12px;border:1px solid #dce8cb;border-radius:15px;background:#f2f9e9;color:#568b08;font-size:11px}
.material-library-filter span+span{border-color:#e6e4ff;background:#fff;color:#68708c}
.material-library-filter b{margin-left:4px;color:#8a90a2}
.material-library-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:min(251px,calc(75vw - 57.75px));align-items:start;align-content:start;column-gap:10px;row-gap:12px;min-height:0;overflow:auto;padding:0 5px 6px 0;scrollbar-width:thin}
.material-library-card{position:relative;display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;overflow:hidden;padding:0;border:1px solid #e8e9ef;border-radius:14px;background:#eff1f4;box-shadow:0 3px 9px #20283214;cursor:grab}
.material-library-card:active{cursor:grabbing}
.material-library-card img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.material-library-card>span{position:absolute;inset:auto 0 0;padding:24px 9px 8px;background:linear-gradient(transparent,#101522a8);color:white;text-align:left;font-size:11px;font-weight:600;opacity:0;transition:opacity .15s}
.material-library-card:hover>span,.material-library-card:focus-visible>span{opacity:1}
.reference-source-panel>.material-library-grid,.reference-source-panel>.material-library-grid.style-library-grid,.material-library-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:calc((100cqi - 55px)/5);align-content:start;align-items:stretch;row-gap:12px}
.material-library-upload-card,.design-template-upload-card{position:relative;display:block;min-width:0;min-height:0;aspect-ratio:1/1;overflow:hidden;border:1px dashed #b8c9df;border-radius:14px;background:#f7f9fc;color:#526780}
.material-library-upload-card>label,.design-template-upload-card>label{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer;text-align:center}
.material-library-upload-card input,.design-template-upload-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.material-library-upload-card label>span,.design-template-upload-plus{font-size:30px;line-height:1;color:#8da2ba}
.material-library-upload-card label>strong,.design-template-upload-card label>strong{font-size:12px;font-weight:600}
.material-library-upload-card label>small,.design-template-upload-card label>small{font-size:10px;color:#8292a6}
.material-library-upload-card:hover,.material-library-upload-card:focus-within,.design-template-upload-card:hover,.design-template-upload-card:focus-within{border-color:#3478f6;background:#eef5ff;color:#075bea}
.material-library-upload-card input:focus-visible,.design-template-upload-card input:focus-visible{outline:2px solid #075bea;outline-offset:-3px}
.material-library-card{height:100%;aspect-ratio:1/1}
.material-library-card img,.material-library-card video{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.material-library-grid.pose-material-grid{grid-auto-rows:calc((100cqi - 55px)/4.5)}
.material-library-grid.pose-material-grid .material-library-card{aspect-ratio:3/4}
.material-library-grid.pose-material-grid .material-library-card img{object-fit:contain;background:#bec2c7}
@media(max-width:620px){.reference-source-panel>.material-library-grid,.reference-source-panel>.material-library-grid.style-library-grid,.material-library-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:calc((100cqi - 55px)/5)}.material-library-grid.pose-material-grid{grid-auto-rows:calc((100cqi - 55px)/3.75)}}
@media(max-width:430px){.reference-source-panel>.material-library-grid,.reference-source-panel>.material-library-grid.style-library-grid,.material-library-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:calc((100cqi - 55px)/5)}.material-library-grid.pose-material-grid{grid-auto-rows:calc((100cqi - 55px)/3.75)}}
.reference-source-panel>.material-library-grid.emoji-material-grid{grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:clamp(34px,min(70px,calc((100cqi - 76px)/10)),70px);column-gap:5px;row-gap:8px}
.material-library-grid.emoji-material-grid .material-library-card img{object-fit:contain;background:#f1f3f6;padding:3px;box-sizing:border-box}
.composer-preset[hidden]{display:none}
.image-composer{min-width:0;flex:1;border:1px solid #e9ebee;border-radius:26px;background:#fff;box-shadow:0 8px 26px #20283212;padding:10px 13px 12px}
.composer-preset{height:43px;display:flex;align-items:center;gap:8px;background:#f5f6f8;border-radius:13px;padding:0 13px;font-size:12px;white-space:nowrap;overflow:hidden}
.composer-preset .preset-name{font-weight:700}
.composer-preset kbd{font-family:inherit;padding:3px 7px;background:#fff;border:1px solid #e6e9ed;border-radius:7px;color:#667286;font-size:10px}
.preset-description{overflow:hidden;text-overflow:ellipsis}
.composer-preset>button{margin-left:auto;height:29px;padding:0 8px;flex:0 0 auto;border:1px solid #ebeef1;border-radius:9px;background:#fff;color:#8c95a3;font-size:11px}
.composer-preset>button img{width:13px;height:13px;vertical-align:middle}
.composer-content{min-width:0;min-height:106px;display:flex;align-items:flex-start;gap:16px;padding:11px 3px 8px;border-bottom:1px solid #f0f1f3}
.composer-uploads{display:flex;align-items:flex-start;gap:7px;flex:0 0 auto}
.composer-upload{position:relative;width:82px;height:94px;border:0;border-radius:13px;background:#f5f6f8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#8190a2;font-size:11px;cursor:pointer;overflow:hidden;transform:rotate(-3deg)}
.composer-upload .upload-plus{font-size:30px;line-height:1;font-weight:300;color:#a9b4c2}
.composer-upload .upload-tag{position:absolute;top:5px;left:6px;padding:2px 6px;border-radius:8px;background:white;font-size:9px}
.composer-upload img.preview{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:rotate(3deg)}
.composer-slot-wrap{display:flex;flex:0 0 auto;flex-direction:column;align-items:center;gap:5px}.composer-upload-frame{position:relative}.slot-remove-button{position:absolute;z-index:3;top:-6px;right:-6px;width:22px;height:22px;border:1px solid #fff;border-radius:50%;background:#202833;color:#fff;font-size:17px;line-height:18px;cursor:pointer}.slot-remove-button[hidden]{display:none}.slot-material-button{display:flex;align-items:center;gap:3px;padding:3px 6px;border:1px solid #e5eaf1;border-radius:8px;background:#fff;color:#53657a;font:inherit;font-size:10px;cursor:pointer}.slot-material-button img{width:12px;height:12px}.composer-slot-wrap .composer-upload{transform:none}.composer-slot-wrap .composer-upload img.preview{transform:none}.feature-inline-hint{max-width:180px;color:#75839a;font-size:10px;line-height:1.4}.mask-edit-button{border-color:#d8e5f7!important;background:#f2f7ff!important;color:#075bea!important}
.composer-content textarea{flex:1;min-width:0;min-height:82px;resize:vertical;border:0;outline:0;background:transparent;padding:8px 6px;font-size:14px;line-height:1.6}
.composer-content textarea::placeholder{color:#9baac0}
.composer-content .expand-btn{flex:0 0 34px;width:34px;height:34px;margin:0}
.composer-toolbar{min-height:48px;padding-top:9px;display:flex;align-items:center;gap:8px}
.composer-toolbar>.select-control{height:39px;border-radius:12px;font-size:12px}
.composer-options{display:flex;align-items:center;gap:7px;min-width:0;flex:1;overflow:visible}
.composer-options .select-control{height:38px;border-radius:12px;padding:0 10px;font-size:12px}
.composer-options .range-option{display:flex;align-items:center;gap:6px;font-size:11px;color:#596475;white-space:nowrap}
.composer-options input[type=range]{width:100px;accent-color:#7a8b9e}
.prompt-library-button{display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:34px;padding:0 10px;border:1px solid #d7e5fb;border-radius:11px;background:#f4f8ff;color:#075bea;font-size:11px;font-weight:700;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s}.prompt-library-button:hover,.prompt-library-button[aria-expanded="true"]{border-color:#8bb6ff;background:#eaf2ff}.composer-options>.prompt-library-button{flex:none}
.prompt-library-popover[hidden]{display:none}.prompt-library-popover{position:fixed;z-index:9999;display:flex;width:min(360px,calc(100vw - 24px));max-height:min(460px,58vh);box-sizing:border-box;flex-direction:column;overflow:hidden;padding:12px;border:1px solid #e3e8f0;border-radius:16px;background:#fff;color:#17243a;box-shadow:0 16px 44px #20283230}.prompt-library-popover>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.prompt-library-popover>header strong{font-size:14px}.prompt-library-popover>header button{width:26px;height:26px;border:0;border-radius:8px;background:#f3f5f8;color:#657287;font-size:20px;cursor:pointer}.prompt-library-popover>p{margin:5px 0 10px;color:#8491a4;font-size:11px}.prompt-library-items{display:flex;min-height:0;flex-direction:column;gap:7px;overflow:auto}.prompt-library-item{display:flex;flex-direction:column;gap:5px;width:100%;padding:9px 10px;border:1px solid #e8edf4;border-radius:11px;background:#fff;text-align:left;cursor:pointer}.prompt-library-item:hover,.prompt-library-item:focus-visible{border-color:#9bbcff;background:#f6f9ff;outline:none}.prompt-library-item strong{font-size:12px;color:#1e2b40}.prompt-library-item small{display:-webkit-box;overflow:hidden;color:#7e8ba0;font-size:10px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.generation-control-wrap{position:relative;flex:0 0 auto}
.tool-select-wrap{position:relative;flex:0 0 auto}
.tool-select-wrap>.select-control{height:39px;border-radius:12px;font-size:12px}
.feature-popover{left:0;bottom:calc(100% + 10px);width:230px;max-height:min(420px,65vh);overflow:auto}
.feature-popover>button.selected{background:#e6f3d6;border-color:#e6f3d6;color:#0059ff}
.feature-popover>button>span:last-child:not(:first-child){font-size:10px;color:#547bb6}
.generation-control-wrap>.select-control{height:38px;border-radius:12px;padding:0 10px;font-size:12px}
.print-background-control{display:flex;align-items:center;gap:6px;color:#68768a;font-size:11px;white-space:nowrap}.print-background-control>.select-control{min-width:112px;height:38px;border-radius:12px;padding:0 9px;color:#354052;font:inherit;font-size:12px;cursor:pointer}
.generation-control-wrap .count-control{min-width:72px}
.generation-popover{position:absolute;z-index:40;left:0;bottom:calc(100% + 10px);width:220px;padding:12px;border:1px solid #e7ebf0;border-radius:16px;background:#fff;box-shadow:0 14px 38px #1b27351c;color:#17202c}
.generation-popover[hidden]{display:none}
.generation-popover>strong{display:block;margin:0 0 8px;color:#65768a;font-size:12px;font-weight:600}
.generation-popover>button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:9px 10px;border:1px solid transparent;border-radius:10px;background:#f7f8fa;text-align:left;font-size:12px}
.generation-popover>button+button{margin-top:5px}
.generation-popover>button.selected{border-color:#aab7ca;background:#f1f2f4}
.generation-popover>button span{color:#8492a3;font-size:10px}
.generation-popover small{display:block;margin-top:8px;padding:9px 10px;border-radius:9px;background:#f7f8fa;color:#6c7b8f;font-size:11px}
.ratio-popover{left:50%;width:min(432px,calc(100vw - 24px));padding:16px;transform:translateX(-50%)}
.resolution-popover{width:190px;padding:12px}
.ratio-choice-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin-bottom:12px}
.ratio-choice-grid button,.resolution-choice-grid button{min-height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid transparent;border-radius:11px;background:#f6f7f9;font-size:11px}
.ratio-choice-grid button.selected,.resolution-choice-grid button.selected{border-color:#a6a6a6;background:#f0f0f0}
.ratio-icon{display:block;width:19px;height:13px;border:1px solid #283343;border-radius:2px}
.ratio-icon.ratio-auto{border-style:dashed}
.ratio-icon.ratio-1-1{width:15px;height:15px}
.ratio-icon.ratio-3-4{width:13.5px;height:18px}
.ratio-icon.ratio-2-3{width:12px;height:18px}
.ratio-icon.ratio-9-16{width:10.125px;height:18px}
.ratio-icon.ratio-3-2{width:19px;height:13px}
.ratio-icon.ratio-4-3{width:17px;height:13px}
.ratio-icon.ratio-21-9{width:22px;height:10px}
.ratio-icon.ratio-16-9{width:20px;height:11px}
.resolution-choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.resolution-choice-grid [hidden]{display:none!important}
.ratio-popover>small,.resolution-popover>small{margin-top:10px}
.count-popover{width:142px}
.composer-toolbar{gap:7px}
.composer-options{gap:6px}
@media(max-width:1200px){.image-composer-wrap{bottom:12px}.image-composer{max-height:45vh;overflow:visible}.composer-options{gap:4px}.composer-options .select-control{padding:0 7px}}
.composer-submit{margin-left:auto;display:flex;align-items:center;gap:8px;white-space:nowrap;border-left:1px solid #eceef1;padding-left:10px}
.composer-submit .remaining{font-size:11px}
.composer-submit .submit-arrow{width:38px;height:38px;flex:0 0 38px}
.composer-content{position:relative;align-items:center}
.composer-uploads.reference-upload-list{width:auto;min-width:0;max-height:92px;flex:0 0 auto;overflow:visible;display:flex;align-items:flex-start;gap:7px}
.composer-uploads.reference-upload-list:has(.reference-upload-item){width:min(270px,38%);flex:0 0 min(270px,38%);overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:repeat(4,minmax(0,58px));justify-content:start;align-content:start;gap:6px 7px;scrollbar-width:thin}
.reference-upload-item{position:relative;display:flex;min-width:0;width:58px;flex:0 0 58px;flex-direction:column;align-items:center;gap:3px;color:#61758a;font-size:10px}
.reference-upload-item:not(:first-child){margin-left:0}
.reference-upload-item img{position:relative;border:2px solid #fff;box-shadow:0 3px 10px #17243a22}
.reference-upload-item img{display:block;width:58px;height:58px;border:1px solid #e6eaf0;border-radius:10px;object-fit:cover;background:#f3f5f8}
.reference-upload-item>span{max-width:58px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.reference-upload-item>button{position:absolute;top:-5px;right:-5px;z-index:2;display:grid;width:19px;height:19px;place-items:center;border:1px solid #fff;border-radius:50%;background:#202833;color:#fff;font-size:14px;line-height:1;opacity:0;cursor:pointer;transition:opacity .15s ease}
.reference-upload-item:hover>button,.reference-upload-item:focus-within>button{opacity:1}
.reference-upload-item.upload-failed>span{color:#d14343}
.reference-upload-item.upload-failed>button[data-retry-reference]{right:17px;background:#d14343;opacity:1}
.reference-upload-add{position:relative;z-index:13;display:grid;width:58px;height:58px;min-width:58px;flex:0 0 58px;margin:0!important;place-items:center;border:1px dashed #cfd9e4;border-radius:10px;background:#f8fafc;color:#728196;font-size:24px;cursor:pointer}
.reference-upload-add:hover{border-color:#1289b8;background:#effaff;color:#1289b8}
.reference-upload-add input{display:none}
.reference-upload-material{display:flex;min-width:58px;height:58px;flex:0 0 58px;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:4px;border:1px solid #e3e8ef;border-radius:10px;background:#fff;color:#5f6f83;font:inherit;font-size:10px;cursor:pointer}.reference-upload-material img{width:15px;height:15px}
.composer-content:has(.reference-upload-list) .prompt-editor{align-self:stretch;min-height:82px;text-align:left}
.prompt-editor{flex:1;min-width:0;min-height:82px;max-height:220px;overflow:auto;outline:0;background:transparent;padding:8px 6px;font-size:14px;line-height:1.75;white-space:pre-wrap;overflow-wrap:anywhere;cursor:text}
.prompt-editor:empty::before{content:attr(data-placeholder);color:#9baac0;pointer-events:none}
.prompt-image-token{position:relative;display:inline-flex;vertical-align:middle;align-items:center;gap:4px;margin:0 2px;padding:2px 5px 2px 2px;border:1px solid #d9eafa;border-radius:7px;background:#eff7ff;color:#1768b2;font-size:11px;line-height:1.25;white-space:nowrap;user-select:none}
.prompt-style-token{position:relative;display:inline-flex;vertical-align:middle;align-items:center;gap:5px;margin:2px 3px;padding:4px 7px;border:1px solid #d8e5ff;border-radius:999px;background:#eef4ff;color:#245eb8;font-size:12px;line-height:1.3;white-space:nowrap;user-select:none}
.prompt-style-token img{display:block;width:14px;height:14px;object-fit:contain}
.prompt-style-token button{display:grid;width:15px;height:15px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#718096;font-size:13px;line-height:1;opacity:0;cursor:pointer}
.prompt-style-token:hover button,.prompt-style-token:focus-within button{opacity:1}
.prompt-image-token img{display:block;width:20px;height:20px;border-radius:4px;object-fit:cover}
.prompt-image-token button{display:grid;width:15px;height:15px;place-items:center;padding:0;border:0;border-radius:50%;background:transparent;color:#718096;font-size:13px;line-height:1;opacity:0;cursor:pointer}
.prompt-image-token:hover button,.prompt-image-token:focus-within button{opacity:1}
.reference-mention-menu{position:absolute;z-index:35;left:96px;bottom:calc(100% + 8px);display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:8px;width:min(330px,calc(100% - 110px));max-height:220px;overflow:auto;padding:10px;border:1px solid #e3eaf1;border-radius:14px;background:#fff;box-shadow:0 12px 32px #18263826}
.reference-mention-menu[hidden]{display:none}
.reference-mention-option{min-width:0;padding:5px;border:1px solid transparent;border-radius:10px;background:#fff;color:#42556a;font-size:11px;cursor:pointer}
.reference-mention-option:hover,.reference-mention-option:focus-visible{border-color:#b7dbf6;background:#f1f8ff}
.reference-mention-option img{display:block;width:100%;aspect-ratio:1;margin-bottom:5px;border-radius:7px;object-fit:cover;background:#f1f3f6}
.reference-mention-empty{grid-column:1/-1;padding:8px;color:#728196;font-size:12px}
.generate-feedback{display:none;padding:5px 10px 0;color:#0059ff;font-size:12px}
.generate-feedback.visible{display:block}
@media(max-width:1450px){.generate-header{padding:0 14px;gap:12px}.generate-tabs{gap:4px}.generate-tabs button{padding:0 9px}.image-tools-panel{width:330px}.image-results{left:0}.feature-guide{left:326px;width:min(500px,40vw)}.image-composer-wrap{width:min(1210px,calc(100% - 48px))}.composer-submit .remaining{display:none}}
@media(max-height:850px){.image-tools-panel{bottom:300px}.image-composer-wrap{bottom:12px}.feature-guide{top:2px}}

/* Model card generation workspace */
#generatePage.model-card-active>#imageResults{right:clamp(292px,25vw,360px);display:block;overflow:auto;padding:28px clamp(14px,2vw,30px) 240px;place-items:initial;background:linear-gradient(180deg,#f7f9fc 0%,#fff 50%)}
#generatePage.model-card-active>.feature-guide{display:block!important;left:auto;right:16px;top:76px;bottom:174px;width:clamp(276px,24vw,348px);max-height:none;padding:18px;border:1px solid #e6ebf2;border-radius:18px;background:#fff;box-shadow:0 10px 28px #17212f12;overflow:auto}
#generatePage.model-card-active>#featureGuideImage{display:none}
.model-card-parameters>header{display:flex;align-items:center;gap:11px;margin-bottom:17px}
.model-card-parameter-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px;background:#edf4ff}
.model-card-parameter-icon img{width:21px;height:21px}
.model-card-parameters>header strong{display:block;color:#172638;font-size:16px}
.model-card-parameters>header small,.model-card-look-heading small{display:block;margin-top:4px;color:#8391a4;font-size:11px;line-height:1.45}
.model-card-name-field,.model-card-profile-grid label,.model-card-look-prompt{display:flex;min-width:0;flex-direction:column;gap:5px;color:#617186;font-size:11px}
.model-card-name-field{margin-bottom:11px}
.model-card-profile-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.model-card-profile-grid input,.model-card-profile-grid select,.model-card-name-field input{width:100%;height:34px;min-width:0;padding:0 9px;border:1px solid #e1e7ef;border-radius:9px;background:#fff;color:#24364b;font:inherit;font-size:12px;outline:none}
.model-card-profile-grid input:focus,.model-card-profile-grid select:focus,.model-card-name-field input:focus,.model-card-look-prompt textarea:focus{border-color:#78b6f6;box-shadow:0 0 0 3px #2581eb18}
.model-card-look-editor{margin-top:15px;padding-top:13px;border-top:1px solid #edf0f4}
.model-card-look-heading strong{color:#24364b;font-size:13px}
.model-card-look-editor nav{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;margin:10px 0}
.model-card-look-editor nav button{height:31px;border:1px solid #e1e7ef;border-radius:9px;background:#fff;color:#596b80;font:inherit;font-size:12px;cursor:pointer}
.model-card-look-editor nav button.selected{border-color:#0866ef;background:#0866ef;color:#fff}
.model-card-look-prompt span{color:#51647b;font-size:11px}
.model-card-look-prompt textarea{width:100%;min-height:112px;resize:vertical;padding:9px;border:1px solid #e1e7ef;border-radius:10px;color:#25364a;font:inherit;font-size:12px;line-height:1.55;outline:none}
.model-card-flow-note{margin:12px 0 0;padding:9px;border-radius:10px;background:#f4f7fb;color:#738198;font-size:10px;line-height:1.5}
.model-card-results{display:flex;flex-direction:column;align-items:center;gap:20px}
.model-card-sheet{width:min(100%,920px);padding:20px;border:1px solid #e5eaf1;border-radius:20px;background:#fff;box-shadow:0 12px 34px #17212f0b}
.model-card-sheet>header{display:flex;align-items:center;gap:18px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #edf0f4}
.model-card-avatar{width:clamp(92px,11vw,140px);flex:0 0 clamp(92px,11vw,140px)}
.model-card-info>span{color:#0866ef;font-size:11px;font-weight:700}
.model-card-info h2{margin:5px 0;color:#1a2a3e;font-size:20px}
.model-card-info p,.model-card-info small{margin:3px 0;color:#8190a3;font-size:11px}
.model-card-looks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.model-card-image{position:relative;display:flex;width:100%;min-width:0;aspect-ratio:3/4;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:0;border:1px solid #e3e8ef;border-radius:12px;background:#f1f4f8;color:#56677d;text-align:left;cursor:pointer}
.model-card-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f1f4f8}
.model-card-image>span,.model-card-image>small{position:relative;z-index:1;width:100%;padding:7px 8px;background:linear-gradient(0deg,#fff 0%,#ffffffec 78%,transparent 100%);font-size:10px;line-height:1.4}
.model-card-image>small{padding-top:0;color:#7b899b}
.model-card-image.is-empty{align-items:center;justify-content:center;gap:5px;border-style:dashed;background:linear-gradient(145deg,#f7f9fc,#eef2f7);cursor:default}
.model-card-image.is-empty>span,.model-card-image.is-empty>small{width:auto;padding:0;background:none;color:#98a5b5;text-align:center}
.model-card-image.is-failed{border-color:#f0bbbb;background:#fff6f6}
.model-card-avatar .model-card-image{aspect-ratio:4/5}
@media(max-width:1050px){#generatePage.model-card-active>#imageResults{right:290px;padding-inline:12px}.model-card-sheet{padding:14px}.model-card-looks{gap:8px}}
@media(max-width:760px){#generatePage.model-card-active>.feature-guide{right:8px;top:66px;bottom:160px;width:270px;padding:12px}#generatePage.model-card-active>#imageResults{right:270px;padding:16px 8px 220px}.model-card-looks{grid-template-columns:repeat(2,minmax(0,1fr))}.model-card-sheet>header{gap:10px}.model-card-info h2{font-size:16px}}

/* Keep model-card panels in separate, predictable regions. */
#generatePage.model-card-active {
  --model-card-guide-width: clamp(276px, 24vw, 348px);
  --model-card-composer-reserve: 300px;
}
#generatePage.model-card-active > #imageResults {
  right: calc(var(--model-card-guide-width) + 32px);
  padding-bottom: calc(var(--model-card-composer-reserve) + 24px);
}
#generatePage.model-card-active > .feature-guide {
  right: 16px;
  bottom: calc(var(--model-card-composer-reserve) + 30px);
  width: var(--model-card-guide-width);
}
#generatePage.model-card-active > .feature-guide > #featureGuideImage {
  display: none;
}
#generatePage.model-card-active > .image-composer-wrap {
  left: calc(var(--generate-template-width, 0px) + 16px);
  right: calc(var(--model-card-guide-width) + 32px);
  bottom: 16px;
  width: auto;
  max-width: none;
  transform: none;
  z-index: 8;
  justify-content: center;
}
#generatePage.model-card-active .image-composer {
  box-sizing: border-box;
  flex: 1 1 auto;
  width: 100%;
  max-width: 1000px;
}
@media (max-width: 1100px) {
  #generatePage.model-card-active {
    --model-card-guide-width: 284px;
    --model-card-composer-reserve: 320px;
  }
  #generatePage.model-card-active > #imageResults {
    right: calc(var(--model-card-guide-width) + 24px);
    padding-inline: 12px;
  }
  #generatePage.model-card-active > .feature-guide {
    right: 12px;
    width: var(--model-card-guide-width);
    padding: 14px;
  }
  #generatePage.model-card-active > .image-composer-wrap {
    right: calc(var(--model-card-guide-width) + 24px);
  }
}
@media (max-width: 850px) {
  #generatePage.model-card-active {
    --model-card-guide-width: min(284px, calc(100vw - var(--generate-template-width, 190px) - 28px));
    --model-card-composer-reserve: 320px;
  }
  #generatePage.model-card-active > #imageResults {
    right: 10px;
    padding: 16px 10px calc(var(--model-card-composer-reserve) + 18px);
  }
  #generatePage.model-card-active > .feature-guide {
    top: 72px;
    right: 10px;
    bottom: calc(var(--model-card-composer-reserve) + 24px);
    width: var(--model-card-guide-width);
  }
  #generatePage.model-card-active > .image-composer-wrap {
    right: 10px;
    bottom: 10px;
  }
}
@media (max-height: 820px) {
  #generatePage.model-card-active {
    --model-card-composer-reserve: 320px;
  }
  #generatePage.model-card-active > .feature-guide {
    padding: 12px;
  }
  #generatePage.model-card-active .model-card-profile-grid {
    gap: 6px;
  }
  #generatePage.model-card-active .model-card-look-prompt textarea {
    min-height: 76px;
  }
}

.video-page{grid-template-columns:400px minmax(420px,1fr);position:relative;overflow:hidden;background:#fff}.video-panel{position:relative;z-index:2;display:flex;flex-direction:column;gap:12px;padding:16px 15px 14px 16px;background:#fff}.current-function{position:relative;flex:0 0 88px;height:88px;padding:12px;border-radius:19px;box-shadow:0 5px 20px #2026300b}.function-symbol{width:48px;height:48px;flex-basis:48px;border-radius:13px}.function-symbol img{width:23px;height:23px}.function-copy h2{font-size:16px}.function-copy p{white-space:normal;line-height:1.4;max-width:275px}.switch-function{font-size:12px;padding:7px 10px}.video-tool-menu{display:none;position:absolute;z-index:15;top:140px;left:-15px;width:min(420px,calc(100vw - 100px));max-height:min(590px,calc(100vh - 170px));overflow:auto;padding:7px;border:1px solid #eceef1;border-radius:19px;background:#fff;box-shadow:0 16px 45px #252b3525}.video-tool-menu.open{display:block}.video-tool-item{width:100%;min-height:59px;padding:8px 10px;display:flex;align-items:center;gap:11px;border:0;border-radius:12px;background:#fff;text-align:left}.video-tool-item:hover,.video-tool-item.selected{background:#e6f3d6}.video-tool-item img{width:33px;height:33px;padding:7px;border-radius:10px;background:#f1f2f2}.video-tool-item strong,.video-tool-item small{display:block}.video-tool-item strong{font-size:12px}.video-tool-item small{font-size:10px;color:#87909a;margin-top:3px;line-height:1.35}.video-menu-heading{padding:9px 9px 7px;display:flex;justify-content:space-between;font-size:12px;font-weight:700;border-bottom:1px solid #f0f1f2;margin-bottom:5px}.video-menu-heading small{color:#939aa3;font-weight:500}.video-form{flex:1;min-height:0;overflow-y:auto;padding:0 1px 10px;scrollbar-width:thin}.video-card{padding:14px 13px;margin-bottom:10px;border:1px solid #eceef1;border-radius:17px;background:#fff}.video-card-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}.video-card-heading h3{font-size:13px;margin:0 0 4px}.video-card-heading p,.field-hint{font-size:11px;color:#87909c;line-height:1.5;margin:0}.small-action,.asset-button{border:1px solid #e6f3d6;background:#e6f3d6;color:#0059ff;border-radius:16px;padding:6px 10px;font-size:11px;font-weight:700;white-space:nowrap}.asset-grid{display:flex;align-items:flex-start;gap:8px;flex-wrap:wrap}.asset-tile{width:76px;height:86px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed #e1e5eb;border-radius:12px;background:#f7f8fa;color:#768397;font-size:10px;cursor:pointer;overflow:hidden}.asset-tile:hover{border-color:#e6f3d6;background:#e6f3d6}.asset-tile .plus{font-size:27px}.asset-tile img.preview-image{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.asset-tile .file-mark{position:absolute;inset:0;display:grid;place-items:center;background:#e6f3d6;color:#0059ff;font-size:24px}.asset-tile .tile-name{position:absolute;bottom:0;left:0;right:0;padding:5px 3px;background:#ffffffdf;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:center}.asset-limit{font-size:10px;color:#8b9bb0;margin-top:5px}.video-link-row{margin-top:10px;display:flex;align-items:center;gap:7px;padding:5px;border-radius:28px;border:1px solid #eceef1;background:#fff}.video-link-row img{width:17px;height:17px;margin-left:7px}.video-link-row input{min-width:0;flex:1;height:33px;border:0;outline:0;font-size:11px}.video-link-row button{border:0;border-radius:20px;background:#0059ff;color:#fff;height:34px;padding:0 13px;font-size:11px;font-weight:700}.video-inline-status{color:#0059ff;font-size:11px;margin:7px 2px 0}.video-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px 10px}.video-field{display:flex;flex-direction:column;gap:6px;font-size:11px;font-weight:650}.video-field.full{grid-column:1/-1}.video-field input,.video-field select,.video-field textarea,.video-select{width:100%;height:41px;padding:0 11px;border:1px solid #e8eaed;border-radius:12px;background:#fff;font-size:12px;outline:none}.video-field textarea{height:72px;resize:vertical;padding:10px;line-height:1.5}.video-prompt{width:100%;height:102px;resize:vertical;border:1px solid #eceef1;border-radius:13px;padding:12px;font-size:12px;line-height:1.6;outline:none}.video-prompt::placeholder,.video-field input::placeholder{color:#9aa9bd}.video-options{border:0;padding:0;gap:8px}.video-options .option-card{height:58px;padding:7px 8px;border-radius:13px;gap:7px}.video-options .option-icon{width:29px;height:29px;border-radius:9px}.video-options .option-icon img{width:16px}.video-options .option-card strong{font-size:11px}.video-options .option-card small{font-size:10px}.video-control-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.video-toggle{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600;cursor:pointer}.video-toggle input{accent-color:#0059ff;width:15px;height:15px}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.choice-card{min-height:65px;padding:9px;border:1px solid #e7e9ed;border-radius:12px;background:#fff;text-align:left}.choice-card strong,.choice-card small{display:block}.choice-card strong{font-size:11px}.choice-card small{margin-top:4px;font-size:10px;color:#838b96;line-height:1.35}.choice-card.selected{border-color:#e6f3d6;background:#e6f3d6}.choice-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.video-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.video-step{border:1px solid #eceef1;border-radius:12px;background:#fff;padding:9px 6px;color:#9299a2;font-size:10px;font-weight:650}.video-step.active{border-color:#8b8f91;background:#e6f3d6;color:#0059ff}.video-step b{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:4px;border-radius:50%;background:#f0f1f3}.video-step.active b{background:#17191d;color:#fff}.video-segment{display:flex;gap:8px}.video-segment button{flex:1;padding:9px;border:1px solid #e5e9ef;background:#f8fafc;border-radius:12px;text-align:left;font-weight:700;font-size:11px}.video-segment button.selected{background:#e6f3d6;border-color:#e6f3d6;color:#0059ff}.video-segment small{display:block;margin-top:4px;font-weight:500;color:#85909c}.video-check-row{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:600}.video-check-row input{accent-color:#263042}.video-submit-wrap{flex:none;border-top:1px solid #f0f1f3;padding-top:10px}.video-submit-wrap .generate-video{margin:0;height:49px;border-radius:26px;font-size:14px}.video-feedback{min-height:17px;padding-top:4px}.video-guide{display:none;position:absolute;z-index:3;left:430px;top:150px;width:min(680px,47vw);padding:8px;border:1px solid #eceef0;border-radius:17px;background:#fff;box-shadow:0 12px 35px #252b351c;transition:opacity .2s,transform .2s}.video-guide img{width:100%;height:auto;display:block;border-radius:11px}.video-guide button{position:absolute;right:12px;top:12px;width:26px;height:26px;border:0;border-radius:50%;background:#ffffffdc;color:#555;font-size:19px;line-height:1}.video-guide.hidden{opacity:0;pointer-events:none;transform:translateY(-8px)}.results-toolbar{position:relative;height:67px;padding:0 24px}.results-title{height:48px}.result-filters{position:static;height:38px;margin-top:-1px}.result-filters button{height:31px;padding:0 12px}.result-filters button img{width:13px;vertical-align:middle}.empty-results{transform:translateY(-5px)}.empty-icon img{width:25px;height:25px}.task-list{padding:22px;align-content:start}.task-card{overflow:hidden}.task-card .task-thumb img{width:100%;height:100%;object-fit:cover;border-radius:10px}.task-card .task-thumb{height:146px}.task-card .task-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.task-status{display:inline-flex;padding:4px 8px;border-radius:12px;background:#e6f3d6;color:#0059ff;font-size:10px}.video-tool-item img,.function-symbol img{object-fit:contain}.video-tool-menu::-webkit-scrollbar,.video-form::-webkit-scrollbar{width:5px}.video-tool-menu::-webkit-scrollbar-thumb,.video-form::-webkit-scrollbar-thumb{border-radius:5px;background:#dfe2e5}@media(max-width:1200px){.video-page{grid-template-columns:400px minmax(350px,1fr)}.video-guide{left:350px;width:min(470px,39vw);top:135px}.video-panel{padding-left:12px;padding-right:12px}.function-copy p{max-width:230px}}
.task-thumb{position:relative}.task-thumb video{display:block;width:100%;height:100%;object-fit:contain;border-radius:10px;background:#111}.video-load-error{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;border:0;border-radius:12px;background:#101216b8;color:#fff;font-size:12px;cursor:pointer}
.task-list{grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),280px));justify-content:center;align-content:start}.task-card .task-thumb{height:auto;aspect-ratio:1/1}.task-card .task-thumb video{width:100%;height:100%;object-fit:contain}
.video-function-toolbar{position:relative;display:flex;align-items:center;justify-content:flex-end;min-height:32px;margin-bottom:-3px}.video-function-toolbar>strong{margin-right:auto;font-size:12px;color:#687487;font-weight:600}.video-function-toolbar .switch-function{padding:6px 10px;border:1px solid #e7eaf0;border-radius:18px;background:#fff;color:#596579;font-size:11px}.video-function-toolbar .video-tool-menu{top:37px;left:0;right:auto;width:min(420px,calc(100vw - 100px));max-height:min(590px,calc(100vh - 170px))}.current-function{display:none}.video-panel{gap:8px;padding-top:12px}.asset-tile{width:106px;height:106px;border:0;border-radius:15px;background:#f3f4f6;color:#728198}.asset-tile:hover,.asset-tile:focus-visible{border:0;background:#edf1f7;outline:2px solid #dbe6ff}.asset-tile .upload-badge{position:absolute;left:8px;top:8px;z-index:1;margin:0;padding:3px 7px;border-radius:12px;background:#fff;color:#8290a3;font-size:9px}.asset-tile .upload-plus{font-size:32px;font-weight:300;line-height:1;color:#91a0b5}.asset-tile .upload-label{font-size:11px;color:#76869b}.reference-media-grid{gap:9px}.media-reference-tile{flex:none}.media-reference-tile.has-media{background:#edf6e7;outline:1px solid #d7eacb}.media-reference-entry{flex:1 0 100%;min-width:0}.media-reference-entry[hidden]{display:none}.media-reference-entry .video-link-row{margin-top:0}.video-form .video-card{padding:13px 12px}.video-form .video-card-heading{margin-bottom:10px}.video-form .video-card-heading h3{font-size:13px}@media(max-width:1200px){.video-function-toolbar .video-tool-menu{left:0}.video-function-toolbar>strong{font-size:11px}}
.reference-media-grid .asset-tile{box-sizing:border-box;flex:0 0 106px;width:106px;height:106px;min-width:106px;min-height:106px}.video-parameters{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.video-parameters .video-field{min-width:0}.video-parameters .video-field select{padding:0 8px;font-size:11px}.video-form .video-submit-wrap{margin-top:0;padding:0;border:0}.video-form .video-submit-wrap .generate-video{height:44px}.video-form .video-feedback{min-height:12px;padding-top:2px}.video-form .video-card:has(.reference-media-grid){padding-bottom:13px}
.video-prompt-wrap{width:100%}.video-prompt-actions{display:flex;justify-content:flex-end;margin-top:6px}
.video-canvas-select{display:flex;align-items:center;gap:5px;width:100%;height:41px;box-sizing:border-box;padding:0 7px;border:1px solid #e8eaed;border-radius:12px;background:#fff}.video-canvas-select:focus-within{border-color:#9bbcff;box-shadow:0 0 0 2px #eaf2ff}.video-canvas-select select{min-width:0;flex:1;width:0;height:100%;padding:0 3px;border:0;background:transparent;outline:0;font-size:11px}.video-canvas-select .ratio-icon{width:24px;height:24px;flex:0 0 24px;display:grid;place-items:center;border-radius:7px;background:#f1f4f8}.video-canvas-select .ratio-icon i{display:block;width:9px;height:16px;box-sizing:border-box;border:1.5px solid #7b8ba2;border-radius:2px}.video-canvas-select .ratio-icon[data-ratio="16-9"] i{width:16px;height:9px}.video-canvas-select .ratio-icon[data-ratio="1-1"] i{width:13px;height:13px}

.asset-thumb-stack{position:absolute;inset:0;display:none;overflow:hidden;border-radius:inherit;pointer-events:none}.asset-tile.has-image-preview .asset-thumb-stack{display:block}.asset-thumb-image{position:absolute;top:50%;left:50%;width:72%;height:76%;object-fit:cover;border:2px solid #fff;border-radius:10px;box-shadow:0 3px 10px #14203355;transform:translate(-50%,-50%);background:#e8edf4}.asset-thumb-stack[data-thumb-count='1'] .asset-thumb-image{width:100%;height:100%;border:0;border-radius:inherit;box-shadow:none}.asset-thumb-stack[data-thumb-count='2'] .asset-thumb-image:first-child{transform:translate(calc(-50% - 10px),calc(-50% + 4px)) rotate(-7deg)}.asset-thumb-stack[data-thumb-count='2'] .asset-thumb-image:last-child{transform:translate(calc(-50% + 7px),calc(-50% - 3px)) rotate(5deg)}.asset-thumb-stack[data-thumb-count='3'] .asset-thumb-image:nth-child(1){transform:translate(calc(-50% - 12px),calc(-50% + 6px)) rotate(-10deg)}.asset-thumb-stack[data-thumb-count='3'] .asset-thumb-image:nth-child(2){transform:translate(calc(-50% - 2px),calc(-50% + 1px)) rotate(-2deg)}.asset-thumb-stack[data-thumb-count='3'] .asset-thumb-image:nth-child(3){transform:translate(calc(-50% + 8px),calc(-50% - 4px)) rotate(7deg)}.asset-thumb-stack[data-thumb-count='4'] .asset-thumb-image:nth-child(1){transform:translate(calc(-50% - 14px),calc(-50% + 7px)) rotate(-12deg)}.asset-thumb-stack[data-thumb-count='4'] .asset-thumb-image:nth-child(2){transform:translate(calc(-50% - 5px),calc(-50% + 3px)) rotate(-4deg)}.asset-thumb-stack[data-thumb-count='4'] .asset-thumb-image:nth-child(3){transform:translate(calc(-50% + 4px),calc(-50% - 1px)) rotate(3deg)}.asset-thumb-stack[data-thumb-count='4'] .asset-thumb-image:nth-child(4){transform:translate(calc(-50% + 12px),calc(-50% - 5px)) rotate(10deg)}.asset-tile.has-image-preview .upload-label,.asset-tile.has-image-preview .upload-plus{display:none}.asset-tile.has-image-preview .upload-badge,.asset-tile.has-audio-preview .upload-badge{display:none}.asset-remove-button{position:absolute;z-index:4;top:5px;right:5px;width:23px;height:23px;display:grid;place-items:center;padding:0;border:1px solid #ffffffd9;border-radius:50%;background:#152238e8;color:#fff;font-size:17px;line-height:1;cursor:pointer;box-shadow:0 1px 5px #0004;opacity:0;pointer-events:none;transition:opacity .15s}.asset-remove-button:hover{background:#e5484d}.asset-remove-button:disabled{opacity:.55;cursor:wait}.asset-remove-button[hidden]{display:none!important}.asset-tile.has-upload .upload-badge{z-index:2;max-width:calc(100% - 34px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.results-area{min-height:0;overflow:hidden}.results-area .task-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.results-area .task-list::-webkit-scrollbar{width:7px}.results-area .task-list::-webkit-scrollbar-thumb{border:2px solid transparent;border-radius:8px;background:#8893a2;background-clip:padding-box}.results-area .task-list:empty{flex:0;height:0;overflow:hidden}

.video-page{height:auto;min-height:calc(100vh - 70px);overflow:visible}.video-panel{overflow:visible}.video-form{min-height:auto;overflow:visible}.results-area{min-height:calc(100vh - 137px);overflow:visible}.results-area .task-list{flex:1;min-height:0;overflow:visible;overscroll-behavior:auto;scrollbar-width:auto}.results-area .task-list:empty{flex:0;height:0;overflow:hidden}

.video-page{height:calc(100vh - 70px);min-height:0;overflow:hidden}.video-panel{min-height:0;overflow:hidden}.video-form{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain}.results-area{height:100%;min-height:0;overflow:hidden}.results-area .task-list{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}.results-area .task-list:empty{flex:0;height:0;overflow:hidden}
.asset-tile.has-video-preview .asset-thumb-stack,.asset-tile.is-resolving .asset-thumb-stack{display:block}
.asset-tile.has-video-preview .asset-thumb-stack{pointer-events:auto}
.asset-thumb-video{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:inherit;background:#101827;object-fit:cover}
.asset-tile.has-video-preview .upload-label,.asset-tile.has-video-preview .upload-plus,.asset-tile.is-resolving .upload-label,.asset-tile.is-resolving .upload-plus{display:none}
.asset-tile.has-video-preview .upload-badge{display:none}
.asset-tile.has-video-preview .asset-remove-button{opacity:0;pointer-events:none;transition:opacity .15s}
.asset-tile:hover .asset-remove-button,.asset-tile:has(:focus-visible) .asset-remove-button{opacity:1;pointer-events:auto}
.asset-tile.has-audio-preview .asset-thumb-stack{display:block;pointer-events:auto;background:linear-gradient(145deg,#24354d,#111b2b)}.asset-audio-icon{position:absolute;inset:0;display:grid;place-items:center;color:#f3f7ff;font-size:30px;line-height:1;text-shadow:0 2px 8px #0008;pointer-events:none}.asset-tile.has-audio-preview{cursor:pointer}.asset-tile.has-audio-preview:focus-visible{outline:2px solid #0059ff;outline-offset:2px}
.asset-thumb-audio{display:none}


.asset-tile.has-audio-preview .upload-plus{display:none}
.asset-tile.has-audio-preview .upload-label{position:absolute;z-index:2;right:6px;bottom:5px;left:6px;overflow:hidden;padding:1px 2px;border-radius:0;background:transparent;color:#f1f5fb;font-size:8px;font-weight:400;opacity:.9;text-align:center;text-overflow:ellipsis;white-space:nowrap}
.asset-thumb-video{cursor:pointer;outline-offset:-3px}
@media(hover:none){}
.video-reference-loading{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;background:#f3f4f6;color:#075bff;pointer-events:none}
.video-reference-loading small{font-size:11px;line-height:1.2}
.video-reference-loading{background:#1b2739;color:#78aaff}

.video-result-open{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;border-radius:10px;background:#08090b;overflow:hidden;cursor:pointer}.video-result-open video{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;background:#08090b}.video-result-open>span{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:28px;text-shadow:0 2px 12px #000;opacity:0;transition:opacity .18s;background:#0002}.video-result-open:hover>span,.video-result-open:focus-visible>span{opacity:1}.video-result-open.video-preview-error:after{content:'视频加载失败';position:absolute;top:12px;left:50%;transform:translateX(-50%);display:block;padding:4px 10px;border-radius:999px;background:#101216cc;color:#fff;font-size:11px;line-height:1.4;white-space:nowrap;pointer-events:none}
.video-failed-delete{position:absolute;z-index:2;top:9px;right:9px;display:grid;place-items:center;width:30px;height:30px;padding:0;border:1px solid #d8e0ed;border-radius:50%;background:#fff;color:#53647c;font-size:22px;line-height:1;cursor:pointer;box-shadow:0 2px 8px #14203318}.video-failed-delete:hover,.video-failed-delete:focus-visible{background:#fff0f0;border-color:#e5484d;color:#d8353b}.video-failed-delete{background:#24344b;border-color:#40526d;color:#e5edf8}.video-failed-delete:hover,.video-failed-delete:focus-visible{background:#482b35;border-color:#f06670;color:#fff}
.video-result-card{position:relative;aspect-ratio:1;padding:0;border-radius:16px;background:#172235;box-shadow:0 2px 5px #1018280a;transition:transform .18s ease,box-shadow .18s ease}.video-result-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px #10182820}.video-result-card .task-thumb{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;background:#172235}.video-result-card .video-result-open{border-radius:0}.video-result-card .video-result-open video{object-fit:cover}.video-result-card .video-task-state{color:#cbd5e1}.video-result-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;min-width:0;padding:14px;color:#fff;background:linear-gradient(180deg,transparent 26%,#10182824 49%,#101828e8 100%);pointer-events:none}.video-result-overlay strong{display:block;overflow:hidden;margin:0;color:#fff;font-size:13px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.video-result-overlay p{display:-webkit-box;overflow:hidden;margin:0;color:#fff;font-size:11px;line-height:1.4;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.video-result-overlay .video-result-specs,.video-result-overlay .video-result-cost,.video-result-overlay .video-result-error{display:block;overflow:hidden;color:#ffffffd9;font-size:10px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.video-result-overlay .video-result-error{color:#ffd1cc}.video-result-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#ffffffc9;font-size:10px;line-height:1.4}.video-result-foot time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.video-result-foot span{flex:none}.video-result-card .video-failed-delete{z-index:3}.video-result-card .video-result-open>span{background:transparent}.video-result-card .video-task-state{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;width:100%;height:100%;padding:20px;border:0;background:transparent;text-align:center;cursor:pointer}.video-result-card .video-task-state>span{display:grid;place-items:center;width:48px;height:48px;border:1px solid #ffffff35;border-radius:50%;font-size:22px}.video-result-card .video-task-state small{color:#cbd5e1;font-size:12px}.video-result-card .video-task-state:hover>span{background:#ffffff14}
.video-result-card .video-result-open>span{display:none}
.video-result-card{aspect-ratio:auto}
.video-result-card .task-thumb{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:var(--video-card-ratio,1/1);border-radius:16px 16px 0 0}
.video-result-card .video-result-open{position:absolute;inset:0}
.video-result-card .video-result-open video{object-fit:cover}
.video-page .task-list{row-gap:18px}
.video-result-overlay{opacity:0;transition:opacity .18s ease}
.video-result-card:hover .video-result-overlay,.video-result-card:focus-within .video-result-overlay{opacity:1}
@media(hover:none){.video-result-overlay{opacity:1}}
.video-playback-actions svg{width:19px;height:19px}
.video-playback-dialog{width:min(100vw - 32px,1900px);height:min(100vh - 32px,1100px);max-width:none;max-height:none;padding:0;border:0;border-radius:0;background:#f4f5f7;color:#152238;overflow:hidden;grid-template-columns:minmax(0,1fr) minmax(330px,410px);box-shadow:0 20px 80px #0005}.video-playback-dialog[open]{display:grid}.video-playback-dialog::backdrop{background:#101827b8;backdrop-filter:blur(4px)}.video-playback-stage{position:relative;display:grid;place-items:center;min-width:0;min-height:0;padding:44px 30px;background:#f4f5f7}.video-playback-stage video{display:block;width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;background:#000}.video-playback-close{position:absolute;z-index:2;top:18px;right:18px;width:46px;height:46px;border:1px solid #e8ebef;border-radius:50%;background:#fff;color:#4d596b;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 2px 8px #14203312}.video-playback-count{position:absolute;z-index:1;top:27px;left:50%;transform:translateX(-50%);padding:5px 16px;border-radius:20px;background:#111827cc;color:#fff;font-size:12px;font-weight:650}.video-playback-details{display:flex;flex-direction:column;gap:24px;min-width:0;overflow:auto;padding:24px 22px;background:#fff}.video-playback-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}.video-playback-heading h2{margin:0 0 5px;font-size:18px}.video-playback-heading time{color:#8995a7;font-size:12px}.video-playback-actions{display:flex;flex:none;gap:8px}.video-playback-download{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid #d7e2f2;border-radius:10px;background:#f4f8ff;color:#1d5fd0;font-size:12px;font-weight:650;line-height:1;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background .15s ease,border-color .15s ease}.video-playback-download:hover{background:#e9f1ff;border-color:#b8ccf2}.video-playback-download svg{width:16px;height:16px}.video-playback-footer{display:flex;justify-content:flex-end;margin-top:auto;padding-top:4px}.video-playback-delete{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid #f0d4d4;border-radius:9px;background:#fff;color:#c33c3c;font-size:12px;font-weight:650;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease}.video-playback-delete:hover{background:#fff2f2;border-color:#e5b4b4}.video-playback-delete svg{width:15px;height:15px}.video-playback-info{display:flex;flex-direction:column;gap:8px}.video-playback-info small{color:#8b9bb0;font-size:12px;font-weight:650}.video-playback-info p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;font-weight:650;line-height:1.6}.video-playback-info>strong{color:#647895;font-size:14px;line-height:1.5}.video-playback-edit{display:flex;align-items:center;gap:12px;width:100%;padding:13px 14px;border:1px solid #e6ebf2;border-radius:15px;background:#f8fafc;text-align:left;color:#152238;cursor:pointer}.video-playback-edit>span:first-child{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:#fff;color:#667893;font-size:18px}.video-playback-edit>span:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0}.video-playback-edit strong{font-size:13px}.video-playback-edit small{font-size:11px;color:#8290a3}.video-playback-edit>b{margin-left:auto;color:#9aa9bd;font-size:22px}.video-playback-edit:hover{border-color:#cddafa;background:#f2f6ff}
.video-playback-stage video[hidden],.video-playback-empty[hidden],.video-playback-error[hidden],.video-playback-count[hidden],.video-playback-download[hidden]{display:none!important}.video-playback-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;width:min(70%,520px);aspect-ratio:9/16;max-height:100%;border:1px dashed #cbd5e1;border-radius:16px;background:#e9edf3;color:#64748b;text-align:center}.video-playback-empty>span{font-size:42px}.video-playback-empty strong{color:#334155;font-size:16px}.video-playback-empty small{max-width:80%;color:#64748b;font-size:12px;line-height:1.5;overflow-wrap:anywhere}.video-playback-error{padding:12px;border:1px solid #ffd3ce;border-radius:12px;background:#fff6f5}.video-playback-error small{color:#c5443c}.video-playback-error p{color:#8f2c28}.video-playback-materials{display:grid;gap:8px}.video-playback-material{display:flex;align-items:center;gap:10px;min-width:0;padding:8px;border:1px solid #e8edf3;border-radius:11px;background:#fbfcfe}.video-playback-material-preview{display:grid;place-items:center;width:54px;height:54px;flex:none;overflow:hidden;border-radius:8px;background:#eaf1fb;color:#3976c9}.video-playback-material-preview img,.video-playback-material-preview video{width:100%;height:100%;object-fit:cover}.video-playback-material-icon{font-size:22px}.video-playback-material>div:last-child{display:flex;flex-direction:column;gap:4px;min-width:0}.video-playback-material strong{overflow:hidden;color:#24334a;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.video-playback-material small,.video-playback-material a{color:#8493a8;font-size:11px}.video-playback-material a{width:max-content;color:#1761d2;text-decoration:none}.video-playback-material-empty{color:#8995a7!important;font-size:12px!important;font-weight:400!important}
.video-playback-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);overflow:hidden}.video-playback-stage video{min-width:0;min-height:0}
.video-playback-dialog{background:#101827;color:#e6edf7}.video-playback-stage{background:#101827}.video-playback-details{background:#162338}.video-playback-edit{border-color:#2b3b54;background:#1b2a40;color:#e6edf7}.video-playback-edit>span:first-child{background:#243650;color:#d2def0}.video-playback-download{border-color:#33496b;background:#203349;color:#9cc2ff}.video-playback-download:hover{background:#294463;border-color:#48668f}.video-playback-delete{border-color:#5a3946;background:#2a1f28;color:#ff9c9c}.video-playback-delete:hover{background:#3b2933;border-color:#7d4a5a}
@media(max-width:760px){.video-playback-dialog{width:100vw;height:100dvh;grid-template-columns:1fr;grid-template-rows:minmax(40vh,1fr) minmax(0,52vh);border-radius:0}.video-playback-stage{padding:55px 12px 12px}.video-playback-close{top:10px;right:10px;width:40px;height:40px}.video-playback-count{top:20px}.video-playback-details{gap:16px;padding:16px}.video-playback-heading h2{font-size:16px}}

.text-mention-menu{position:fixed;z-index:3000;display:grid;gap:3px;width:min(300px,calc(100vw - 24px));max-height:220px;overflow:auto;padding:6px;border:1px solid #e3eaf1;border-radius:12px;background:#fff;box-shadow:0 12px 32px #18263826}.text-mention-menu[hidden]{display:none}.text-mention-menu button{display:flex;align-items:center;gap:8px;width:100%;min-width:0;padding:8px;border:0;border-radius:8px;background:transparent;text-align:left;font-size:12px;cursor:pointer}.text-mention-menu button:hover{background:#eef5ff}.text-mention-menu button span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-mention-kind{flex:none;padding:2px 5px;border-radius:5px;background:#f0f3f8;color:#748197;font-size:10px}.text-mention-empty{padding:10px;color:#87909c;font-size:11px}
.text-mention-menu{position:fixed;z-index:3000;display:grid;gap:3px;width:min(340px,calc(100vw - 24px));max-height:240px;overflow:auto;padding:6px;border:1px solid #e3eaf1;border-radius:12px;background:#fff;box-shadow:0 12px 32px #18263826}.text-mention-menu[hidden]{display:none}.text-mention-menu button{display:flex;align-items:center;gap:9px;width:100%;min-width:0;padding:7px;border:0;border-radius:8px;background:transparent;text-align:left;cursor:pointer}.text-mention-menu button:hover{background:#eef5ff}.text-mention-thumb{width:38px;height:38px;flex:none;object-fit:cover;border-radius:6px;background:#edf1f6}.text-mention-fallback{display:grid;place-items:center;color:#708098;font-size:17px}.text-mention-copy{display:flex;flex-direction:column;gap:2px;min-width:0}.text-mention-copy small{color:#8793a5;font-size:9px}.text-mention-copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#26354a;font-size:11px}.text-mention-empty{padding:10px;color:#87909c;font-size:11px}
.video-reference-loading{padding:10px 8px;box-sizing:border-box}
.video-reference-loading .video-reference-progress{position:relative;display:block;width:min(78px,76%);height:4px;overflow:hidden;border-radius:999px;background:#d9e5fb}
.video-reference-loading .video-reference-progress i{position:absolute;inset:0 auto 0 0;width:42%;border-radius:inherit;background:#075bea;animation:none}
.video-reference-loading .video-reference-progress.is-determinate i{inset:0 auto 0 0;width:0;border-radius:inherit;animation:none;transform:none;transition:width .25s ease}
.video-reference-loading .video-reference-progress-hint{font-size:9px;color:#8190a4}
.video-reference-loading .video-reference-progress{background:#34445d}
.video-reference-loading .video-reference-progress i{background:#78aaff}

/* Video results layout exported from the layout workbench. */
#taskList{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:center;flex-grow:1;column-gap:18px}
#taskList>.task-card{min-width:0;width:100%}
@media(max-width:1100px){#taskList{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:850px){#taskList{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){#taskList{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:400px){#taskList{grid-template-columns:minmax(0,1fr)}}

.replication-mode-picker{display:grid;grid-template-columns:1fr 1fr;gap:9px}.replication-mode-picker button{min-width:0;padding:11px 12px;text-align:left;border:1px solid #e4e8ef;border-radius:12px;background:#fff}.replication-mode-picker button.selected{border-color:#8bb8ff;background:#f1f7ff;box-shadow:0 0 0 1px #cce0ff inset}.replication-mode-picker strong,.replication-mode-picker small{display:block}.replication-mode-picker strong{font-size:12px;color:#202b3e}.replication-mode-picker small{margin-top:5px;color:#78869a;font-size:10px;line-height:1.5}.shot-analysis-intro{display:flex;align-items:center;justify-content:space-between;gap:12px}.shot-analysis-intro>span,.shot-analysis-actions small,.shot-analysis-status{font-size:11px;color:#7f8ba0;line-height:1.6}.shot-analysis-intro .small-action{flex:none}.shot-analysis-status{margin-top:8px}.shot-analysis-results{display:grid;gap:8px;max-height:330px;overflow:auto;margin-top:10px}.shot-analysis-row{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;align-items:center;padding:8px;border:1px solid #edf0f4;border-radius:11px;background:#fbfcfe}.shot-analysis-row>img{display:block;width:100px;height:72px;object-fit:cover;border-radius:7px;background:#eef2f7}.shot-analysis-copy{min-width:0}.shot-analysis-copy strong{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#27364c}.shot-analysis-copy strong span{font-weight:500;color:#7a879a}.shot-analysis-copy textarea{width:100%;min-height:48px;margin-top:5px;padding:6px 8px;resize:vertical;border:1px solid #e7ebf0;border-radius:7px;font-size:11px;line-height:1.5}.shot-analysis-actions{display:flex;align-items:center;gap:9px;margin-top:10px}.shot-analysis-actions small{font-size:10px}.shot-analysis-intro button:disabled{opacity:.5;cursor:not-allowed}

.replication-steps{display:flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #e8edf4;border-radius:11px;background:#f8fafd;color:#8490a1;font-size:10px}.replication-steps span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}.replication-steps b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e9edf3;color:#65748a;font-size:10px}.replication-steps span.active{color:#1769e8;font-weight:700}.replication-steps span.active b{background:#1769e8;color:#fff}.replication-steps i{height:1px;flex:1;min-width:6px;background:#e0e6ef}.replication-goal-hint{margin:0 0 8px;color:#78869a;font-size:10px;line-height:1.5}.replication-goal-input{display:block;width:100%;min-height:78px;padding:10px 11px;resize:vertical;border:1px solid #e5eaf1;border-radius:10px;font:inherit;font-size:11px;line-height:1.55;outline:none}.replication-goal-input:focus{border-color:#8bb8ff;box-shadow:0 0 0 2px #eaf3ff}.replication-goal-input::placeholder{color:#98a6b8}.replication-goal-suggestions{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:8px 0 10px}.replication-goal-suggestions span{margin-right:2px;color:#8793a6;font-size:10px}.replication-goal-suggestions button{padding:4px 8px;border:1px solid #e5eaf1;border-radius:14px;background:#fff;color:#61718a;font-size:10px;cursor:pointer}.replication-goal-suggestions button:hover{border-color:#9ec2ff;color:#1769e8;background:#f4f8ff}.replication-goal-suggestions+.replication-mode-picker{margin-top:8px}.recognized-element-evidence{max-width:360px;color:#5e718d!important;line-height:1.45!important}

.replication-targets{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:10px;padding-top:9px;border-top:1px solid #edf0f4}.replication-targets>span{font-size:11px;color:#58657a}.replication-targets label{display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border:1px solid #e7ebf0;border-radius:15px;background:#fff;font-size:11px;color:#38465c}.replication-targets input{margin:0;accent-color:#1769e8}.replication-targets small{flex-basis:100%;margin-left:2px;color:#8a94a5;font-size:10px}

.recognized-elements{display:grid;gap:8px;margin-top:12px;padding:11px;border:1px solid #e9edf3;border-radius:11px;background:#fafcff}.recognized-elements>strong{font-size:11px;color:#34435a}.recognized-element-list{display:flex;flex-wrap:wrap;gap:7px}.recognized-element-chip{display:inline-flex;align-items:flex-start;gap:7px;max-width:100%;padding:7px 9px;border:1px solid #e1e8f1;border-radius:9px;background:#fff;cursor:pointer}.recognized-element-chip:has(input:checked){border-color:#80b0ff;background:#f1f7ff}.recognized-element-chip input{margin:3px 0 0;accent-color:#1769e8}.recognized-element-chip span,.recognized-element-chip strong,.recognized-element-chip small{display:block;min-width:0}.recognized-element-chip strong{font-size:11px;color:#2d3a4f;overflow-wrap:anywhere}.recognized-element-chip small,.recognized-elements>small{margin-top:3px;color:#8793a6;font-size:10px;line-height:1.4}
.shot-sample-count{display:block;margin-top:4px;font-size:10px;font-weight:400;color:#8793a6}
.shot-sample-strip{display:flex;gap:6px;max-width:100%;overflow-x:auto;margin-top:7px;padding:2px 0 5px;scrollbar-width:thin}.shot-sample-card{flex:0 0 76px;width:76px;margin:0;padding:3px;border:1px solid #e1e7ef;border-radius:8px;background:#fff;transition:border-color .18s,background-color .18s,box-shadow .18s}.shot-sample-card img{display:block;width:68px;height:48px;object-fit:cover;border-radius:5px;background:#eef2f7}.shot-sample-card figcaption{display:flex;justify-content:space-between;gap:3px;margin-top:3px;font-size:9px;line-height:1.25;color:#7c8798;white-space:nowrap}.shot-sample-card.is-pending{border-color:#dce3ec;background:#f7f9fc}.shot-sample-card.is-processing{border-color:#4995ff;background:#eef6ff;box-shadow:0 0 0 1px #c6e0ff}.shot-sample-card.is-done{border-color:#65bd8b;background:#effaf3}.shot-sample-card.is-done figcaption span:last-child{color:#23834b}.shot-sample-card.is-error{border-color:#e87979;background:#fff1f1}.shot-sample-card.is-error figcaption span:last-child{color:#c63f3f}.shot-analysis-row{align-items:start}.shot-analysis-results{max-height:420px}.shot-analysis-intro>span{max-width:68ch}
.shot-analysis-row{grid-template-columns:minmax(0,1fr)}
.recognized-element-chip{position:relative;align-items:center;min-width:240px;padding:8px 40px 8px 9px}.recognized-element-chip>span{flex:1}.replicate-replace-button{flex:none;padding:5px 8px;font-size:10px}.replicate-replacement-name{display:flex!important;align-items:center;gap:5px;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.replicate-replacement-name img{width:24px;height:24px;flex:none;object-fit:cover;border-radius:5px}.replicate-replacement-remove{position:absolute;right:7px;top:7px;width:22px;height:22px;border:0;border-radius:50%;background:#eef1f5;color:#637086;font-size:16px;line-height:1;cursor:pointer}.replicate-audio-note{margin-top:10px;padding:10px 11px;border:1px solid #e7edf5;border-radius:10px;background:#f8fafc}.replicate-audio-note strong{font-size:11px;color:#34435a}.replicate-audio-note p{margin:4px 0 0;font-size:10px;line-height:1.5;color:#78869a}
.recognized-elements[hidden],.replicate-audio-note[hidden],.shot-analysis-actions[hidden],.shot-analysis-results[hidden]{display:none!important}

.replicate-audio-header{display:flex;align-items:center;justify-content:space-between;gap:10px}.replicate-transcript{display:grid;gap:7px;max-height:240px;overflow:auto;margin-top:9px}.replicate-utterance{display:grid;grid-template-columns:42px 76px minmax(0,1fr);gap:8px;align-items:start;padding:8px;border:1px solid #e4eaf2;border-radius:8px;background:#fff}.replicate-utterance>span,.replicate-utterance strong{font-size:10px;color:#66758a}.replicate-utterance p{margin:0;font-size:11px;line-height:1.55;color:#34435a;overflow-wrap:anywhere}.replicate-transcript-empty{margin:0;font-size:11px;color:#78869a}.replicate-audio-header .small-action{flex:none}.replicate-utterance{background:#172235;border-color:#34445d}.replicate-utterance p{color:#d5deeb}
.shot-dialogue{display:grid;gap:5px;margin-top:8px;padding:8px 9px;border:1px solid #e2eaf4;border-radius:8px;background:#f6f9fd}.shot-dialogue>strong{font-size:10px;color:#50617a}.shot-dialogue p{display:grid;grid-template-columns:minmax(105px,145px) minmax(0,1fr);gap:8px;margin:0;font-size:10px;line-height:1.5;color:#34435a;overflow-wrap:anywhere}.shot-dialogue p span{color:#71819a}.shot-dialogue>small{font-size:10px;color:#8b97a8}.shot-dialogue{background:#172235;border-color:#34445d}.shot-dialogue p{color:#d5deeb}
@media(max-width:460px){.replication-steps{gap:4px;padding:6px;font-size:9px}.replication-steps span{gap:3px}.replication-steps b{width:16px;height:16px;font-size:9px}.replication-mode-picker{grid-template-columns:1fr}.replication-goal-suggestions{gap:4px}.recognized-element-evidence{max-width:230px}}
/* 爆款复刻：手动选帧、生成并确认替换效果 */
.replicate-frame-player-wrap{position:relative;overflow:hidden;border:1px solid #e4eaf2;border-radius:12px;background:#101827}.replicate-frame-player-wrap video{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.replicate-frame-player-wrap>[data-keyframe-preview]{display:block;width:100%;height:250px;object-fit:contain;background:#101827}.replicate-frame-controls{display:grid;grid-template-columns:minmax(80px,1fr) 38px auto;align-items:center;gap:8px;padding:10px;background:#fff}.replicate-frame-controls input[type=range]{width:100%;accent-color:#1769e8}.replicate-frame-controls>span{font-size:10px;font-variant-numeric:tabular-nums;color:#65748a}.replicate-frame-controls button{grid-column:1/-1;justify-self:end}.replicate-keyframes{display:grid;gap:9px;margin-top:10px}.replicate-keyframe-item{display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;padding:9px;border:1px solid #e5eaf1;border-radius:11px;background:#fbfcfe}.replicate-keyframe-item>img{width:100px;height:100px;object-fit:cover;border-radius:8px;background:#e9eef5}.replicate-keyframe-copy{min-width:0}.replicate-keyframe-copy>strong{display:block;margin-bottom:6px;font-size:11px;color:#27364c}.replicate-keyframe-copy textarea,.replicate-narration-label textarea{box-sizing:border-box;width:100%;padding:8px;border:1px solid #e3e9f1;border-radius:8px;font:inherit;font-size:11px;line-height:1.5;resize:vertical}.replicate-frame-reference{margin-top:8px;padding:8px 9px;border:1px solid #e5ebf3;border-radius:9px;background:#fff}.replicate-frame-reference-heading{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}.replicate-frame-reference-heading strong{font-size:10px;color:#33435b}.replicate-frame-reference-heading small{font-size:9px;color:#8290a4}.replicate-frame-reference-items{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}.replicate-frame-reference-items figure{position:relative;width:54px;margin:0;text-align:center}.replicate-frame-reference-items figure img{display:block;width:54px;height:54px;object-fit:cover;border:1px solid #dce5f0;border-radius:7px;background:#f3f6fa}.replicate-frame-reference-items figure button{position:absolute;top:-5px;right:-5px;width:17px;height:17px;padding:0;border:0;border-radius:50%;background:#26364d;color:#fff;font-size:13px;line-height:17px;cursor:pointer}.replicate-frame-reference-items figcaption{overflow:hidden;margin-top:3px;color:#718098;font-size:8px;text-overflow:ellipsis;white-space:nowrap}.replicate-frame-reference-add{display:flex;width:54px;height:54px;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px dashed #b9c9dd;border-radius:7px;background:#f7faff;color:#3978c7;cursor:pointer}.replicate-frame-reference-add[hidden]{display:none}.replicate-frame-reference-add input{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}.replicate-frame-reference-add span{font-size:18px;line-height:18px}.replicate-frame-reference-add b{font-size:8px;font-weight:600}.replicate-keyframe-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:7px}.replicate-keyframe-actions button:disabled{opacity:.45;cursor:not-allowed}.replicate-confirmed-label{font-size:10px;color:#16834a;font-weight:700}.replicate-effect-preview{display:grid;justify-items:start;gap:7px;margin-top:9px;padding-top:8px;border-top:1px solid #e8edf4}.replicate-effect-preview img{display:block;width:min(100%,320px);max-height:300px;object-fit:contain;border:1px solid #e4eaf2;border-radius:8px;background:#f2f5f9}.replicate-frame-error{display:block;margin-top:6px;color:#c53f3f;font-size:10px;line-height:1.45}.replicate-narration-label{display:block;margin-top:12px;font-size:11px;font-weight:700;color:#33435b}.replicate-narration-label textarea{display:block;margin-top:6px;font-weight:400}.replicate-stage-status{font-size:11px;line-height:1.5;color:#78869a}.replicate-keyframe-preview-list{display:flex;gap:9px;flex-wrap:wrap;margin-top:9px}.replicate-keyframe-preview-list figure{width:92px;margin:0;padding:4px;border:1px solid #b9d7ff;border-radius:9px;background:#f3f8ff}.replicate-keyframe-preview-list img{display:block;width:82px;height:82px;object-fit:cover;border-radius:6px}.replicate-keyframe-preview-list figcaption{padding-top:4px;text-align:center;font-size:9px;color:#1769e8}
.reference-trim-dialog{width:min(680px,calc(100vw - 32px));max-height:min(90vh,760px);padding:0;border:1px solid #e4eaf2;border-radius:20px;background:#fff;color:#17243a;box-shadow:0 24px 80px #17243a35}.reference-trim-dialog::backdrop{background:#11182772;backdrop-filter:blur(3px)}.reference-trim-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:22px 24px 16px;border-bottom:1px solid #edf0f5}.reference-trim-head small{font-size:11px;color:#2563eb}.reference-trim-head h2{margin:5px 0;font-size:19px}.reference-trim-head p{margin:0;color:#6f7e93;font-size:13px;line-height:1.5}.reference-trim-head>button{width:32px;height:32px;border:0;border-radius:50%;background:#f1f4f8;color:#526176;font-size:22px}.reference-trim-options{display:grid;gap:14px;padding:18px 24px 24px}.reference-trim-upgrade{display:grid;gap:5px;text-align:left;padding:13px 15px;border:1px solid #bfdbfe;border-radius:13px;background:#eff6ff;color:#174ea6}.reference-trim-upgrade strong{font-size:13px}.reference-trim-upgrade small{font-size:11px;color:#5b7090}.reference-trim-editor{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(210px,.9fr);gap:16px;align-items:start}.reference-trim-preview{position:relative;overflow:hidden;border-radius:14px;background:#101827;aspect-ratio:16/10}.reference-trim-preview video{width:100%;height:100%;object-fit:contain}.reference-trim-preview button{position:absolute;left:10px;bottom:10px;padding:8px 11px;border:1px solid #ffffff65;border-radius:18px;background:#ffffffeb;color:#17243a;font-size:11px}.reference-trim-fields{display:grid;gap:10px}.reference-trim-fields label{display:grid;gap:5px;font-size:11px;font-weight:650}.reference-trim-fields input{height:39px;padding:0 10px;border:1px solid #dfe6ef;border-radius:10px;font-size:13px}.reference-trim-fields p{min-height:30px;margin:0;color:#73839a;font-size:11px;line-height:1.45}.reference-trim-fields [data-trim-error]{color:#c2413b}.reference-trim-fields button{height:40px;border:1px solid #dce4ef;border-radius:11px;background:#fff;color:#526176;font-weight:650}.reference-trim-fields button.primary{border-color:#1763e9;background:#1763e9;color:#fff}.reference-trim-fields button:disabled{opacity:.45;cursor:not-allowed}@media(max-width:600px){.reference-trim-head{padding:18px}.reference-trim-options{padding:14px 18px 20px}.reference-trim-editor{grid-template-columns:1fr}.reference-trim-preview{aspect-ratio:16/9}}
.video-result-card .video-task-state .video-task-progress-note{color:#d7e4f3;font-size:10px}100%{left:100%}}
.image-result-card.is-clickable{cursor:pointer}.image-result-card.is-clickable:hover{outline:2px solid #f2a7a7;outline-offset:2px}.image-task-detail-stage{background:linear-gradient(145deg,#fff7f6,#f1f4f8)}.image-task-detail-failure{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;width:min(70%,440px);aspect-ratio:1/1;border:1px solid #ffd9d5;border-radius:24px;background:linear-gradient(145deg,#fff,#fff5f4);color:#8c3330;text-align:center;box-shadow:0 20px 60px #8c333015}.image-task-detail-failure>span{display:grid;place-items:center;width:72px;height:72px;border:1px solid #f6b9b2;border-radius:50%;background:#ffe7e4;color:#cf4b42;font-size:36px;font-weight:700}.image-task-detail-failure strong{font-size:18px}.image-task-detail-failure small{color:#8d7a7a;font-size:12px}.image-task-detail-dialog .video-playback-details{gap:19px}.image-task-detail-dialog .video-playback-error{display:flex}.image-task-detail-stage{background:#101827}.image-task-detail-failure{border-color:#58383a;background:#251e27;color:#f3b7b3}.image-task-detail-failure>span{border-color:#754448;background:#412a31;color:#ffaaa3}.image-task-detail-failure small{color:#c1a4a5}
.work-asset-card.is-clickable{cursor:pointer}.work-asset-card.is-clickable:hover{outline:2px solid #f2a7a7;outline-offset:2px}
/* 爆款复刻：参考视频与关键帧选择合并为单卡片 */
.replicate-reference-card .reference-media-grid{display:block}.replicate-reference-card .video-upload-slot{width:100%;--expanded-width:100%;height:220px}.replicate-reference-card .asset-tile{width:100%;height:100%;min-height:180px;border-radius:12px}.replicate-reference-card .asset-thumb-stack{width:100%;height:100%}.replicate-reference-card .asset-thumb-video{object-fit:contain}.replicate-frame-picker{margin-top:12px;padding-top:11px;border-top:1px solid #e8edf4}.replicate-frame-picker .replication-goal-hint{margin:0 0 8px;font-size:10px}.replicate-frame-picker .replicate-frame-player-wrap>[data-keyframe-preview][hidden]{display:none}.replicate-frame-picker .replicate-frame-controls{grid-template-columns:minmax(70px,1fr) auto auto}.replicate-frame-picker .replicate-frame-controls button{grid-column:auto}.replicate-reference-card .replicate-keyframes{max-height:320px;overflow:auto;padding-right:2px}.replicate-reference-card .replicate-narration-label{margin-top:10px}

/* Loader sizing follows the video preview dimensions. */
.video-reference-loading,.video-result-card .video-task-state{container-type:inline-size}

.image-task-detail-stage{background:linear-gradient(145deg,#f6f8fb,#e9edf3)}.image-task-detail-stage #imageTaskDetailResult{max-width:100%;max-height:100%;object-fit:contain;border-radius:12px;box-shadow:0 14px 40px #0f172a20}.image-task-detail-stage #imageTaskDetailResult[hidden]{display:none}.image-task-detail-failure{border-color:#dbe3ed;background:linear-gradient(145deg,#fff,#f6f8fb);color:#53647b;box-shadow:0 20px 60px #27364a12}.image-task-detail-failure>span{border-color:#cbd6e4;background:#edf2f8;color:#61758f}.image-task-detail-failure small{color:#8b98a9}.image-task-detail-dialog .video-playback-error[hidden]{display:none!important}.image-task-detail-dialog .video-playback-error:not([hidden]){display:flex}.image-task-detail-stage{background:#101827}.image-task-detail-failure{border-color:#35445b;background:#182438;color:#d9e2ee}.image-task-detail-failure>span{border-color:#455873;background:#24334a;color:#c3d2e6}.image-task-detail-failure small{color:#a7b6c8}

/* 图片任务详情直接显示成品；支持滚轮缩放、放大后拖动，以及一键回到适应窗口。 */
.image-task-detail-stage{overflow:hidden;background:#eef1f5}.image-task-detail-stage #imageTaskDetailResult{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;border-radius:0;box-shadow:none;transform:translate(var(--image-pan-x,0px),var(--image-pan-y,0px)) scale(var(--image-zoom,1));transform-origin:center;user-select:none;-webkit-user-drag:none;touch-action:none}.image-task-detail-stage #imageTaskDetailResult[hidden],.image-task-detail-failure[hidden],.image-task-detail-zoom[hidden]{display:none!important}.image-task-detail-stage:has(#imageTaskDetailResult:not([hidden])){cursor:grab}.image-task-detail-stage.is-panning{cursor:grabbing}.image-task-detail-zoom{position:absolute;z-index:2;left:18px;bottom:18px;display:flex;align-items:center;gap:4px;padding:5px;border:1px solid #dce3ec;border-radius:12px;background:#ffffffed;box-shadow:0 4px 16px #18233718;backdrop-filter:blur(8px)}.image-task-detail-zoom button{min-width:36px;height:34px;padding:0 9px;border:0;border-radius:8px;background:transparent;color:#334155;font-size:17px;font-weight:650;cursor:pointer}.image-task-detail-zoom button:hover{background:#edf3ff;color:#145de0}.image-task-detail-zoom button[data-image-zoom="reset"]{font-size:12px}.image-task-detail-dialog .video-playback-error[hidden]{display:none!important}.image-task-detail-stage{background:#101827}.image-task-detail-zoom{border-color:#35445b;background:#182438ed}.image-task-detail-zoom button{color:#d9e2ee}.image-task-detail-zoom button:hover{background:#243650;color:#8db8ff}

/* Image details use the same progressive thumbnail-first loading as the canvas and expose sibling outputs. */
.image-task-detail-stage #imageTaskDetailPreview{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform:translate(var(--image-pan-x,0px),var(--image-pan-y,0px)) scale(var(--image-zoom,1));transform-origin:center;user-select:none;-webkit-user-drag:none;transition:opacity .18s ease}.image-task-detail-stage #imageTaskDetailResult{position:absolute;inset:0;opacity:0;transition:opacity .18s ease}.image-task-detail-stage #imageTaskDetailResult.is-loaded{opacity:1}.image-task-detail-stage #imageTaskDetailPreview[hidden],.image-task-detail-stage #imageTaskDetailResult[hidden]{display:none!important}

/* Image details use the same progressive thumbnail-first loading as the canvas and expose all loaded generated works. */
.image-task-detail-stage #imageTaskDetailPreview{position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;transform:translate(var(--image-pan-x,0px),var(--image-pan-y,0px)) scale(var(--image-zoom,1));transform-origin:center;user-select:none;-webkit-user-drag:none;transition:opacity .18s ease}.image-task-detail-stage #imageTaskDetailResult{position:absolute;inset:0;opacity:0;transition:opacity .18s ease}.image-task-detail-stage #imageTaskDetailResult.is-loaded{opacity:1}.image-task-detail-stage #imageTaskDetailPreview[hidden],.image-task-detail-stage #imageTaskDetailResult[hidden]{display:none!important}
.image-task-recover .image-recovery-progress{display:none;width:100%;height:4px;margin-top:5px;overflow:hidden;border-radius:999px;background:#dce8ff}.image-task-recover.is-loading .image-recovery-progress{display:block}.image-task-recover .image-recovery-progress i{display:block;width:36%;height:100%;border-radius:inherit;background:#1761e8;animation:image-recovery-indeterminate 1.15s ease-in-out infinite}@keyframes image-recovery-indeterminate{0%{transform:translateX(-110%)}100%{transform:translateX(290%)}}.image-task-recover.is-loading>span:first-child{animation:image-recovery-spin 1.2s linear infinite}@keyframes image-recovery-spin{to{transform:rotate(360deg)}}.image-task-recover:disabled{cursor:wait;opacity:.86}@media(prefers-reduced-motion:reduce){.image-task-recover.is-loading>span:first-child,.image-task-recover .image-recovery-progress i{animation:none}}

/* Transparent print extraction results use a checkerboard to reveal alpha. */
.image-result-card.is-transparent-print .image-result-link,.image-editor-image-wrap.is-transparent-print,.image-task-detail-stage.is-transparent-print,.image-editor-canvas-image.is-transparent-print{background-color:#dedfe2;background-image:linear-gradient(45deg,#bfc2c7 25%,transparent 25%),linear-gradient(-45deg,#bfc2c7 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#bfc2c7 75%),linear-gradient(-45deg,transparent 75%,#bfc2c7 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}

.video-playback-material-open{width:100%;font:inherit;text-align:left;color:inherit;cursor:pointer}.video-playback-material-open:hover{border-color:#bfd3f6;background:#f4f8ff}.video-playback-material-open:focus-visible{outline:2px solid #1761d2;outline-offset:2px}.video-playback-material-copy{display:flex;flex-direction:column;gap:4px;min-width:0;text-align:left}.video-playback-material-open:disabled{cursor:not-allowed;opacity:.65}

.nav-tools-flyout{position:fixed;inset:0;z-index:45;display:none;pointer-events:none}.nav-tools-flyout.open{display:block}.nav-tools-list{position:absolute;left:80px;top:50%;transform:translateY(-50%);width:370px;max-height:min(78vh,780px);overflow-y:auto;padding:7px;border:1px solid #e9ebee;border-radius:19px;background:#fff;box-shadow:0 18px 48px #222a351f;pointer-events:auto;scrollbar-width:thin}.nav-tools-heading{height:42px;padding:0 10px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #f0f1f3;margin-bottom:5px;font-size:13px}.nav-tools-heading span{font-size:11px;color:#969ca4}.nav-tools-item{width:100%;min-height:58px;padding:7px 9px;display:flex;align-items:center;gap:10px;border:1px solid transparent;border-radius:12px;background:#fff;text-align:left}.nav-tools-item:hover,.nav-tools-item.active{background:#e6f3d6;border-color:#e7ece8}.nav-tools-icon{width:34px;height:34px;flex:0 0 34px;display:grid;place-items:center;border-radius:10px;background:#f0f2f2}.nav-tools-icon img{width:18px;height:18px;object-fit:contain}.nav-tools-copy{min-width:0;display:block}.nav-tools-copy strong,.nav-tools-copy small{display:block}.nav-tools-copy strong{font-size:12px;font-weight:700}.nav-tools-copy small{margin-top:3px;color:#858d97;font-size:10px;line-height:1.35}.nav-tools-preview{display:none;position:absolute;left:462px;top:50%;transform:translateY(-50%);width:min(680px,43vw);padding:8px;border:1px solid #e8ebef;border-radius:18px;background:#fff;box-shadow:0 17px 44px #252b351c;pointer-events:auto}.nav-tools-flyout.preview-visible .nav-tools-preview{display:block}.nav-tools-preview img{display:block;width:100%;height:auto;border-radius:11px}.nav-tools-flyout.video-mode .nav-tools-list{width:370px}.nav-tools-flyout.video-mode .nav-tools-preview{left:462px}.nav-tools-list::-webkit-scrollbar{width:5px}.nav-tools-list::-webkit-scrollbar-thumb{border-radius:5px;background:#dfe2e5}@media(max-width:1250px){.nav-tools-list{left:68px;width:330px}.nav-tools-preview{left:410px;width:min(540px,42vw)}.nav-tools-flyout.video-mode .nav-tools-list{width:330px}.nav-tools-flyout.video-mode .nav-tools-preview{left:410px}}

.nav-tools-item.is-development{cursor:default}.nav-tools-item.is-development .nav-tools-icon{filter:grayscale(1);opacity:.48}.nav-tools-item.is-development:hover{background:transparent}
.nav-tools-flyout.design-mode .nav-tools-list{width:330px}.nav-tools-flyout.design-mode .nav-tools-preview{display:none}.nav-tools-flyout.design-mode .nav-tools-item.is-development{cursor:pointer}.nav-tools-flyout.design-mode .nav-tools-item.is-development:hover{background:#e6f3d6;border-color:#e7ece8}
.nav-tools-flyout.image-mode .nav-tools-list.is-grid{width:min(470px,calc(100vw - 96px));display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(48px,auto);align-content:start;gap:5px;overflow:hidden;scrollbar-width:none}
.nav-tools-flyout.image-mode .nav-tools-list.is-grid .nav-tools-heading{grid-column:1/-1;height:42px;margin:0}
.nav-tools-flyout.image-mode .nav-tools-list.is-grid .nav-tools-item{width:auto;min-width:0;min-height:48px;padding:6px 8px;gap:8px}
.nav-tools-flyout.image-mode .nav-tools-list.is-grid .nav-tools-copy small{display:none}
.nav-tools-flyout.image-mode .nav-tools-list.is-grid.is-grid-tight{grid-auto-rows:minmax(42px,auto);gap:3px;padding:5px}
.nav-tools-flyout.image-mode .nav-tools-list.is-grid.is-grid-tight .nav-tools-item{min-height:42px;padding:4px 6px;gap:6px}
.nav-tools-flyout.image-mode .nav-tools-list.is-grid.is-grid-tight .nav-tools-icon{width:30px;height:30px;flex-basis:30px}

.detail-page{min-height:100vh;margin-top:-70px;overflow:auto;background:#fafbfc;padding:52px 42px 48px}.detail-shell{width:min(1690px,100%);margin:0 auto}.detail-heading h1{font-size:22px;margin:0 0 8px}.detail-heading p{color:#7d838c;margin:0;font-size:14px}.detail-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:24px 0 15px}.detail-mode{height:108px;display:flex;align-items:center;gap:15px;text-align:left;padding:12px 16px;border:1px solid #e9ebee;border-radius:17px;background:#fff}.detail-mode.selected{border:2px solid #242629;padding:11px 15px;box-shadow:0 3px 10px #2221}.detail-mode>span:last-child{display:grid;gap:5px}.detail-mode strong{font-size:14px}.detail-mode small{font-size:11px;color:#778191}.detail-mode b{font-size:11px}.mode-art{position:relative;width:49px;height:49px;flex:none;border-radius:10px;background:#f2f3f5;display:flex;align-items:center;justify-content:center;gap:3px;flex-wrap:wrap;padding:6px}.mode-art i{display:block;background:#c8cdd4;border-radius:2px}.mode-main i{width:35px;height:35px}.mode-auto i{width:16px;height:16px}.mode-auto i:first-child{width:35px;height:14px}.mode-detail i{width:35px;height:8px;background:#c8cdd4}.detail-mode.selected .mode-art i{background:#161719}.detail-workbench{min-height:376px;display:grid;grid-template-columns:296px minmax(500px,1fr) 290px;background:#fff;border-radius:23px;box-shadow:0 10px 32px #2028320c;overflow:hidden}.detail-assets,.detail-settings,.detail-output{padding:21px 19px}.detail-assets,.detail-settings{border-right:1px solid #eef0f2}.detail-workbench h2{font-size:12px;color:#667080;margin:0 0 12px}.detail-upload{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:160px;margin-bottom:8px;border-radius:13px;background:#f3f4f6;color:#8693a5;cursor:pointer;overflow:hidden}.detail-upload.ref-upload{height:96px}.detail-upload .detail-plus{font-size:29px;font-weight:300;line-height:1}.detail-upload b{font-size:11px;font-weight:500;margin-top:4px;max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.detail-preview{display:none;position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.detail-upload.has-image .detail-preview{display:block}.detail-upload.has-image b{position:absolute;z-index:1;bottom:5px;max-width:90%;background:#ffffffdf;padding:3px 7px;border-radius:9px}.detail-assets p,.detail-output>p{font-size:11px;color:#8995a6;margin:10px 0}.detail-counts{height:40px;margin:-1px 0 9px;padding:4px 10px;display:flex;align-items:center;gap:14px;border-radius:12px;background:#f3f4f6}.detail-counts[hidden]{display:none}.detail-counts label{display:flex;align-items:center;gap:5px;font-size:11px}.detail-counts label[hidden]{display:none!important}.detail-counts label span{display:flex;align-items:center;gap:7px;background:#fff;border-radius:9px;padding:2px 5px}.detail-counts button{width:19px;height:22px;border:0;background:transparent;font-weight:700}.detail-counts small{color:#9aa1aa;font-size:10px}.detail-controls{height:48px;display:flex;align-items:center;gap:7px;border-bottom:1px solid #f0f1f3;white-space:nowrap}.detail-action,.detail-chip,.detail-controls label{display:inline-flex;align-items:center;gap:5px;font-size:11px}.detail-action{height:34px;padding:0 10px;border-radius:11px;background:#e6f3d6;font-weight:700}.detail-action img{width:15px;height:15px}.detail-chip{height:32px;padding:0 9px;border:1px solid #edf0f2;border-radius:11px;background:#fff;font-weight:600}.detail-chip small{font-size:9px;color:#8a95a3}.detail-chip.muted{color:#8e98a6}.detail-controls label{color:#7d8795}.detail-controls select{max-width:112px;border:0;background:transparent;font-size:11px;font-weight:600;color:#374151;outline:none}.detail-settings textarea{width:100%;height:150px;margin-top:12px;padding:16px;border:1px solid #eceef0;border-radius:14px;resize:vertical;font-size:13px;outline:none}.detail-settings textarea::placeholder{color:#9aa9bf}.detail-output{display:flex;flex-direction:column}.detail-total-card{border-radius:14px;background:#f3f4f6;padding:10px 12px}.detail-total-card>div{display:flex;justify-content:space-between;align-items:center;margin:4px 0;font-size:11px;color:#687384}.detail-total-card b{font-size:15px;color:#181b20}.detail-total-card>small{display:block;margin:7px 0;color:#929aa6;font-size:10px}.detail-total-card hr{border:0;border-top:1px solid #e4e6e9;margin:8px 0}.detail-total-card .detail-sum b{font-size:20px}.detail-output>p{margin:10px 0}.detail-output>button{height:42px;margin-top:auto;border:0;border-radius:13px;background:#d5dbe4;color:#fff;font-weight:700}.detail-output>button:not(:disabled){background:#17191d}.detail-results-toolbar{display:flex;align-items:center;gap:12px;margin:18px 0}.detail-results-toolbar div{display:flex;gap:7px}.detail-results-toolbar button{height:33px;padding:0 14px;border:0;border-radius:20px;background:transparent;color:#747c87;font-size:12px}.detail-results-toolbar button.selected{background:#e6f3d6;color:#0059ff;font-weight:700}.detail-results-toolbar>span{font-size:11px;color:#979da6}.detail-results{min-height:430px}.detail-empty{min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.detail-empty strong{font-size:15px}.detail-empty p{font-size:12px;color:#929aa6;margin:10px 0 17px}.detail-empty button{height:37px;padding:0 17px;border:0;border-radius:11px;background:#17191d;color:#fff;font-size:12px;font-weight:600}.detail-job{width:min(420px,100%);display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:10px;border:1px solid #eceef0;border-radius:15px;background:#fff}.detail-job-image{width:54px;height:54px;border-radius:10px;background:#f2f3f5;overflow:hidden;display:grid;place-items:center;color:#98a1ad}.detail-job-image img{width:100%;height:100%;object-fit:cover}.detail-job>div:nth-child(2){display:grid;gap:5px}.detail-job strong{font-size:12px}.detail-job small{font-size:10px;color:#8992a0}.detail-job-status{margin-left:auto;color:#0059ff;font-size:11px}@media(max-width:1500px){.detail-shell{width:100%}.detail-workbench{grid-template-columns:255px minmax(420px,1fr) 255px}}@media(max-width:1100px){.detail-page{padding:42px 20px 24px}.detail-workbench{grid-template-columns:210px minmax(300px,1fr) 210px}.detail-controls{gap:3px}.detail-controls select{max-width:85px}}@media(max-width:850px){.detail-modes{grid-template-columns:1fr}.detail-workbench{grid-template-columns:1fr}.detail-assets,.detail-settings{border-right:0;border-bottom:1px solid #eef0f2}.detail-upload{height:88px}.detail-upload.ref-upload{height:72px}.detail-output>button{margin-top:18px}}
.detail-workbench{grid-template-columns:220px minmax(360px,.85fr) minmax(340px,1.15fr);min-height:370px}.detail-assets,.detail-settings,.detail-output{padding:18px 15px}.detail-asset-group{margin:0 0 14px}.detail-asset-heading{display:flex;align-items:center;justify-content:space-between;margin:0 2px 7px;color:#35445a;font-size:11px}.detail-asset-heading small{color:#95a1b1;font-size:10px}.detail-upload-stack{display:flex;align-items:flex-start;min-height:4px;padding:2px 1px 7px 7px;overflow:visible}.detail-upload-item{position:relative;z-index:calc(10 - var(--stack-index));flex:0 0 60px;width:60px;height:77px;margin-left:-17px;border:2px solid #fff;border-radius:11px;background:#edf1f5;box-shadow:0 3px 10px #26344824;overflow:visible}.detail-upload-item:first-child{margin-left:0}.detail-upload-item img{display:block;width:100%;height:100%;border-radius:9px;object-fit:cover}.detail-upload-index{position:absolute;left:2px;right:2px;bottom:2px;padding:2px 3px;border-radius:6px;background:#101a1acc;color:#fff;text-align:center;font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.detail-upload-item button{position:absolute;z-index:2;top:-7px;right:-7px;width:20px;height:20px;padding:0;border:2px solid white;border-radius:50%;background:#202938;color:white;font-size:15px;line-height:15px;box-shadow:0 2px 5px #0003}.detail-upload-add{width:100%;min-height:40px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px dashed #d9e1e9;border-radius:11px;background:#f5f7f9;color:#65758b;font-size:11px;cursor:pointer}.detail-upload-add:hover{border-color:#8abaf2;background:#f0f7ff;color:#075bea}.detail-upload-add>span{font-size:20px;font-weight:300;line-height:1}.detail-assets p{margin-top:12px;line-height:1.5}.detail-counts{height:auto;min-height:40px;flex-wrap:wrap}.detail-controls{height:auto;min-height:48px;flex-wrap:wrap;white-space:normal;padding:7px 0;row-gap:7px}.detail-controls label{height:32px;padding:0 8px;border:1px solid #edf0f2;border-radius:10px;background:#fff}.detail-controls select{max-width:125px}.detail-settings>textarea{height:105px;resize:vertical}.detail-recognition-result{margin-top:10px;padding:10px;border:1px solid #edf0f2;border-radius:12px;background:#fafbfd}.detail-recognition-result>div{display:grid;gap:4px}.detail-recognition-result strong{font-size:11px;color:#4b5d72}.detail-recognition-result small{font-size:10px;color:#97a1ae}.detail-recognition-result textarea{width:100%;height:48px;margin-top:8px;padding:8px;border:1px solid #edf0f2;border-radius:8px;background:#fff;color:#596779;font:inherit;font-size:10px;resize:vertical}.detail-recognition-result textarea::placeholder{color:#a3adbb}.detail-controls .detail-chip.muted small{color:#8e98a6}.detail-output>button:not(:disabled){background:#0059ff;color:#fff}.detail-job{width:100%}.detail-job-status{white-space:nowrap}
@media(max-width:1300px){.detail-workbench{grid-template-columns:190px minmax(360px,1fr) 205px}.detail-assets,.detail-settings,.detail-output{padding:15px 12px}.detail-upload-item{flex-basis:54px;width:54px;height:70px}}
@media(max-width:850px){.detail-workbench{grid-template-columns:1fr}.detail-assets,.detail-settings{border-right:0;border-bottom:1px solid #eef0f2}.detail-upload-stack{min-height:0}.detail-upload-item{flex-basis:64px;width:64px;height:80px}.detail-output>button{margin-top:18px}}

/* Keep generation controls and copy planning in distinct, side-by-side panels. */
.detail-workbench{grid-template-columns:220px minmax(390px,1.25fr) minmax(300px,.9fr)}
.detail-settings{min-width:0}
.detail-output{min-width:0;gap:18px}
.detail-plan-panel{display:flex;min-height:0;flex:1;flex-direction:column}
.detail-plan-panel>p{margin:0 0 10px;color:#8995a6;font-size:11px;line-height:1.5}
.detail-plan-panel textarea{width:100%;min-height:160px;flex:1;resize:vertical;padding:12px;border:1px solid #e8edf2;border-radius:12px;background:#fbfcfd;color:#435166;font:inherit;font-size:12px;line-height:1.65;outline:none}
.detail-plan-panel textarea::placeholder{color:#9aa9bf}
.detail-output-summary{display:flex;flex-direction:column;flex:none}
.detail-output-summary>h2{margin-bottom:9px}
.detail-output-summary>p{margin:8px 0;font-size:11px;color:#8995a6}
.detail-output-summary>button{height:40px;margin-top:5px}
@media(max-width:1300px){.detail-workbench{grid-template-columns:190px minmax(340px,1.2fr) minmax(270px,.9fr)}}
@media(max-width:850px){.detail-workbench{grid-template-columns:1fr}.detail-assets,.detail-settings{border-right:0;border-bottom:1px solid #eef0f2}.detail-output{border-bottom:0}.detail-plan-panel textarea{min-height:180px}.detail-output-summary>button{margin-top:10px}}

.detail-results{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:14px;align-content:start;min-height:220px}
.detail-work-item{min-width:0;overflow:hidden;border:1px solid #e8edf2;border-radius:14px;background:#fff;box-shadow:0 4px 14px #2028320a}
.detail-work-thumb{position:relative;display:grid;aspect-ratio:3/4;overflow:hidden;background:#f1f4f7;color:#748196;text-decoration:none}
.detail-work-thumb img{width:100%;height:100%;object-fit:cover}
.detail-thumb-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#78879a}
.detail-thumb-placeholder span{font-size:30px}
.detail-thumb-placeholder small{font-size:11px}
.detail-thumb-status{position:absolute;right:8px;bottom:8px;padding:4px 8px;border-radius:20px;background:#111827b8;color:#fff;font-size:10px}
.detail-work-meta{display:grid;gap:5px;padding:10px 12px}
.detail-work-meta strong{font-size:12px;color:#27364a}
.detail-work-meta small{overflow:hidden;color:#8894a4;font-size:10px;line-height:1.5;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.detail-work-item.failed .detail-work-thumb{background:#fff4f2}
@media(max-width:600px){.detail-results{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}}

/* Detail image output follows the same visual gallery pattern as the image generator. */
.detail-results:has(.image-result-card){display:grid;grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),260px));grid-auto-rows:max-content;grid-auto-flow:row;justify-content:start;align-content:start;align-items:start;gap:16px;min-height:220px;padding:0 0 36px}
.detail-results .image-result-card{width:100%;aspect-ratio:1}
.detail-results .detail-long-image-card{background:#fff}
.detail-results .detail-long-image-status{display:grid;place-items:center;padding:14px;text-align:center}
.detail-long-image-status>div{display:grid;justify-items:center;gap:9px}
.detail-long-image-status>div>span{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#eaf2ff;color:#075bea;font-size:19px;font-weight:700}
.detail-long-image-status strong{font-size:12px}
.detail-long-image-status small{color:#7b8797;font-size:10px;line-height:1.5}
.detail-long-image-status button{height:28px;padding:0 10px;border:0;border-radius:8px;background:#075bea;color:#fff;font-size:11px;cursor:pointer}
.detail-results .detail-long-image-link{inset:0}
.detail-results .image-result-link img.detail-long-image-thumbnail{position:relative;z-index:1;object-fit:contain;background:#fff}
.detail-long-image-footer{position:absolute;z-index:2;left:0;right:0;bottom:0;height:38px;display:flex;align-items:center;justify-content:center;gap:6px;padding:0 9px;background:#fff;border-top:1px solid #edf0f4;font-size:11px}
.detail-long-image-footer strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.detail-long-image-footer small{color:#7b8797;font-size:10px;white-space:nowrap}
@media(max-width:600px){.detail-results:has(.image-result-card){grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

/* Compact plan editors with independent numbered tabs per image category. */
.detail-output{min-height:0}
.detail-plan-panel{max-height:min(62vh,650px);overflow:auto;flex:1 1 auto}
.detail-plan-fields{display:grid;gap:10px;min-height:0}
.detail-plan-field{display:grid;gap:5px;color:#586579;font-size:11px}
.detail-plan-field textarea{display:block;width:100%;min-height:96px;padding:10px;border:1px solid #e8edf2;border-radius:10px;background:#fbfcfd;color:#435166;font:inherit;font-size:11px;line-height:1.6;resize:vertical}
.detail-plan-field textarea:focus{border-color:#9cc5ff;outline:2px solid #eaf3ff}
.detail-output-summary{gap:0}
.detail-output-summary>p[hidden]{display:none}
#detailResults[hidden],#detailResultsToolbar[hidden]{display:none!important}
@media(max-width:850px){.detail-plan-panel{max-height:none}}
.detail-page{padding-top:82px}.detail-control-select{height:32px;padding:0 8px;border:1px solid #edf0f2;border-radius:10px;background:#fff;color:#7d8795;font-size:11px}.detail-control-select select{max-width:90px!important}.detail-controls select:disabled{color:#8792a1;opacity:.8}

/* Compact spec row and independently switchable plan copy for each image type. */
.detail-heading{margin-bottom:18px}
.detail-heading p{font-size:13px}
.detail-workbench{grid-template-columns:220px minmax(360px,.85fr) minmax(340px,1.15fr);min-height:0}
.detail-settings{min-width:0}
.detail-counts{min-height:42px;margin:0 0 9px;padding:5px 9px;gap:10px;flex-wrap:nowrap;border:1px solid #edf1f5;background:#f8fafc}
.detail-counts label{gap:7px;white-space:nowrap;color:#39485d;font-weight:600}
.detail-counts label span{gap:5px;padding:2px 4px;border:1px solid #e8edf2;background:#fff}
.detail-counts label small{color:#8793a3}
.detail-counts button{width:21px;height:22px;border-radius:6px;color:#075bea;cursor:pointer}
.detail-counts button:hover:not(:disabled){background:#eef5ff}
.detail-counts button:disabled{color:#bdc5cf;cursor:default}
.detail-counts label.is-inactive{color:#97a1af}
.detail-counts label.is-inactive span{background:#f4f6f8}
.detail-controls{min-height:42px;padding:5px 0;gap:6px}
.detail-output{min-width:0;gap:12px}
.detail-plan-panel{max-height:none;overflow:visible;flex:none}
.detail-plan-panel h2{margin-bottom:8px}
.detail-plan-fields{gap:10px}
.detail-plan-group{min-width:0;padding:9px;border:1px solid #edf0f3;border-radius:12px;background:#fbfcfd}
.detail-plan-group-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.detail-plan-group-head>strong{color:#35445a;font-size:11px;white-space:nowrap}
.detail-plan-tabs{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.detail-plan-tabs button{width:23px;height:23px;padding:0;border:1px solid #e5eaf0;border-radius:7px;background:#fff;color:#65748a;font-size:10px;cursor:pointer}
.detail-plan-tabs button:hover{border-color:#9bc4ff;color:#075bea}
.detail-plan-tabs button.selected{border-color:#075bea;background:#075bea;color:#fff;font-weight:700}
.detail-plan-field{gap:4px}
.detail-plan-field>span{font-size:10px;color:#8490a0}
.detail-plan-field textarea{min-height:82px;height:82px;padding:8px 9px;line-height:1.55;font-size:10px;overflow-y:auto;resize:none}
.detail-output-summary{margin-top:auto}
@media(max-width:1300px){.detail-workbench{grid-template-columns:190px minmax(280px,.8fr) minmax(340px,1.2fr)}}
@media(max-width:1200px){.detail-workbench{grid-template-columns:190px minmax(300px,.85fr) minmax(300px,1.15fr)}.detail-assets,.detail-settings,.detail-output{padding:15px 12px}.detail-counts{gap:5px}.detail-counts label{gap:4px;font-size:10px}}
@media(max-width:850px){.detail-workbench{grid-template-columns:1fr}.detail-assets,.detail-settings{border-right:0;border-bottom:1px solid #eef0f2}.detail-counts{flex-wrap:wrap}.detail-output{min-height:0}.detail-output-summary{margin-top:0}}
#detailRecognition{height:32px;padding:0 13px;border:1px solid #075bea;border-radius:10px;background:#075bea;color:#fff;font-weight:700;box-shadow:0 3px 9px #075bea2e;cursor:pointer}
#detailRecognition:hover:not(:disabled){background:#004bd1;border-color:#004bd1;box-shadow:0 4px 12px #075bea40}
#detailRecognition:disabled{opacity:.58;cursor:wait}
#detailGenerate{height:42px;border:0;border-radius:11px;background:#075bea;color:#fff;font-weight:700;box-shadow:0 4px 12px #075bea2b;cursor:pointer}
#detailGenerate:hover:not(:disabled){background:#004bd1;box-shadow:0 5px 15px #075bea40}
#detailGenerate:disabled{background:#a9c8f8;color:#fff;box-shadow:none;cursor:not-allowed}

.detail-long-image-status>div>span.detail-long-image-alert{display:grid;place-items:center}
/* Keep detail-image inputs docked like a compact creation toolbar. */
.detail-page{padding-bottom:48vh}
.detail-workbench{position:fixed;z-index:25;left:calc(50% + 42px);bottom:16px;transform:translateX(-50%);width:min(1040px,calc(100vw - 150px));max-height:min(48vh,500px);min-height:0;grid-template-columns:minmax(190px,.72fr) minmax(330px,1.05fr) minmax(300px,1fr);overflow:hidden;box-shadow:0 12px 42px #10182830}
.detail-workbench .detail-assets,.detail-workbench .detail-settings,.detail-workbench .detail-output{min-width:0}.detail-workbench .detail-settings textarea{overflow-y:auto;resize:none}
@media(max-width:850px){.detail-page{padding-bottom:58vh}.detail-workbench{left:50%;bottom:8px;width:calc(100vw - 24px);max-height:55vh;grid-template-columns:1fr}.detail-workbench .detail-assets,.detail-workbench .detail-settings{border-right:0;border-bottom:1px solid #eef0f2}.detail-workbench .detail-upload{height:74px}.detail-workbench .detail-upload.ref-upload{height:60px}}
@media(min-width:851px){.detail-workbench{height:min(38vh,360px);max-height:min(38vh,360px);grid-template-columns:minmax(255px,.78fr) minmax(330px,1.05fr) minmax(300px,1fr)}.detail-workbench .detail-assets{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr;align-content:start;gap:7px 10px;padding:12px}.detail-workbench .detail-assets>h2{grid-column:1/-1;margin:0}.detail-workbench .detail-asset-group{min-width:0;margin:0}.detail-workbench .detail-upload-add{min-height:34px}.detail-workbench .detail-upload-add .upload-plus{font-size:19px}.detail-workbench .detail-upload-stack{min-height:0;padding:1px 1px 4px 6px}.detail-workbench .detail-upload-item{flex-basis:44px;width:44px;height:54px;margin-left:-13px}.detail-workbench .detail-settings,.detail-workbench .detail-output{padding:13px 14px}.detail-workbench .detail-settings textarea{height:100px;min-height:80px;margin-top:7px;padding:11px}.detail-workbench .detail-counts{min-height:34px;height:34px;margin-bottom:6px}.detail-workbench .detail-controls{height:40px;gap:4px}.detail-workbench .detail-control-select{height:29px;padding:0 5px}.detail-workbench .detail-chip{height:29px;padding:0 7px}.detail-workbench .detail-total-card{padding:7px 9px}.detail-workbench .detail-total-card>div{margin:2px 0}.detail-workbench .detail-total-card>small{margin:4px 0}.detail-workbench .detail-output>button{height:36px}}
.detail-prompt-wrap{width:100%}.detail-settings .detail-prompt-wrap>textarea{display:block;margin-top:12px}.detail-prompt-actions{display:flex;justify-content:flex-end;margin-top:6px}
.detail-long-image-status>div>.gx{width:auto;height:auto;border-radius:0;background:transparent;color:inherit}

/* The detail-task status preview supplies the loader size reference. */
.detail-long-image-status>div{container-type:inline-size;width:100%}

/* The former detail-image module is now the Design module with visible subcategories. */
.design-category-tabs{display:flex;align-items:center;gap:9px;margin:0 0 17px}
.design-category-tab{min-height:38px;padding:0 16px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#53647b;font-size:13px;font-weight:650;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.design-category-tab:hover{border-color:#9bc4ff;color:#075bea}
.design-category-tab.is-active{border-color:#9bc4ff;background:#eef5ff;color:#075bea}
.design-category-tab span{margin-left:5px;padding:2px 6px;border-radius:8px;background:#f1f3f5;color:#8792a0;font-size:9px;font-weight:500}
.design-category-records[hidden],.design-category-composer-wrap[hidden]{display:none!important}
.design-category-records{min-width:0;min-height:320px;margin:24px 0 0;padding:0 0 250px}
.design-category-records-toolbar{display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:12px;padding:0 4px}
.design-category-records-toolbar>strong{font-size:16px;color:#26364b}
.design-category-records-toolbar>.image-record-filter{margin-left:auto}
.design-category-records-toolbar>#designCategoryRecordCount{color:#8290a3;font-size:12px;white-space:nowrap}
.design-record-status-filter{display:flex;align-items:center;gap:4px}
.design-record-status-filter button{height:32px;padding:0 10px;border:0;border-radius:9px;background:transparent;color:#69778a;font-size:12px;cursor:pointer}
.design-record-status-filter button.selected{background:#eaf3ff;color:#075bea;font-weight:700}
.design-category-records>.detail-results{min-height:220px}
.design-category-composer .composer-preset{flex:none}
.design-category-composer .composer-content{align-items:flex-start;min-height:126px}
.design-category-composer #designCategoryUploads{display:flex;flex:0 0 auto;gap:12px;width:max-content;max-width:48%;overflow:visible}
.design-category-composer #designCategoryUploads .composer-slot-wrap{position:relative;display:flex;flex:0 0 90px;width:90px;height:110px;flex-direction:column;align-items:center;gap:5px;overflow:visible}
.design-category-composer #designCategoryUploads .composer-upload-frame,.design-category-composer #designCategoryUploads .composer-upload{width:90px;height:90px;min-width:90px;min-height:90px;max-width:90px;max-height:90px;flex:0 0 90px;transform:none}
.design-category-composer #designCategoryUploads .composer-upload{box-sizing:border-box;overflow:hidden;border:1px dashed #c7d3e2;border-radius:10px;background:#f3f5f8}
.design-category-composer #designCategoryUploads .upload-label{position:static;display:block;width:90px;max-width:90px;min-height:14px;margin:0;overflow:hidden;color:#71829a;font-size:11px;line-height:14px;text-align:center;text-overflow:ellipsis;white-space:nowrap;opacity:1;pointer-events:none}
.design-category-composer #designCategoryUploads .composer-upload img.preview{position:absolute;inset:0;width:90px;height:90px;object-fit:cover;transform:none;border-radius:10px}
.design-category-composer #designCategoryUploads .slot-remove-button{top:3px;right:3px;z-index:5}
.design-category-composer #designCategoryPrompt{flex:1;min-width:0;min-height:100px;resize:vertical;border:0;outline:0;background:transparent;padding:8px 6px;font:inherit;font-size:14px;line-height:1.6}
.design-category-composer #designCategoryPrompt::placeholder{color:#9baac0}
.design-category-name-control{height:39px;display:flex;align-items:center;gap:7px;flex:none;padding:0 10px;border:1px solid #d8e7fb;border-radius:12px;background:#edf5ff;color:#075bea;font-size:12px;font-weight:700;white-space:nowrap}
.design-category-name-control img{width:15px;height:15px}
.design-category-composer .composer-toolbar{align-items:center;gap:7px;flex-wrap:wrap}
.design-category-composer .composer-options{gap:6px;flex-wrap:wrap}
.design-category-select{height:38px;display:flex;align-items:center;gap:5px;padding:0 8px;border:1px solid #e5eaf1;border-radius:11px;background:#fff;color:#596475;font-size:11px;white-space:nowrap}
.design-category-select select{max-width:95px;border:0;outline:0;background:transparent;color:#17243a;font:inherit;font-weight:650;cursor:pointer}
.design-category-composer .composer-submit small{color:#8b97a8;font-size:10px;white-space:nowrap}
.design-category-composer .submit-arrow:disabled{background:#cbd3df;cursor:not-allowed;opacity:.75}
body.dark-theme .design-category-tab{border-color:#34455d;background:#152238;color:#c7d5e8}
body.dark-theme .design-category-tab.is-active{border-color:#527bb5;background:#203b63;color:#a9cbff}
body.dark-theme .design-category-tab span{background:#26364b;color:#a5b5cb}
.detail-results-toolbar>.image-record-filter{margin-left:0}.detail-results-toolbar>.image-record-filter select{height:33px;max-width:190px}.detail-results-toolbar [data-layout-control]{margin-left:auto}

/* Keep the template shelf at about two-thirds of its former width across Design categories. */
.detail-page{--design-template-width:clamp(220px,17.5vw,267px)}
.detail-page .detail-shell{display:block;width:calc(100% - 80px - var(--design-template-width) - 42px);min-width:0;margin:0 0 0 calc(80px + var(--design-template-width))}
.design-template-panel{position:fixed;z-index:7;top:0;left:80px;bottom:0;width:var(--design-template-width);min-height:0;display:flex;flex-direction:column;gap:18px;padding:84px 14px 14px;border:0;border-right:1px solid #e7ebf1;border-radius:0;background:#ffffffed;box-shadow:none;backdrop-filter:blur(14px)}
.design-template-panel>header{display:flex;align-items:center;min-height:42px}
.design-template-panel>header>div{display:grid;gap:5px}
.design-template-panel>header strong{font-size:15px;color:#27364a}
.design-template-panel>header small{font-size:11px;color:#8b97a8}
.design-template-empty{flex:1;min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;border:1px dashed #dfe7f1;border-radius:16px;background:#fafbfd;color:#718096}
.design-template-empty>span{width:42px;height:42px;display:grid;place-items:center;border-radius:13px;background:#eef5ff;color:#2874e8;font-size:23px}
.design-template-empty strong{font-size:13px;color:#506078}
.design-template-empty small{font-size:11px;color:#98a3b1}
.detail-page .detail-shell>#ecommerceDesignCategory{min-width:0}
body.dark-theme .design-template-panel{border-color:#314158;background:#111d2ded}
body.dark-theme .design-template-panel>header strong{color:#e6edf7}
@media(max-width:760px){.design-template-panel{left:72px;width:min(var(--design-template-width),calc(100vw - 86px))}.detail-page .detail-shell{width:calc(100% - 72px - var(--design-template-width) - 14px);margin-left:calc(72px + var(--design-template-width))}}
.design-template-browser{min-height:0;flex:1;display:flex;flex-direction:column;gap:0;overflow:hidden;container-type:inline-size}
.design-template-groups,.design-template-subgroups{flex:none;display:flex;align-items:stretch;flex-wrap:wrap;gap:0;overflow:visible;padding:0;scrollbar-width:none}
.design-template-groups{background:#fff}
.design-template-groups button,.design-template-subgroups button{flex:none;min-height:30px;padding:0 10px;border:0;border-right:1px solid #fff;border-radius:0;background:transparent;color:#586a80;font-size:11px;white-space:nowrap;cursor:pointer;margin:0}
.design-template-groups button.active{background:#075bea;color:#fff;font-weight:700}
.design-template-subgroups{min-height:26px;margin-top:5px;background:#fff}
.design-template-subgroups button{min-height:26px;padding:0 8px;border-right-color:#fff;color:#77869a;font-size:10px}
.design-template-subgroups button.active{background:#fff;color:#075bea;font-weight:700;box-shadow:inset 0 -2px #075bea}
.design-template-items{min-height:0;flex:1;overflow:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:calc((100cqi - 24px)/3);align-content:start;align-items:stretch;column-gap:10px;row-gap:12px;padding:1px 3px 8px 1px;scrollbar-width:thin}
.design-template-items.is-layout-template{grid-auto-rows:auto;align-items:start}
.design-template-card{position:relative;display:block;width:100%;height:100%;min-width:0;min-height:0;aspect-ratio:1/1;box-sizing:border-box;overflow:hidden;padding:0;border:1px solid #e7edf4;border-radius:14px;background:#eff1f4;color:#485a70;cursor:pointer;text-align:left}
.design-template-card.layout-template-card{height:auto;min-height:0;aspect-ratio:auto}
.design-template-card:hover,.design-template-card.is-selected{border-color:#6ea8ff;box-shadow:0 0 0 1px #6ea8ff55}
.design-template-card>img{position:relative;display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:inherit;background:#f0f3f7}
.design-template-card.layout-template-card>img{height:auto;aspect-ratio:auto;object-fit:contain}
.design-template-card>span{position:absolute;z-index:2;inset:auto 0 0;box-sizing:border-box;padding:24px 9px 8px;overflow:hidden;background:linear-gradient(transparent,#101522a8);color:#fff;text-align:left;font-size:10px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .14s}
.design-template-card:hover>span,.design-template-card:focus-visible>span,.design-template-card:focus-within>span{opacity:1}
.design-template-card>.material-favorite-button{position:absolute;z-index:5;top:6px;right:6px;display:grid;place-items:center;width:24px;height:24px;min-height:0;padding:0;border:1px solid #ffffffc9;border-radius:50%;background:#ffffffed;color:#687386;font-size:16px;line-height:1;opacity:0;pointer-events:none;box-shadow:0 2px 8px #11182726;cursor:pointer;transition:opacity .14s,color .14s}
.design-template-card:hover>.material-favorite-button,.design-template-card:focus-within>.material-favorite-button{opacity:1;pointer-events:auto}
.design-template-card>.material-favorite-button:hover,.design-template-card>.material-favorite-button:focus-visible{border-color:#f3a3b4;background:#fff;outline:2px solid #f8d5de;outline-offset:1px}
.design-template-card>.material-favorite-button.is-favorite{color:#ed5474}
.design-template-card>.material-favorite-button svg{width:15px;height:15px}
.design-template-selected{position:absolute;left:8px;top:8px;padding:3px 6px;border-radius:8px;background:#075beadd;color:#fff;font-size:9px}
.design-template-card[draggable="true"]{cursor:grab}.design-template-card[draggable="true"]:active{cursor:grabbing}
.style-template-card{aspect-ratio:1/1;box-sizing:border-box;min-height:0;padding:0;border-radius:10px;background:#eef2f7}
.style-template-card>img{position:relative;inset:auto;display:block;width:100%;height:auto;flex:none;aspect-ratio:1/1;object-fit:cover;border-radius:inherit}
.style-template-card>span{padding:18px 7px 7px;background:linear-gradient(transparent,#101827c9);font-size:10px;line-height:1.25}
.style-template-card>.material-favorite-button{top:6px;right:6px;width:24px;height:24px;min-height:0}
.style-template-card>.design-template-selected{z-index:3;top:6px;left:6px}
.design-template-drop-active{outline:2px dashed #075bea!important;outline-offset:2px;background-color:#eef5ff!important}
body.dark-theme .design-template-groups{background:#1b2a40}
body.dark-theme .design-template-subgroups{background:#17263a}
body.dark-theme .design-template-groups button,body.dark-theme .design-template-subgroups button{border-right-color:#26384f;color:#c7d5e8}
body.dark-theme .design-template-subgroups button.active{background:#203b63;color:#a9cbff;box-shadow:inset 0 -2px #6ea8ff}
body.dark-theme .design-template-groups button.active{background:#246ee8;color:#fff}
body.dark-theme .design-template-card{border-color:#34455d;background:#152238;color:#c7d5e8}
body.dark-theme .design-template-card>img{background:#24344a}
.detail-plan-loading{display:flex;align-items:center;gap:10px;width:100%;height:82px;min-height:82px;padding:10px;border:1px solid #e8edf2;border-radius:10px;background:linear-gradient(115deg,#fbfcfd 20%,#f3f7fc 42%,#fbfcfd 64%);background-size:220% 100%;color:#8290a2;animation:detail-plan-shimmer 1.6s ease-in-out infinite}
.detail-plan-loading-spinner{width:16px;height:16px;flex:none;border:2px solid #c9dcf7;border-top-color:#075bea;border-radius:50%;animation:detail-plan-spin .8s linear infinite}
.detail-plan-loading-lines{display:grid;flex:1;gap:8px}
.detail-plan-loading-lines i{display:block;height:7px;border-radius:999px;background:#e3eaf3}
.detail-plan-loading-lines i:nth-child(1){width:88%}
.detail-plan-loading-lines i:nth-child(2){width:72%}
.detail-plan-loading-lines i:nth-child(3){width:54%}
@keyframes detail-plan-shimmer{to{background-position-x:-220%}}
@keyframes detail-plan-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.detail-plan-loading,.detail-plan-loading-spinner{animation:none}}
/* Count steppers use non-label wrappers so browser label activation cannot hijack button clicks. */
.detail-count-group{display:flex;align-items:center;gap:7px;white-space:nowrap;color:#39485d;font-size:11px;font-weight:600}
.detail-count-group[hidden]{display:none!important}
.detail-count-stepper{display:flex;align-items:center;gap:5px;padding:2px 4px;border:1px solid #e8edf2;border-radius:9px;background:#fff}
.detail-count-group button{width:24px;height:26px;border:0;border-radius:6px;background:transparent;color:#075bea;font-weight:700;cursor:pointer;touch-action:manipulation}
.detail-count-group button:hover:not(:disabled){background:#eef5ff}
.detail-count-group button:disabled{color:#bdc5cf;cursor:default;pointer-events:none}
.detail-count-group.is-inactive{color:#97a1af}
.detail-count-group.is-inactive .detail-count-stepper{background:#f4f6f8}
@media(max-width:1200px){.detail-count-group{gap:4px;font-size:10px}}
.detail-plan-streaming{background:linear-gradient(110deg,#fff 25%,#f4f8ff 45%,#fff 65%);background-size:220% 100%;animation:detail-plan-stream-shimmer 1.8s linear infinite}
@keyframes detail-plan-stream-shimmer{to{background-position-x:-220%}}

/* Read-only phone previews for the supported Design categories. */
.design-preview-panel[hidden]{display:none!important}
.detail-page{--design-preview-width:clamp(280px,20vw,320px)}
.design-preview-panel{position:fixed;z-index:7;top:0;right:0;bottom:0;width:var(--design-preview-width);min-width:0;min-height:0;max-height:none;display:flex;flex-direction:column;gap:12px;padding:84px 14px 14px;border:0;border-left:1px solid #e7ebf1;border-radius:0;background:#ffffffed;box-shadow:none;backdrop-filter:blur(14px)}
.design-preview-resize-handle{position:absolute;z-index:8;top:0;bottom:0;left:-5px;width:10px;cursor:ew-resize;touch-action:none}
.design-preview-resize-handle::after{position:absolute;top:50%;left:3px;width:3px;height:42px;border-radius:3px;background:#c5d1e0;content:"";transform:translateY(-50%);opacity:.55;transition:opacity .15s,background .15s}
.design-preview-resize-handle:hover::after,.design-preview-resize-handle:focus-visible::after,.design-preview-panel.is-resizing .design-preview-resize-handle::after{background:#397be8;opacity:1}
.design-preview-resize-handle:focus-visible{outline:0}
.design-preview-panel>header{display:flex;align-items:center;justify-content:space-between;flex:none;padding:0 2px}
.design-preview-panel>header>div{display:grid;gap:3px}
.design-preview-panel>header strong{font-size:13px;color:#27364a}
.design-preview-panel>header small{font-size:10px;color:#8b97a8}
.preview-live-dot{width:8px;height:8px;border-radius:50%;background:#8bcf37;box-shadow:0 0 0 4px #8bcf371c}
.design-phone-frame{flex:0 1 auto;align-self:center;min-height:0;width:min(100%,39vh,68vw);max-width:100%;max-height:calc(100% - 55px);aspect-ratio:9 / 19.5;padding:7px;border:1px solid #dfe4eb;border-radius:28px;background:#17202a;box-shadow:0 8px 24px #10243a22}
.design-phone-screen{position:relative;width:100%;height:100%;overflow:hidden;border-radius:22px;background:#fff;color:#242a33}
.phone-preview{width:calc(100% / var(--phone-preview-scale,1));height:calc(100% / var(--phone-preview-scale,1));zoom:var(--phone-preview-scale,1);overflow:auto;scrollbar-width:none;background:#fff;font-family:inherit}
.phone-preview::-webkit-scrollbar{display:none}
.phone-status{height:25px;display:flex;align-items:center;justify-content:space-between;padding:0 13px;font-size:9px;font-weight:750;color:#20242a}
.phone-shop-top,.phone-wechat-head,.xhs-head{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #f0f1f3;font-size:12px}
.phone-shop-top strong{font-size:12px}.phone-shop-top span,.phone-wechat-head span{font-size:17px;color:#4e5866}
.commerce-hero{position:relative;height:210px;overflow:hidden;padding:16px;background:linear-gradient(145deg,#f5e5d7,#e5d0bd 55%,#cfb49e);color:#583e31}
.commerce-hero>span,.commerce-hero>small{position:relative;z-index:2;display:block;font-size:9px;letter-spacing:1px}.commerce-hero>strong{position:relative;z-index:2;display:block;margin-top:9px;font-size:20px;line-height:1.23;letter-spacing:1px}
.commerce-product{position:absolute;right:34px;bottom:14px;width:75px;height:117px;filter:drop-shadow(6px 8px 6px #5945343c)}
.commerce-product-cap{width:37px;height:14px;margin:auto;border-radius:5px 5px 2px 2px;background:linear-gradient(90deg,#a8784c,#ead0ae,#a8784c)}
.commerce-product-body{height:93px;display:grid;place-items:center;border:1px solid #e8d4bf;border-radius:12px 12px 19px 19px;background:linear-gradient(90deg,#e7c9a9,#fff4df 35%,#f3debf 68%,#d8b38b);box-shadow:inset -6px 0 10px #a77c4b33}
.commerce-product-body i{color:#99704c;font-size:8px;font-style:normal;text-align:center;line-height:1.45}
.commerce-hero>small{position:absolute;bottom:10px;left:16px;font-size:8px;letter-spacing:0}
.commerce-dots{height:19px;display:flex;justify-content:center;align-items:center;gap:4px}.commerce-dots i{width:4px;height:4px;border-radius:50%;background:#d9dce1}.commerce-dots i:first-child{width:13px;border-radius:4px;background:#a8825d}
.commerce-product-title{display:grid;gap:4px;padding:0 13px}.commerce-product-title strong{font-size:12px}.commerce-product-title small{font-size:9px;color:#9399a2}
.commerce-price{display:flex;align-items:center;gap:8px;padding:9px 13px}.commerce-price b{font-size:19px;color:#e64c3c}.commerce-price del{font-size:9px;color:#a3a7af}.commerce-price span{padding:3px 6px;border-radius:4px;background:#fff1eb;color:#eb654e;font-size:8px}
.commerce-promo{margin:0 11px;padding:8px;border-radius:8px;background:#fff7f3;color:#ba6250;font-size:9px}
.commerce-bottom{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-around;height:42px;margin-top:12px;background:#fff;border-top:1px solid #f0f1f3;font-size:8px;color:#59616d}.commerce-bottom b,.commerce-bottom strong{padding:8px 10px;border-radius:18px;background:#ff9c5b;color:#fff;font-size:9px}.commerce-bottom strong{background:#e94f3e}
.phone-wechat-head{height:34px}.wechat-article{padding:15px 15px 20px}.wechat-article>small{font-size:8px;color:#9aa1ac}.wechat-article h2{margin:11px 0 7px;font-size:19px;line-height:1.4;color:#222b32}.wechat-lead{margin:0 0 12px!important;color:#78838c!important;font-size:10px!important}
.wechat-article p{margin:10px 0;color:#4b545e;font-size:10px;line-height:1.8}.wechat-cover{position:relative;height:158px;overflow:hidden;display:flex;align-items:flex-start;padding:20px;background:linear-gradient(150deg,#dce9e4,#f4e7d4);color:#38504b}.wechat-cover>span{z-index:2;font-size:16px;font-weight:750;line-height:1.35;letter-spacing:2px}.wechat-sun{position:absolute;top:20px;right:29px;width:48px;height:48px;border-radius:50%;background:#f6d59a}.wechat-hill{position:absolute;bottom:-50px;width:220px;height:130px;border-radius:50%}.hill-one{left:-18px;background:#8ea99c;transform:rotate(-10deg)}.hill-two{right:-65px;bottom:-67px;background:#607f73;transform:rotate(15deg)}
.wechat-article h3{margin:15px 0 5px;font-size:12px;color:#2f4c44}.wechat-quote{margin:14px 0;padding:10px;border-left:3px solid #89a99a;background:#f5f8f5;color:#637c70;font-size:10px}.wechat-actions{padding-top:12px;border-top:1px solid #edf0ee;color:#84918a;font-size:9px}
.xhs-head{height:39px;gap:8px;padding:0 10px}.xhs-profile{display:flex;align-items:center;gap:6px;margin-right:auto}.xhs-profile>i,.moments-author i{width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#f0c9a9;color:#704e3d;font-size:10px;font-style:normal;font-weight:700}.xhs-profile span{display:grid;gap:2px}.xhs-profile b{font-size:9px}.xhs-profile small{color:#8a929b;font-size:7px}.xhs-follow{padding:4px 10px;border:1px solid #ef5362;border-radius:14px;color:#e84d5e;font-size:9px}
.xhs-cover-art{position:relative;height:260px;overflow:hidden;margin:0 9px;border-radius:5px;background:linear-gradient(160deg,#c6d9ca,#e7dbc0 54%,#899c7d);color:#fff}.xhs-sun{position:absolute;top:35px;right:38px;width:64px;height:64px;border-radius:50%;background:#f3dbad}.xhs-cover-art label{position:absolute;top:20px;left:17px;font-size:9px;letter-spacing:3px;color:#fff9}.xhs-cover-art>strong{position:absolute;top:79px;left:18px;font-size:24px;line-height:1.25;text-shadow:0 2px 8px #25362a55}.xhs-cover-art>small{position:absolute;bottom:14px;left:18px;font-size:8px;letter-spacing:1px}.xhs-plant{position:absolute;bottom:-35px;width:90px;height:160px;border-left:5px solid #536d55;transform:rotate(20deg)}.plant-a{right:54px}.plant-b{right:10px;height:130px;transform:rotate(-16deg)}.xhs-plant:after{content:"";position:absolute;top:30px;left:-23px;width:37px;height:18px;border-radius:100% 0 100% 0;background:#658166;box-shadow:14px 32px 0 #668466,-5px 62px 0 #708a70}
.xhs-pagination{height:18px;display:flex;align-items:center;justify-content:center;gap:4px}.xhs-pagination i{width:4px;height:4px;border-radius:50%;background:#d6d9dc}.xhs-pagination i:first-child{background:#ed4c5b}.xhs-caption{padding:3px 12px}.xhs-caption>b{font-size:10px}.xhs-caption>p{margin:6px 0;color:#5d6570;font-size:9px;line-height:1.55}.xhs-caption>span{color:#547a9e;font-size:8px}.xhs-actions{display:flex;align-items:center;gap:11px;padding:12px;border-top:1px solid #f0f1f3;font-size:8px}.xhs-actions i{margin-left:auto;font-size:13px;font-style:normal}
.phone-preview-moments{background:#f6f7f8}.moments-cover{position:relative;height:145px;overflow:hidden;background:#dbe5e8}.moments-cover-sky{position:absolute;inset:0;background:linear-gradient(#d7e9ee,#f1e4cb)}.moments-cover-sun{position:absolute;top:25px;right:47px;width:41px;height:41px;border-radius:50%;background:#f5d5a0}.moments-cover-hill{position:absolute;left:-20px;right:-20px;bottom:-81px;height:145px;border-radius:50%;background:#718c77;box-shadow:105px -18px 0 #8ba184}
.moments-header{position:relative;height:32px;display:flex;justify-content:flex-end;padding:0 12px}.moments-title{position:absolute;left:12px;top:-28px;color:#fff;font-size:11px;text-shadow:0 1px 4px #222}.moments-avatar{width:48px;height:48px;margin-top:-23px;border:2px solid #fff;border-radius:8px;background:#eac9a5;color:#724d37;display:grid;place-items:center;font-size:16px;font-weight:700}
.moments-feed{margin:0 0 7px;padding:5px 12px 10px;background:#fff}.moments-author{display:flex;align-items:center;gap:7px;color:#50678a;font-size:9px}.moments-author i{width:23px;height:23px;border-radius:5px}.moments-author i.avatar-blue{background:#c7d9e8;color:#45637f}.moments-feed>p{margin:7px 0 8px 30px;font-size:9px;line-height:1.6}.moments-photo-grid{display:grid;grid-template-columns:2fr 1fr;grid-template-rows:58px 58px;gap:4px;margin-left:30px}.moment-photo{display:grid;place-items:center;background:linear-gradient(140deg,#e6dfcc,#9caf90);color:#f9e8bc;font-size:19px}.moment-photo.photo-large{grid-row:span 2;background:linear-gradient(150deg,#d6e8e7,#96ad9a 55%,#637f70)}.moment-photo.photo-small{background:linear-gradient(140deg,#d8c1a3,#8b9983)}.moment-photo.photo-leaf{background:linear-gradient(140deg,#a9b89b,#e0d3b9)}.moments-feed>small{display:block;margin:7px 0 5px 30px;color:#a3aab2;font-size:8px}.moments-like{display:flex;gap:8px;margin-left:30px;padding:6px 7px;background:#f6f7f9;color:#8697ad;font-size:8px}.moments-like>b{color:#71849b}.moments-comment{margin-left:30px;padding:6px 7px;background:#f6f7f9;color:#657b96;font-size:8px}.moments-comment>b{color:#546e91}.second-feed{margin-top:6px}.second-photo{height:85px;margin-left:30px;background:linear-gradient(#d5e7ef,#95aabb)}
.detail-page.design-preview-active #ecommerceDesignCategory{width:calc(100% - 340px)}
body.dark-theme .design-preview-panel{border-color:#314158;background:#111d2ded}
body.dark-theme .design-preview-panel>header strong{color:#e6edf7}
@media(max-width:1050px){.detail-page.design-preview-active #ecommerceDesignCategory{width:calc(100% - var(--design-preview-width) - 20px)}}
@media(max-height:760px){.design-preview-panel{padding:10px}.commerce-hero{height:170px}.xhs-cover-art{height:205px}}
@media(max-width:760px){.design-preview-panel{position:static;width:min(var(--design-preview-width),calc(100vw - 32px));height:560px;max-height:none;margin:18px auto 48vh;border:1px solid #e7ebf1;border-radius:20px;box-shadow:0 12px 38px #18283b17;transform:none}.detail-page:not(.design-preview-open) .design-preview-panel:not([hidden]){display:none}.design-preview-resize-handle{left:0}.detail-page.design-preview-active #ecommerceDesignCategory{width:100%}}

/* Shared generator dock and unified records for the six additional Design categories. */
.design-category-composer-wrap{position:fixed;z-index:25;left:calc(50% + 179px);bottom:16px;transform:translateX(-50%);width:min(1080px,calc(100vw - 382px));min-width:0}
.design-category-composer-wrap .image-composer{max-height:min(46vh,480px);overflow:visible}
.detail-page.design-preview-active .design-category-composer-wrap{left:calc(50% + 179px - var(--design-preview-width)/2);width:min(1080px,calc(100vw - 382px - var(--design-preview-width)))}
.detail-page.design-generation-active.design-preview-active .design-category-records{width:calc(100% - var(--design-preview-width) - 20px)}
.detail-page.design-generation-active .design-category-records{padding-bottom:260px}
@media(max-width:1050px){.design-category-composer-wrap{bottom:12px}.design-category-composer-wrap .image-composer{max-height:44vh}.detail-page.design-preview-active .design-category-composer-wrap{left:calc(50% + 179px - var(--design-preview-width)/2);width:calc(100vw - 382px - var(--design-preview-width))}}
@media(max-width:760px){.design-category-composer-wrap,.detail-page.design-preview-active .design-category-composer-wrap{position:fixed;left:50%;bottom:10px;transform:translateX(-50%);width:calc(100vw - 24px);max-width:560px}.design-category-composer-wrap .image-composer{max-height:48vh;padding:9px;border-radius:20px;overflow:auto}.design-category-composer .composer-content{min-height:104px;gap:8px}.design-category-composer #designCategoryUploads{gap:7px;max-width:45%}.design-category-composer #designCategoryUploads .composer-slot-wrap{flex-basis:64px;width:64px;height:82px}.design-category-composer #designCategoryUploads .composer-upload-frame,.design-category-composer #designCategoryUploads .composer-upload,.design-category-composer #designCategoryUploads .composer-upload img.preview{width:64px;height:64px;min-width:64px;min-height:64px;max-width:64px;max-height:64px;flex-basis:64px}.design-category-composer #designCategoryUploads .composer-upload .upload-label{top:67px;width:64px;max-width:64px;font-size:9px}.design-category-composer #designCategoryPrompt{min-height:74px;font-size:12px}.design-category-composer .composer-toolbar{gap:5px}.design-category-name-control{height:34px}.design-category-select{height:33px;padding:0 5px;font-size:10px}.design-category-select select{max-width:70px;font-size:10px}.design-category-composer .composer-submit small{display:none}.design-category-composer .submit-arrow{width:34px;height:34px;flex-basis:34px}.design-category-records-toolbar{flex-wrap:wrap;gap:7px}.design-category-records-toolbar>.image-record-filter{margin-left:0}.design-category-records-toolbar>#designCategoryRecordCount{margin-left:auto}.detail-page.design-generation-active .design-category-records{padding-bottom:52vh}.detail-page.design-generation-active.design-preview-active .design-category-records{width:100%}}

/* Keep the fixed generator dock inside the content column beside the full-height preview. */
@media(min-width:1051px){.detail-page.design-preview-active .detail-workbench{left:calc(50% + 45px - var(--design-preview-width)/2);width:min(1040px,calc(100vw - 120px - var(--design-preview-width)));grid-template-columns:minmax(190px,.72fr) minmax(300px,1.05fr) minmax(270px,1fr)}}
@media(min-width:851px) and (max-width:1050px){.detail-page.design-preview-active .detail-workbench{left:calc(50% + 45px - var(--design-preview-width)/2);width:calc(100vw - 130px - var(--design-preview-width));grid-template-columns:minmax(75px,.5fr) minmax(195px,1.2fr) minmax(160px,.9fr)}}
@media(max-height:760px){.design-phone-frame{width:min(100%,31vh)}}

/* Taobao-like product main image, price/promotion stack, detail tab, and fixed buy row. */
.commerce-main-screen{background:#fff}
.commerce-main-top{height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 10px;color:#fff;background:#17181c;font-size:11px}
.commerce-main-top nav{display:flex;gap:10px}
.commerce-main-top nav b{position:relative}
.commerce-main-top nav b:after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:#fff}
.commerce-main-top>span:last-child{font-size:10px}
.commerce-shoe-hero{height:260px!important;margin:0!important;padding:0!important;display:block!important;background:radial-gradient(ellipse at 50% 55%,#30343b,#111318 70%)!important;color:#fff!important}
.commerce-shoe-hero>strong{position:absolute!important;z-index:2;bottom:13px;left:0;right:0;text-align:center;font-size:16px!important;color:#f8f8f8}
.commerce-shoe-hero.has-generated-main{background:#f4f2ee!important;color:#28313b!important}
.commerce-preview-main-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#f4f2ee}
.commerce-shoe-hero.has-generated-main>strong{left:8px;right:auto;bottom:8px;padding:5px 8px;border-radius:6px;background:#17202acc;color:#fff!important;font-size:9px!important;letter-spacing:0}
.commerce-shoe-hero.has-generated-main .shoe-tag{top:8px;right:8px;padding:5px 7px;background:#ffffffdf;color:#26364a;font-size:8px}
.commerce-main-thumb{overflow:hidden!important;padding:0!important}
.commerce-main-thumb img{width:100%;height:100%;object-fit:cover}
.commerce-dots i.is-active{width:13px;border-radius:4px;background:#a8825d}
.commerce-detail-banner.has-preview-image{display:block;min-height:0;padding:0;background:#f3f1ed}
.commerce-detail-banner.has-preview-image img{display:block;width:100%;height:auto;max-height:none;object-fit:contain}
.commerce-preview-detail-images{display:grid;gap:8px;padding:0 9px 8px}
.commerce-preview-detail-images .commerce-generated-detail-image{min-height:0;margin:0;padding:0;border-radius:4px;background:#f3f1ed;color:inherit}
.commerce-preview-detail-images img{display:block;width:100%;height:auto;object-fit:contain}
.phone-preview-commerce.is-example-preview .commerce-product-title small{color:#738092}
.commerce-preview-arrows{position:absolute;z-index:5;top:50%;left:7px;right:7px;display:flex;align-items:center;justify-content:space-between;transform:translateY(-50%);pointer-events:none}
.commerce-preview-arrows[hidden]{display:none!important}
.commerce-preview-arrows button{display:grid;place-items:center;width:28px;height:34px;padding:0;border:1px solid #ffffff88;border-radius:14px;background:#17202a99;color:#fff;font-size:26px;line-height:1;font-family:inherit;cursor:pointer;pointer-events:auto;box-shadow:0 1px 5px #0003}
.commerce-preview-arrows button:hover{background:#17202add}
.commerce-main-thumb{cursor:pointer}
.commerce-main-thumb.is-active{outline:2px solid #a8825d;outline-offset:-2px}
.design-template-card.is-media-card>video{display:block;width:100%;height:100%;object-fit:cover;background:#18212e}
.design-template-media-play{position:absolute;inset:50% auto auto 50%;z-index:1;display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffffb8;border-radius:50%;background:#121b2a9c;color:#fff;font-size:15px;font-style:normal;transform:translate(-50%,-50%);pointer-events:none}
.design-template-media-audio{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(145deg,#dceaff,#eef2fa 55%,#d8e5f8);color:#3972c8;font-size:42px}
.design-template-preview-dialog{width:min(92vw,1080px);max-width:none;max-height:92vh;padding:0;overflow:hidden;border:1px solid #e1e7ef;border-radius:18px;background:#fff;color:#253247;box-shadow:0 22px 80px #0b162b55}
.design-template-preview-dialog::backdrop{background:#101827a6;backdrop-filter:blur(3px)}
.design-template-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-bottom:1px solid #e9edf3}
.design-template-preview-actions{display:flex;align-items:center;gap:8px;flex:none}
.design-template-preview-heading .design-template-preview-remove{width:auto;padding:0 12px;border:1px solid #f2c7c7;border-radius:10px;background:#fff7f7;color:#c53b3b;font-size:12px}
.design-template-preview-heading .design-template-preview-remove:hover{border-color:#d64545;background:#fff0f0;color:#b42323}
.design-template-preview-heading .design-template-preview-remove:disabled{opacity:.55;cursor:wait}
.design-template-preview-heading>div{display:grid;gap:3px;min-width:0}
.design-template-preview-heading strong{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.design-template-preview-heading small{color:#8491a3;font-size:11px}
.design-template-preview-heading button{flex:none;width:34px;height:34px;border:0;border-radius:10px;background:#f1f4f8;color:#536174;font-size:22px;cursor:pointer}
.design-template-preview-stage{display:flex;align-items:center;justify-content:center;min-height:180px;max-height:calc(92vh - 64px);padding:18px;background:#f4f6f9}
.design-template-preview-stage>img{display:block;max-width:100%;max-height:calc(92vh - 104px);object-fit:contain;border-radius:8px;box-shadow:0 4px 22px #14233b1c}
.design-template-preview-stage>video{display:block;max-width:100%;max-height:calc(92vh - 104px);background:#111;border-radius:8px}
.design-template-preview-stage>audio{width:min(720px,100%)}
.design-template-preview-audio-icon{display:grid;place-items:center;width:90px;height:90px;margin-right:22px;border-radius:24px;background:#e4edff;color:#3972c8;font-size:46px}
body.dark-theme .design-template-preview-dialog{border-color:#34455d;background:#152238;color:#e4edf8}
body.dark-theme .design-template-preview-heading{border-color:#34455d}
body.dark-theme .design-template-preview-heading button{background:#263951;color:#d5e1f1}
body.dark-theme .design-template-preview-heading .design-template-preview-remove{border-color:#70464a;background:#39272b;color:#ffb4b4}
body.dark-theme .design-template-preview-stage{background:#0f1928}
@media(max-width:600px){.design-template-preview-dialog{width:calc(100vw - 24px);border-radius:14px}.design-template-preview-stage{padding:10px}.design-template-preview-audio-icon{width:64px;height:64px;margin-right:12px;border-radius:18px;font-size:34px}}
.shoe-tag{position:absolute!important;z-index:2;top:18px;right:10px;padding:7px;border-radius:7px;background:#292c33;color:#fff}
.shoe-promo{position:absolute!important;z-index:3;right:8px;top:96px;padding:7px;border-radius:8px;background:linear-gradient(120deg,#ff8b19,#ff2872);color:#fff;font-size:9px!important;line-height:1.4}
.commerce-sneaker{position:absolute;left:50%;top:48%;width:215px;height:112px;transform:translate(-50%,-50%) rotate(-25deg);filter:drop-shadow(2px 12px 8px #0009)}
.commerce-sneaker:before{content:"";position:absolute;left:4px;right:0;bottom:7px;height:42px;clip-path:polygon(0 16%,19% 7%,38% 10%,59% 0,78% 12%,97% 36%,100% 78%,87% 97%,19% 100%,5% 86%);background:linear-gradient(160deg,#fff 0 32%,#9db7cb 33% 43%,#f7f8fa 44% 66%,#1766ad 67% 79%,#f0f2f5 80%)}
.commerce-sneaker:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:15px;clip-path:polygon(5% 0,93% 0,100% 55%,94% 100%,15% 92%,0 50%);background:linear-gradient(#fff,#c6cbd0);border-radius:50%}
.commerce-sneaker>i{position:absolute;z-index:1;left:39px;top:26px;width:112px;height:48px;clip-path:polygon(4% 35%,25% 3%,67% 0,100% 61%,82% 100%,15% 87%);background:linear-gradient(140deg,#f4f4f1,#4f7eaa 55%,#102e55)}
.commerce-sneaker>b{position:absolute;z-index:2;left:91px;top:27px;width:58px;height:32px;border-top:3px solid #dce5eb;transform:rotate(22deg);box-shadow:0 8px 0 -1px #dce5eb,0 16px 0 -1px #dce5eb}
.commerce-sneaker>small{position:absolute;z-index:2;right:30px;bottom:25px;width:27px;height:19px;border:2px solid #d7dce0;border-radius:50%;background:#1e2530}
.commerce-dots{height:18px}
.commerce-thumb-strip{height:52px;display:flex;align-items:center;justify-content:space-around;gap:4px;padding:4px;background:#f1f2f4;color:#58616d;font-size:7px}
.commerce-thumb-strip>*{min-width:27px;height:36px;display:grid;place-items:center;padding:3px;border-radius:5px;background:#fff;text-align:center}
.commerce-thumb-strip>b{min-width:42px;color:#333}
.commerce-sale{display:grid;grid-template-columns:1fr auto;gap:5px;padding:8px 10px;background:#ef4359;color:#fff}
.commerce-sale>b{font-size:9px}.commerce-sale>span,.commerce-sale>small{font-size:7px}.commerce-sale>strong{font-size:16px}
.commerce-coupon{padding:7px 10px;background:#fff8f4;color:#ed6b56;font-size:8px}
.commerce-product-title{padding:7px 10px}.commerce-product-title strong{font-size:9px;line-height:1.5}.commerce-product-title small{font-size:7px}
.commerce-main-promo{margin:0 7px;padding:6px;background:#fff0f2;color:#e94b60;font-size:7px}
.commerce-detail-top{height:42px;display:flex;align-items:center;justify-content:space-around;padding:0 8px;background:#fff;font-size:9px}
.commerce-detail-top>b{width:145px;padding:7px 10px;border:1px solid #e98d5a;border-radius:13px;color:#8e939b;font-weight:500}
.shoe-detail-hero{min-height:335px;background:radial-gradient(ellipse at 50% 52%,#253c4d,#0d1016 72%)!important}
.shoe-detail-hero>strong{position:relative;z-index:2;align-self:center;margin-top:25px;font-size:20px}
.shoe-detail-hero>.commerce-sneaker{top:58%;transform:translate(-50%,-50%) rotate(-28deg) scale(1.15)}
.shoe-detail-hero>small{position:absolute;bottom:15px;left:0;right:0;text-align:center}
.commerce-detail-promo{padding:8px 10px;background:#fff0f2;color:#e74960;font-size:8px}
.shoe-detail-hero:after{display:none}
.commerce-bottom{z-index:3;height:45px;justify-content:space-around;margin:0;padding:3px 4px;box-shadow:0 -2px 8px #00000010}
.commerce-bottom span{font-size:7px}.commerce-bottom b,.commerce-bottom strong{padding:8px 7px;font-size:8px}
.xhs-comment-bar{position:sticky;bottom:0;margin-top:12px;padding:10px 8px;border-top:1px solid #303039;background:#19191f;color:#b9b9c0;font-size:9px}

/* Moments timeline and single-post detail reproduce the supplied light WeChat screens. */
.phone-preview-moments{background:#f4f4f4;color:#18191b}
.phone-preview-moments .phone-status{height:31px;padding:0 14px;background:#f1f1f1;color:#111}
.moments-topbar{height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 12px;background:#f1f1f1;font-size:14px}
.moments-topbar b{font-size:14px}
.moments-feed-screen{min-height:520px;background:#fff}
.moments-timeline-post{position:relative;padding:12px 12px 14px;border-bottom:1px solid #ececec;background:#fff}
.moments-timeline-post .moments-author{gap:8px;color:#62799f;font-size:11px}
.moments-timeline-post .moments-author i,.moments-detail-post .moments-author i{width:30px;height:30px;border-radius:4px;font-size:10px}
.moments-timeline-post>p,.moments-detail-post>p{margin:7px 0 8px 38px;font-size:12px;line-height:1.55;color:#17191c}
.moments-timeline-post .moments-photo-grid,.moments-detail-post .moments-photo-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,64px);gap:4px;margin-left:38px}
.moments-timeline-post .moment-photo,.moments-detail-post .moment-photo{display:grid;place-items:center;background:linear-gradient(140deg,#dae2e8,#81929c);color:#fff;font-size:7px;text-align:center}
.moments-timeline-post .moment-photo.photo-large,.moments-detail-post .moment-photo.photo-large{grid-row:auto;background:linear-gradient(145deg,#dae5e8,#869c9a)}
.moments-timeline-post .photo-cafe{background:linear-gradient(140deg,#d9c2a0,#967253)}
.moments-timeline-post>small,.moments-detail-post>small{display:block;margin:7px 0 0 38px;color:#a4a7ad;font-size:8px}
.moments-actions{position:absolute;right:12px;bottom:13px;padding:4px 9px;border-radius:6px;background:#f5f5f7;color:#63799c;font-size:10px}
.two-moments{grid-template-columns:repeat(2,1fr)!important;grid-template-rows:64px!important}
.moments-detail-screen{min-height:550px;margin-top:7px;background:#fff}
.moments-detail-screen .moments-topbar{height:52px}
.moments-detail-post{padding:13px 12px 8px;background:#fff}
.moments-detail-post .moments-author{color:#60779e;font-size:12px}
.moments-detail-post>p{font-size:13px}
.moments-detail-post .moments-photo-grid{grid-template-rows:repeat(2,66px)}
.moments-detail-post .moments-like{margin:10px 0 4px 38px;padding:7px 9px;color:#6c7f9d}
.moments-detail-post .moments-comment{margin:0 0 0 38px;padding:6px 9px;border-bottom:1px solid #eceef0;background:#fff;color:#272a2f;font-size:9px}
.moments-detail-post .moments-comment>b{color:#60779e}
.moments-comment-bar{position:sticky;bottom:0;margin-top:12px;padding:11px 13px;border-top:1px solid #e6e6e6;background:#fafafa;color:#a4a7ad;font-size:9px}

/* Marketplace preview continues from the product carousel into its long detail page. */
.commerce-details{margin-top:12px;background:#fff}.commerce-tabs{position:sticky;top:0;z-index:2;display:flex;justify-content:space-around;padding:10px 4px;border-bottom:1px solid #f0f1f3;background:#fff;font-size:9px;color:#9299a3}.commerce-tabs b{color:#252b32}.commerce-detail-banner{position:relative;min-height:180px;display:flex;flex-direction:column;justify-content:center;gap:10px;overflow:hidden;padding:17px;background:linear-gradient(135deg,#20272e,#3e525c 62%,#d4a873);color:#fff}.commerce-detail-banner:after{content:"";position:absolute;right:20px;bottom:-34px;width:105px;height:145px;border-radius:30px 30px 18px 18px;background:linear-gradient(90deg,#bf9b77,#fff0d9 45%,#bd9876);box-shadow:0 10px 25px #1118;transform:rotate(-8deg)}.commerce-detail-banner small,.commerce-detail-banner strong,.commerce-detail-banner>i{position:relative;z-index:1}.commerce-detail-banner small{font-size:7px;letter-spacing:1px;color:#f3d8b3}.commerce-detail-banner strong{font-size:19px;line-height:1.35}.commerce-detail-banner>i{font-size:8px;font-style:normal;color:#ead9c7}.commerce-detail-copy{display:grid;gap:5px;padding:13px;text-align:center}.commerce-detail-copy b{font-size:10px}.commerce-detail-copy span{font-size:8px;color:#9299a3}.commerce-detail-image{position:relative;min-height:158px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;overflow:hidden;margin:0 9px 8px;padding:13px;border-radius:4px;color:#fff}.commerce-detail-image small,.commerce-detail-image b{z-index:1}.commerce-detail-image small{font-size:7px;letter-spacing:1px}.commerce-detail-image b{font-size:15px;line-height:1.35}.detail-image-one{background:radial-gradient(ellipse at 70% 35%,#ead2b4 0 12%,transparent 13%),linear-gradient(145deg,#c2a68d,#f1e2cd 52%,#8e6b52)}.detail-image-one>i{position:absolute;right:26px;top:17px;width:43px;height:100px;border-radius:13px;background:linear-gradient(90deg,#c7a27b,#fff2d7 45%,#c49c70);box-shadow:0 8px 12px #40322255}.detail-image-two{min-height:130px;justify-content:center;text-align:center;background:linear-gradient(140deg,#d7e5df,#f0e4d0 55%,#8ea298)}.detail-image-two small{color:#5f7568}.detail-image-two b{color:#344d44}.commerce-detail-specs{display:grid;gap:8px;padding:13px;color:#727a84;font-size:8px}.commerce-detail-specs b{color:#303740;font-size:10px}

/* Xiaohongshu preview shows both the two-column discovery feed and a note page. */
.xhs-feed-screen{min-height:490px;padding-bottom:28px;background:#19191f;color:#eee}.xhs-feed-nav{height:42px;display:flex;align-items:center;justify-content:space-between;padding:0 11px;border-bottom:1px solid #28282f;font-size:12px;color:#aaa}.xhs-feed-nav b{position:relative;color:#fff}.xhs-feed-nav b:after{content:"";position:absolute;left:1px;right:1px;bottom:-9px;height:2px;border-radius:2px;background:#ff334e}.xhs-feed-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;padding:8px 6px}.xhs-feed-grid article{overflow:hidden;border-radius:5px;background:#222229}.xhs-feed-art{position:relative;height:143px;display:flex;align-items:flex-start;padding:11px 8px;overflow:hidden;background:#859c89}.xhs-feed-art>span{z-index:1;font-size:12px;font-weight:800;line-height:1.2;color:#fff;text-shadow:0 1px 4px #2229}.feed-girl{background:radial-gradient(ellipse at 52% 63%,#e8c4a8 0 20%,transparent 21%),linear-gradient(145deg,#9ab0a2,#d6c4ac 55%,#506358)}.feed-cafe{align-items:flex-end;background:radial-gradient(ellipse at 60% 75%,#634d3c 0 17%,transparent 18%),linear-gradient(145deg,#e7caa4,#b17a5b 60%,#573f35)}.feed-room{background:linear-gradient(145deg,#e5d8c5,#c7d4c7 50%,#819687)}.feed-trip{background:linear-gradient(#a6c0cd 0 45%,#849a77 46% 68%,#c1b18e 69%)}.xhs-feed-grid article>b{display:block;min-height:33px;padding:6px 7px 2px;font-size:8px;font-weight:550;line-height:1.5}.xhs-feed-grid footer{display:flex;align-items:center;justify-content:space-between;padding:5px 7px 7px;color:#b3b3bd;font-size:7px}.xhs-feed-grid footer i{font-style:normal}.xhs-feed-bottom{position:sticky;bottom:0;display:flex;align-items:center;justify-content:space-around;height:32px;background:#1b1b22;color:#b8b8c0;font-size:7px}.xhs-feed-bottom b{display:grid;place-items:center;width:23px;height:20px;border-radius:5px;background:#ff294a;color:#fff;font-size:17px}.xhs-detail-screen{min-height:480px;margin-top:7px;padding-bottom:10px;background:#19191f;color:#f0eff2}.xhs-detail-screen .phone-status{color:#f0eff2}.xhs-detail-screen .xhs-head{border-color:#292930}.xhs-detail-screen .xhs-cover-art{height:280px}.xhs-detail-screen .xhs-caption>b{color:#f0eff2}.xhs-detail-screen .xhs-caption>p{color:#c7c6ce}.xhs-detail-screen .xhs-caption>span{color:#9bb9dc}.xhs-detail-screen .xhs-actions{border-color:#303039;color:#d0d0d6}.xhs-detail-screen .xhs-follow{color:#ff415c;border-color:#ff415c}

/* Center the fixed creation dock in the workspace left after adding the template shelf. */
@media(min-width:851px){.detail-page.design-preview-active .detail-workbench{left:calc(50% + 65px);width:min(1040px,calc(100vw - 880px))}}
@media(min-width:761px) and (max-width:850px){.detail-page.design-preview-active .detail-workbench{left:calc(50% + 65px);width:calc(100vw - 850px)}}

/* Responsive Design workspace: keep the central work area usable and open side panels on demand. */
.design-responsive-tools{display:none}
@media(max-width:1439px){
  .detail-page .detail-shell{display:block;width:100%;min-width:0;margin:0}
  .detail-page.design-preview-active #ecommerceDesignCategory{width:100%}
  .design-template-panel{z-index:40;top:64px;bottom:0;left:80px;width:min(var(--design-template-width,267px),calc(100vw - 104px));padding:18px 12px 14px;transform:none;transition:none}
  .design-preview-panel{z-index:40;top:64px;right:0;bottom:0;width:min(var(--design-preview-width,320px),calc(100vw - 104px));padding:18px 12px 14px;transform:translateX(102%);transition:transform .2s ease}
  .detail-page.design-preview-open .design-preview-panel:not([hidden]){transform:translateX(0)}
  .design-responsive-tools{position:fixed;z-index:55;top:72px;right:12px;display:flex;gap:6px;padding:5px;border:1px solid #e6eaf0;border-radius:12px;background:#ffffffed;box-shadow:0 4px 14px #17243712;backdrop-filter:blur(12px)}
  .design-responsive-tools[hidden]{display:none}
  .design-responsive-tools button{min-height:32px;padding:0 12px;border:1px solid #e7edf4;border-radius:9px;background:#fff;color:#53657b;font-size:12px;cursor:pointer}
  .design-responsive-tools button[aria-pressed="true"]{border-color:#b8d3ff;background:#eef5ff;color:#075bea;font-weight:700}
  .design-responsive-tools button:disabled{opacity:.45;cursor:not-allowed}
  .detail-page.design-preview-active .detail-workbench{left:calc(50% + 40px);bottom:12px;width:min(1040px,calc(100vw - 128px));max-height:min(42vh,360px);height:min(42vh,360px);grid-template-columns:minmax(190px,.78fr) minmax(260px,1.05fr) minmax(230px,1fr)}
}
@media(min-width:851px) and (max-width:1199px){
  .detail-page{padding-right:20px;padding-left:20px}
  .detail-page.design-preview-active .detail-workbench{grid-template-columns:minmax(170px,.72fr) minmax(240px,1.05fr) minmax(210px,.95fr);width:calc(100vw - 112px);left:calc(50% + 40px)}
  .detail-page.design-preview-active .detail-workbench .detail-assets,.detail-page.design-preview-active .detail-workbench .detail-settings,.detail-page.design-preview-active .detail-workbench .detail-output{padding:10px}
}
@media(max-width:850px){
  .detail-page{padding:78px 14px 24px}
  .design-template-panel{left:72px;width:min(var(--design-template-width,267px),calc(100vw - 86px))}
  .design-preview-panel{width:min(var(--design-preview-width,320px),calc(100vw - 86px));height:auto;max-height:none;margin:0;border:0;border-radius:0;box-shadow:none}
  .detail-page.design-preview-active .detail-workbench{position:static;left:auto;bottom:auto;transform:none;width:100%;max-height:none;height:auto;min-height:0;margin:18px 0 24px;overflow:hidden;grid-template-columns:1fr}
  .detail-page.design-preview-active .detail-workbench .detail-assets,.detail-page.design-preview-active .detail-workbench .detail-settings{border-right:0;border-bottom:1px solid #eef0f2}
  .detail-page.design-preview-active .detail-workbench .detail-assets{display:block;padding:14px}
  .detail-page.design-preview-active .detail-workbench .detail-assets>h2{margin:0 0 10px}
  .detail-page.design-preview-active .detail-workbench .detail-asset-group{margin:0 0 12px}
  .detail-page.design-preview-active .detail-workbench .detail-settings,.detail-page.design-preview-active .detail-workbench .detail-output{padding:14px}
  .detail-page.design-preview-active .detail-workbench .detail-settings textarea{height:130px;min-height:100px}
  .detail-page.design-preview-active .detail-workbench .detail-output>button{margin-top:12px}
  .detail-page.design-preview-active{padding-bottom:24px}
}
@media(max-width:480px){
  .design-responsive-tools{top:68px;right:8px;gap:4px;padding:4px}
  .design-responsive-tools button{min-height:30px;padding:0 9px;font-size:11px}
  .design-template-panel{width:min(var(--design-template-width,267px),calc(100vw - 72px))}
  .design-preview-panel{width:min(var(--design-preview-width,320px),calc(100vw - 32px))}
}

/* Xiaohongshu preview uses one phone viewport with an interactive feed and note page. */
.phone-preview-xhs{position:relative;overflow:hidden}
.phone-preview-xhs>.xhs-feed-screen,.phone-preview-xhs>.xhs-detail-screen{position:absolute;inset:0;width:100%;height:100%;min-height:0;margin:0;overflow-y:auto;scrollbar-width:none}
.phone-preview-xhs>.xhs-feed-screen::-webkit-scrollbar,.phone-preview-xhs>.xhs-detail-screen::-webkit-scrollbar{display:none}
.phone-preview-xhs>.xhs-feed-screen[hidden],.phone-preview-xhs>.xhs-detail-screen[hidden],.phone-preview-xhs img[hidden]{display:none!important}
.xhs-feed-grid article[data-xhs-cover-open]{cursor:pointer}
.xhs-feed-grid article[data-xhs-cover-open]:focus-visible{outline:2px solid #ff334e;outline-offset:2px}
.xhs-generated-feed-cover,.xhs-generated-detail-cover{display:block;width:100%;height:100%;object-fit:cover}
.xhs-feed-art.has-generated-cover{display:block;padding:0;background:#15151a}
.xhs-feed-art.has-generated-cover>.xhs-generated-feed-cover{position:absolute;inset:0}
.xhs-cover-art.has-generated-cover{background:#111}
.xhs-cover-art.has-generated-cover>.xhs-generated-detail-cover{position:absolute;inset:0;object-fit:contain}
.xhs-cover-art.has-generated-cover>*:not(.xhs-generated-detail-cover){display:none}
.xhs-head [data-xhs-back]{cursor:pointer}
.xhs-head [data-xhs-back]:focus-visible{outline:2px solid #ff334e;border-radius:4px}

/* Match the dark Xiaohongshu discovery feed, with a true two-column masonry layout. */
.phone-preview-xhs .xhs-feed-screen{padding:0 0 42px;background:#17171c;color:#f1f1f3}
.phone-preview-xhs .xhs-feed-screen>.phone-status{height:42px;padding:0 16px;color:#f2f2f4;font-size:11px}
.phone-preview-xhs .xhs-feed-nav{height:53px;padding:0 15px;border-color:#26262c;font-size:15px}
.phone-preview-xhs .xhs-feed-nav>div{display:flex;align-items:center;gap:18px;height:100%;font-size:14px}
.phone-preview-xhs .xhs-feed-nav>div>span{position:relative;color:#888890;white-space:nowrap}
.phone-preview-xhs .xhs-feed-nav sup{position:absolute;top:-8px;right:-15px;padding:1px 4px;border-radius:9px;background:#ff3150;color:#fff;font-size:9px}
.phone-preview-xhs .xhs-feed-nav b{height:100%;display:flex;align-items:center;color:#fff}
.phone-preview-xhs .xhs-feed-nav b:after{bottom:5px;height:3px}
.xhs-menu-icon,.xhs-search-icon{color:#e6e6e9;font-size:20px}
.xhs-live-strip{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:0 6px 7px}
.xhs-live-strip>span{height:36px;display:flex;align-items:center;gap:5px;overflow:hidden;padding:0 7px;border-radius:0 0 5px 5px;background:#202026;color:#aaaab2;font-size:9px;white-space:nowrap}
.xhs-live-strip i{color:#c5d0de;font-size:10px;font-style:normal}
.xhs-live-strip small{margin-left:auto;color:#a1a1aa;font-size:9px}
.phone-preview-xhs .xhs-feed-grid{display:block;columns:2;column-gap:5px;padding:0 6px}
.phone-preview-xhs .xhs-feed-grid article{display:inline-block;width:100%;margin:0 0 6px;border-radius:5px;background:#202026;break-inside:avoid}
.phone-preview-xhs .xhs-feed-art{height:auto;aspect-ratio:0.72;padding:0;background:#303038}
.phone-preview-xhs .xhs-feed-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phone-preview-xhs .xhs-feed-grid article>b{min-height:0;padding:7px 8px 3px;color:#e4e4e8;font-size:9px;line-height:1.5}
.phone-preview-xhs .xhs-feed-grid footer{gap:4px;padding:5px 7px 8px;color:#a7a7b0;font-size:8px}
.phone-preview-xhs .xhs-feed-grid footer i{display:flex;align-items:center;gap:4px;overflow:hidden;font-style:normal;white-space:nowrap}
.phone-preview-xhs .xhs-feed-grid footer em{width:17px;height:17px;display:grid;flex:none;place-items:center;border:1px solid #ff4059;border-radius:50%;color:#ff5a6b;font-size:7px;font-style:normal}
.phone-preview-xhs .xhs-feed-bottom{position:absolute;right:0;bottom:0;left:0;z-index:3;height:43px;justify-content:space-around;border-top:1px solid #26262c;background:#1a1a20;color:#9999a2;font-size:14px}
.phone-preview-xhs .xhs-feed-bottom span{display:grid;justify-items:center;gap:1px;min-width:35px}
.phone-preview-xhs .xhs-feed-bottom small{font-size:7px}
.phone-preview-xhs .xhs-feed-bottom .is-current{color:#f1f1f3}
.phone-preview-xhs .xhs-feed-bottom b{width:38px;height:30px;border-radius:8px;background:#ff294c;font-size:25px}
.phone-preview-xhs .xhs-cover-art.has-generated-cover>.xhs-generated-detail-cover{object-fit:cover}

.works-page{padding:34px clamp(24px,4vw,64px) 72px;background:#e6f3d6}.works-heading,.asset-library-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.works-heading small{font-size:12px;color:#7d8791}.works-heading h1{font-size:32px;margin:7px 0}.works-heading p,.asset-library-heading p{margin:0;color:#7c8591}.works-heading>button,.asset-library-heading>button{height:40px;padding:0 16px;border:1px solid #e4e8e1;border-radius:22px;background:#fff;font-weight:600}.works-tabs{display:flex;gap:8px;margin:27px 0 14px}.works-tabs button{height:37px;padding:0 15px;border:1px solid #e6e9e4;border-radius:20px;background:#fff;color:#606974}.works-tabs button.selected{background:#e6f3d6;border-color:#e6f3d6;color:#0059ff}.works-list{display:grid;gap:10px}.work-row{display:grid;grid-template-columns:minmax(160px,1fr) minmax(200px,2fr) 120px 120px;align-items:center;gap:20px;padding:17px 20px;background:#fff;border:1px solid #ecefea;border-radius:15px}.work-row strong{font-size:14px}.work-row p{margin:5px 0 0;color:#838c96;font-size:12px;line-height:1.5}.work-row small{display:block;color:#858e98;font-size:12px}.work-status{justify-self:start;padding:6px 10px;border-radius:14px;background:#eff1ee;color:#5e6670;font-size:11px}.work-status.succeeded{background:#e6f3d6;color:#0059ff}.work-status.failed{background:#ff7d1b;color:#ff7d1b}.work-status.demo-complete{background:#e6f3d6;color:#0059ff}.works-empty{padding:40px;text-align:center;border:1px dashed #dce1d9;border-radius:15px;color:#818a94;background:#fff}.asset-library{margin-top:36px}.asset-library-heading h2{margin:0 0 5px;font-size:20px}.asset-library-heading p{font-size:12px}.asset-library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;margin-top:16px}.asset-card{overflow:hidden;border:1px solid #e9ece7;border-radius:14px;background:#fff}.asset-card img{display:block;width:100%;height:130px;object-fit:cover;background:#f3f5f2}.asset-card span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:10px;font-size:11px;color:#5e6670}.account-dialog{width:min(440px,calc(100vw - 32px));max-height:min(760px,calc(100vh - 32px));padding:0;border:0;border-radius:24px;box-shadow:0 26px 90px #10182240;color:#1b1e23}.account-dialog::backdrop{background:#15191f66;backdrop-filter:blur(3px)}.account-close-form{position:absolute;right:14px;top:13px}.account-close{width:34px;height:34px;border:0;border-radius:50%;background:#f1f3f1;font-size:23px}.account-modal-content{padding:30px 32px 28px}.account-brand{display:flex;align-items:center;gap:9px;color:#0059ff;font-weight:700}.account-brand b{padding:4px 8px;border-radius:10px;background:#e6f3d6;font-size:10px;color:#0059ff}.account-modal-content h2{font-size:24px;margin:23px 0 5px}.account-modal-content>p{margin:0;color:#828b95;font-size:13px}.account-balance{display:flex;justify-content:space-between;align-items:center;margin:20px 0;padding:15px 16px;border-radius:15px;background:#e6f3d6;color:#0059ff}.account-balance strong{font-size:22px;color:#0059ff}.auth-fields{display:grid;gap:12px}.auth-fields label{display:grid;gap:6px;color:#626a73;font-size:12px}.auth-fields input{height:42px;padding:0 12px;border:1px solid #e4e8e2;border-radius:11px;outline:none}.auth-fields input:focus{border-color:#e6f3d6}.auth-submit,.auth-logout{height:44px;border:0;border-radius:13px;background:#0059ff;color:#0059ff;font-weight:700}.auth-switch{justify-self:center;border:0;background:none;color:#0059ff;font-size:12px}.auth-error{min-height:16px;color:#ff7d1b;font-size:12px}.auth-logout{width:100%;background:#e6f3d6}.ledger-preview{max-height:170px;overflow:auto;margin-top:18px;border-top:1px solid #ecefea}.ledger-line{display:flex;justify-content:space-between;gap:12px;padding:10px 2px;border-bottom:1px solid #f0f2ee;color:#707982;font-size:11px}.ledger-line b{color:#0059ff}.auth-fields[hidden],.auth-logout[hidden],#accountNameWrap[hidden],#accountPhoneWrap[hidden]{display:none}
.image-results:has(.image-result-card){display:block;overflow:auto;padding:86px 28px 160px}.image-result-card{display:flex;gap:15px;max-width:100%;padding:13px;margin-bottom:12px;border:1px solid #ecefea;border-radius:16px;background:#fff}.image-result-preview{flex:0 0 116px;width:116px;height:116px;overflow:hidden;border-radius:12px;background:#e6f3d6}.image-result-preview img{width:100%;height:100%;object-fit:cover}.image-result-preview a{display:block;width:100%;height:100%}.image-result-copy{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px}.image-result-copy strong{font-size:13px}.image-result-copy small{max-width:540px;color:#7c8590;font-size:11px;line-height:1.5;overflow-wrap:anywhere}.image-result-copy .work-status{font-size:10px}.image-result-copy .task-error{color:#ff7d1b}
.image-placeholder{width:100%;height:100%;display:grid;place-content:center;text-align:center;color:#7d8790;font-size:12px;line-height:1.7;background:linear-gradient(145deg,#e6f3d6,#e6f3d6)}.placeholder-page{min-height:calc(100vh - 70px);display:none;place-items:center;background:#e6f3d6}.placeholder-page.shown{display:grid}.placeholder-card{width:min(480px,calc(100vw - 140px));padding:50px 40px;text-align:center;border:1px solid #e6f3d6;border-radius:24px;background:#fff;box-shadow:0 15px 50px #252a280b}.placeholder-card>img{display:block;width:45px;height:45px;margin:0 auto 20px;padding:11px;border-radius:14px;background:#e6f3d6}.placeholder-card small{color:#0059ff}.placeholder-card h1{font-size:25px;margin:10px 0}.placeholder-card p{color:#7e8790;line-height:1.7}.placeholder-card button{margin-top:15px;padding:11px 19px;border:0;border-radius:22px;background:#0059ff;color:#0059ff;font-weight:700}
.brand-logo{display:block;width:56px;height:56px;object-fit:contain}.account-brand img{width:32px;height:32px;object-fit:contain}.account-brand span{font-size:14px;color:#343a32}

/* Compact image history gallery with details revealed on hover/focus. */
.image-results:has(.image-result-card){display:grid;grid-template-columns:repeat(auto-fill,132px);grid-auto-rows:max-content;grid-auto-flow:row;justify-content:start;align-content:start;align-items:start;gap:26px 16px;overflow:auto;padding:24px 30px 190px}
.image-result-card{position:relative;display:block;box-sizing:border-box;width:100%;min-width:0;aspect-ratio:1;overflow:hidden;margin:0;padding:0;border:1px solid #ecefea;border-radius:16px;background:#f3f5f6;isolation:isolate}
.image-result-preview{position:absolute;inset:0;width:100%;height:100%;overflow:hidden;border-radius:inherit;background:#f1f3f5}
.image-result-link{position:absolute;inset:0;display:block;overflow:hidden;background:#f1f3f5}
.image-result-link img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .24s ease}
.image-result-link.is-loaded img{opacity:1}
.thumbnail-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#7c8792;font-size:12px;transition:opacity .2s ease}
.image-result-link.is-loaded .thumbnail-loading{opacity:0;pointer-events:none}
.image-result-link.is-error .thumbnail-loading{color:#c55346}
.image-result-link.is-error .thumbnail-loading>span:last-child{font-size:0}
.image-result-link.is-error .thumbnail-loading>span:last-child::after{content:'图片载入失败';font-size:12px}
.image-result-overlay{position:absolute;z-index:2;inset:0;display:flex;align-items:flex-end;padding:13px;color:#fff;opacity:0;background:linear-gradient(180deg,#11182700 22%,#11182720 48%,#111827df 100%);transition:opacity .2s ease;pointer-events:none}
.image-result-card:hover .image-result-overlay,.image-result-card:focus-visible .image-result-overlay,.image-result-card:focus-within .image-result-overlay{opacity:1}
.image-result-overlay>div{width:100%;min-width:0}
.image-result-overlay strong{display:block;margin-bottom:4px;font-size:12px;font-weight:700}
.image-result-overlay p{display:-webkit-box;overflow:hidden;margin:0 0 5px;font-size:11px;line-height:1.45;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.image-result-overlay time,.image-result-overlay .task-error{display:block;color:#ffffffc9;font-size:10px;line-height:1.4}
.image-result-overlay .task-error{margin-top:4px;color:#ffd5ce}
.image-result-preview:has(.image-generation-state){display:grid;place-items:center}
.image-generation-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#72808b;font-size:12px;text-align:center}
.generation-state-icon{display:grid;width:31px;height:31px;place-items:center;color:#9aa5ad;font-size:23px}
.image-result-card.is-failed .image-generation-state{color:#c55346}
.image-result-card.is-demo .image-generation-state{max-width:132px;text-align:center;line-height:1.5}
@media(hover:none){.image-result-overlay{opacity:1;background:linear-gradient(180deg,#11182700 28%,#111827d9 100%)}}
@media(max-width:720px){.image-results:has(.image-result-card){grid-template-columns:repeat(auto-fill,132px);gap:18px 12px;padding:18px 16px 180px}}

/* Asset library inspired by the reference workspace. */
.works-page{min-height:calc(100vh - 66px);padding:24px clamp(22px,4vw,64px) 72px;background:#f5f7fa}
.works-heading{margin-bottom:20px}.works-heading small{color:#788aa1;letter-spacing:.04em}.works-heading h1{margin:4px 0;font-size:28px;font-weight:750;color:#101828}.works-heading p{font-size:13px;color:#788aa1}.works-heading>button,.asset-library-heading>button{height:38px;padding:0 17px;border:1px solid #e2e8f0;border-radius:22px;background:#fff;color:#344054;font-weight:600;cursor:pointer}.asset-toolbar{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 0 16px;border-bottom:1px solid #e9edf3}.asset-filter-group{display:flex;gap:3px;padding:4px;border:1px solid #e7ebf0;border-radius:24px;background:#fff;box-shadow:0 1px 2px #1018280d}.asset-filter-group button,.asset-toolbar>button,.asset-toolbar select{height:36px;padding:0 15px;border:1px solid transparent;border-radius:20px;background:#fff;color:#667085;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer}.asset-filter-group button.selected{background:#101828;color:#fff}.asset-toolbar select{min-width:126px;border-color:#e7ebf0;outline:none}.asset-toolbar>button{border-color:#e7ebf0;box-shadow:0 1px 2px #1018280d}.asset-toolbar>button.selected{border-color:#cce0ff;background:#eef6ff;color:#1268d3}.asset-toolbar .asset-reset{border-color:transparent;box-shadow:none}.asset-toolbar .asset-batch-toggle{margin-left:auto;color:#344054}.asset-batch-bar{display:flex;align-items:center;gap:15px;margin:14px 0;padding:11px 14px;border:1px solid #dbeafe;border-radius:12px;background:#f0f7ff;color:#475467;font-size:13px}.asset-batch-bar[hidden]{display:none}.asset-batch-bar label{display:flex;align-items:center;gap:7px}.asset-batch-bar input{accent-color:#1268d3}.asset-batch-bar #worksSelectionCount{color:#788aa1}.asset-batch-bar button{height:32px;padding:0 13px;border:1px solid #dce3ec;border-radius:18px;background:#fff;color:#475467;font-weight:600;cursor:pointer}.asset-batch-bar .asset-delete-selected{margin-left:auto;border-color:#ffd3cf;color:#d33c31}.asset-batch-bar .asset-delete-selected:disabled{opacity:.45;cursor:not-allowed}.work-date-group{padding-top:19px}.work-date-group>header{display:flex;align-items:center;gap:12px;margin:0 0 13px;color:#101828}.work-date-group>header strong{font-size:16px}.work-date-group>header small{color:#94a3b8;font-size:12px}.work-asset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(164px,184px));align-items:start;gap:14px}.work-asset-card{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid #edf0f4;border-radius:15px;background:#f1f3f6;box-shadow:0 2px 5px #1018280a;outline:0;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}.work-asset-card:hover{z-index:2;transform:translateY(-2px);box-shadow:0 10px 24px #10182820}.work-asset-card.is-selected{border:2px solid #1877f2;box-shadow:0 0 0 3px #1877f220}.work-asset-image,.work-asset-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f1f3f6}.work-asset-image img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .2s ease}.work-asset-image.is-loaded img{opacity:1}.work-asset-image .thumbnail-loading{z-index:1;background:#f1f3f6}.work-asset-image.is-loaded .thumbnail-loading{opacity:0;pointer-events:none}.work-asset-placeholder{flex-direction:column;gap:12px;padding:18px;color:#697586;font-size:12px;text-align:center}.work-asset-placeholder.pending{background:#f0f2f4}.work-asset-placeholder.demo{background:#eff6e8;color:#64744f}.work-asset-placeholder.failed{background:#fff1f0;color:#b42318}.work-asset-placeholder>b{display:grid;width:40px;height:40px;place-items:center;border-radius:50%;background:#fff;color:#8492a6;font-size:22px}.work-asset-placeholder.failed>b{color:#d92d20}.work-asset-overlay{position:absolute;inset:0;display:flex;align-items:flex-end;padding:13px;color:#fff;opacity:0;background:linear-gradient(180deg,#10182800 28%,#101828db 100%);transition:opacity .18s ease;pointer-events:none}.work-asset-card:hover .work-asset-overlay,.work-asset-card:focus-visible .work-asset-overlay,.work-asset-card:focus-within .work-asset-overlay{opacity:1}.work-asset-overlay>div{width:100%;min-width:0}.work-asset-overlay strong{display:block;margin-bottom:4px;font-size:12px}.work-asset-overlay p{display:-webkit-box;overflow:hidden;margin:0 0 5px;font-size:11px;line-height:1.45;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:2}.work-asset-overlay time,.work-asset-status{display:block;color:#ffffffc9;font-size:10px;line-height:1.45}.work-asset-status{margin-top:4px}.work-card-actions{position:absolute;z-index:3;top:9px;right:9px;display:flex;gap:6px;opacity:0;transition:opacity .18s ease}.work-asset-card:hover .work-card-actions,.work-asset-card:focus-within .work-card-actions{opacity:1}.work-card-actions button,.work-select{display:grid;width:34px;height:34px;place-items:center;border:1px solid #e7ebf0;border-radius:50%;background:#fffffff2;color:#475467;font-size:20px;line-height:1;box-shadow:0 2px 8px #10182814;cursor:pointer}.work-card-actions button[aria-pressed=true]{color:#f79009}.work-card-actions button:last-child{font-size:23px}.work-select{position:absolute;z-index:3;top:9px;left:9px;width:29px;height:29px;opacity:0;font-size:15px}.work-asset-card:hover .work-select,.work-asset-card:focus-within .work-select,#worksPage.is-batch-mode .work-select{opacity:1}.work-asset-card.is-selected .work-select{border-color:#1877f2;background:#1877f2;color:#fff;opacity:1}.asset-library{margin-top:39px;padding-top:22px;border-top:1px solid #e9edf3}.asset-library-heading h2{margin:0 0 4px;font-size:18px;color:#101828}.asset-library-heading p{font-size:12px}.asset-library-grid{grid-template-columns:repeat(auto-fill,minmax(150px,184px));gap:14px}.asset-card{position:relative;overflow:hidden;border-color:#e7ebf0;border-radius:14px;box-shadow:0 2px 5px #1018280a}.asset-card img{height:auto;aspect-ratio:1;object-fit:cover}.asset-card span{padding:9px 38px 9px 10px}.asset-card button{position:absolute;right:7px;bottom:6px;height:27px;padding:0 10px;border:1px solid #e7ebf0;border-radius:15px;background:#fff;color:#475467;font-size:11px;opacity:0;cursor:pointer}.asset-card:hover button,.asset-card:focus-within button{opacity:1}.works-empty{padding:48px 24px;border-color:#e1e7ef;color:#7b8798}.works-page.is-batch-mode .asset-batch-toggle{background:#eef6ff;color:#1268d3}
@media(hover:none){.work-asset-overlay{opacity:1;background:linear-gradient(180deg,#10182800 22%,#101828d9 100%)}.work-card-actions,.work-select,.asset-card button{opacity:1}}
@media(max-width:720px){.works-page{padding:19px 16px 56px}.asset-toolbar{gap:6px}.asset-filter-group{order:0}.asset-toolbar select{order:1;flex:1}.asset-toolbar>button{height:34px;padding:0 11px;font-size:12px}.asset-toolbar .asset-batch-toggle{margin-left:0}.work-asset-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:10px}.asset-batch-bar{gap:9px;flex-wrap:wrap}.asset-batch-bar .asset-delete-selected{margin-left:0}}
.result-load-more{display:block;min-height:40px;margin:22px auto 8px;padding:0 20px;border:1px solid #dce5ef;border-radius:22px;background:#fff;color:#35618d;font:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:background .18s,border-color .18s,color .18s}.result-load-more:hover{border-color:#8dbbff;background:#f2f8ff;color:#1268d3}.result-load-more:focus-visible{outline:3px solid #1877f244;outline-offset:2px}
.asset-content-section{padding-top:22px}.asset-content-section>header{display:flex;align-items:center;gap:10px;margin:0 0 13px;color:#101828}.asset-content-section>header strong{font-size:16px}.asset-content-section>header small{color:#94a3b8;font-size:12px}.asset-content-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr));gap:13px}.asset-text-card{min-width:0;padding:16px 17px;border:1px solid #e7ebf0;border-radius:15px;background:#fff;box-shadow:0 2px 5px #1018280a}.asset-text-card-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.asset-text-card-head>span{padding:5px 9px;border-radius:14px;background:#eef6ff;color:#1268d3;font-size:11px;font-weight:650}.asset-text-card-head button{height:30px;padding:0 12px;border:1px solid #dce3ec;border-radius:16px;background:#fff;color:#344054;font-size:12px;font-weight:650;cursor:pointer}.asset-text-card-head button:hover{border-color:#9cc5ff;background:#f4f9ff;color:#1268d3}.asset-text-card h3{margin:13px 0 7px;color:#101828;font-size:14px}.asset-text-card p{margin:0;color:#667085;font-size:12px;line-height:1.75;overflow-wrap:anywhere}.asset-audio-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:11px}.asset-audio-card{display:grid;grid-template-columns:42px minmax(120px,1fr);align-items:center;gap:11px;padding:13px 14px;border:1px solid #e7ebf0;border-radius:14px;background:#fff;box-shadow:0 2px 5px #1018280a}.asset-audio-card-icon{display:grid;width:40px;height:40px;place-items:center;border-radius:12px;background:#eef6ff;color:#1268d3;font-size:21px}.asset-audio-card-copy{min-width:0;display:grid;gap:4px}.asset-audio-card-copy strong{color:#101828;font-size:13px}.asset-audio-card-copy span{overflow:hidden;color:#7b8798;font-size:10px;line-height:1.45;text-overflow:ellipsis;white-space:nowrap}.asset-audio-card audio{grid-column:1/-1;width:100%;height:34px}.asset-card audio{display:block;width:calc(100% - 18px);height:34px;margin:8px 9px 0}.asset-toolbar [hidden]{display:none}
.asset-filter-group{flex-wrap:wrap}.asset-library[hidden]{display:none}.asset-card video{display:block;width:100%;aspect-ratio:1;object-fit:cover;background:#101827}.work-asset-video{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;background:#101827}.work-asset-video video{width:100%;height:100%;object-fit:cover}

.asset-content-section>header>div{display:grid;gap:4px}.text-asset-add{margin-left:auto;min-height:34px;padding:0 14px;border:1px solid #b7d4ff;border-radius:18px;background:#f3f8ff;color:#1268d3;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.text-asset-add:hover{background:#e8f2ff}.asset-text-card-head>div{display:flex;gap:6px}.asset-text-card-head .text-asset-delete{color:#b42318}.text-asset-dialog{width:min(560px,calc(100vw - 28px));max-height:min(86vh,760px);padding:0;border:1px solid #e2e8f0;border-radius:20px;background:#fff;color:#101828;box-shadow:0 24px 80px #10182830}.text-asset-dialog::backdrop{background:#10182870;backdrop-filter:blur(3px)}.text-asset-dialog form{display:grid;gap:16px;padding:22px}.text-asset-dialog form>header{display:flex;align-items:center;justify-content:space-between}.text-asset-dialog form>header small{color:#1268d3;font-size:11px}.text-asset-dialog h2{margin:4px 0 0;font-size:20px}.text-asset-dialog form>header button{width:34px;height:34px;border:0;border-radius:50%;background:#f2f4f7;color:#667085;font-size:23px;cursor:pointer}.text-asset-dialog label{display:grid;gap:7px;color:#344054;font-size:13px;font-weight:650}.text-asset-dialog input,.text-asset-dialog select,.text-asset-dialog textarea{width:100%;min-width:0;padding:11px 12px;border:1px solid #dce3ec;border-radius:11px;background:#fff;color:#101828;font:inherit;font-size:13px}.text-asset-dialog textarea{min-height:170px;resize:vertical;line-height:1.65}.text-asset-dialog #textAssetError{min-height:18px;margin:0;color:#b42318;font-size:12px}.text-asset-dialog footer{display:flex;justify-content:flex-end;gap:9px}.text-asset-dialog footer button{height:38px;padding:0 16px;border:1px solid #dce3ec;border-radius:20px;background:#fff;color:#344054;font:inherit;font-size:13px;font-weight:650;cursor:pointer}.text-asset-dialog footer button[type=submit]{border-color:#1268d3;background:#1268d3;color:#fff}.text-asset-dialog footer button:disabled{opacity:.6;cursor:wait}
.asset-video-category-filter{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 4px}.asset-video-category-filter[hidden]{display:none}.asset-video-category-filter button{height:32px;padding:0 13px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;color:#667085;font:inherit;font-size:12px;font-weight:600;cursor:pointer}.asset-video-category-filter button.selected{border-color:#cce0ff;background:#eef6ff;color:#1268d3}.asset-category-control{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:7px 10px;border-top:1px solid #edf0f4;color:#667085;font-size:11px}.asset-category-control select{max-width:130px;height:28px;padding:0 8px;border:1px solid #dce3ec;border-radius:14px;background:#fff;color:#344054;font:inherit;font-size:11px}
.asset-library-actions{display:flex;align-items:center;gap:9px}.asset-library-upload{display:inline-flex;height:38px;align-items:center;padding:0 17px;border:1px solid #cfe0ff;border-radius:22px;background:#eef6ff;color:#1268d3;font-size:13px;font-weight:650;cursor:pointer}.asset-library-upload:hover{background:#e2efff}
.reference-video-category-filter{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 14px}.reference-video-category-filter button{height:30px;padding:0 12px;border:1px solid #e1e8f0;border-radius:17px;background:#fff;color:#667085;font-size:12px;font-weight:600;font-family:inherit;cursor:pointer}.reference-video-category-filter button.active{border-color:#b9d5ff;background:#eef6ff;color:#1268d3}

/* Shared 4×4 breathing-dot loader. */
.gx{display:grid;grid-template-columns:repeat(4,15px);gap:9px;place-content:center;flex:none}
.gx span{display:block;width:15px;height:15px;border-radius:50%;background:#c9c9c9}
.g2 span{animation:gl 1.8s infinite}
@keyframes gl{0%{background:#c9c9c9;transform:scale(.55);animation-timing-function:ease-out}12%{background:#1a1a1a;transform:scale(1.12);animation-timing-function:ease-in-out}40%{background:#c9c9c9;transform:scale(.55);animation-timing-function:linear}100%{background:#c9c9c9;transform:scale(.55)}}
.g2 span:nth-child(1){animation-delay:0s}.g2 span:nth-child(2){animation-delay:.13s}.g2 span:nth-child(3){animation-delay:.26s}.g2 span:nth-child(4){animation-delay:.39s}
.g2 span:nth-child(5){animation-delay:.13s}.g2 span:nth-child(6){animation-delay:.26s}.g2 span:nth-child(7){animation-delay:.39s}.g2 span:nth-child(8){animation-delay:.52s}
.g2 span:nth-child(9){animation-delay:.26s}.g2 span:nth-child(10){animation-delay:.39s}.g2 span:nth-child(11){animation-delay:.52s}.g2 span:nth-child(12){animation-delay:.65s}
.g2 span:nth-child(13){animation-delay:.39s}.g2 span:nth-child(14){animation-delay:.52s}.g2 span:nth-child(15){animation-delay:.65s}.g2 span:nth-child(16){animation-delay:.78s}
body.dark-theme .gx span{background:#586579}body.dark-theme .g2 span{animation-name:gl-dark}
@keyframes gl-dark{0%{background:#586579;transform:scale(.55);animation-timing-function:ease-out}12%{background:#e7edf6;transform:scale(1.12);animation-timing-function:ease-in-out}40%{background:#586579;transform:scale(.55);animation-timing-function:linear}100%{background:#586579;transform:scale(.55)}}

/* Scale the shared loader to 30% of its media preview. */
.thumbnail-loading,.work-asset-placeholder,.image-result-preview:has(.image-generation-state){container-type:inline-size}
@supports (width:1cqw){.gx{grid-template-columns:repeat(4,calc(30cqw * .1724138));gap:calc(30cqw * .1034483)}.gx span{width:calc(30cqw * .1724138);height:calc(30cqw * .1724138)}}

.credit-shortage-dialog{position:fixed;width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 32px);padding:0;border:1px solid #e6eaf0;border-radius:22px;background:#fff;color:#172033;box-shadow:0 24px 80px #1720333d}
.credit-shortage-dialog::backdrop{background:#10182888;backdrop-filter:blur(4px)}
.credit-shortage-close{position:absolute;top:12px;right:12px;margin:0}
.credit-shortage-close button{width:34px;height:34px;border:0;border-radius:50%;background:#f1f4f7;color:#677487;font-size:23px;cursor:pointer}
.credit-shortage-content{padding:30px 30px 26px;text-align:center}
.credit-shortage-kicker{display:inline-flex;align-items:center;padding:5px 10px;border-radius:20px;background:#fff5e6;color:#c47a12;font-size:12px;font-weight:700}
.credit-shortage-content h2{margin:13px 0 7px;font-size:23px}
.credit-shortage-content>p{margin:0 auto 18px;max-width:340px;color:#68758a;font-size:14px;line-height:1.7}
.credit-shortage-amounts{display:flex;justify-content:center;gap:22px;margin:0 0 18px;color:#68758a;font-size:12px}
.credit-shortage-amounts[hidden]{display:none}
.credit-shortage-amounts b{margin-left:5px;color:#172033;font-size:13px}
.credit-shortage-contact{display:flex;align-items:center;gap:16px;padding:14px;border:1px solid #e6ebf2;border-radius:16px;background:#f8fafc;text-align:left}
.credit-shortage-contact img{flex:none;width:112px;height:112px;object-fit:contain;border-radius:8px;background:#fff}
.credit-shortage-contact div{display:grid;gap:7px}
.credit-shortage-contact strong{font-size:14px;color:#172033}
.credit-shortage-contact small{color:#68758a;font-size:12px;line-height:1.6}
.recharge-current-balance{font-weight:600}.recharge-current-balance b{margin-left:5px;color:#172033;font-size:16px}.recharge-contact div span{color:#1268d3;font-size:12px;font-weight:700}
.credit-shortage-content>form{margin:18px 0 0}
.credit-shortage-confirm{width:100%;height:44px;border:0;border-radius:12px;background:#1268ff;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.credit-shortage-confirm:hover{background:#0755dc}
@media(max-width:420px){.credit-shortage-content{padding:28px 20px 20px}.credit-shortage-contact{gap:11px;padding:10px}.credit-shortage-contact img{width:96px;height:96px}}

.home-page{overflow:hidden;background:linear-gradient(155deg,#d5ebff 0%,#eaf4ff 39%,#b9dcfb 100%)}
.home-portal-art{position:absolute;inset:0;pointer-events:none;overflow:hidden;color:#fff}.home-portal-art:before{content:"";position:absolute;width:min(82vw,1050px);height:min(82vw,1050px);left:50%;top:48%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ffffffbd 0,#ffffff8a 31%,#fff0 69%)}.home-portal-art i{position:absolute;left:50%;top:48%;height:1px;width:66vw;background:linear-gradient(90deg,transparent,#ffffffb8,transparent);transform-origin:left center;opacity:.7}.home-portal-art i:nth-of-type(1){transform:rotate(12deg)}.home-portal-art i:nth-of-type(2){transform:rotate(34deg)}.home-portal-art i:nth-of-type(3){transform:rotate(58deg)}.home-portal-art i:nth-of-type(4){transform:rotate(84deg)}.home-portal-art i:nth-of-type(5){transform:rotate(112deg)}.home-portal-art i:nth-of-type(6){transform:rotate(143deg)}.home-portal-art i:nth-of-type(7){transform:rotate(174deg)}.home-portal-art i:nth-of-type(8){transform:rotate(207deg)}.home-portal-art span{position:absolute;font:600 12px ui-monospace,monospace;letter-spacing:1px;color:#fff9}.home-portal-art span:nth-child(1){left:10%;top:23%}.home-portal-art span:nth-child(2){right:12%;top:31%}.home-portal-art span:nth-child(3){left:15%;bottom:25%}.home-portal-art span:nth-child(4){right:15%;bottom:19%}.home-portal{position:relative;z-index:1;max-width:860px;margin:0 auto;padding:clamp(65px,10vh,115px) 24px 60px;text-align:center}.portal-brand{display:flex;align-items:center;justify-content:center;gap:14px;color:#0c192b;font-size:clamp(28px,4vw,43px);font-weight:850;letter-spacing:1px}.portal-brand img{width:62px;height:62px;object-fit:contain;border-radius:50%;box-shadow:0 8px 22px #4d9ada36}.home-portal h1{margin:19px 0 10px;color:#101e32;font-size:clamp(36px,5.3vw,62px);line-height:1.2;letter-spacing:-1.8px}.home-portal h1 span{background:linear-gradient(90deg,#23b6e9,#6a92ff,#0059ff);-webkit-background-clip:text;background-clip:text;color:transparent}.portal-intro{margin:0;color:#526a84;font-size:16px}.portal-actions{display:flex;justify-content:center;gap:13px;margin:29px 0 27px}.portal-actions button{height:49px;padding:0 21px;border-radius:15px;font-size:15px;font-weight:700;transition:transform .18s,box-shadow .18s}.portal-actions button:hover{transform:translateY(-2px)}.portal-primary{display:flex;align-items:center;gap:12px;border:1px solid #13a8e4;background:#08a9e4;color:#fff;box-shadow:0 9px 20px #13a8e43d}.portal-primary img{width:17px;filter:brightness(0) invert(1)}.portal-secondary{border:1px solid #ffffffc7;background:#ffffff9c;color:#26435e}.portal-contact{display:flex;align-items:center;justify-content:center;gap:14px}.contact-qr,.contact-hours{width:235px;height:115px;border:1px solid #d4e2f0;border-radius:16px;background:#fffffff0;box-shadow:0 12px 28px #49739a12}.contact-qr{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden}.contact-qr:before{content:"";position:absolute;width:43px;height:43px;left:17px;top:16px;border:2px dashed #88b9da;border-radius:8px;background:linear-gradient(45deg,#e8f5ff 25%,transparent 25%,transparent 75%,#e8f5ff 75%),linear-gradient(45deg,#e8f5ff 25%,transparent 25%,transparent 75%,#e8f5ff 75%);background-position:0 0,8px 8px;background-size:16px 16px}.contact-qr span{font-size:13px;font-weight:750;color:#29435d}.contact-qr b{margin-top:5px;font-size:11px;font-weight:500;color:#7b90a4}.contact-qr small{position:absolute;left:69px;top:29px;font-size:10px;color:#8a9aab}.contact-hours{display:flex;align-items:center;justify-content:center;gap:13px;text-align:left}.contact-live{width:10px;height:10px;flex:0 0 10px;border-radius:50%;background:#0059ff;box-shadow:0 0 0 5px #0059ff20}.contact-hours div{display:flex;flex-direction:column;gap:3px}.contact-hours small{font-size:11px;color:#8192a5}.contact-hours strong{font-size:16px;color:#2b4159}.contact-hours b{font-size:13px;color:#52708a}.portal-footnote{margin-top:24px;color:#56738f;font-size:12px;letter-spacing:2px}.home-workbench-link{position:absolute;z-index:2;bottom:25px;left:50%;transform:translateX(-50%)}.home-workbench-link button{display:flex;align-items:center;gap:8px;height:40px;padding:0 16px;border:1px solid #ffffffc7;border-radius:22px;background:#ffffffa8;color:#36546d;font-size:13px;font-weight:650;box-shadow:0 5px 16px #37628816}.home-workbench-link img{width:16px}.agents-page{padding:27px clamp(20px,4vw,58px) 30px;background:#f7faff;min-height:calc(100vh - 70px)}.agents-heading{display:flex;align-items:flex-end;justify-content:space-between;max-width:1440px;margin:0 auto 22px}.agents-kicker{display:inline-flex;align-items:center;gap:8px;color:#6790b6;font-size:10px;font-weight:800;letter-spacing:2px}.agents-kicker i{width:7px;height:7px;border-radius:50%;background:#29aae2;box-shadow:0 0 0 4px #29aae21a}.agents-heading h1{margin:8px 0 6px;color:#142a42;font-size:clamp(24px,3vw,34px);letter-spacing:-.6px}.agents-heading p{margin:0;color:#768ba0;font-size:14px}.agents-history{display:flex;align-items:center;gap:8px;height:39px;padding:0 14px;border:1px solid #dce7f1;border-radius:13px;background:#fff;color:#4c647e;font-weight:650}.agents-history img{width:16px}.agents-workspace{display:grid;grid-template-columns:310px minmax(0,1fr);gap:17px;max-width:1440px;height:min(66vh,650px);min-height:470px;margin:auto}.agents-catalog,.agent-chat{border:1px solid #e2ebf4;border-radius:20px;background:#fff;box-shadow:0 8px 28px #2e5d8510}.agents-catalog{display:flex;flex-direction:column;overflow:hidden}.catalog-search{display:flex;align-items:center;gap:9px;height:43px;margin:17px 16px 12px;padding:0 12px;border:1px solid #e4edf5;border-radius:12px;background:#f8fbfe}.catalog-search img{width:16px;opacity:.55}.catalog-search input{width:100%;border:0;outline:none;background:transparent;color:#273d55;font:inherit;font-size:13px}.agent-category-list{display:flex;gap:7px;flex-wrap:wrap;padding:0 16px 14px;border-bottom:1px solid #edf2f7}.agent-category{padding:7px 10px;border:1px solid transparent;border-radius:10px;background:#f5f8fc;color:#70849a;font-size:11px;font-weight:650}.agent-category.active{border-color:#bfe6f8;background:#eaf8ff;color:#128abe}.agent-list-heading{display:flex;justify-content:space-between;align-items:center;padding:15px 17px 8px;color:#29415a;font-size:13px}.agent-list-heading span{color:#92a0af;font-size:11px;font-weight:500}.agent-list{flex:1;overflow:auto;padding:0 9px 12px}.agent-option{display:flex;width:100%;align-items:center;gap:11px;padding:11px 9px;border:1px solid transparent;border-radius:13px;background:#fff;text-align:left;cursor:pointer}.agent-option:hover{background:#f7fbfe}.agent-option.active{border-color:#bfe8f8;background:#effaff}.agent-option-icon,.agent-active-icon{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;background:linear-gradient(145deg,#e7f7ff,#d9f0ff);color:#208cbf}.agent-option-icon img{width:19px}.agent-option-copy{min-width:0;flex:1}.agent-option-copy strong,.agent-option-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.agent-option-copy strong{font-size:12px;color:#2d4359}.agent-option-copy small{margin-top:4px;color:#8394a5;font-size:10px}.agent-option-arrow{width:14px;color:#9bb0c2}.agent-chat{display:flex;flex-direction:column;min-width:0;overflow:hidden}.agent-chat-head{display:flex;align-items:center;gap:12px;min-height:71px;padding:0 20px;border-bottom:1px solid #edf2f7}.agent-active-icon{width:41px;height:41px;flex-basis:41px}.agent-active-icon img{width:21px}.agent-chat-head>div:nth-child(2){display:flex;flex-direction:column;gap:4px;min-width:0}.agent-chat-head strong{color:#223a52;font-size:14px}.agent-chat-head small{color:#8a9bad;font-size:11px}.agent-ready{display:flex;align-items:center;gap:6px;margin-left:auto;color:#8295a8;font-size:11px;white-space:nowrap}.agent-ready i{width:7px;height:7px;border-radius:50%;background:#0059ff}.agent-chat-body{flex:1;overflow:auto;padding:22px}.agent-welcome{height:100%;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.agent-welcome-art{display:grid;place-items:center;width:66px;height:66px;margin-bottom:15px;border:1px solid #d9edf8;border-radius:22px;background:linear-gradient(145deg,#ecfaff,#d9f0ff);box-shadow:0 10px 22px #48a9d218}.agent-welcome-art img{width:31px;color:#299ccc}.agent-welcome h2{margin:9px 0;color:#24415c;font-size:22px}.agent-welcome p{margin:0;color:#8596a8;font-size:13px;line-height:1.8}.agent-starter-prompts{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:18px}.agent-starter-prompts button{padding:8px 11px;border:1px solid #e1edf5;border-radius:20px;background:#fff;color:#5a728a;font-size:11px}.agent-message{display:flex;gap:10px;max-width:82%;margin:0 0 15px}.agent-message.user{margin-left:auto;flex-direction:row-reverse}.agent-message-bubble{padding:12px 14px;border:1px solid #e7eef4;border-radius:5px 16px 16px 16px;background:#f8fbfd;color:#425a70;font-size:13px;line-height:1.75;white-space:pre-wrap}.agent-message.user .agent-message-bubble{border-color:#c5eaf9;border-radius:16px 5px 16px 16px;background:#eaf8ff;color:#24506a}.agent-message-avatar{display:grid;place-items:center;flex:0 0 30px;width:30px;height:30px;border:1px solid #e2edf4;border-radius:10px;background:#f5f9fc;color:#56a4c7}.agent-message-avatar img{width:16px}.agent-composer{margin:0 16px 15px;padding:11px 12px;border:1px solid #dce8f1;border-radius:15px;background:#fff;box-shadow:0 5px 18px #3158780b}.agent-composer textarea{display:block;width:100%;min-height:50px;max-height:130px;resize:vertical;border:0;outline:none;color:#344c63;font:inherit;font-size:13px}.agent-composer textarea::placeholder{color:#a0adba}.agent-composer-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:8px;border-top:1px solid #f0f3f6}.agent-composer-bottom small{color:#a0adba;font-size:10px}.agent-composer-bottom button{display:flex;align-items:center;gap:7px;height:33px;padding:0 13px;border:0;border-radius:10px;background:#11a9df;color:#fff;font-size:12px;font-weight:700}.agent-composer-bottom button:disabled{background:#e8edf1;color:#9aa8b5;cursor:not-allowed}.agent-composer-bottom button img{width:14px;filter:brightness(0) invert(1)}.agents-note{display:flex;align-items:center;gap:7px;max-width:1440px;margin:13px auto;color:#8b9cab;font-size:11px}.agents-note img{width:15px}.agents-empty{padding:20px 10px;color:#8798aa;font-size:12px;text-align:center}
@media(max-width:850px){.home-portal{padding-top:9vh}.portal-brand img{width:50px;height:50px}.portal-contact{flex-direction:column}.contact-qr,.contact-hours{width:min(100%,300px)}.agents-page{padding:20px 14px}.agents-heading{align-items:flex-start}.agents-heading p{max-width:240px;line-height:1.6}.agents-workspace{height:auto;min-height:0;grid-template-columns:1fr}.agents-catalog{max-height:245px}.agent-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.agent-chat{min-height:470px}.agent-ready{display:none}.agents-note{line-height:1.6}.home-workbench-link{bottom:13px}}
.portal-active .sidebar,.portal-active .topbar{display:none}.portal-active main{margin-left:0;padding-top:0}.portal-active .home-page{min-height:100vh;padding:0 28px 20px}.portal-active .home-portal{padding-top:clamp(64px,14vh,130px)}.contact-qr{flex-direction:row;gap:15px;width:280px;height:140px;padding:12px 15px;text-align:left}.contact-qr:before{display:none}.contact-qr>img{width:112px;height:112px;flex:0 0 112px;object-fit:contain;border:1px solid #e3eaf0;border-radius:9px;background:#fff;transform:none}.contact-qr>div{display:flex;flex-direction:column;align-items:flex-start;gap:5px}.contact-qr span{font-size:13px}.contact-qr b{font-size:11px}.contact-qr small{position:static;font-size:10px}.home-page{background-size:150% 150%;animation:portalGradient 18s ease-in-out infinite alternate}.home-portal-art:before{animation:portalGlow 8s ease-in-out infinite alternate}.home-portal-art i{animation:portalRays 6s ease-in-out infinite alternate}.home-portal-art i:nth-of-type(2n){animation-delay:-2.4s}.home-portal-art i:nth-of-type(3n){animation-delay:-4.1s}.home-portal-art span{animation:portalCodeFloat 7s ease-in-out infinite alternate}.home-portal-art span:nth-child(2n){animation-delay:-3s}@keyframes portalGradient{0%{background-position:0% 40%}100%{background-position:100% 60%}}@keyframes portalGlow{0%{opacity:.7;transform:translate(-50%,-50%) scale(.88)}100%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}}@keyframes portalRays{0%{opacity:.24;filter:blur(.2px)}100%{opacity:.9;filter:blur(0)}}@keyframes portalCodeFloat{0%{transform:translate3d(0,0,0);opacity:.42}100%{transform:translate3d(0,-12px,0);opacity:.9}}@media(prefers-reduced-motion:reduce){.home-page,.home-portal-art:before,.home-portal-art i,.home-portal-art span{animation:none}}
.admin-page{min-height:calc(100vh - 70px);padding:30px clamp(20px,4vw,58px);background:#f6f9fc}.admin-mode-toggle{display:flex;align-items:center;gap:8px;height:39px;margin-right:15px;padding:0 14px;border:1px solid #b9e2f3;border-radius:12px;background:#effaff;color:#1387b4;font-size:12px;font-weight:700}.admin-mode-toggle[hidden]{display:none}.admin-mode-toggle img{width:16px}.admin-heading{display:flex;align-items:flex-end;justify-content:space-between;max-width:1440px;margin:0 auto 24px}.admin-heading h1{margin:8px 0 6px;color:#142a42;font-size:30px}.admin-heading p{margin:0;color:#7b8fa2;font-size:13px}.admin-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;max-width:1440px;margin:0 auto 20px}.admin-stats article{display:flex;flex-direction:column;gap:8px;padding:19px 20px;border:1px solid #e2ebf4;border-radius:16px;background:#fff;box-shadow:0 5px 20px #31587809}.admin-stats article span{color:#768ba0;font-size:12px}.admin-stats article strong{color:#183550;font-size:29px;line-height:1}.admin-stats article small{color:#9aa8b6;font-size:11px}.admin-users-card{max-width:1440px;margin:auto;border:1px solid #e2ebf4;border-radius:18px;background:#fff;box-shadow:0 5px 20px #31587809;overflow:hidden}.admin-users-card>header{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid #edf2f7}.admin-users-card>header div{display:flex;flex-direction:column;gap:5px}.admin-users-card>header strong{color:#25415d;font-size:15px}.admin-users-card>header small{color:#8a9bad;font-size:11px}.admin-users-card>header>span{color:#7c8fa2;font-size:12px}.admin-table-wrap{overflow:auto}.admin-users-table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}.admin-users-table th,.admin-users-table td{padding:13px 17px;border-bottom:1px solid #eff3f7;font-size:12px}.admin-users-table th{background:#f9fbfd;color:#8192a4;font-weight:650}.admin-users-table td{color:#526a80}.admin-users-table tbody tr:last-child td{border-bottom:0}.admin-user-name{color:#29435d;font-weight:700}.admin-role-badge{display:inline-flex;padding:4px 8px;border-radius:9px;background:#f1f5f8;color:#75899c;font-size:10px}.admin-role-badge.admin{background:#e8f7ff;color:#1087b8}.admin-bottom-note{display:flex;align-items:center;gap:7px;max-width:1440px;margin:15px auto 0;color:#8999a9;font-size:11px}.admin-bottom-note img{width:15px}
.password-change{display:grid;gap:8px;margin:14px 0;padding:13px;border:1px solid #e4edf4;border-radius:13px;background:#f9fcfe}.password-change[hidden]{display:none}.password-change>strong{color:#34516a;font-size:12px}.password-change label{display:grid;gap:5px;color:#788a9b;font-size:10px}.password-change input{height:36px;padding:0 10px;border:1px solid #e0e8ef;border-radius:9px;background:#fff}.password-change>button{height:37px;border:0;border-radius:10px;background:#dff4fd;color:#167eaa;font-weight:700;font-size:12px}.password-change-message{min-height:14px;color:#2183a5;font-size:11px}
@media(max-width:850px){.admin-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-heading{align-items:flex-start}}
.home-page{position:relative;background:radial-gradient(ellipse 85% 65% at 50% 40%,rgba(255,255,255,.5) 0%,#e0ecfb 40%,#a0d0f8 70%,#70b8f0 100%);background-size:150% 150%;animation:portalGradient 22s ease-in-out infinite alternate}.home-portal-art{z-index:0}.home-portal-art:before{width:min(90vw,1120px);height:min(90vw,1120px);background:radial-gradient(circle,#ffffffa8 0,#ffffff70 35%,#fff0 72%)}.home-tunnel{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}.home-portal{z-index:3}.portal-active .sidebar{display:none}.portal-active .topbar{display:flex}.portal-active main{margin-left:0;padding-top:58px}.portal-active .home-page{min-height:calc(100vh - 58px);padding:0 24px 20px}.portal-active .home-portal{padding-top:clamp(42px,9vh,94px)}@media(prefers-reduced-motion:reduce){.home-page{animation:none}}
.topbar{position:fixed;z-index:20;top:0;left:0;right:0;height:58px;padding:0 clamp(12px,1.6vw,24px);display:flex;align-items:center;justify-content:flex-start;gap:8px;background:rgba(255,255,255,.94);border-bottom:1px solid #e8eef3;backdrop-filter:blur(16px)}.topbar-brand{display:flex;flex:0 0 auto;align-items:center;gap:8px;color:#172d44;text-decoration:none;font-size:14px;font-weight:800;letter-spacing:.2px}.topbar-brand img{width:32px;height:32px;object-fit:contain;border-radius:50%}.top-home{display:flex;flex:0 0 auto;align-items:center;gap:6px;height:34px;padding:0 11px;border:1px solid transparent;border-radius:10px;background:transparent;color:#61758a;font-size:12px;font-weight:650}.top-home img{width:15px;height:15px;opacity:.75}.top-home:hover,.top-home.active{border-color:#d6edf7;background:#effaff;color:#1289b8}.page-label{margin:0 0 0 5px;gap:8px;font-size:13px;color:#40566d}.page-label i{height:15px;background:#22a9d8}.admin-mode-toggle{flex:0 0 auto;height:34px;margin-right:0;padding:0 10px;border-radius:10px;font-size:11px}.top-actions{display:flex;flex:0 0 auto;align-items:center;gap:5px;margin-left:auto}.top-pill{height:34px;gap:6px;padding:0 8px;border-radius:10px;box-shadow:none;font-size:11px;font-weight:600}.top-pill>img{width:14px;height:14px;flex:0 0 14px}.top-pill small{padding:3px 5px;font-size:9px}.top-pill.points{gap:4px}.top-pill.points b{font-size:12px}.profile{width:32px;height:32px;flex:0 0 32px;font-size:12px}.notice{width:14px;height:14px;font-size:9px}.sidebar{top:58px;z-index:10}.side-bottom{height:104px}.nav-item{width:58px;height:60px;border-radius:13px;font-size:11px}.nav-icon{height:25px}.nav-icon img{width:20px;height:20px}main{margin-left:80px;padding-top:58px}.page{min-height:calc(100vh - 58px)}.home-page{min-height:calc(100vh - 58px)}.portal-active .sidebar{display:flex}.portal-active .topbar{display:flex}.portal-active main{margin-left:80px;padding-top:58px}.portal-active .home-page{min-height:calc(100vh - 58px);padding:0 24px 20px}.portal-active .home-portal{padding-top:clamp(42px,9vh,94px)}@media(max-width:1150px){.topbar{gap:5px;padding-inline:10px}.topbar-brand{gap:6px;font-size:13px}.topbar-brand img{width:29px;height:29px}.top-home{height:32px;padding:0 8px}.top-actions{gap:3px}.top-pill{height:32px;padding-inline:6px;gap:4px;font-size:10px}.top-pill>img{width:13px;height:13px;flex-basis:13px}.admin-mode-toggle{height:32px;padding-inline:7px;font-size:10px}.page-label{font-size:12px}}@media(max-width:1040px){.top-pill span,.top-pill small{display:none}.top-pill{width:31px;justify-content:center;padding:0}.top-pill.points{width:auto;min-width:31px;padding:0 6px}.top-actions{gap:4px}.top-home span{display:none}.top-home{width:32px;justify-content:center;padding:0}.topbar-brand span{display:none}.page-label{display:none!important}.admin-mode-toggle{width:32px;justify-content:center;padding:0;font-size:0}.admin-mode-toggle img{flex:0 0 15px}}
.admin-tabs{display:flex;gap:7px;max-width:1440px;margin:0 auto 18px;padding:5px;border:1px solid #e2ebf4;border-radius:15px;background:#fff;width:max-content;max-width:100%;overflow:auto}.admin-tabs button{flex:0 0 auto;padding:10px 17px;border:0;border-radius:10px;background:transparent;color:#74889b;font-size:12px;font-weight:700}.admin-tabs button.selected{background:#eaf8ff;color:#168bb8}.admin-panel{display:none;max-width:1440px;margin:auto}.admin-panel.selected{display:block}.admin-overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.admin-capability-list{padding:4px 20px 12px}.admin-capability-list>div{display:grid;grid-template-columns:minmax(130px,.8fr) 1.6fr auto;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #edf2f7}.admin-capability-list>div:last-child{border-bottom:0}.admin-capability-list b{color:#38516a;font-size:12px}.admin-capability-list span{color:#8595a6;font-size:11px;line-height:1.5}.admin-capability-list i{padding:5px 8px;border-radius:8px;background:#f0f4f7;color:#8b9aaa;font-size:10px;font-style:normal;white-space:nowrap}.admin-capability-list i.ready{background:#e6f3d6;color:#0059ff}.admin-row-actions{display:flex;flex-wrap:wrap;gap:5px}.admin-row-actions button,.admin-action{padding:6px 8px;border:1px solid #dfe9f1;border-radius:8px;background:#fff;color:#527087;font-size:10px;white-space:nowrap}.admin-row-actions button:hover,.admin-action:hover{border-color:#9fdcf2;color:#1486b2}.admin-row-actions button:disabled{opacity:.45;cursor:not-allowed}.admin-action.primary{border-color:#15a5d7;background:#10a7dc;color:#fff}.admin-agent-form{display:grid;grid-template-columns:1fr 1fr 2fr 1fr auto;gap:8px;align-items:center;padding:14px 18px;border-bottom:1px solid #edf2f7;background:#f9fcfe}.admin-agent-form[hidden]{display:none}.admin-agent-form input{min-width:0;height:36px;padding:0 10px;border:1px solid #e0e8ef;border-radius:9px;background:#fff;color:#334c62;font-size:11px}.admin-agent-form>div{display:flex;gap:6px}.admin-agent-summary,.admin-task-prompt,.admin-task-error{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.admin-task-prompt{max-width:350px}.admin-cell-sub{display:block;margin-top:4px;color:#90a0ae;font-size:10px}.admin-feature-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.admin-feature-grid article{padding:22px;border:1px solid #e2ebf4;border-radius:17px;background:#fff;box-shadow:0 5px 20px #31587809}.admin-feature-grid article>span{color:#77a0be;font-size:9px;font-weight:800;letter-spacing:1.2px}.admin-feature-grid h3{margin:12px 0;color:#2b435b;font-size:15px}.admin-feature-grid p{min-height:72px;margin:0 0 17px;color:#8293a3;font-size:11px;line-height:1.75}.admin-feature-grid article>b{display:inline-block;padding:6px 9px;border-radius:8px;background:#f0f4f7;color:#8293a3;font-size:10px}@media(max-width:900px){.admin-overview-grid{grid-template-columns:1fr}.admin-capability-list>div{grid-template-columns:1fr auto}.admin-capability-list span{grid-column:1/-1;grid-row:2}.admin-agent-form{grid-template-columns:1fr 1fr}.admin-feature-grid{grid-template-columns:1fr}}@media(max-width:600px){.admin-page{padding:20px 12px}.admin-heading h1{font-size:24px}.admin-tabs button{padding:9px 12px}.admin-agent-form{grid-template-columns:1fr}.admin-stats{gap:8px}.admin-stats article{padding:15px}.admin-stats article strong{font-size:23px}}
.portal-active .sidebar{display:none!important}
.portal-active main{width:100%;margin-left:0!important;padding-top:58px}
.portal-active .home-page{width:100%;min-height:calc(100vh - 58px)}
.topbar{padding-inline:clamp(18px,2vw,28px)}
.topbar-brand{gap:10px}
.topbar-brand img{width:34px;height:34px}
.top-actions .top-home{border-color:#e4ebf0;background:#fff;color:#425970}
.top-actions .top-home.active,.top-actions .top-home:hover{border-color:#cdeafa;background:#effaff;color:#1289b8}
@media(max-width:1150px){.topbar{padding-inline:18px}.topbar-brand{gap:9px}.topbar-brand img{width:31px;height:31px}.top-actions{gap:4px}}

.admin-task-cost{color:#2d526e;font-variant-numeric:tabular-nums;font-weight:750;white-space:nowrap}.admin-task-cost[title]{cursor:help}body.dark-theme .admin-task-cost{color:#b9d5f2}

:root{
  --ink:#17243a;
  --muted:#718096;
  --line:#e6edf4;
  --soft:#f5f9fd;
  --lime:#0059ff;
  --green:#0059ff;
  --pink:#ff7d1b;
  --brand-blue:#0059ff;
  --brand-cyan:#30f5fc;
  --brand-pale-blue:#d9f0ff;
  --brand-pale-green:#e6f3d6;
  --brand-orange:#ff7d1b;
  --shadow:0 18px 48px rgba(27,74,130,.09);
}

button:focus-visible,input:focus-visible,textarea:focus-visible,
.video-field input:focus,.video-field select:focus,.video-field textarea:focus,
.auth-fields input:focus,.detail-settings textarea:focus{
  outline-color:#30f5fc;
  border-color:#30f5fc;
}

/* Shared top navigation: one layout and component system in every app section. */
.topbar{justify-content:flex-start;padding-inline:20px}
.topbar-brand{gap:9px}
.topbar-brand img{width:33px;height:33px}
.top-actions{gap:9px;margin-left:auto}
.topbar .page-label{display:none!important}

/* Blue and cyan are the main interactive colors; orange is reserved for accents. */
.top-pill.coral,.top-pill.recharge{
  background:#ff7d1b;border-color:#ff7d1b;color:#fff;
  box-shadow:0 7px 18px rgba(255,122,26,.2);
}
.top-pill.tutorial{color:#d9650b;background:#fff8f2;border-color:#ffe1c7}
.top-pill.partner{background:#0059ff;border-color:#0059ff;color:#fff}
.top-pill.points{border-color:#cfe2fb;background:#fff;color:#1a4f9f}
.notice{background:#ff7d1b}
.top-home.active,.top-home:hover{
  border-color:#c8e5fb;background:#eaf6ff;color:#0059ff
}
.nav-item.active{border:0;background:#0b4dbb;color:#fff}
.nav-item.active .nav-icon img{filter:brightness(0) invert(1)}
.side-nav:hover .nav-item.active:not(:hover){background:transparent;color:#383b41}
.side-nav:hover .nav-item.active:not(:hover) .nav-icon img{filter:none}
.nav-item:hover{background:#0b4dbb;color:#fff}
.nav-item:hover .nav-icon img{filter:brightness(0) invert(1)}
.nav-item{transition:background-color .14s ease,color .14s ease}
.nav-item.beta small,.tool-list em{background:#e6f3d6;color:#4d722b}
.portal-primary,.generate-video.enabled,.agent-composer-bottom button,.admin-action.primary{
  background:#0059ff;border-color:#0059ff;color:#fff;
}
.portal-primary{box-shadow:0 9px 20px rgba(8,96,245,.22)}
.portal-primary:hover,.generate-video.enabled:hover,.agent-composer-bottom button:hover{
  background:#064fd0;border-color:#064fd0
}
.home-portal h1 span{background:linear-gradient(90deg,#27bfcf,#0059ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.home-page{background:radial-gradient(ellipse 85% 65% at 50% 40%,rgba(255,255,255,.82) 0%,#d9f0ff 48%,#a8d6f5 100%)}
.home-portal-art:before{background:radial-gradient(circle,#ffffffd9 0,#ffffff8a 35%,#fff0 72%)}
.agents-page,.works-page,.placeholder-page.shown{background:#f5f9fd}
.agents-kicker i,.agent-ready i,.contact-live{background:#30f5fc;box-shadow:0 0 0 4px rgba(39,230,232,.16)}
.agent-category.active,.agent-option.active,.agent-message.user .agent-message-bubble,.admin-tabs button.selected{
  border-color:#b8def8;background:#eaf6ff;color:#0756d8
}
.agent-option-icon,.agent-active-icon,.agent-welcome-art,.placeholder-card>img{
  background:linear-gradient(145deg,#d9f0ff,#e6f3d6);color:#0059ff
}
.detail-mode.selected,.type-chip.selected,.video-segment button.selected,.works-tabs button.selected,.detail-results-toolbar button.selected{
  border-color:#a9d1fa;background:#eaf4ff;color:#0756d8
}
.select-control.green,.switch-function,.trim-btn,.small-action,.asset-button,.detail-action{
  border-color:#cfe2fb;background:#eaf4ff;color:#0756d8
}
.result-filters .filter-active,.result-filters .filter-btn,.shortcut{
  background:#eaf4ff;border-color:#b8d7fb;color:#0756d8
}
.submit-arrow.ready,#homeSubmit.ready,#generateSubmit.ready,.auth-submit,.detail-empty button,.detail-output>button:not(:disabled){
  background:#0059ff;color:#fff
}
.video-link-row button{background:#0059ff;color:#fff}
.checkbox-custom{background:#0059ff;color:#fff}
.choice-card.selected,.video-step.active,.detail-mode.selected .mode-art{border-color:#b8d7fb;background:#eaf4ff;color:#0756d8}
.asset-tile .file-mark,.detail-counts,.task-thumb{background:#eaf4ff;color:#386aa8}
.video-toggle input,.retain-audio input,.video-check-row input{accent-color:#0059ff}
.layout-control-wrap{position:relative}
.layout-control-wrap>button{height:40px!important;min-width:142px;border-color:#e6eaf0!important;border-radius:24px!important;background:#fff!important;box-shadow:0 4px 14px #17243a0c}
.layout-menu{position:absolute;z-index:40;top:calc(100% + 9px);right:0;width:210px;padding:8px;border:1px solid #e7ebf0;border-radius:18px;background:#fff;box-shadow:0 16px 38px #17243a20}
.layout-menu[hidden]{display:none}
.layout-menu button{display:flex;width:100%;height:39px!important;align-items:center;padding:0 13px!important;border:0!important;border-radius:11px!important;background:#fff!important;color:#445063;text-align:left;font-size:13px!important;font-weight:500!important}
.layout-menu button:hover{background:#f5f8fb!important}
.layout-menu button.selected{background:#d9fb46!important;color:#101820!important;font-weight:700!important}
.layout-menu button.selected::after{content:'✓';margin-left:auto;font-size:15px}
.image-results[data-layout="3"]:has(.image-result-card){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 16px}
.image-results[data-layout="4"]:has(.image-result-card){display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 16px}
.image-results[data-layout="5"]:has(.image-result-card){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 16px}
.image-results[data-layout="6"]:has(.image-result-card){display:grid;grid-template-columns:repeat(6,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 14px}
.image-results[data-layout="9"]:has(.image-result-card){display:grid;grid-template-columns:repeat(9,minmax(0,1fr));justify-content:start;align-content:start;align-items:start;gap:22px 12px}
.image-results[data-layout]:has(.image-result-card){padding:24px 28px 160px}
.image-results:has(.image-result-card),.image-results[data-layout]:has(.image-result-card){gap:16px}
.submit-arrow{display:grid;place-items:center;line-height:0}
.submit-arrow.ready img{filter:brightness(0) invert(1)}
.reference-upload-item:nth-child(n){z-index:1}
.reference-upload-item:nth-child(2){z-index:2}.reference-upload-item:nth-child(3){z-index:3}.reference-upload-item:nth-child(4){z-index:4}.reference-upload-item:nth-child(5){z-index:5}.reference-upload-item:nth-child(6){z-index:6}.reference-upload-item:nth-child(7){z-index:7}.reference-upload-item:nth-child(8){z-index:8}.reference-upload-item:nth-child(9){z-index:9}.reference-upload-item:nth-child(10){z-index:10}.reference-upload-item:nth-child(11){z-index:11}.reference-upload-item:nth-child(12){z-index:12}
.reference-upload-add{position:relative;z-index:13;margin-left:-27px}
.reference-upload-item>span{position:relative;z-index:2}
.reference-upload-item>button{right:-2px}
.contact-qr,.contact-hours,.admin-users-card,.admin-feature-grid article,.agents-catalog,.agent-chat{
  border-color:#dceaf5
}
.works-empty,.asset-card,.work-row,.detail-workbench,.panel-section,.video-card,.prompt-card{
  border-color:#e6edf4
}
.work-status.succeeded{background:#e6f3d6;color:#4e702c}
.work-status.failed,.auth-error,.task-error{color:#c34f3d}
.video-feedback,.generate-feedback,.home-feedback,.video-inline-status{color:#0860a8}
.account-brand b,.account-balance{background:#eaf4ff;color:#24518b}
.account-brand{color:#24518b}
.account-balance strong{color:#173d75}
.account-submit,.auth-submit{border-color:#0059ff;background:#0059ff;color:#fff}

/* Consistent navigation rhythm, button sizes, and matching icon/text colors. */
.top-actions .top-home,
.top-actions .top-pill{
  height:38px;
  padding-inline:13px;
  gap:8px;
  border:1px solid #e3eaf2;
  border-radius:12px;
  background:#fff;
  box-shadow:0 2px 7px rgba(24,52,86,.045);
  color:#000;
  font-size:12px;
  font-weight:650;
  transition:background .18s,border-color .18s,box-shadow .18s,transform .18s;
}
.top-actions .top-home img,
.top-actions .top-pill img{width:16px;height:16px;flex:0 0 16px}
.top-actions .top-home:hover,
.top-actions .top-pill:not(.coral):not(.partner):not(.recharge):hover{
  border-color:#c8def7;background:#f5faff;box-shadow:0 4px 12px rgba(0,89,255,.08);transform:translateY(-1px)
}
.top-actions .top-home.active{
  border-color:#c8def7;background:#eaf4ff;color:#0059ff;box-shadow:none
}
.top-actions .top-home.active img{filter:brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(4544%) hue-rotate(218deg) brightness(101%) contrast(106%)}
.top-actions .top-pill.coral,
.top-actions .top-pill.partner{
  border-color:#0059ff;background:#0059ff;color:#fff;box-shadow:0 5px 13px rgba(0,89,255,.17)
}
.top-actions .top-pill.coral img,
.top-actions .top-pill.partner img{filter:brightness(0) invert(1)}
.top-actions .top-pill.coral:hover,
.top-actions .top-pill.partner:hover{background:#064fd0;border-color:#064fd0}
.top-actions .top-pill.tutorial{color:#000;background:#fff;border-color:#e3eaf2}
.top-actions .top-pill.recharge,
.top-actions .top-pill.points{color:#0059ff;background:#eaf4ff;border-color:#c8def7;box-shadow:none}
.top-actions .top-pill.recharge{color:#fff;background:#ff7d1b;border-color:#ff7d1b;box-shadow:0 5px 13px rgba(255,125,27,.18)}
.top-actions .top-pill.recharge img{filter:brightness(0) invert(1)}
.top-actions .top-pill.points img{filter:brightness(0) saturate(100%) invert(24%) sepia(97%) saturate(4544%) hue-rotate(218deg) brightness(101%) contrast(106%)}
.top-actions .top-pill.client small{color:#64748b;background:#f1f5f9}
.top-actions .top-pill.points b{color:inherit}
.top-actions .top-home.active{border-color:#0059ff;background:#0059ff;color:#fff;box-shadow:0 5px 13px rgba(0,89,255,.17)}
.top-actions .top-home.active img{filter:brightness(0) invert(1)}
.top-actions .admin-mode-toggle{display:flex;margin-right:0}
.top-actions .admin-mode-toggle[hidden]{display:none}
@media(max-width:1150px){
  .topbar{padding-inline:18px}
  .topbar-brand{gap:8px}
  .topbar-brand img{width:31px;height:31px}
  .top-actions{gap:7px}
  .top-actions .top-home,.top-actions .top-pill{height:36px;padding-inline:10px;gap:6px}
}
@media(max-width:1040px){
  .top-actions{gap:6px}
  .top-actions .top-pill{width:34px;height:34px;padding:0}
  .top-actions .top-pill.points{width:auto;min-width:34px;padding:0 7px}
}
.point-cost{display:flex;align-items:center;gap:4px;white-space:nowrap;color:#17243a;font-size:12px}
.point-cost img{width:14px;height:14px;filter:brightness(0) saturate(100%) invert(58%) sepia(88%) saturate(1878%) hue-rotate(1deg) brightness(103%) contrast(103%)}
.point-cost b{font-size:13px;font-weight:700}
.point-cost small{color:#78879a;font-size:10px}
.point-cost.free b,.point-cost.free small{color:#53782a}

.image-editor[hidden]{display:none}
.image-editor{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;background:#eef0f4;color:#17243a;font-family:inherit}
body.image-editor-open{overflow:hidden}
.image-editor-header{height:52px;flex:0 0 52px;display:flex;align-items:center;gap:18px;padding:0 20px;background:#fff;border-bottom:1px solid #e5e9ef}
.image-editor-header>strong{font-size:14px;font-weight:700}
.image-editor-header-meta{color:#8794a7;font-size:12px}
.image-editor-close{margin-left:auto;height:34px;padding:0 16px;border:0;border-radius:9px;background:#075bea;color:#fff;font:inherit;font-size:13px;font-weight:650;cursor:pointer;box-shadow:0 4px 12px #075bea30;transition:background .18s,transform .18s}
.image-editor-close:hover{background:#0049c7;transform:translateY(-1px)}
.image-editor-workspace{position:relative;min-height:0;flex:1;overflow:hidden}
.image-editor>main.image-editor-workspace{width:100%;margin:0;padding:0}
.image-editor-stage{position:absolute;inset:0;min-width:0;overflow:hidden;background:#eef0f4;cursor:grab;touch-action:none}
.image-editor-stage.dragging{cursor:grabbing}
.image-editor-stage.drag-over{background:#e4ebf7}
.image-editor-image-wrap{position:absolute;left:50%;top:50%;width:max-content;max-width:none;max-height:none;transform-origin:center center;will-change:transform;user-select:none;cursor:default}
.image-editor-image-wrap>img{display:block;width:auto;height:auto;max-width:none;max-height:none;object-fit:contain;box-shadow:0 2px 10px #17243a20;user-select:none;pointer-events:auto;cursor:grab;-webkit-user-drag:none}
.image-editor-image-wrap>#imageEditorImage{position:relative;z-index:2;transition:opacity .16s ease}
.image-editor-image-wrap>.image-editor-preview{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .16s ease;pointer-events:none;box-shadow:0 2px 10px #17243a20}
.image-editor-image-wrap>.image-editor-preview.is-visible{opacity:1}
.image-editor-hd-loading{position:absolute;z-index:5;top:8px;left:8px;display:none;padding:4px 7px;border-radius:5px;background:#ffffffd9;color:#858d99;font-size:11px;line-height:1.4;white-space:nowrap;pointer-events:none}
.image-editor-image-wrap.has-preview>.image-editor-hd-loading.is-visible{display:flex}
.image-editor-hd-loading{display:none;align-items:center;gap:7px}.image-editor-hd-loading.is-visible{display:flex}.image-editor-load-progress{width:72px;height:4px;overflow:hidden;border-radius:9px;background:#dfe5ed}.image-editor-load-progress i{display:block;width:0;height:100%;border-radius:inherit;background:#075bea;transition:width .12s linear}.image-editor-hd-loading.is-indeterminate .image-editor-load-progress i{width:32%;animation:image-editor-progress-pulse 1.15s ease-in-out infinite alternate}@keyframes image-editor-progress-pulse{from{transform:translateX(0)}to{transform:translateX(210%)}}
.image-editor-image-wrap.has-preview>.image-editor-source{display:none}
.image-editor-image-wrap>img:active{cursor:grabbing}
.image-editor-source{position:absolute;z-index:2;left:12px;top:-34px;padding:7px 13px;border-radius:20px;background:#fff;color:#506176;font-size:12px;box-shadow:0 2px 12px #17243a12;white-space:nowrap}
.image-editor-source:before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#14b8a6}
.image-editor-selection{position:absolute;z-index:4;inset:0;border:2px solid #1680ff;pointer-events:none;opacity:0;transition:opacity .12s}
.image-editor-image-wrap.is-selected .image-editor-selection{opacity:1}
.image-editor-selection i{position:absolute;width:10px;height:10px;border:2px solid #1680ff;border-radius:50%;background:#fff}
.image-editor-image-wrap .image-editor-selection i{pointer-events:auto;touch-action:none}
.image-editor-image-wrap .image-editor-selection i:nth-child(1),.image-editor-image-wrap .image-editor-selection i:nth-child(4){cursor:nwse-resize}
.image-editor-image-wrap .image-editor-selection i:nth-child(2),.image-editor-image-wrap .image-editor-selection i:nth-child(3){cursor:nesw-resize}
.image-editor-selection i:nth-child(1){left:-6px;top:-6px}.image-editor-selection i:nth-child(2){right:-6px;top:-6px}.image-editor-selection i:nth-child(3){left:-6px;bottom:-6px}.image-editor-selection i:nth-child(4){right:-6px;bottom:-6px}
.image-editor-canvas-image{position:absolute;z-index:1;left:50%;top:50%;width:max-content;transform:translate(-50%,-50%) scale(var(--canvas-scale,1));transform-origin:center center;cursor:move;touch-action:none;user-select:none}
.image-editor-canvas-image img{display:block;max-width:none;max-height:none;width:auto;height:auto;box-shadow:0 2px 10px #17243a30;pointer-events:none;-webkit-user-drag:none}
.image-editor-canvas-image.is-selected{z-index:2;outline:2px solid #1680ff;outline-offset:1px}
.image-editor-canvas-image .image-editor-selection{position:absolute;z-index:2;inset:0;border:2px solid #1680ff;pointer-events:none;opacity:0}
.image-editor-canvas-image.is-selected .image-editor-selection{opacity:1}
.image-editor-canvas-image .image-editor-selection i{position:absolute;width:12px;height:12px;border:2px solid #1680ff;border-radius:3px;background:#fff;pointer-events:auto;touch-action:none}
.image-editor-canvas-image .image-editor-selection i:nth-child(1){left:-7px;top:-7px;cursor:nwse-resize}
.image-editor-canvas-image .image-editor-selection i:nth-child(2){right:-7px;top:-7px;cursor:nesw-resize}
.image-editor-canvas-image .image-editor-selection i:nth-child(3){left:-7px;bottom:-7px;cursor:nesw-resize}
.image-editor-canvas-image .image-editor-selection i:nth-child(4){right:-7px;bottom:-7px;cursor:nwse-resize}
.image-editor-canvas-image.canvas-unselected{z-index:1}
.image-editor-zoom{position:absolute;z-index:4;left:12px;bottom:10px;padding:4px 7px;border-radius:5px;background:#17243a99;color:#fff;font-size:11px;pointer-events:none}
.image-editor-toolbar{position:fixed;z-index:6;left:50%;top:0;bottom:auto;display:none;align-items:center;justify-content:center;gap:0;max-width:calc(100vw - 24px);transform:translateX(-50%);overflow-x:auto;padding:10px 15px;border-radius:30px;background:#171a2b;color:#fff;box-shadow:0 10px 24px #10182b38;white-space:nowrap;scrollbar-width:none}
.image-editor-toolbar.is-visible{display:flex}
.image-editor-toolbar::-webkit-scrollbar{display:none}
.image-editor-toolbar button{flex:none;padding:0 13px;border:0;border-left:1px solid #ffffff28;background:transparent;color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.image-editor-toolbar button:hover{color:#9cc5ff}
.image-editor-toolbar button:disabled{color:#8b93a2;cursor:not-allowed}
.image-editor-development{margin-left:4px;color:#b7c0ce;font-size:9px;font-weight:500}
.image-editor-result-label{flex:none;padding:0 13px 0 3px;color:#d8dfed;font-size:12px}
.image-editor-toolbar .image-editor-remove{color:#ffb5b5}
.image-editor-sidebar{position:absolute;z-index:4;top:64px;right:0;bottom:0;width:340px;min-width:0;display:flex;flex-direction:column;background:#ffffffed;border-left:1px solid #e2e7ee;box-shadow:-8px 0 28px #17243a12;backdrop-filter:blur(10px)}
.image-editor-assets-heading{height:54px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid #edf0f4}
.image-editor-assets-heading>div{display:flex;align-items:baseline;gap:8px}.image-editor-assets-heading b{font-size:14px}.image-editor-assets-heading span{color:#8b97a8;font-size:11px}
.image-editor-assets-heading button,.image-editor-assets-tools button{height:30px;padding:0 10px;border:1px solid #e6eaf0;border-radius:8px;background:#fff;color:#59697e;font:inherit;font-size:11px;cursor:pointer}.image-editor-assets-heading button:disabled{opacity:.48;cursor:not-allowed}
.image-editor-source-tabs{display:flex;gap:6px;padding:9px 14px 0}.image-editor-source-tabs button{flex:1;min-width:0;height:32px;border:1px solid #e6eaf0;border-radius:8px;background:#fff;color:#738096;font:inherit;font-size:12px;cursor:pointer}.image-editor-source-tabs button[aria-pressed="true"]{border-color:#b8d4ff;background:#eef6ff;color:#075bea;font-weight:650}.image-editor-source-tabs button span{margin-left:4px;color:#9aa5b4;font-size:11px}.image-editor-source-tabs button[aria-pressed="true"] span{color:#075bea}
.image-editor-source-tabs[hidden],.image-editor-assets-tools button[hidden]{display:none!important}
.image-editor-assets-tools{display:flex;gap:8px;padding:10px 14px}
.image-editor-assets-tools label{flex:1}.image-editor-assets-tools select{width:100%;height:32px;padding:0 9px;border:1px solid #e6eaf0;border-radius:8px;background:#fff;color:#27374b;font:inherit;font-size:12px}
.image-editor-assets-tools button.selected{border-color:#b8d4ff;background:#eef6ff;color:#075bea}
.image-editor-assets{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;grid-auto-rows:116px!important;grid-auto-flow:row!important;column-count:initial!important;align-content:start;align-items:start;gap:10px;padding:0 14px 16px;overflow:auto;min-height:0}
.image-editor-assets>.image-editor-asset-item{position:relative!important;display:block!important;grid-column:auto!important;grid-row:auto!important;box-sizing:border-box;width:100%;height:116px!important;min-width:0;min-height:0;overflow:visible;padding:0;margin:0}.image-editor-assets>.image-editor-asset-item>.image-editor-thumb{position:relative!important;display:block!important;box-sizing:border-box;width:100%;height:116px!important;min-width:0;min-height:0;aspect-ratio:auto!important;overflow:hidden;padding:0;margin:0;border:2px solid transparent;border-radius:10px;background:#f0f2f5;cursor:pointer}
.image-editor-thumb.selected{border-color:#1680ff;box-shadow:0 0 0 2px #1680ff22}
.image-editor-assets>.image-editor-asset-item>.image-editor-thumb>img{position:static!important;display:block;width:100%!important;height:100%!important;object-fit:cover;margin:0}
.image-editor-thumb span{position:absolute;left:0;right:0;bottom:0;padding:17px 7px 6px;overflow:hidden;background:linear-gradient(transparent,#0009);color:#fff;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
.image-editor-thumb{cursor:grab}.image-editor-thumb:active{cursor:grabbing}
.image-editor-select{position:absolute;z-index:3;top:7px;right:7px;width:20px;height:20px;margin:0;border:1px solid #fff;border-radius:6px;background:#ffffffec;box-shadow:0 1px 4px #0004;accent-color:#0877ed;cursor:pointer}
.image-editor-empty{grid-column:1/-1;padding:20px;color:#9aa5b4;text-align:center;font-size:12px}
@media(max-width:800px){.image-editor-sidebar{display:none}.image-editor-toolbar{left:50%;max-width:calc(100vw - 24px);bottom:auto}.image-editor-toolbar button{padding-inline:10px}.image-editor-header{padding-inline:12px}}
.mask-editor[hidden]{display:none}.mask-editor{position:fixed;inset:0;z-index:11000;display:flex;flex-direction:column;background:#eef0f4;color:#17243a}.mask-editor>header{min-height:58px;display:flex;align-items:center;gap:16px;padding:0 20px;background:#fff;border-bottom:1px solid #e4e8ef}.mask-editor>header strong{font-size:14px}.mask-editor>header span{color:#77859a;font-size:12px}.mask-editor>header button{margin-left:auto;padding:8px 14px;border:1px solid #e3e8ef;border-radius:9px;background:#fff;color:#435168}.mask-editor>main{display:grid;min-height:0;flex:1;place-items:center;overflow:hidden}.mask-editor-canvas-wrap{position:relative;box-shadow:0 4px 22px #17243a25}.mask-editor-canvas-wrap img,.mask-editor-canvas-wrap canvas{position:absolute;inset:0;display:block;object-fit:contain}.mask-editor-canvas-wrap canvas{cursor:crosshair;touch-action:none;opacity:.48}.mask-editor>footer{min-height:62px;display:flex;align-items:center;justify-content:center;gap:12px;padding:10px;background:white;border-top:1px solid #e4e8ef}.mask-editor>footer label{display:flex;align-items:center;gap:8px;color:#596a80;font-size:12px}.mask-editor>footer input{width:140px;accent-color:#0877ed}.mask-editor>footer button{padding:9px 16px;border:1px solid #e2e7ee;border-radius:9px;background:#fff;color:#425168;cursor:pointer}.mask-editor>footer button.primary{border-color:#075bea;background:#075bea;color:#fff}.mask-editor-open{overflow:hidden}

.mask-editor-canvas-wrap canvas{cursor:none}
.mask-brush-cursor{position:absolute;z-index:4;display:none;box-sizing:border-box;border:1px solid #fff;border-radius:50%;background:rgba(0,117,255,.08);box-shadow:0 0 0 1px rgba(12,24,40,.95),inset 0 0 0 1px rgba(12,24,40,.35);pointer-events:none;transform:translate(-50%,-50%)}
.mask-brush-cursor.is-visible{display:block}

.admin-page{grid-template-columns:220px minmax(0,1fr);gap:0;min-height:calc(100vh - 66px);padding:0;background:#f5f8fc}
.admin-page.shown{display:grid}
body.admin-mode>.sidebar{display:none}
body.admin-mode>.topbar{left:0}
body.admin-mode>main{margin-left:0}
.admin-sidebar{position:sticky;top:66px;height:calc(100vh - 66px);min-height:560px;display:flex;flex-direction:column;padding:22px 14px 18px;background:#fff;border-right:1px solid #e5ebf2}
.admin-sidebar h1{margin:0 0 20px;padding:0 12px 17px;border-bottom:1px solid #e9eef4;color:#18324b;font-size:20px}
.admin-side-link,.admin-back{height:46px;display:flex;align-items:center;gap:11px;margin:3px 0;padding:0 13px;border:1px solid transparent;border-radius:11px;background:transparent;color:#63788d;text-align:left;font:inherit;font-size:13px;font-weight:600;cursor:pointer}
.admin-side-link img{width:18px;height:18px;opacity:.72}
.admin-side-label{margin:17px 12px 5px;padding-top:14px;border-top:1px solid #edf1f5;color:#94a2b2;font-size:10px;font-weight:750;letter-spacing:.08em}
.admin-side-subitem{height:38px;margin:1px 0;padding-left:13px;font-size:12px}
.admin-side-link:hover,.admin-back:hover{background:#f2f7fc;color:#126cc8}
.admin-side-link.selected{border-color:#c9e2ff;background:#eaf4ff;color:#075bea}
.admin-side-link.selected img{opacity:1;filter:brightness(0) saturate(100%) invert(25%) sepia(96%) saturate(3084%) hue-rotate(210deg) brightness(97%) contrast(104%)}
.admin-sidebar-spacer{flex:1}
.admin-back{border-top:1px solid #edf1f5;border-radius:0;padding-top:10px;color:#8391a2}
.admin-content{width:100%;min-width:0;padding:28px clamp(18px,3vw,42px) 24px;overflow:hidden}
.admin-heading{max-width:none;margin:0 0 22px;align-items:flex-end}
.admin-heading h2{margin:0;color:#142a42;font-size:27px}
.admin-heading p{max-width:620px}
.admin-panel{width:100%;max-width:none;margin:0}
.admin-panel.selected{display:block}
.admin-users-card{width:100%;max-width:none;margin:0;border-color:#e3eaf2;border-radius:15px;box-shadow:0 6px 22px #23415d0a}
.admin-users-card>header{min-height:64px;padding:16px 18px}
.admin-api-table{min-width:1050px}.admin-api-table td:first-child strong{color:#29445f;font-size:11px}.admin-api-table td:nth-child(4){font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#62758b}.admin-api-untracked{color:#8794a3;font-size:10px}.admin-api-table .admin-cell-sub{font-size:9px}
.admin-api-management-card{overflow:hidden}.admin-api-note{display:grid;gap:5px;margin:14px 16px;padding:12px 14px;border:1px solid #e7edf5;border-radius:11px;background:#f7f9fc}.admin-api-note strong{color:#4a6077;font-size:11px}.admin-api-note span{color:#8593a3;font-size:10px;line-height:1.65}.admin-api-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr));gap:12px;padding:0 16px 16px}.admin-api-card{min-width:0;padding:14px;border:1px solid #e4ebf3;border-radius:12px;background:#fff}.admin-api-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.admin-api-card>header>div{display:grid;gap:4px;min-width:0}.admin-api-card>header strong{color:#203a55;font-size:13px}.admin-api-card>header small,.admin-api-usage-caption{color:#8a98a8;font-size:10px}.admin-api-status{display:inline-flex;align-items:center;gap:5px;flex:none;padding:5px 8px;border-radius:99px;font-size:9px;font-weight:700}.admin-api-status i{width:6px;height:6px;border-radius:50%;background:currentColor}.admin-api-status.configured{background:#eaf8ef;color:#148552}.admin-api-status.missing{background:#fff4e6;color:#ad7411}.admin-api-card dl{display:grid;gap:8px;margin:13px 0;padding:11px 0;border-block:1px solid #eef2f6}.admin-api-card dl>div{display:flex;justify-content:space-between;gap:12px}.admin-api-card dt{flex:none;color:#8794a3;font-size:10px}.admin-api-card dd{min-width:0;margin:0;color:#51657a;font-size:10px;text-align:right;overflow-wrap:anywhere}.admin-api-usage{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.admin-api-usage>div{display:grid;gap:5px;padding:9px;border-radius:9px;background:#f6f8fb}.admin-api-usage span{color:#8b98a7;font-size:9px}.admin-api-usage b{color:#274560;font-size:15px}.admin-api-usage-caption{display:block;margin-top:8px}.admin-api-usage-untracked{display:grid;gap:4px;padding:11px;border-radius:9px;background:#f6f8fb;color:#65788c;font-size:10px}.admin-api-usage-untracked small,.admin-api-empty{color:#909baa;font-size:9px}.admin-api-empty{grid-column:1/-1;padding:22px;text-align:center}
.admin-preview-dialog{width:min(680px,calc(100vw - 28px));max-height:min(82vh,720px)}
.admin-preview-dialog .admin-allocation-explainer{margin:0 20px 12px;padding:10px 12px;border-radius:9px;background:#f5f8fc;line-height:1.6}
.admin-preview-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;padding:0 20px 17px}
.admin-preview-option{min-height:72px;display:grid;align-content:center;gap:5px;padding:12px 14px;border:1px solid #e4ebf3;border-radius:11px;background:#fff;color:#324b64;text-align:left;cursor:pointer}
.admin-preview-option:hover,.admin-preview-option.selected{border-color:#9ccaff;background:#f2f8ff;color:#075bea}
.admin-preview-option strong{font-size:13px}.admin-preview-option small{color:#8493a4;font-size:10px;line-height:1.5}
.admin-preview-dialog footer{gap:10px}.admin-preview-dialog footer>span{flex:1}
body.admin-preview-mode .admin-mode-toggle{border-color:#f4d7a3;background:#fff8e8;color:#9a6500}
body.admin-preview-mode:not(.admin-mode) .admin-mode-toggle{display:none!important}
.admin-preview-indicator{position:fixed;z-index:80;top:72px;right:14px;display:flex;align-items:center;gap:8px;padding:6px 9px 6px 12px;border:1px solid #f0d79f;border-radius:11px;background:#fffaf0;box-shadow:0 5px 18px #563b121c;color:#805900;font-size:11px}
.admin-preview-indicator[hidden]{display:none}
.admin-preview-indicator button{padding:5px 8px;border:1px solid #f0e0bd;border-radius:7px;background:#fff;color:#805900;font:inherit;cursor:pointer}
.admin-preview-indicator button:last-child{border-color:#e7c9a0;background:#fff3df}
@media(max-width:560px){.admin-preview-options{grid-template-columns:1fr}.admin-preview-indicator{top:68px;right:7px;gap:5px;padding:5px 6px 5px 9px;font-size:10px}.admin-preview-indicator button{padding:4px 6px}}
.admin-users-actions{display:flex;align-items:center;gap:14px}
.admin-user-create{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr) auto;align-items:end;gap:12px;padding:15px 18px;border-top:1px solid #edf1f5;background:#fbfdff}
.admin-user-create[hidden]{display:none}
.admin-user-create label{display:grid;gap:6px;color:#61758a;font-size:11px;font-weight:650}
.admin-user-create input{width:100%;height:36px;padding:0 10px;border:1px solid #dfe7ef;border-radius:8px;background:#fff;color:#18324b;font:inherit;font-size:12px}
.admin-user-create-actions{display:flex;align-items:center;gap:7px;white-space:nowrap}
.admin-user-create-actions small{margin-right:6px;color:#8493a4;font-size:10px}
.admin-table-wrap{max-width:100%;overflow:auto}
.admin-users-table{min-width:1170px;white-space:normal}
.admin-users-table th,.admin-users-table td{padding:12px 11px;font-size:11px;vertical-align:middle}
.admin-users-table th{position:sticky;top:0;z-index:1;background:#f4f7fb;white-space:nowrap}
.admin-users-table td{line-height:1.45}
.admin-users-table th:first-child,.admin-users-table td:first-child{padding-left:17px}
.admin-user-id{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:#8291a3}
.admin-role-badge.disabled{background:#fff0f0;color:#ce5252}
.admin-row-actions{flex-wrap:nowrap;align-items:center;gap:5px}
.admin-row-actions button{padding:6px 8px;border-color:transparent;background:#f0f4f8;color:#63778c;font-size:10px}
.admin-row-actions button.points{background:#fff4dc;color:#dd9700}
.admin-row-actions button.agents{background:#e6f5fb;color:#168dbb}
.admin-row-actions button.features{background:#f2eafe;color:#9863cc}
.admin-row-actions button.password{background:#fff0e8;color:#db7333}
.admin-row-actions button.status{background:#e6f7ee;color:#24956c}
.admin-row-actions button.status[data-value="true"]{background:#fff0f0;color:#cf5555}
.admin-row-actions button:hover{filter:brightness(.97);border-color:currentColor}
.admin-count-link{min-width:34px;height:27px;border:0;border-radius:7px;background:#edf5ff;color:#126bd5;font:inherit;font-weight:700;cursor:pointer}
.admin-bottom-note{max-width:none;margin:14px 1px 0;line-height:1.6}
.admin-agent-form{grid-template-columns:1fr 1fr 2fr 1fr auto}
.admin-allocation-dialog{width:min(620px,calc(100vw - 28px));max-height:min(82vh,760px);padding:0;border:1px solid #e1e9f1;border-radius:18px;background:#fff;color:#18324b;box-shadow:0 20px 70px #132a4540}
.admin-allocation-dialog::backdrop{background:#0c1d33a6;backdrop-filter:blur(3px)}
.admin-allocation-header{display:flex;align-items:flex-start;justify-content:space-between;padding:20px 22px 14px;border-bottom:1px solid #edf1f5}
.admin-allocation-header h2{margin:7px 0 4px;font-size:20px}.admin-allocation-header p{margin:0;color:#8493a4;font-size:12px}
.admin-allocation-close{width:32px;height:32px;border:0;border-radius:9px;background:#f1f5f9;color:#63778c;font-size:22px;cursor:pointer}
.admin-allocation-tabs{display:flex;gap:7px;padding:13px 20px 8px}
.admin-allocation-tabs button{height:34px;padding:0 14px;border:1px solid #e5ebf2;border-radius:9px;background:#fff;color:#697d91;font:inherit;font-size:12px;font-weight:650;cursor:pointer}
.admin-allocation-tabs button.selected{border-color:#c8e1ff;background:#edf6ff;color:#075bea}
.admin-allocation-explainer{padding:0 22px 10px;color:#8292a3;font-size:12px;line-height:1.5}
.admin-allocation-list{max-height:48vh;display:grid;grid-template-columns:1fr;align-content:start;gap:10px;padding:0 20px 16px;overflow:auto}
.admin-allocation-module{min-width:0;padding:10px;border:1px solid #e7edf3;border-radius:12px;background:#fbfcfe}
.admin-allocation-module-option{border-color:#d8e5f2;background:#fff}
.admin-allocation-children{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:8px 0 0 25px}
.admin-allocation-feature-option{padding:8px 9px;background:#fff}
.admin-allocation-feature-option:has(input:disabled){opacity:.55;cursor:not-allowed}
.admin-allocation-option{min-width:0;display:flex;align-items:center;gap:10px;padding:10px 11px;border:1px solid #e7edf3;border-radius:10px;background:#fff;cursor:pointer}
.admin-allocation-option:has(input:checked){border-color:#b9d8ff;background:#f4f9ff}
.admin-allocation-option input{accent-color:#075bea}
.admin-allocation-option span{min-width:0;display:grid;gap:3px}.admin-allocation-option strong{overflow:hidden;color:#324b64;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.admin-allocation-option small{color:#8c9bab;font-size:10px}
.admin-allocation-empty{grid-column:1/-1;padding:20px;color:#8a98a7;text-align:center;font-size:13px}
.admin-allocation-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:13px 20px;border-top:1px solid #edf1f5;color:#8b98a7;font-size:11px}
.admin-feature-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.admin-feature-grid article{max-width:none}
.admin-feature-grid article[data-admin-module-card]{min-height:170px}
.feature-access-empty{max-width:760px;margin:14vh auto;padding:36px;border:1px solid #e3eaf2;border-radius:18px;background:#fff;color:#73869b;text-align:center;font-size:14px}

/* User types summarize reusable access presets; individual allocations remain editable. */
.admin-users-card:has(#adminUsersBody) .admin-users-table{min-width:1450px}
.admin-user-create{grid-template-columns:minmax(150px,1fr) minmax(180px,1fr) minmax(170px,.9fr) auto}
.admin-user-create select,.admin-user-type-control select{height:34px;min-width:0;padding:0 9px;border:1px solid #dfe7ef;border-radius:8px;background:#fff;color:#324b64;font:inherit;font-size:11px}
.admin-user-type-control{display:flex;align-items:center;gap:5px;min-width:200px}
.admin-user-type-control select{flex:1;width:100%;max-width:210px}
.admin-user-type-control button{height:31px;flex:none;padding:0 8px;border:1px solid #cfe1fa;border-radius:8px;background:#f2f7ff;color:#145fc7;font:inherit;font-size:10px;font-weight:700;cursor:pointer}
.admin-user-type-control button:disabled,.admin-user-type-control select:disabled{opacity:.55;cursor:not-allowed}
.admin-user-resource-summary{display:block;max-width:270px;margin-top:5px;color:#8190a1;font-size:9px;line-height:1.5}
@media(max-width:760px){.admin-user-create{grid-template-columns:1fr}.admin-user-create-actions{white-space:normal}.admin-user-type-control{min-width:0}}
.feature-access-empty[hidden]{display:none}
.image-tools-panel[hidden],#imageResults[hidden],.feature-guide[hidden],.image-composer-wrap[hidden]{display:none}
.video-panel[hidden],.results-area[hidden],.video-guide[hidden]{display:none}
.nav-item[hidden]{display:none}
/* Admin library and consistent, ungrouped navigation */
.admin-side-label{display:none}
.admin-side-subitem{padding-left:14px}
.admin-material-upload{display:grid;grid-template-columns:120px 130px minmax(150px,1fr) minmax(200px,1.2fr) auto;gap:10px;align-items:center;padding:16px;border:1px solid #e5ebf2;border-radius:14px;background:#f8fafc}
.admin-material-upload input,.admin-material-upload select{min-width:0;height:40px;padding:0 10px;border:1px solid #dfe7f0;border-radius:9px;background:#fff;color:#22354b}
.admin-material-upload input[type=file]{padding:7px;font-size:11px}
.admin-material-filters{display:flex;flex-wrap:wrap;gap:9px;margin-top:14px}.admin-material-filters select,.admin-material-filters input{min-width:150px;height:38px;padding:0 11px;border:1px solid #dfe7f0;border-radius:9px;background:#fff;color:#22354b}.admin-material-filters input{flex:1;min-width:200px}
.admin-material-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px;margin-top:16px}
.admin-material-item{min-width:0;overflow:hidden;border:1px solid #e3eaf2;border-radius:13px;background:#fff}
.admin-material-item>img,.admin-material-item>video,.admin-material-audio{display:block;width:100%;height:138px;object-fit:cover;background:#edf2f7}
.admin-material-audio{display:flex;align-items:center;justify-content:center;gap:10px;padding:14px}
.admin-task-trace-dialog{width:min(920px,calc(100vw - 32px));max-height:90vh}
.admin-task-trace-dialog .admin-user-detail-body{max-height:calc(90vh - 110px);overflow:auto}
.admin-trace-note{padding:12px 14px;border:1px solid #f2d899;border-radius:12px;background:#fff8e7;color:#815d13}
.admin-trace-section,.admin-provider-exchange{margin:16px 0;padding:15px;border:1px solid #e4eaf2;border-radius:14px;background:#fff}
.admin-trace-section h3{margin:0 0 12px;font-size:15px}.admin-provider-exchange header{display:flex;justify-content:space-between;gap:12px}.admin-provider-exchange header small{color:#69778a}
.admin-trace-section details,.admin-provider-exchange details{margin:10px 0}.admin-trace-section summary,.admin-provider-exchange summary{cursor:pointer;font-weight:600;color:#1d5ec9}
.admin-trace-section pre,.admin-provider-exchange pre{max-height:380px;overflow:auto;padding:12px;border-radius:10px;background:#f4f7fb;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.5}
.admin-trace-media{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;margin:12px 0}.admin-trace-media article{display:flex;flex-direction:column;gap:5px;min-width:0;padding:9px;border:1px solid #e4eaf2;border-radius:10px}.admin-trace-media img{width:100%;aspect-ratio:1;object-fit:contain;background:#f2f4f8}.admin-trace-media small{overflow-wrap:anywhere;color:#667085}
.admin-material-audio img{width:24px;height:24px}.admin-material-audio audio{width:calc(100% - 36px);max-width:220px}
.admin-material-meta{display:grid;gap:5px;padding:10px 11px 4px}.admin-material-meta strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.admin-material-meta small{color:#77879a;font-size:10px}
.admin-material-actions{display:flex;flex-wrap:wrap;gap:6px;padding:8px 11px 11px}.admin-material-actions button{height:29px;padding:0 9px;border:1px solid #dce5ef;border-radius:8px;background:#f7f9fc;color:#36516e;font-size:11px;cursor:pointer}.admin-material-actions button:hover:not(:disabled){border-color:#83b5ff;color:#075bea}.admin-material-actions button:disabled{opacity:.4;cursor:not-allowed}
.admin-material-item.is-inactive{opacity:.58}.admin-material-empty{grid-column:1/-1;padding:30px;border:1px dashed #d5dfeb;border-radius:12px;color:#7b8da2;text-align:center;font-size:12px}
@media(max-width:900px){.admin-material-upload{grid-template-columns:1fr 1fr}.admin-material-upload input[type=file]{grid-column:1/-1}.admin-material-upload button{justify-self:start}}
@media(max-width:1100px){.admin-page{grid-template-columns:185px minmax(0,1fr)}.admin-sidebar{padding-inline:10px}.admin-content{padding-inline:18px}.admin-agent-form{grid-template-columns:1fr 1fr}.admin-feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.admin-page,.admin-page.shown{display:flex;flex-direction:column}.admin-sidebar{position:relative;top:auto;width:100%;height:auto;min-height:0;flex-direction:row;align-items:center;gap:5px;padding:10px 12px;border-right:0;border-bottom:1px solid #e5ebf2;overflow:auto}.admin-sidebar h1{flex:none;margin:0 8px 0 0;padding:0;border:0;font-size:16px}.admin-side-link{flex:none;height:38px;margin:0;padding:0 9px;font-size:11px}.admin-side-label{flex:none;margin:0 2px;padding:0 7px;border:0;border-left:1px solid #edf1f5;letter-spacing:0}.admin-sidebar-spacer,.admin-back{display:none}.admin-content{padding:18px 12px 22px}.admin-heading{align-items:flex-start}.admin-heading h2{font-size:22px}.admin-heading p{font-size:11px}.admin-heading .agents-history{flex:none;padding-inline:10px}.admin-user-create{grid-template-columns:1fr}.admin-user-create-actions{flex-wrap:wrap;white-space:normal}.admin-user-create-actions small{flex:1 0 100%}.admin-allocation-list{grid-template-columns:1fr}.admin-feature-grid{grid-template-columns:1fr}}
.admin-preview-tag{margin-left:auto;padding:3px 7px;border-radius:99px;background:#fff4dc;color:#c88708;font-size:9px;font-weight:700}
.finance-preview{color:#18324b}.finance-preview-banner{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin:0 0 18px;padding:22px 24px;border:1px solid #deebf8;border-radius:17px;background:linear-gradient(115deg,#fff 0%,#f2f8ff 100%);box-shadow:0 7px 22px #23415d08}.finance-preview-banner>div>span{color:#3479c9;font-size:10px;font-weight:800;letter-spacing:.12em}.finance-preview-banner h3{margin:6px 0;font-size:25px}.finance-preview-banner p{margin:0;color:#77899c;font-size:12px}.finance-preview-banner>b{flex:none;padding:8px 11px;border:1px solid #f0dba7;border-radius:9px;background:#fff8e8;color:#a9720a;font-size:10px}.finance-tabs{display:flex;gap:5px;overflow:auto;margin-bottom:15px;padding:5px;border:1px solid #e2eaf3;border-radius:12px;background:#fff}.finance-tabs button,.finance-filter-pills button{flex:none;height:35px;padding:0 15px;border:0;border-radius:8px;background:transparent;color:#718399;font:inherit;font-size:12px;font-weight:650;cursor:pointer}.finance-tabs button.selected{background:#eaf4ff;color:#075bea}.finance-view{display:none}.finance-view.selected{display:block}.finance-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:5px 0 13px}.finance-toolbar>div:first-child{display:grid;gap:4px}.finance-toolbar>div:first-child strong{font-size:16px}.finance-toolbar small,.finance-card header small{color:#8292a3;font-size:10px}.finance-toolbar select{height:35px;padding:0 11px;border:1px solid #e0e8f0;border-radius:9px;background:#fff;color:#52677d;font:inherit;font-size:11px}.finance-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;margin-bottom:13px}.finance-kpis article,.finance-rule-grid article{display:grid;gap:8px;min-width:0;padding:15px 16px;border:1px solid #e2eaf3;border-radius:13px;background:#fff;box-shadow:0 5px 17px #23415d06}.finance-kpis article>span,.finance-rule-grid article>span,.finance-source-grid article>span{color:#75879a;font-size:10px;font-weight:650}.finance-kpis article>strong{color:#203c58;font-size:22px;letter-spacing:-.03em}.finance-kpis article>small,.finance-rule-grid article>small,.finance-source-grid article>small{color:#93a0af;font-size:9px;line-height:1.4}.finance-kpis article.profit{border-color:#caead9;background:#f5fcf8}.finance-kpis article.profit>strong{color:#148455}.finance-card{margin:12px 0;overflow:hidden;border:1px solid #e2eaf3;border-radius:14px;background:#fff;box-shadow:0 5px 18px #23415d06}.finance-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:59px;padding:12px 16px;border-bottom:1px solid #edf1f5}.finance-card>header>div:first-child{display:grid;gap:4px}.finance-card>header strong{font-size:12px}.finance-text-action{flex:none;border:0;background:transparent;color:#1269d7;font:inherit;font-size:10px;font-weight:700;cursor:pointer}.finance-source-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;padding:13px}.finance-source-grid article{display:grid;gap:7px;padding:11px;border-radius:10px;background:#f7f9fc}.finance-source-grid article>b{font-size:16px}.finance-table-wrap{max-width:100%;overflow:auto}.finance-table-wrap table{width:100%;border-collapse:collapse;white-space:nowrap}.finance-table-wrap th,.finance-table-wrap td{padding:11px 13px;border-bottom:1px solid #edf1f5;text-align:left;font-size:10px}.finance-table-wrap th{background:#f8fafc;color:#8594a4;font-weight:650}.finance-table-wrap td{color:#52677d}.finance-table-wrap tr:last-child td{border-bottom:0}.finance-status{display:inline-flex;align-items:center;padding:4px 7px;border-radius:99px;background:#edf3fa;color:#6c8197;font-size:9px;font-style:normal;font-weight:700}.finance-status.actual{background:#e8f8ef;color:#178552}.finance-status.pending{background:#fff5dd;color:#aa790b}.finance-status.gift{background:#f1eaff;color:#8051b7}.finance-action-row{display:flex;gap:8px}.finance-button{min-height:35px;padding:0 13px;border:1px solid #dfe7f0;border-radius:9px;background:#fff;color:#526a82;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.finance-button.primary{border-color:#0962ed;background:#0962ed;color:#fff;box-shadow:0 5px 11px #0d65df20}.finance-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:16px}.finance-form-grid label,.finance-dialog label,.finance-calculator>label{display:grid;gap:6px;color:#75879a;font-size:10px;font-weight:650}.finance-form-grid input,.finance-dialog input,.finance-calculator input{width:100%;height:37px;padding:0 10px;border:1px solid #e0e8f0;border-radius:8px;background:#fff;color:#334d66;font:inherit;font-size:11px}.finance-form-grid input[readonly]{background:#f5f8fb;color:#4d7199}.finance-form-grid .finance-wide{grid-column:span 2}.finance-form-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-top:1px solid #edf1f5;background:#fbfcfe}.finance-form-footer small{color:#8998a8;font-size:9px}.finance-filter-pills{display:flex;gap:3px}.finance-filter-pills button{height:28px;padding:0 9px;font-size:9px}.finance-filter-pills button.active{background:#edf5ff;color:#075bea}.finance-dialog{width:min(420px,calc(100vw - 24px));padding:22px;border:1px solid #dfe8f1;border-radius:16px;background:#fff;color:#213c56;box-shadow:0 22px 70px #18324b30}.finance-dialog::backdrop{background:#142b4466;backdrop-filter:blur(2px)}.finance-dialog form{display:grid;gap:12px}.finance-dialog-close{justify-self:end;width:28px;height:28px;border:0;border-radius:8px;background:#f1f5f9;color:#74869a;font-size:20px;cursor:pointer}.finance-dialog-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#eaf4ff;color:#1269d7}.finance-dialog h3{margin:0;font-size:18px}.finance-dialog p{margin:-7px 0 2px;color:#8797a7;font-size:10px}.finance-dialog footer{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}.finance-kpis.compact{grid-template-columns:repeat(4,minmax(0,1fr))}.finance-kpis.compact article>strong{font-size:19px}.finance-rule-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:13px}.finance-rule-grid article>strong{font-size:16px}.finance-rule-grid .rule-warning{border-color:#f0dba7;background:#fffbf1}.finance-rule-grid .rule-warning>strong{color:#a9720a}.finance-calculator{display:grid;grid-template-columns:1.2fr 1fr 1fr;align-items:end;gap:12px;padding:15px}.finance-calculator>small{grid-column:1/-1;color:#8998a8;font-size:9px}.finance-calc-result{display:grid;gap:5px;padding:10px 12px;border-radius:9px;background:#f4f7fa}.finance-calc-result span{color:#8393a3;font-size:9px}.finance-calc-result b{font-size:17px}.finance-calc-result.target{background:#edf8f2}.finance-calc-result.target b{color:#148455}
@media(max-width:1000px){.finance-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-kpis.compact,.finance-rule-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.finance-source-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.finance-preview-banner{align-items:flex-start;flex-direction:column;padding:17px}.finance-preview-banner h3{font-size:21px}.finance-toolbar{align-items:flex-start;flex-direction:column}.finance-toolbar select{align-self:flex-end}.finance-kpis,.finance-kpis.compact,.finance-rule-grid{grid-template-columns:1fr 1fr}.finance-kpis article{padding:12px}.finance-kpis article>strong{font-size:18px}.finance-tabs button{padding-inline:10px;font-size:10px}.finance-form-grid{grid-template-columns:1fr 1fr;padding:12px}.finance-form-grid .finance-wide{grid-column:1/-1}.finance-form-footer{align-items:flex-start;flex-direction:column}.finance-calculator{grid-template-columns:1fr}.finance-calculator>small{grid-column:auto}.finance-card>header{align-items:flex-start}.finance-filter-pills{flex-wrap:wrap;justify-content:flex-end}}
.admin-points-dialog,.admin-password-dialog{width:min(440px,calc(100vw - 28px));padding:0;border:1px solid #e1e9f1;border-radius:18px;background:#fff;color:#18324b;box-shadow:0 20px 70px #132a4540}.admin-points-dialog::backdrop,.admin-password-dialog::backdrop{background:#0c1d33a6;backdrop-filter:blur(3px)}.admin-points-dialog form{display:grid;gap:14px;padding:20px}.admin-points-dialog header,.admin-password-dialog header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.admin-points-dialog h2,.admin-password-dialog h2{margin:5px 0;font-size:19px}.admin-points-dialog header p,.admin-password-dialog header p{margin:0;color:#7e8da1;font-size:12px}.admin-points-dialog header>button,.admin-password-dialog header>button{width:30px;height:30px;border:0;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:20px}.admin-points-dialog label{display:grid;gap:6px;font-size:12px;font-weight:650}.admin-points-dialog label input{height:42px;padding:0 11px;border:1px solid #dce5ef;border-radius:10px}.admin-points-dialog label small{font-size:10px;color:#8694a7;font-weight:400}.admin-points-dialog [role=alert]{min-height:16px;margin:0;color:#c2413b;font-size:11px}.admin-points-dialog footer,.admin-password-dialog footer{display:flex;justify-content:flex-end;gap:8px;padding-top:12px;border-top:1px solid #edf1f5}.admin-points-dialog footer button,.admin-password-dialog footer button{height:36px;padding:0 14px;border:1px solid #dce5ef;border-radius:9px;background:#fff;color:#45566d;font-weight:650}.admin-points-dialog footer button.primary,.admin-password-dialog footer button.primary{border-color:#1763e9;background:#1763e9;color:#fff}.admin-points-dialog footer button:disabled{opacity:.6;cursor:wait}.admin-password-dialog{padding:20px}.admin-password-dialog code{display:block;margin:18px 0;padding:13px;border:1px solid #dce5ef;border-radius:10px;background:#f6f9fc;color:#1d3554;font-size:15px;overflow-wrap:anywhere;user-select:all}

.admin-api-diagnostics-card{margin-top:14px;overflow:hidden}.admin-api-diagnostics-table{min-width:1050px}.admin-api-diagnostics-table td{vertical-align:top}.admin-api-diagnostics-table td:nth-child(2),.admin-api-diagnostics-table td:nth-child(5){font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.admin-api-diagnostics-table td:nth-child(6){min-width:280px;max-width:520px;white-space:normal;overflow-wrap:anywhere}.admin-api-diagnostics-table td:nth-child(7) code{font-size:9px;color:#73849a}.admin-api-diagnostics-table .admin-cell-sub{display:block;margin-top:4px;white-space:normal}

.admin-template-priority{margin:16px 0 4px;border:1px solid #dfe8f4;border-radius:14px;background:#f8fafc}.admin-template-priority>summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 17px;cursor:pointer;list-style:none}.admin-template-priority>summary::-webkit-details-marker{display:none}.admin-template-priority>summary:after{content:'⌄';color:#5d6f85}.admin-template-priority[open]>summary:after{content:'⌃'}.admin-template-priority>summary span{display:grid;gap:4px}.admin-template-priority>summary strong{font-size:13px;color:#20344d}.admin-template-priority>summary small{font-size:11px;color:#7b8ba0}.admin-template-priority-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:0 15px 15px}.admin-template-priority-body>section{min-width:0;padding:12px;border:1px solid #e4ebf4;border-radius:11px;background:#fff}.admin-template-priority-body>section:last-of-type{grid-column:1/-1}.admin-template-priority-body h3{margin:0 0 9px;font-size:12px;color:#344b66}.admin-template-priority-body select{width:100%;height:34px;padding:0 9px;border:1px solid #dbe4ef;border-radius:8px;background:#fff;color:#344b66}.admin-template-priority-options{display:flex;flex-wrap:wrap;gap:7px;max-height:142px;overflow:auto}.admin-template-priority-options label{display:flex;align-items:center;gap:6px;padding:6px 9px;border:1px solid #e1e8f1;border-radius:8px;background:#fff;color:#53677f;font-size:11px;cursor:pointer}.admin-template-priority-options label:has(input:checked){border-color:#98baff;background:#eff6ff;color:#075bea}.admin-template-priority-options input{accent-color:#075bea}.admin-template-priority-selects{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}.admin-template-priority-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px;max-height:360px;overflow:auto}.admin-template-priority-cards label{display:grid;grid-template-columns:16px 1fr;align-items:start;gap:7px;min-width:0;padding:7px;border:1px solid #e3eaf2;border-radius:9px;background:#fff;cursor:pointer}.admin-template-priority-cards label:has(input:checked){border-color:#98baff;background:#f1f6ff}.admin-template-priority-cards img{grid-column:1/-1;width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;background:#f2f4f7}.admin-template-priority-cards span{overflow:hidden;color:#53677f;font-size:10px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.admin-template-priority-cards input{accent-color:#075bea}.admin-template-priority-body footer{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:8px}.admin-template-priority-body footer span{margin-right:auto;color:#20824a;font-size:11px}.admin-template-priority-body footer span.error{color:#c2413b}
@media(max-width:700px){.admin-template-priority-body{grid-template-columns:1fr}.admin-template-priority-body>section:last-of-type{grid-column:auto}.admin-template-priority-selects{grid-template-columns:1fr}}

/* Keep the administrator preview switcher inside the top navigation. */
.admin-preview-indicator{position:static;z-index:auto;flex:0 0 auto;gap:6px;margin-left:4px;padding:4px 6px 4px 8px;border-radius:10px;box-shadow:none;white-space:nowrap}
.admin-preview-indicator[hidden]{display:none}
.admin-preview-indicator button{padding:4px 7px}
@media(max-width:1200px){.admin-preview-indicator{gap:4px;margin-left:0;padding:3px 4px 3px 6px}.admin-preview-indicator #adminPreviewLabel{max-width:110px;overflow:hidden;text-overflow:ellipsis}.admin-preview-indicator button{padding:4px 5px}}
.admin-service-error-search{display:flex;align-items:center;gap:10px;padding:0 18px 14px;flex-wrap:wrap}.admin-service-error-search label{font-size:12px;font-weight:650;color:#41516a}.admin-service-error-search input{width:min(560px,100%);min-width:220px;height:38px;padding:0 11px;border:1px solid #dce3ec;border-radius:9px;background:#fff;color:#17243a;font:inherit;font-size:12px}.admin-service-error-search input:focus{outline:2px solid #b9d0ff;border-color:#5c8eff}.admin-service-error-search span{font-size:11px;color:#78879b}.admin-service-error-search button:disabled{opacity:.6;cursor:wait}
.admin-development-plans-card>header{display:flex;align-items:center;justify-content:space-between;gap:16px}.admin-development-plan-form{display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,1.5fr) auto;align-items:end;gap:12px;padding:15px 18px;border-top:1px solid #edf1f5;background:#fbfdff}.admin-development-plan-form[hidden]{display:none}.admin-development-plan-form label{display:grid;gap:6px;color:#61758a;font-size:11px;font-weight:650}.admin-development-plan-form input,.admin-development-plan-form textarea{width:100%;min-height:36px;padding:8px 10px;border:1px solid #dfe7ef;border-radius:8px;background:#fff;color:#18324b;font:inherit;font-size:12px;resize:vertical}.admin-development-plan-form-actions{display:flex;gap:7px;white-space:nowrap}.admin-development-plans-table{min-width:680px}.admin-development-plans-table th:first-child,.admin-development-plans-table td:first-child{width:68px;text-align:center}.admin-development-plans-table th:nth-child(3),.admin-development-plans-table td:nth-child(3){width:190px;white-space:nowrap}.admin-development-plans-table th:last-child,.admin-development-plans-table td:last-child{width:100px}.admin-development-plans-table tr.is-completed td{background:#e9f8ed;color:#286b40}.admin-development-plans-table tr.is-completed td:first-child{border-left:3px solid #49ad67}.admin-development-plan-check{width:26px;height:26px;display:inline-grid;place-items:center;border:1px solid #cbd7e4;border-radius:6px;background:#fff;color:#fff;font-size:16px;font-weight:800;cursor:pointer}.admin-development-plan-check[aria-pressed="true"]{border-color:#2fa65a;background:#32a95c}.admin-development-plan-delete{color:#b94747}.admin-development-plans-table .admin-cell-sub{display:block;max-width:760px;white-space:pre-wrap}@media(max-width:820px){.admin-development-plan-form{grid-template-columns:1fr}.admin-development-plan-form-actions{justify-content:flex-end}}

.admin-user-detail-dialog{width:min(980px,calc(100vw - 28px));max-height:min(88vh,900px);padding:0;overflow:hidden;border:1px solid #e1e9f1;border-radius:18px;background:#f7f9fc;color:#18324b;box-shadow:0 20px 70px #132a4540}
.admin-user-detail-dialog::backdrop{background:#0c1d33a6;backdrop-filter:blur(3px)}
.admin-user-detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 23px 15px;border-bottom:1px solid #edf1f5;background:#fff}
.admin-user-detail-header h2{margin:7px 0 4px;color:#203b57;font-size:20px}
.admin-user-detail-header p{margin:0;color:#8493a4;font-size:11px}
.admin-user-detail-tabs{display:flex;gap:6px;padding:12px 20px 0;background:#fff}
.admin-user-detail-tabs button{height:34px;padding:0 14px;border:0;border-radius:9px;background:transparent;color:#75879a;font:inherit;font-size:12px;font-weight:700;cursor:pointer}
.admin-user-detail-tabs button.selected{background:#eaf4ff;color:#075bea}
.admin-user-detail-limit{margin:0;padding:7px 22px 0;background:#fff;color:#93a0ad;font-size:9px}
.admin-user-detail-body{max-height:calc(88vh - 128px);min-height:220px;padding:18px 20px 22px;overflow:auto}
.admin-user-detail-loading,.admin-user-detail-empty{padding:36px 15px;color:#8392a3;text-align:center;font-size:12px}
.admin-user-detail-profile{display:grid;gap:6px;padding:15px 17px;border:1px solid #e4ebf3;border-radius:13px;background:#fff}
.admin-user-detail-profile strong{color:#263f59;font-size:15px}
.admin-user-detail-profile span,.admin-user-detail-profile small{color:#8291a2;font-size:11px}
.admin-user-detail-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:12px}
.admin-user-detail-kpis article{display:grid;gap:7px;min-width:0;padding:14px;border:1px solid #e4ebf3;border-radius:12px;background:#fff}
.admin-user-detail-kpis article small,.admin-user-detail-kpis article span{color:#8190a1;font-size:10px}
.admin-user-detail-kpis article strong{overflow:hidden;color:#223e5b;font-size:20px;text-overflow:ellipsis;white-space:nowrap}
.admin-user-detail-status{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.admin-user-detail-status span{padding:8px 10px;border:1px solid #e5ebf1;border-radius:9px;background:#fff;color:#728398;font-size:10px}
.admin-user-detail-status b{margin-left:4px;color:#2d4966}
.admin-user-detail-list{display:grid;gap:9px}
.admin-user-task{padding:13px 14px;border:1px solid #e4ebf3;border-radius:12px;background:#fff}
.admin-user-task header{display:flex;justify-content:space-between;gap:12px}
.admin-user-task header>div{display:grid;gap:5px;min-width:0}
.admin-user-task header strong{color:#2a435e;font-size:11px}
.admin-user-task header small,.admin-user-task header>b{color:#8392a2;font-size:10px}
.admin-user-task header>b{flex:none;color:#38618a;font-variant-numeric:tabular-nums}
.admin-user-task>p{display:-webkit-box;overflow:hidden;margin:10px 0 0;color:#50677e;font-size:11px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere;-webkit-box-orient:vertical;-webkit-line-clamp:3}
.admin-user-task-error{margin-top:9px;padding:8px 10px;border-radius:8px;background:#fff4f2;color:#b33b31;font-size:10px;line-height:1.5;overflow-wrap:anywhere}
.admin-user-works-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.admin-user-work-card{overflow:hidden;border:1px solid #e3eaf2;border-radius:12px;background:#fff}
.admin-user-work-card>a{display:grid;place-items:center;height:180px;overflow:hidden;background:#eaf0f7;color:#71859b;text-decoration:none}
.admin-user-work-card>a img,.admin-user-work-card>a video{display:block;width:100%;height:100%;object-fit:cover}
.admin-user-work-file{font-size:11px}
.admin-user-work-card>div{display:grid;gap:5px;padding:10px}
.admin-user-work-card strong{color:#304963;font-size:11px}
.admin-user-work-card small{color:#8795a5;font-size:9px}
.admin-user-work-card p{display:-webkit-box;overflow:hidden;margin:0;color:#6f8092;font-size:10px;line-height:1.5;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.admin-user-usage-breakdown{margin-top:14px;padding:15px 17px;border:1px solid #e4ebf3;border-radius:12px;background:#fff}
.admin-user-usage-breakdown h3{margin:0 0 12px;color:#304963;font-size:12px}
.admin-user-usage-breakdown>div{display:grid;grid-template-columns:100px 70px minmax(80px,1fr);align-items:center;gap:12px;margin:10px 0;color:#74869a;font-size:10px}
.admin-user-usage-breakdown>div b{color:#314e6b}
.admin-user-usage-breakdown>div i{height:7px;overflow:hidden;border-radius:99px;background:#edf2f7}
.admin-user-usage-breakdown>div em{display:block;height:100%;border-radius:inherit;background:#2781f2}
.admin-user-usage-breakdown>p{margin:15px 0 0;color:#95a1af;font-size:9px;line-height:1.5}
.admin-row-actions button.user-detail{border-color:#cfe1fa;background:#f2f7ff;color:#145fc7;font-weight:700}
@media(max-width:650px){.admin-user-detail-dialog{width:100vw;max-width:none;max-height:92dvh;border-radius:16px 16px 0 0}.admin-user-detail-dialog[open]{align-self:end}.admin-user-detail-body{max-height:calc(92dvh - 128px);padding:13px}.admin-user-detail-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-user-works-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.admin-user-work-card>a{height:145px}.admin-user-detail-status{gap:5px}.admin-user-detail-status span{padding:7px}.admin-user-detail-header{padding:16px}.admin-user-detail-tabs{padding-inline:10px}}

.style-guide-panel{color:#202630}.style-guide-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:2px 0 17px;padding:21px 23px;border:1px solid #e8edf4;border-radius:18px;background:linear-gradient(120deg,#f6f9ff,#fff 65%)}.style-guide-intro>div>span{font-size:10px;font-weight:800;letter-spacing:.12em;color:#0059ff}.style-guide-intro h3{margin:7px 0 5px;font-size:23px;color:#202630}.style-guide-intro p{margin:0;color:#788598;font-size:12px}.style-guide-intro>small{padding:6px 10px;border-radius:16px;background:#eaf2ff;color:#4776bf;font-size:10px;white-space:nowrap}.style-guide-section{min-width:0;padding:17px 18px;border:1px solid #e9edf2;border-radius:16px;background:#fff;box-shadow:0 5px 18px #1e355008}.style-guide-section>header{margin-bottom:14px}.style-guide-section>header h4{margin:0 0 4px;font-size:14px;color:#253449}.style-guide-section>header p{margin:0;color:#8792a1;font-size:11px;line-height:1.5}.style-guide-colors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.style-guide-colors article{min-width:0;display:grid;gap:5px;padding:8px;border:1px solid #eef0f3;border-radius:11px}.style-guide-colors i{height:36px;border-radius:7px;background:var(--swatch);border:1px solid #0000000b}.style-guide-colors b{font-size:10px}.style-guide-colors code{font:9px ui-monospace,monospace;color:#8994a2}.style-guide-type{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap;margin-top:15px;padding:13px 14px;border-radius:11px;background:#f8f9fb}.style-guide-type>*{margin:0}.style-guide-type strong{font-size:18px}.style-guide-type span{font-size:14px;font-weight:650}.style-guide-type p{font-size:12px;color:#596779}.style-guide-type small{font-size:10px;color:#87909c}.style-guide-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;margin-top:13px}.style-guide-wide{grid-column:1/-1}.style-guide-demo-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px}.style-btn{min-height:35px;padding:0 13px;border:1px solid transparent;border-radius:10px;font-size:11px;font-weight:700;cursor:pointer}.style-btn.primary{background:#0059ff;color:#fff}.style-btn.secondary{border-color:#e2e7ee;background:#fff;color:#354458}.style-btn.quiet{background:transparent;color:#0059ff}.style-btn.danger{background:#fff1f0;color:#d84b44;border-color:#f6d2ce}.style-btn:disabled{background:#e5e9ef;color:#a1a9b5;cursor:not-allowed}.style-guide-fields{display:grid;grid-template-columns:1fr 1fr;gap:11px}.style-guide-fields label{display:grid;gap:6px;color:#647286;font-size:10px;font-weight:700}.style-guide-fields .wide{grid-column:1/-1}.style-guide-fields input,.style-guide-fields select,.style-guide-fields textarea,.style-guide-toolbar input{width:100%;min-width:0;height:37px;padding:0 10px;border:1px solid #e2e7ed;border-radius:9px;background:#fff;color:#344054;font:11px inherit;outline:none}.style-guide-fields input:focus,.style-guide-fields select:focus,.style-guide-fields textarea:focus,.style-guide-toolbar input:focus{border-color:#75a8ff;box-shadow:0 0 0 3px #0059ff14}.style-guide-fields textarea{height:58px;padding:9px;resize:vertical}.style-guide-counter{grid-column:1/-1;display:flex;align-items:center;gap:9px;color:#657286;font-size:11px}.style-guide-counter span{margin-right:auto}.style-guide-counter button{width:30px;height:28px;border:1px solid #e2e7ed;border-radius:8px;background:#fff;color:#425066}.style-guide-counter b{min-width:16px;text-align:center}.style-chip{padding:7px 11px;border:1px solid #e7eaf0;border-radius:17px;background:#fff;color:#667489;font-size:10px}.style-chip.active{border-color:#d7e9c8;background:#e6f3d6;color:#0059ff}.style-badge{display:inline-flex;align-items:center;padding:5px 9px;border-radius:13px;font-size:10px;font-weight:700;white-space:nowrap}.style-badge.success{background:#e6f3d6;color:#15803d}.style-badge.pending{background:#fff5dc;color:#a86d00}.style-badge.muted{background:#f0f2f5;color:#8a94a3}.style-check,.style-switch{display:inline-flex;align-items:center;gap:6px;color:#657286;font-size:10px}.style-check input{accent-color:#0059ff}.style-switch input{position:absolute;opacity:0}.style-switch i{width:32px;height:18px;position:relative;border-radius:12px;background:#d8dde5}.style-switch i:after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0002;transition:transform .16s}.style-switch input:checked+i{background:#0059ff}.style-switch input:checked+i:after{transform:translateX(14px)}.style-guide-upload{position:relative;width:92px;height:108px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border-radius:17px;background:#f3f5f7;color:#8090a4}.style-guide-upload span{position:absolute;left:8px;top:8px;padding:3px 7px;border-radius:10px;background:#fff;font-size:9px;color:#718096}.style-guide-upload b{font-size:28px;font-weight:300;line-height:1}.style-guide-upload small{font-size:10px}.style-guide-upload-note{display:inline-block;margin:11px 0 0 10px;vertical-align:top;color:#8792a1;font-size:10px}.style-guide-result{display:flex;align-items:center;gap:11px;padding:10px;border:1px solid #e9edf2;border-radius:12px}.style-guide-image{width:69px;height:69px;display:grid;place-items:center;flex:none;border-radius:9px;background:linear-gradient(140deg,#dbe9f7,#f4e6cf);color:#68778a;font-size:9px}.style-guide-result>div:nth-child(2){min-width:0;flex:1}.style-guide-result>div:nth-child(2)>b{font-size:11px}.style-guide-result p{margin:5px 0 7px;color:#8a95a4;font-size:9px}.style-icon-btn{width:29px;height:29px;border:1px solid #e8ebef;border-radius:9px;background:#fff;color:#738094}.style-guide-tabs{display:flex;gap:5px;padding:4px;border-radius:12px;background:#f5f7fa}.style-guide-tabs button,.style-guide-segment button{border:0;border-radius:9px;background:transparent;color:#7c8797;padding:8px 11px;font-size:10px}.style-guide-tabs button.active{background:#eaf2ff;color:#0059ff;font-weight:700}.style-guide-segment{display:flex;gap:5px;margin-top:11px;padding:4px;border:1px solid #e8ebef;border-radius:11px}.style-guide-segment button{flex:1}.style-guide-segment button.active{background:#e6f3d6;color:#0059ff;font-weight:700}.style-message{display:flex;gap:9px;margin:7px 0;padding:9px 10px;border:1px solid;border-radius:9px;font-size:10px;line-height:1.5}.style-message b{white-space:nowrap}.style-message.info{border-color:#d8e7ff;background:#f4f8ff;color:#3f69a5}.style-message.warning{border-color:#f4e3b7;background:#fffaf0;color:#9a6b17}.style-message.error{border-color:#f2d7d5;background:#fff7f6;color:#b64a44}.style-guide-empty{display:flex;flex-direction:column;align-items:center;padding:12px;border:1px dashed #e5e9ef;border-radius:12px;text-align:center}.style-guide-empty>span{font-size:23px;color:#8fb1e8}.style-guide-empty b{margin-top:3px;font-size:11px}.style-guide-empty small{margin:4px 0 9px;color:#8792a1;font-size:9px}.style-guide-empty .style-btn{min-height:29px}.style-guide-progress{display:flex;align-items:center;gap:9px;margin-top:12px}.style-guide-progress>span{height:6px;flex:1;overflow:hidden;border-radius:6px;background:#edf0f4}.style-guide-progress i{display:block;width:62%;height:100%;border-radius:6px;background:#0059ff}.style-guide-progress small{color:#8792a1;font-size:9px}.style-chat{display:grid;gap:7px}.style-chat p{justify-self:start;max-width:85%;margin:0;padding:8px 10px;border-radius:12px 12px 12px 3px;background:#f2f4f7;color:#536174;font-size:10px;line-height:1.5}.style-chat p.reply{justify-self:end;border-radius:12px 12px 3px 12px;background:#eaf2ff;color:#315b99}.style-guide-modal{margin-top:12px;padding:11px;border:1px solid #e8ebef;border-radius:11px;background:#fff;box-shadow:0 6px 20px #20263012}.style-guide-modal>div{display:flex;justify-content:space-between;align-items:center;font-size:11px}.style-guide-modal>div button{border:0;background:transparent;color:#8b96a5;font-size:19px}.style-guide-modal>p{margin:8px 0 11px;color:#788598;font-size:10px;line-height:1.5}.style-guide-modal footer{display:flex;justify-content:flex-end;gap:7px}.style-guide-modal .style-btn{min-height:29px}.style-guide-toolbar{display:flex;gap:8px;margin-bottom:10px}.style-guide-toolbar input{max-width:260px}.style-guide-table-wrap{overflow:auto;border:1px solid #eaedf1;border-radius:10px}.style-guide-table{width:100%;border-collapse:collapse;white-space:nowrap;text-align:left}.style-guide-table th,.style-guide-table td{padding:9px 11px;border-bottom:1px solid #edf0f3;font-size:10px}.style-guide-table th{background:#f8f9fb;color:#7c8797;font-weight:700}.style-guide-table td{color:#4b586b}.style-guide-table td button{margin-right:7px;border:0;background:transparent;color:#0059ff;font-size:10px}.style-guide-table tr:last-child td{border-bottom:0}@media(max-width:1100px){.style-guide-colors{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:760px){.style-guide-intro{align-items:flex-start;flex-direction:column;padding:17px}.style-guide-grid{grid-template-columns:1fr}.style-guide-wide{grid-column:auto}.style-guide-colors{grid-template-columns:repeat(2,minmax(0,1fr))}.style-guide-type{gap:10px 16px}.style-guide-fields{grid-template-columns:1fr}.style-guide-fields .wide,.style-guide-counter{grid-column:auto}.style-guide-toolbar{flex-wrap:wrap}.style-guide-toolbar input{max-width:none;flex-basis:100%}}

.top-pill.skills-download{border-color:#d6e6ff;color:#135cce;background:#f5f9ff}.top-pill.skills-download img{width:16px;height:16px}
.skills-page{min-height:calc(100vh - 70px);padding:34px clamp(24px,5vw,82px) 72px;background:linear-gradient(180deg,#f8fbff 0,#f5f7fb 420px,#f8fafc 100%);color:#172033}
.skills-hero{max-width:1320px;margin:0 auto 25px;display:flex;align-items:center;justify-content:space-between;gap:24px}.skills-kicker{display:inline-flex;align-items:center;gap:8px;color:#3972c5;font-size:11px;letter-spacing:.16em;font-weight:800}.skills-kicker:before{content:"";width:7px;height:7px;border-radius:50%;background:#3478e5;box-shadow:0 0 0 5px #e5efff}.skills-hero h1{margin:10px 0 7px;font-size:30px;letter-spacing:-.03em}.skills-hero p{max-width:720px;margin:0;color:#66758b;font-size:14px;line-height:1.75}.skills-hero-mark{width:70px;height:70px;flex:none;padding:10px;border:1px solid #e5ebf4;border-radius:22px;background:#fff;box-shadow:0 12px 30px #24436d12}.skills-hero-mark img{width:100%;height:100%;object-fit:contain}
.skills-connect-card{max-width:1320px;margin:0 auto 35px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.8fr);gap:30px;padding:25px 28px;border:1px solid #dfe8f5;border-radius:22px;background:linear-gradient(125deg,#fff,#f7faff);box-shadow:0 14px 40px #36527b0b}.skills-connect-copy h2{margin:10px 0 6px;font-size:20px}.skills-connect-copy>p{max-width:680px;margin:0;color:#66758b;line-height:1.7}.skills-status{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}.skills-status.available{background:#e7f7ef;color:#158452}.skills-status.available:before{content:"";width:6px;height:6px;border-radius:50%;background:#19a76b}.skills-status.planned{background:#f0f2f5;color:#788496}.skills-connect-actions{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin-top:17px}.skills-connect-actions button,.skill-card>button{height:39px;padding:0 15px;border:1px solid #e0e7f1;border-radius:11px;background:white;color:#42536c;font-weight:700}.skills-connect-actions .skills-primary{display:flex;align-items:center;gap:8px;border-color:#1769dc;background:#1769dc;color:white;box-shadow:0 6px 16px #1769dc2d}.skills-primary img{width:16px;height:16px;filter:brightness(0) invert(1)}.skills-connect-actions .skills-secondary{color:#1769dc;background:#f4f8ff;border-color:#d8e6fb}.skills-connect-actions .skills-danger{color:#bc4250;background:#fff8f8;border-color:#f2d9dc}.skills-connect-actions button:disabled{opacity:.5;cursor:not-allowed}.skills-key-meta{margin-top:13px;color:#8290a4;font-size:12px;line-height:1.6}.skills-feedback{min-height:17px;margin:7px 0 0;color:#2766b6;font-size:12px}.skills-install{align-self:stretch;padding:18px 20px;border:1px solid #e7edf6;border-radius:16px;background:#fff}.skills-install>strong{font-size:14px}.skills-install ol{margin:12px 0 11px;padding-left:20px;color:#52627a;font-size:12px;line-height:1.9}.skills-install li{padding-left:3px}.skills-install small{display:block;padding-top:9px;border-top:1px solid #edf0f5;color:#8692a4;font-size:11px;line-height:1.65}.skills-key-panel{display:flex;align-items:center;gap:10px;margin-top:15px;padding:13px;border:1px solid #b8d2ff;border-radius:13px;background:#eff6ff}.skills-key-panel>div{flex:1;min-width:0}.skills-key-panel strong{font-size:12px}.skills-key-panel p{margin:3px 0 7px;color:#61718a;font-size:11px}.skills-key-panel code{display:block;overflow-wrap:anywhere;color:#173f7d;font-size:12px}.skills-key-panel button{flex:none;height:31px;padding:0 10px;border:1px solid #d8e5f8;border-radius:8px;background:#fff;color:#285a9d;font-weight:600}.skills-key-panel #skillsDismissKey{width:30px;padding:0;font-size:18px}
.skills-section-heading{max-width:1320px;margin:0 auto 15px;display:flex;align-items:flex-end;justify-content:space-between;gap:14px}.skills-section-heading>div>span{color:#4c80c6;font-size:11px;font-weight:800;letter-spacing:.08em}.skills-section-heading h2{margin:4px 0 0;font-size:20px}.skills-section-heading>small{color:#8894a5;font-size:12px}.skills-card-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}.skill-card{position:relative;display:flex;min-height:330px;flex-direction:column;padding:21px 22px;border:1px solid #e5eaf1;border-radius:19px;background:#fff;box-shadow:0 8px 25px #1d365308}.skill-card:hover{border-color:#c6d9f5;box-shadow:0 13px 32px #1d36530e}.skill-card-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:13px}.skill-card-icon img{width:21px;height:21px}.skill-card-icon.image{background:#eef5ff}.skill-card-icon.video{background:#edf8f5}.skill-card-head{position:absolute;top:24px;right:21px;display:flex;align-items:center;gap:9px}.skill-version{color:#92a0b1;font-size:11px}.skill-card h3{margin:15px 0 7px;font-size:18px}.skill-card>p{min-height:44px;margin:0;color:#68778d;font-size:13px;line-height:1.7}.skill-capabilities{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}.skill-capabilities span{padding:5px 9px;border:1px solid #eaf0f7;border-radius:18px;background:#f8fafc;color:#62738b;font-size:11px}.skill-example{display:flex;flex-direction:column;gap:5px;margin-top:16px;padding:11px 12px;border-radius:11px;background:#f6f8fb}.skill-example small{color:#8793a4;font-size:10px}.skill-example span{color:#43526a;font-size:12px;line-height:1.6}.skill-card>button{align-self:flex-start;margin-top:15px;height:34px;padding:0 13px;color:#1769dc;background:#f7faff;border-color:#d8e6fb}.roadmap-heading{margin-top:35px}.skills-roadmap-grid{max-width:1320px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.skill-roadmap-card{display:flex;align-items:center;gap:13px;min-height:84px;padding:14px 16px;border:1px solid #e8edf3;border-radius:15px;background:#fff}.roadmap-icon{display:grid;width:39px;height:39px;flex:none;place-items:center;border-radius:12px;background:#f2f4f7;color:#8793a3;font-size:20px}.skill-roadmap-card>div{flex:1;min-width:0}.skill-roadmap-card h3{margin:0 0 4px;font-size:13px}.skill-roadmap-card p{margin:0;color:#8994a4;font-size:11px;line-height:1.5}.skills-update-note{max-width:1320px;margin:24px auto 0;padding:15px 17px;border:1px solid #e4ebf4;border-radius:13px;background:#f6f9fd}.skills-update-note span{font-size:12px;font-weight:750;color:#51627a}.skills-update-note p{margin:5px 0 0;color:#7c899c;font-size:11px;line-height:1.6}
@media(max-width:980px){.skills-connect-card{grid-template-columns:1fr}.skills-card-grid,.skills-roadmap-grid{grid-template-columns:1fr}.skills-page{padding-left:22px;padding-right:22px}}

/* Compact, task-first Skills download page */
.skills-page{max-width:1120px;min-height:calc(100vh - 70px);margin:0 auto;padding:30px 28px 56px;background:#f7f9fc;color:#172033}
.skills-page-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:0 0 20px}
.skills-page-heading h1{margin:0 0 5px;font-size:26px;letter-spacing:-.025em}
.skills-page-heading p{margin:0;color:#6f7c8f;font-size:13px}
.skills-setup-card,.skills-simple-card{margin-bottom:16px;padding:20px 22px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 5px 18px #233b5d08}
.skills-setup-heading,.skills-section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.skills-setup-heading>div,.skills-section-heading>div{display:flex;align-items:center;gap:12px;min-width:0}
.skills-step{display:grid;width:28px;height:28px;flex:none;place-items:center;border-radius:50%;background:#eaf2ff;color:#1769dc;font-size:13px;font-weight:800}
.skills-setup-heading h2,.skills-section-heading h2{margin:0 0 4px;font-size:16px}
.skills-setup-heading p,.skills-section-heading p{margin:0;color:#7a8798;font-size:12px}
.skills-copy-prompt{height:36px;flex:none;padding:0 14px;border:1px solid #1769dc;border-radius:10px;background:#1769dc;color:#fff;font-weight:700}
.skills-setup-card textarea{display:block;width:100%;min-height:108px;margin:15px 0 8px;padding:12px 14px;resize:vertical;border:1px solid #e4eaf2;border-radius:11px;background:#f8fafd;color:#41516a;font-family:inherit;font-size:12px;line-height:1.75}
.skills-setup-card>small{color:#8793a4;font-size:11px}
.skills-primary{display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;border:1px solid #1769dc;border-radius:10px;background:#1769dc;color:#fff;font-weight:700}
.skills-primary img{width:15px;height:15px;filter:brightness(0) invert(1)}
.skills-list{margin-top:13px;border-top:1px solid #edf0f4}
.skills-list-item{display:flex;align-items:center;gap:12px;min-height:72px;padding:11px 2px;border-bottom:1px solid #edf0f4}
.skills-list-item:last-child{border-bottom:0}
.skills-list-item .skill-card-icon{width:36px;height:36px;flex:none}
.skills-list-item>div{flex:1;min-width:0}
.skills-list-item h3{margin:0 0 4px;font-size:13px}
.skills-list-item p{margin:0;color:#758296;font-size:12px;line-height:1.5}
.skills-list-item .skill-version{flex:none}
.skills-list-item.is-planned .skill-card-icon{background:#f0f2f5;filter:grayscale(1);opacity:.55}
.skills-list-item.is-planned .skill-card-icon img{filter:grayscale(1)}
.skill-development{flex:none;color:#9aa4b2;font-size:10px;font-weight:500}
.skills-key-details{margin-top:10px;padding-top:11px;border-top:1px solid #edf0f4}
.skills-key-details summary{display:flex;align-items:center;gap:12px;cursor:pointer;color:#46566e;font-size:12px;font-weight:700;list-style-position:inside}
.skills-key-details summary span{overflow:hidden;color:#8491a2;font-size:11px;font-weight:400;text-overflow:ellipsis;white-space:nowrap}
.skills-key-details .skills-connect-actions{margin-top:11px}
.skills-key-details .skills-key-panel{max-width:700px}
.skills-update-note{margin:12px 0 0;padding:11px 0;border:0;border-top:1px solid #e7ebf1;border-radius:0;background:none;color:#8591a2;font-size:11px}
@media(max-width:700px){.skills-page{padding:22px 15px 40px}.skills-setup-card,.skills-simple-card{padding:16px}.skills-setup-heading,.skills-section-heading{align-items:flex-start}.skills-setup-heading{flex-direction:column}.skills-copy-prompt{align-self:flex-start}.skills-section-heading>div{align-items:flex-start}.skills-page-heading h1{font-size:23px}.skills-list-item p{font-size:11px}}

.workflow-page{padding:26px 30px 42px;max-width:1800px;margin:0 auto;color:#172033}.workflow-page-heading{display:flex;align-items:center;justify-content:flex-end;gap:24px;margin:0 0 23px}.workflow-eyebrow{display:block;margin-bottom:5px;color:#718198;font-size:10px;font-weight:800;letter-spacing:1.6px}.workflow-page-heading h1{margin:0;font-size:25px;line-height:1.25}.workflow-page-heading p{margin:6px 0 0;color:#7d899a;font-size:13px}.workflow-primary,.workflow-secondary,.workflow-danger{min-height:38px;padding:0 14px;border:1px solid #e1e7ef;border-radius:11px;background:#fff;color:#39475b;font-weight:650;transition:.18s}.workflow-primary{border-color:#075bff;background:#075bff;color:#fff;box-shadow:0 5px 14px #075bff24}.workflow-primary:hover{background:#004ee6}.workflow-primary span{font-size:18px;vertical-align:-1px;margin-right:4px}.workflow-secondary:hover{border-color:#8fb4ff;color:#075bff}.workflow-danger{color:#d04444}.workflow-danger:hover{border-color:#efb6b6;background:#fff8f8}.workflow-layout{display:grid;grid-template-columns:minmax(260px,310px) minmax(650px,1fr);gap:18px;min-height:calc(100vh - 190px)}.workflow-projects,.workflow-editor{border:1px solid #e7ebf1;border-radius:18px;background:#fff;box-shadow:0 9px 32px rgba(18,36,61,.045)}.workflow-projects{padding:16px 12px}.workflow-section-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.workflow-section-title strong{font-size:14px}.workflow-section-title>span{color:#8794a7;font-size:11px}.workflow-project-list{display:grid;gap:8px;margin-top:13px}.workflow-project-card{width:100%;display:flex;align-items:center;gap:10px;padding:11px 9px;text-align:left;border:1px solid transparent;border-radius:13px;background:#fff;color:inherit}.workflow-project-card:hover{background:#f7f9fc}.workflow-project-card.active{border-color:#c7dbff;background:#f3f7ff}.workflow-project-icon{display:grid;place-items:center;flex:0 0 35px;width:35px;height:35px;border-radius:10px;background:#edf4ff;color:#075bff}.workflow-project-icon img{width:19px;height:19px}.workflow-project-copy{min-width:0;flex:1}.workflow-project-copy strong,.workflow-project-copy small,.workflow-project-copy em{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workflow-project-copy strong{font-size:12px}.workflow-project-copy small{margin-top:3px;color:#7d899a;font-size:10px}.workflow-project-copy em{margin-top:5px;color:#8a96a7;font-size:10px;font-style:normal}.workflow-project-chevron{color:#9ba7b6;font-size:21px}.workflow-project-empty,.workflow-list-loading,.workflow-list-error{padding:22px 10px;text-align:center;color:#8794a7;font-size:12px;line-height:1.7}.workflow-list-error button{display:block;margin:10px auto 0;border:0;background:transparent;color:#075bff}.workflow-editor{min-width:0;padding:0 18px 18px}.workflow-editor-empty{min-height:540px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center}.workflow-editor-empty>span{display:grid;place-items:center;width:58px;height:58px;border-radius:18px;background:#edf4ff;color:#075bff;font-size:27px}.workflow-editor-empty h2{margin:18px 0 5px;font-size:17px}.workflow-editor-empty p{margin:0 0 17px;color:#7d899a;font-size:12px}.workflow-editor-heading{min-height:83px;display:flex;align-items:center;justify-content:space-between;gap:14px;border-bottom:1px solid #edf0f4}.workflow-editor-heading>div:first-child{flex:1;min-width:0}.workflow-editor-heading input{display:block;width:min(560px,100%);border:0;outline:0;background:transparent;color:#172033}.workflow-editor-heading #workflowName{font-size:19px;font-weight:750}.workflow-editor-heading #workflowDescription{margin-top:5px;font-size:11px;color:#728197}.workflow-editor-heading #workflowDescription::placeholder{color:#a2adbb}.workflow-heading-actions{display:flex;align-items:center;gap:7px}.workflow-heading-actions>span{margin-right:4px;color:#8390a2;font-size:10px;white-space:nowrap}.workflow-heading-actions button{min-height:32px;padding:0 10px;border-radius:9px;font-size:11px}.workflow-editor-body{display:grid;grid-template-columns:minmax(340px,1fr) minmax(230px,280px);gap:15px;padding-top:15px}.workflow-canvas-wrap,.workflow-node-settings,.workflow-schedule{border:1px solid #e8edf3;border-radius:14px;background:#fbfcfe}.workflow-canvas-wrap{padding:13px 14px}.workflow-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.workflow-canvas-toolbar strong,.workflow-canvas-toolbar small{display:block}.workflow-canvas-toolbar strong{font-size:13px}.workflow-canvas-toolbar small{margin-top:3px;color:#8794a7;font-size:10px}.workflow-canvas-toolbar button{min-height:31px;padding:0 10px;font-size:10px}.workflow-canvas{max-height:440px;overflow:auto;padding:14px 8px 6px}.workflow-node{position:relative;display:flex;align-items:center;gap:10px;min-height:66px;padding:10px;border:1px solid #dce5f1;border-radius:13px;background:#fff;cursor:pointer;transition:.16s}.workflow-node:hover{border-color:#9fc1ff;box-shadow:0 5px 15px #1d4ed80c}.workflow-node.selected{border-color:#075bff;box-shadow:0 0 0 2px #075bff18}.workflow-node.external{border-style:dashed}.workflow-node-index{display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:50%;background:#edf1f7;color:#718096;font-size:9px;font-weight:750}.workflow-node-icon{display:grid;place-items:center;flex:0 0 36px;width:36px;height:36px;border-radius:11px;background:#eff5ff}.workflow-node.external .workflow-node-icon{background:#f1f2f4}.workflow-node-icon img{width:19px;height:19px}.workflow-node-copy{min-width:0;flex:1}.workflow-node-copy strong,.workflow-node-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workflow-node-copy strong{font-size:12px}.workflow-node-copy small{margin-top:4px;color:#8390a2;font-size:10px}.workflow-node-state{flex:none;padding:4px 7px;border-radius:8px;background:#eef4ff;color:#075bff;font-size:9px}.workflow-node.external .workflow-node-state{background:#f2f3f5;color:#818b99}.workflow-node.manual .workflow-node-state{background:#f7f4e8;color:#978144}.workflow-connector{height:25px;display:flex;align-items:center;justify-content:center;color:#9aacbf}.workflow-connector span{font-size:16px;line-height:1}.workflow-canvas-empty{padding:34px 10px;text-align:center;color:#8794a7;font-size:11px}.workflow-legend{display:flex;gap:14px;padding:11px 2px 0;color:#8794a7;font-size:9px}.workflow-legend span{display:flex;align-items:center;gap:5px}.workflow-legend i{width:8px;height:8px;border-radius:50%;background:#075bff}.workflow-legend i.external{background:#9aa5b3}.workflow-side-panel{display:grid;align-content:start;gap:12px}.workflow-node-settings,.workflow-schedule{padding:13px}.workflow-node-settings-body{display:grid;gap:10px;margin-top:12px}.workflow-node-settings-body>p{margin:0;color:#8491a3;font-size:10px;line-height:1.6}.workflow-node-settings-body label,.workflow-schedule-fields label{display:grid;gap:5px;color:#65748a;font-size:10px}.workflow-node-settings-body input,.workflow-node-settings-body textarea,.workflow-schedule-fields input,.workflow-schedule-fields select{width:100%;min-width:0;border:1px solid #e1e7ef;border-radius:9px;background:#fff;color:#233147;padding:8px 9px;outline:none;font-size:11px;resize:vertical}.workflow-node-settings-body input:focus,.workflow-node-settings-body textarea:focus,.workflow-schedule-fields input:focus,.workflow-schedule-fields select:focus{border-color:#75a4ff;box-shadow:0 0 0 3px #075bff14}.workflow-node-type{display:inline-flex;align-items:center;gap:7px;color:#53637a;font-size:10px;font-weight:700}.workflow-node-type img{width:16px;height:16px}.workflow-node-type.site{color:#075bff}.workflow-node-connection{margin:0;color:#8894a5;font-size:9px;line-height:1.5}.workflow-node-actions{display:flex;gap:5px}.workflow-node-actions button{min-height:28px;padding:0 7px;border:1px solid #e0e6ee;border-radius:8px;background:#fff;color:#64748b;font-size:9px}.workflow-node-actions button:disabled{opacity:.45;cursor:not-allowed}.workflow-node-actions .workflow-node-remove{margin-left:auto;color:#c34545}.workflow-coming-soon{padding:4px 6px;border-radius:7px;background:#fff5e8;color:#a87324;font-size:8px!important}.workflow-check{display:flex;align-items:center;gap:7px;margin-top:12px;color:#53637a;font-size:10px;cursor:pointer}.workflow-check input{accent-color:#075bff}.workflow-schedule-fields{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.workflow-schedule-fields label:first-child{grid-column:1/-1}.workflow-schedule-note{margin:10px 0 0;color:#8794a7;font-size:9px;line-height:1.6}.workflow-run-section{margin-top:15px;border:1px solid #e8edf3;border-radius:14px;padding:13px}.workflow-run-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.workflow-run-heading strong,.workflow-run-heading small{display:block}.workflow-run-heading strong{font-size:13px}.workflow-run-heading small{margin-top:3px;color:#8794a7;font-size:10px}.workflow-run-heading button{min-height:32px;font-size:10px}.workflow-run-empty{padding:20px 8px;text-align:center;color:#8995a5;font-size:10px}.workflow-run-list{display:grid;gap:10px;margin-top:11px}.workflow-run-card{border:1px solid #e7ecf2;border-radius:12px;padding:11px}.workflow-run-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.workflow-run-card>header strong,.workflow-run-card>header small{display:block}.workflow-run-card>header strong{font-size:11px}.workflow-run-card>header small{margin-top:3px;color:#8794a7;font-size:9px}.workflow-run-progress{width:100px;height:5px;overflow:hidden;border-radius:5px;background:#e9edf3}.workflow-run-progress i{display:block;height:100%;border-radius:5px;background:#075bff}.workflow-run-steps{display:grid;gap:6px;margin-top:10px}.workflow-run-step{display:flex;align-items:center;gap:8px;min-height:38px;padding:6px 7px;border-radius:9px;background:#f7f9fc}.workflow-run-step.in_progress{background:#eff5ff}.workflow-run-step.completed{background:#f0f8ec}.workflow-run-step.blocked{background:#fff5ed}.workflow-run-step-index{display:grid;place-items:center;flex:0 0 21px;width:21px;height:21px;border-radius:50%;background:#e6ebf2;color:#6c7d93;font-size:9px}.workflow-run-step.in_progress .workflow-run-step-index{background:#075bff;color:#fff}.workflow-run-step.completed .workflow-run-step-index{background:#dff0d3;color:#39822b}.workflow-run-step>div:nth-child(2){min-width:0;flex:1}.workflow-run-step strong,.workflow-run-step small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.workflow-run-step strong{font-size:10px}.workflow-run-step small{margin-top:3px;color:#8794a7;font-size:9px}.workflow-run-step-actions{display:flex;align-items:center;gap:5px}.workflow-run-step-actions button{min-height:25px;padding:0 7px;border:1px solid #dbe3ed;border-radius:7px;background:#fff;color:#586a82;font-size:8px;white-space:nowrap}.workflow-run-step-actions button.complete{border-color:#075bff;background:#075bff;color:#fff}.workflow-run-step-actions small{color:#a87324;font-size:8px;white-space:nowrap}.workflow-add-dialog{width:min(680px,calc(100vw - 30px));max-height:min(80vh,720px);overflow:auto;padding:16px;border:1px solid #e2e8f0;border-radius:18px;background:#fff;color:#172033;box-shadow:0 24px 80px #16243a38}.workflow-add-dialog::backdrop{background:#111b2c55;backdrop-filter:blur(2px)}.workflow-dialog-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.workflow-dialog-head strong,.workflow-dialog-head small{display:block}.workflow-dialog-head strong{font-size:15px}.workflow-dialog-head small{margin-top:4px;color:#8794a7;font-size:10px}.workflow-dialog-head button{width:30px;height:30px;border:0;border-radius:8px;background:#f1f4f8;color:#67758a;font-size:20px}.workflow-node-catalog{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.workflow-catalog-item{position:relative;display:grid;grid-template-columns:34px 1fr;column-gap:9px;align-items:center;padding:11px;border:1px solid #e3e9f1;border-radius:12px;background:#fff;text-align:left}.workflow-catalog-item:hover{border-color:#8eb5ff;background:#f7faff}.workflow-catalog-item>span{grid-row:span 3;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#eff5ff}.workflow-catalog-item img{width:18px;height:18px}.workflow-catalog-item strong{font-size:11px}.workflow-catalog-item small{margin-top:3px;color:#8491a3;font-size:9px;line-height:1.4}.workflow-catalog-item em{position:absolute;right:7px;top:7px;color:#8a96a6;font-size:8px;font-style:normal}.workflow-schedule-fields[hidden],.workflow-editor-content[hidden],.workflow-editor-empty[hidden],.workflow-project-empty[hidden],.workflow-run-empty[hidden]{display:none}
body.dark-theme .workflow-page{color:#e4ebf5}body.dark-theme .workflow-projects,body.dark-theme .workflow-editor,body.dark-theme .workflow-add-dialog{border-color:#2b3b52;background:#18263a;color:#e4ebf5}body.dark-theme .workflow-project-card{background:transparent;color:#e4ebf5}body.dark-theme .workflow-project-card:hover,body.dark-theme .workflow-project-card.active{border-color:#35537a;background:#1e314c}body.dark-theme .workflow-project-icon,body.dark-theme .workflow-node-icon,body.dark-theme .workflow-catalog-item>span{background:#233a59;color:#a9c8ff}body.dark-theme .workflow-editor-heading{border-color:#2b3b52}body.dark-theme .workflow-editor-heading input{color:#e4ebf5}body.dark-theme .workflow-editor-heading #workflowDescription{color:#a8b8ce}body.dark-theme .workflow-canvas-wrap,body.dark-theme .workflow-node-settings,body.dark-theme .workflow-schedule,body.dark-theme .workflow-run-section,body.dark-theme .workflow-run-card{border-color:#2b3b52;background:#152237}body.dark-theme .workflow-node,body.dark-theme .workflow-catalog-item,body.dark-theme .workflow-node-actions button,body.dark-theme .workflow-run-step-actions button,body.dark-theme .workflow-secondary,body.dark-theme .workflow-danger{border-color:#344862;background:#1c2d45;color:#dce6f3}body.dark-theme .workflow-node.selected{border-color:#4384ff}body.dark-theme .workflow-node-copy small,body.dark-theme .workflow-canvas-toolbar small,body.dark-theme .workflow-run-heading small,body.dark-theme .workflow-project-copy small,body.dark-theme .workflow-project-copy em{color:#9aabc1}body.dark-theme .workflow-node-settings-body input,body.dark-theme .workflow-node-settings-body textarea,body.dark-theme .workflow-schedule-fields input,body.dark-theme .workflow-schedule-fields select{border-color:#344862;background:#101c2d;color:#e4ebf5}body.dark-theme .workflow-run-step{background:#1b2a40}body.dark-theme .workflow-run-step.in_progress{background:#20385a}body.dark-theme .workflow-run-step.completed{background:#203729}body.dark-theme .workflow-run-step.blocked{background:#3b2c21}body.dark-theme .workflow-add-dialog::backdrop{background:#050a14ad}body.dark-theme .workflow-page-heading p,body.dark-theme .workflow-schedule-note,body.dark-theme .workflow-node-connection,body.dark-theme .workflow-check,body.dark-theme .workflow-section-title>span{color:#9aabc1}
@media(max-width:1120px){.workflow-page{padding:20px 16px}.workflow-layout{grid-template-columns:240px minmax(600px,1fr);gap:12px}.workflow-editor{padding:0 12px 12px}.workflow-editor-body{grid-template-columns:minmax(300px,1fr) 230px;gap:10px}.workflow-node-state{display:none}}
/* Graph workflow canvas */
.workflow-canvas-scroll{max-width:100%;max-height:510px;overflow:auto;border:1px solid #e3e9f1;border-radius:12px;background-color:#f7f9fc;background-image:radial-gradient(#d8e0ec 1px,transparent 1px);background-size:18px 18px;touch-action:pan-x pan-y}
.workflow-node-palette{display:flex;gap:7px;overflow-x:auto;padding:11px 1px 10px;scrollbar-width:thin}
.workflow-palette-item{position:relative;display:flex;align-items:center;gap:7px;flex:0 0 auto;min-height:33px;padding:0 10px;border:1px solid #e2e8f0;border-radius:9px;background:#fff;color:#3b4b62;font-size:10px;cursor:grab}
.workflow-palette-item:hover{border-color:#8fb4ff;background:#f7faff}.workflow-palette-item img{width:15px;height:15px}.workflow-palette-item i,.workflow-node-state{display:block;width:8px;height:8px;border-radius:50%;background:#a0a9b5;box-shadow:0 0 0 2px #fff}.workflow-palette-item i.is-connected,.workflow-node-state.is-connected{background:#28ad69}.workflow-palette-item i.is-pending,.workflow-node-state.is-pending{background:#9ca6b3}
.workflow-canvas{position:relative;max-height:none;min-width:100%;min-height:560px;overflow:visible;padding:0;background:transparent}
.workflow-edges{position:absolute;inset:0;overflow:visible;color:#8ca1bc;pointer-events:none}.workflow-edge{fill:none;stroke:currentColor;stroke-width:2.2}
.workflow-node.graph-node{position:absolute;z-index:1;display:flex;width:232px;min-height:106px;align-items:center;gap:9px;padding:15px 14px;border:1px solid #dbe4ef;border-radius:13px;background:#fff;cursor:grab;user-select:none;touch-action:none}.workflow-node.graph-node:active{cursor:grabbing}.workflow-node.graph-node.start{border-color:#8db3ff;background:#f4f8ff}.workflow-node.graph-node.external{border-style:solid}.workflow-node.graph-node .workflow-node-copy{padding-right:8px}.workflow-node.graph-node .workflow-node-copy small{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.workflow-node.graph-node .workflow-node-state{position:absolute;top:10px;right:11px;width:9px;height:9px;box-shadow:0 0 0 3px #fff}.workflow-port{position:absolute;top:50%;z-index:3;width:14px;height:14px;padding:0;border:2px solid #fff;border-radius:50%;background:#8fa2ba;box-shadow:0 0 0 1px #94a5ba;transform:translateY(-50%);cursor:crosshair}.workflow-port:hover,.workflow-node.connecting .workflow-port-out{background:#075bff;box-shadow:0 0 0 3px #075bff27}.workflow-port-out{right:-8px}.workflow-port-in{left:-8px}.workflow-node.start .workflow-port-out{background:#075bff}.workflow-node.start .workflow-node-icon{background:#e3eeff}.workflow-node.start .workflow-node-index{background:#dce9ff;color:#075bff}
.workflow-node-actions:empty{display:none}.workflow-node-actions button.workflow-node-remove{margin-left:0}.workflow-legend i.connected{background:#28ad69}.workflow-legend i.external{background:#9ca6b3}
body.dark-theme .workflow-canvas-scroll{border-color:#2b3b52;background-color:#101c2d;background-image:radial-gradient(#2b3b52 1px,transparent 1px)}body.dark-theme .workflow-node.graph-node{border-color:#344862;background:#1c2d45;color:#e4ebf5}body.dark-theme .workflow-node.graph-node.start{border-color:#416db0;background:#1c314e}body.dark-theme .workflow-node.graph-node .workflow-node-state{box-shadow:0 0 0 3px #1c2d45}body.dark-theme .workflow-palette-item{border-color:#344862;background:#1c2d45;color:#dce6f3}body.dark-theme .workflow-palette-item i{box-shadow:0 0 0 2px #1c2d45}body.dark-theme .workflow-port{border-color:#1c2d45}
@media(max-width:1120px){.workflow-canvas-scroll{max-height:460px}.workflow-node.graph-node{width:220px;min-height:100px}}

/* Full-canvas workflow layout with a compact project switcher. */
.workflow-page{padding:14px 22px 0;min-height:calc(100vh - 60px)}
.workflow-page-heading{height:42px;margin:0 0 8px}
.workflow-layout{position:relative;display:block;min-height:calc(100vh - 124px)}
.workflow-projects{position:absolute;z-index:12;top:12px;left:12px;width:auto;padding:0;border:0;background:transparent;box-shadow:none}
.workflow-project-toggle{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 15px;border:1px solid #075bff;border-radius:12px;background:#075bff;color:#fff;font-size:13px;font-weight:700;box-shadow:0 7px 20px #075bff35;cursor:pointer}
.workflow-project-toggle:hover{background:#004ee6}
.workflow-project-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:7px;background:#ffffff28;font-size:11px}
.workflow-project-toggle-icon{font-size:16px;transition:transform .18s}
.workflow-projects.expanded .workflow-project-toggle-icon{transform:rotate(180deg)}
.workflow-project-list-panel{position:absolute;top:calc(100% + 8px);left:0;width:min(360px,calc(100vw - 40px));max-height:65vh;overflow:auto;padding:10px;border:1px solid #dfe7f2;border-radius:15px;background:#fff;box-shadow:0 16px 44px #10213d30}
.workflow-project-list-panel[hidden]{display:none}
.workflow-project-list{margin:0;gap:6px}
.workflow-project-card{padding:10px 8px}
.workflow-project-empty{padding:16px 8px}
.workflow-editor{min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.workflow-editor-content{min-height:calc(100vh - 124px)}
.workflow-editor-heading,.workflow-side-panel,.workflow-run-section,.workflow-canvas-toolbar,.workflow-legend,.workflow-editor-empty{display:none!important}
.workflow-editor-body{display:block;min-height:calc(100vh - 124px)}
.workflow-canvas-wrap{position:relative;display:flex;flex-direction:column;height:calc(100vh - 124px);min-height:560px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.workflow-node-palette{position:absolute;z-index:5;top:13px;left:13px;max-width:calc(100% - 26px);padding:8px;border:1px solid #dfe7f2;border-radius:14px;background:#ffffffed;box-shadow:0 8px 24px #10213d20;backdrop-filter:blur(12px)}
.workflow-canvas-scroll{flex:1;width:100%;height:100%;max-height:none;min-height:100%;border:1px solid #dfe7f2;border-radius:16px;background-color:#f7f9fc;background-image:radial-gradient(#d8e0ec 1px,transparent 1px);background-size:18px 18px}
.workflow-canvas{min-height:100%}
body.dark-theme .workflow-project-list-panel{border-color:#2b3b52;background:#18263a;box-shadow:0 16px 44px #0008}
body.dark-theme .workflow-project-toggle{border-color:#1768ff;background:#075bff;color:#fff}
body.dark-theme .workflow-project-card{color:#e4ebf5}
body.dark-theme .workflow-project-card.active{border-color:#35537a;background:#1e314c}
body.dark-theme .workflow-node-palette{border-color:#2b3b52;background:#18263aeF;box-shadow:0 8px 24px #0006}
body.dark-theme .workflow-canvas-scroll{border-color:#2b3b52;background-color:#101c2d;background-image:radial-gradient(#2b3b52 1px,transparent 1px)}
@media(max-width:760px){.workflow-page{padding:10px 12px 0}.workflow-projects{top:8px;left:8px}.workflow-canvas-wrap{height:calc(100vh - 110px);min-height:500px}.workflow-node-palette{right:8px;left:8px;top:58px;max-width:unset}.workflow-palette-item{flex:0 0 auto}.workflow-project-list-panel{max-height:55vh}}
/* Full-canvas workflow layout with a compact project switcher. */
.workflow-page{padding:14px 22px 0;min-height:calc(100vh - 60px)}
.workflow-page-heading{height:42px;margin:0 0 8px}
.workflow-layout{position:relative;display:block;min-height:calc(100vh - 124px)}
.workflow-projects{position:absolute;z-index:12;top:12px;left:12px;width:auto;padding:0;border:0;background:transparent;box-shadow:none}
.workflow-project-toggle{display:flex;align-items:center;gap:11px;min-height:40px;padding:0 15px;border:1px solid #075bff;border-radius:12px;background:#075bff;color:#fff;font-size:13px;font-weight:700;box-shadow:0 7px 20px #075bff35;cursor:pointer}
.workflow-project-toggle:hover{background:#004ee6}
.workflow-project-count{display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:7px;background:#ffffff28;font-size:11px}
.workflow-project-toggle-icon{font-size:16px;transition:transform .18s}
.workflow-projects.expanded .workflow-project-toggle-icon{transform:rotate(180deg)}
.workflow-project-list-panel{position:absolute;top:calc(100% + 8px);left:0;width:min(360px,calc(100vw - 40px));max-height:65vh;overflow:auto;padding:10px;border:1px solid #dfe7f2;border-radius:15px;background:#fff;box-shadow:0 16px 44px #10213d30}
.workflow-project-list-panel[hidden]{display:none}
.workflow-project-list{margin:0;gap:6px}
.workflow-project-card{padding:10px 8px}
.workflow-project-empty{padding:16px 8px}
.workflow-editor{min-width:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.workflow-editor-content{min-height:calc(100vh - 124px)}
.workflow-editor-heading,.workflow-side-panel,.workflow-run-section,.workflow-canvas-toolbar,.workflow-legend,.workflow-editor-empty{display:none!important}
.workflow-editor-body{display:block;min-height:calc(100vh - 124px)}
.workflow-canvas-wrap{position:relative;display:flex;flex-direction:column;height:calc(100vh - 124px);min-height:560px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.workflow-node-palette{position:absolute;z-index:5;top:13px;right:13px;left:auto;max-width:calc(100% - 26px);padding:8px;border:1px solid #dfe7f2;border-radius:14px;background:#ffffffed;box-shadow:0 8px 24px #10213d20;backdrop-filter:blur(12px)}
.workflow-canvas-scroll{flex:1;width:100%;height:100%;max-height:none;min-height:100%;border:1px solid #dfe7f2;border-radius:16px;background-color:#f7f9fc;background-image:radial-gradient(#d8e0ec 1px,transparent 1px);background-size:18px 18px}
.workflow-canvas{min-height:100%}
body.dark-theme .workflow-project-list-panel{border-color:#2b3b52;background:#18263a;box-shadow:0 16px 44px #0008}
body.dark-theme .workflow-project-toggle{border-color:#1768ff;background:#075bff;color:#fff}
body.dark-theme .workflow-project-card{color:#e4ebf5}
body.dark-theme .workflow-project-card.active{border-color:#35537a;background:#1e314c}
body.dark-theme .workflow-node-palette{border-color:#2b3b52;background:#18263aef;box-shadow:0 8px 24px #0006}
body.dark-theme .workflow-canvas-scroll{border-color:#2b3b52;background-color:#101c2d;background-image:radial-gradient(#2b3b52 1px,transparent 1px)}
@media(max-width:760px){.workflow-page{padding:10px 12px 0}.workflow-projects{top:8px;left:8px}.workflow-canvas-wrap{height:calc(100vh - 110px);min-height:500px}.workflow-node-palette{top:58px;right:8px;left:8px;max-width:unset}.workflow-palette-item{flex:0 0 auto}.workflow-project-list-panel{max-height:55vh}}
.workflow-node.graph-node{width:250px;min-height:82px;height:82px;padding:10px 13px;gap:10px;overflow:visible}
.workflow-node.graph-node .workflow-node-copy{padding:0;min-width:0}
.workflow-node.graph-node .workflow-node-copy strong{font-size:13px;line-height:1.35}
.workflow-node.graph-node .workflow-node-copy small,.workflow-node.graph-node .workflow-node-state{display:none!important}
.workflow-node.graph-node .workflow-node-index{flex-basis:23px;width:23px;height:23px;font-size:10px}
.workflow-node-thumbnail,.workflow-node-icon{display:grid;place-items:center;flex:0 0 48px;width:48px;height:48px;overflow:hidden;border-radius:11px;background:#eff5ff;object-fit:cover}
.workflow-node-thumbnail{display:block}
.workflow-node-icon img{width:23px;height:23px}
.workflow-node-details{position:absolute;z-index:8;top:calc(100% + 9px);left:0;width:min(330px,calc(100vw - 48px));padding:13px 14px;border:1px solid #dce5f1;border-radius:13px;background:#fff;color:#263449;box-shadow:0 14px 36px #14243b2b;white-space:normal;cursor:default}
.workflow-node-details p{margin:0;color:#6d7c91;font-size:11px;line-height:1.65}
.workflow-node-details .workflow-node-instruction{margin-top:7px;padding-top:7px;border-top:1px solid #edf0f5}
.workflow-node-detail-status{display:block;margin-top:9px;color:#8491a3;font-size:9px}
.workflow-node-preview-actions{display:flex;gap:7px;margin-top:10px}
.workflow-node-preview-actions button{min-height:29px;padding:0 9px;border:1px solid #dfe6ef;border-radius:8px;background:#f8fafc;color:#43536a;font-size:10px}
.workflow-node-preview-actions button:hover{border-color:#8eb5ff;color:#075bff}
.workflow-preview-dialog{width:min(760px,calc(100vw - 30px))}
.workflow-preview-assets{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px;max-height:min(65vh,560px);overflow:auto}
.workflow-preview-asset{display:grid;gap:7px;padding:7px;border:1px solid #e3e9f1;border-radius:11px;background:#fff;text-align:left;cursor:pointer}
.workflow-preview-asset:hover{border-color:#075bff;box-shadow:0 0 0 2px #075bff15}
.workflow-preview-asset img,.workflow-preview-asset video,.workflow-preview-video-icon{width:100%;height:100px;display:grid;place-items:center;border-radius:7px;background:#eff3f8;object-fit:cover}
.workflow-preview-asset span:last-child{overflow:hidden;color:#526176;font-size:10px;text-overflow:ellipsis;white-space:nowrap}
.workflow-preview-empty{grid-column:1/-1;padding:30px 10px;color:#7d899a;text-align:center;font-size:12px}
body.dark-theme .workflow-node-details,body.dark-theme .workflow-preview-dialog{border-color:#2b3b52;background:#18263a;color:#e4ebf5}
body.dark-theme .workflow-node-details p,body.dark-theme .workflow-node-detail-status,body.dark-theme .workflow-preview-asset span:last-child{color:#a9b8cc}
body.dark-theme .workflow-node-details .workflow-node-instruction{border-color:#2b3b52}
body.dark-theme .workflow-node-preview-actions button,body.dark-theme .workflow-preview-asset{border-color:#2b3b52;background:#111d2e;color:#dbe5f3}
body.dark-theme .workflow-preview-asset img,body.dark-theme .workflow-preview-asset video,body.dark-theme .workflow-preview-video-icon{background:#0e1828}

/* Workflow nodes use the roomy, empty-first layout from the reference. */
.workflow-node.graph-node{box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:0;width:360px;height:360px;min-height:360px;padding:0;overflow:visible;border:1px solid #35465e;border-radius:16px;background:#f8faff;box-shadow:0 8px 24px #162b481c;cursor:grab}
.workflow-node.graph-node[data-workflow-node]{--workflow-card-width:360px}
.workflow-node.graph-node.node-type-image,.workflow-node.graph-node.node-type-video{--workflow-card-width:560px;width:560px}
.workflow-node-header{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:0 16px}
.workflow-node-header>span{display:flex;align-items:center;gap:8px;min-width:0}
.workflow-node-header img{width:17px;height:17px;object-fit:contain}
.workflow-node-header strong{overflow:hidden;color:#33445a;font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.workflow-node-content{position:relative;display:grid;place-items:center;flex:1;min-height:120px;margin:0 12px;border:1px solid #e1e8f2;border-radius:12px;background:#f0f4fa;overflow:hidden}
.workflow-node-placeholder{display:grid;place-items:center;width:100%;height:100%;min-height:100px}
.workflow-node-placeholder img{width:46px;height:46px;opacity:.34;object-fit:contain}
.workflow-node-content-preview{display:block;width:100%;height:100%;min-height:0;object-fit:contain;background:#0b1422}
.workflow-node-content.has-asset{background:#101a2a}
.workflow-node-content-actions{position:absolute;right:10px;bottom:10px;display:flex;gap:6px;opacity:0;transition:opacity .16s}
.workflow-node-content:hover .workflow-node-content-actions,.workflow-node.graph-node.selected .workflow-node-content-actions{opacity:1}
.workflow-node-content-actions button{min-height:29px;padding:0 10px;border:1px solid #d5deea;border-radius:8px;background:#ffffffeb;color:#3b4c63;font-size:11px;cursor:pointer}
.workflow-node-methods{padding:12px 16px 15px}
.workflow-node-methods>small{display:block;margin-bottom:7px;color:#8592a3;font-size:11px}
.workflow-node-methods>div{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.workflow-node-method{display:flex;align-items:center;gap:8px;min-height:28px;padding:3px 8px;border:0;border-radius:7px;background:transparent;color:#34445a;font-size:12px;text-align:left;cursor:pointer}
.workflow-node-method img{width:15px;height:15px;object-fit:contain;opacity:.85}
.workflow-node-method:hover,.workflow-node-method.active{background:#e7eef9;color:#075bff}
.workflow-node-method-note{margin:6px 0 0;color:#075bff;font-size:10px}
.workflow-node.graph-node .workflow-port{top:50%;width:15px;height:15px;margin-top:-7.5px;border:2px solid #fff;border-radius:50%;background:#8ba1bd;box-shadow:0 0 0 1px #8196b1;z-index:4}
.workflow-node.graph-node .workflow-port-in{left:-8px}
.workflow-node.graph-node .workflow-port-out{right:-8px}
.workflow-node.graph-node.selected{border-color:#075bff;box-shadow:0 0 0 2px #075bff24,0 12px 28px #162b4825}
.workflow-node.graph-node.is-dragging{cursor:grabbing;z-index:5}
body.dark-theme .workflow-node.graph-node{border-color:#3a3d42;background:#242424;box-shadow:0 8px 24px #0003}
body.dark-theme .workflow-node-header strong,body.dark-theme .workflow-node-method{color:#e3e3e3}
body.dark-theme .workflow-node-content{border-color:#383838;background:#292929}
body.dark-theme .workflow-node-placeholder img{filter:grayscale(1) brightness(2);opacity:.3}
body.dark-theme .workflow-node-methods>small{color:#999}
body.dark-theme .workflow-node-method:hover,body.dark-theme .workflow-node-method.active{background:#343a46;color:#8bb7ff}
body.dark-theme .workflow-node-content-actions button{border-color:#414b5c;background:#18263aee;color:#e3eaf4}
@media(max-width:760px){.workflow-node.graph-node{width:320px;height:340px;min-height:340px}.workflow-node.graph-node.node-type-image,.workflow-node.graph-node.node-type-video{width:380px}}
.workflow-node-picker{position:absolute;z-index:7;top:13px;left:13px}
.workflow-node-picker-toggle{display:flex;align-items:center;gap:18px;min-height:40px;padding:0 14px;border:1px solid #075bff;border-radius:12px;background:#075bff;color:#fff;font-size:12px;font-weight:700;box-shadow:0 7px 20px #075bff35;cursor:pointer}
.workflow-node-picker-toggle:hover{background:#004ee6}
.workflow-node-picker-toggle span:last-child{font-size:15px;transition:transform .18s}
.workflow-node-picker.expanded .workflow-node-picker-toggle span:last-child{transform:rotate(180deg)}
.workflow-node-palette{position:absolute;top:calc(100% + 8px);left:0;right:auto;display:flex;flex-wrap:wrap;width:min(740px,calc(100vw - 140px));max-width:calc(100vw - 140px);max-height:min(52vh,420px);overflow:auto;padding:9px;border:1px solid #cfdbeb;border-radius:14px;background:#f9fbffed;box-shadow:0 12px 32px #1526402e;backdrop-filter:blur(12px)}
.workflow-node-palette[hidden]{display:none!important}
.workflow-node.graph-node{border-color:#c7d5e8;background:#f8faff;box-shadow:0 5px 16px #28456c13}
.workflow-node.graph-node.start{border-color:#a8c6f4;background:#eaf2ff}
.workflow-node.graph-node:hover{border-color:#8db3ec;box-shadow:0 8px 22px #28456c20}
.workflow-node.graph-node.selected{border-color:#075bff;background:#f1f6ff}
.workflow-node.graph-node.external{border-style:solid}
.workflow-node.graph-node .workflow-node-index{background:#dfe9f7;color:#435a78}
.workflow-node.graph-node.start .workflow-node-index{background:#cfe0ff;color:#075bff}
.workflow-canvas-scroll{border-color:#d5dfed;background-color:#edf3fb;background-image:radial-gradient(#cbd7e7 1px,transparent 1px)}
body.dark-theme .workflow-node-picker-toggle{border-color:#1768ff;background:#075bff;color:#fff}
body.dark-theme .workflow-node-palette{border-color:#2b3b52;background:#18263aef;box-shadow:0 12px 32px #0008}
body.dark-theme .workflow-node.graph-node{border-color:#344862;background:#1c2d45;color:#e4ebf5;box-shadow:0 5px 16px #0002}
body.dark-theme .workflow-node.graph-node.start{border-color:#416db0;background:#1c314e}
body.dark-theme .workflow-node.graph-node.selected{border-color:#075bff;background:#1d3455}
body.dark-theme .workflow-node.graph-node .workflow-node-index{background:#2b3d57;color:#d3deec}
body.dark-theme .workflow-node.graph-node.start .workflow-node-index{background:#dce9ff;color:#075bff}
.workflow-edge-preview{fill:none;stroke:#075bff;stroke-width:3;stroke-dasharray:7 5;filter:drop-shadow(0 1px 3px #075bff55)}
.workflow-port{touch-action:none;cursor:crosshair}
body.dark-theme .workflow-edge-preview{stroke:#62a0ff;filter:drop-shadow(0 1px 4px #62a0ff77)}
.workflow-context-menu{position:fixed;z-index:10000;width:190px;padding:6px;border:1px solid #d7e0ed;border-radius:12px;background:#fff;color:#223149;box-shadow:0 14px 38px #13243e38}
.workflow-context-menu[hidden]{display:none!important}
.workflow-context-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:38px;padding:0 10px;border:0;border-radius:8px;background:transparent;color:inherit;text-align:left;font-size:12px;cursor:pointer}
.workflow-context-menu button:hover:not(:disabled){background:#edf4ff;color:#075bff}
.workflow-context-menu button:disabled{color:#a1aaba;cursor:default}
.workflow-context-menu button span{display:grid;place-items:center;width:20px;height:20px;color:#59708e;font-size:17px}
.workflow-context-divider{height:1px;margin:5px 3px;background:#e8edf4}
body.dark-theme .workflow-context-menu{border-color:#344862;background:#18263a;color:#e4ebf5;box-shadow:0 14px 38px #0009}
body.dark-theme .workflow-context-menu button:hover:not(:disabled){background:#20385a;color:#9fc2ff}
body.dark-theme .workflow-context-divider{background:#2b3b52}
body.dark-theme .workflow-context-menu button:disabled{color:#75849a}
.workflow-node.graph-node{gap:9px;min-height:72px;height:72px;padding:10px 13px}
.workflow-node.graph-node.is-dragging{transition:none!important}
.workflow-node.graph-node .workflow-node-icon{display:grid;flex:0 0 16px;width:16px;height:16px;border-radius:0;background:transparent}
.workflow-node.graph-node .workflow-node-icon img{display:block;width:16px;height:16px}
.workflow-node.graph-node .workflow-node-copy strong{font-size:15px;line-height:1.25}
.workflow-node.graph-node .workflow-node-thumbnail{flex:0 0 48px;width:48px;height:48px;border-radius:8px}
body.dark-theme .workflow-node.graph-node .workflow-node-icon{background:transparent}
@media(max-width:760px){.workflow-node-picker{top:58px;left:8px;right:8px}.workflow-node-picker-toggle{width:max-content}.workflow-node-palette{width:100%;max-width:100%}}

/* Compact right-click node picker: icon and name only. */
.workflow-add-dialog:not(.workflow-preview-dialog){width:min(310px,calc(100vw - 28px));max-height:min(70vh,620px);padding:12px;border-radius:18px}.workflow-add-dialog:not(.workflow-preview-dialog) .workflow-dialog-head{margin:0 0 8px;padding:0 2px}.workflow-add-dialog:not(.workflow-preview-dialog) .workflow-dialog-head strong{font-size:14px}.workflow-node-catalog{display:grid;grid-template-columns:1fr;gap:3px}.workflow-catalog-item{display:flex;align-items:center;gap:11px;min-height:42px;padding:5px 9px;border:0;border-radius:10px;background:transparent}.workflow-catalog-item:hover{border:0;background:#edf4ff}.workflow-catalog-item>span{flex:0 0 30px;width:30px;height:30px;border-radius:9px}.workflow-catalog-item img{width:18px;height:18px}.workflow-catalog-item strong{font-size:12px;font-weight:550}.workflow-catalog-item.connection-pending strong{color:inherit}body.dark-theme .workflow-catalog-item:hover{background:#243854}body.dark-theme .workflow-catalog-item>span{background:#26384f}

/* Floating workflow actions, styled as a compact canvas toolbar. */
.workflow-page-heading{display:none}
.workflow-bottom-toolbar{position:fixed;z-index:55;left:calc(50% + 42px);bottom:78px;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:8px;border:1px solid #dfe3e8;border-radius:17px;background:#f1f2f4ed;box-shadow:0 8px 28px #10182730;backdrop-filter:blur(14px)}
.workflow-toolbar-button{position:relative;display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;min-height:42px;padding:0;border:0;border-radius:11px;background:transparent;color:#343a43;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.workflow-toolbar-button:hover{background:#e1e4e8;color:#111827}
.workflow-toolbar-button:active{transform:scale(.95)}
.workflow-toolbar-button:focus-visible{outline:2px solid #075bff;outline-offset:2px}
.workflow-toolbar-button img{display:block;width:20px;height:20px;object-fit:contain}
.workflow-toolbar-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.workflow-toolbar-primary{background:#fff;color:#222;box-shadow:0 1px 4px #0002}
.workflow-toolbar-primary:hover{background:#fff;color:#075bff}
.workflow-projects,.workflow-node-picker{position:relative;inset:auto;width:auto;padding:0;border:0;background:transparent;box-shadow:none}
.workflow-project-toggle,.workflow-node-picker-toggle{display:grid;place-items:center;width:42px;height:42px;min-height:42px;padding:0;border:0;border-radius:11px;background:transparent;color:#343a43;box-shadow:none}
.workflow-project-toggle:hover,.workflow-node-picker-toggle:hover{background:#e1e4e8;color:#111827}
.workflow-project-toggle img{width:20px;height:20px}
.workflow-project-count{position:absolute;top:-3px;right:-4px;display:grid;place-items:center;min-width:17px;height:17px;padding:0 4px;border:2px solid #f1f2f4;border-radius:999px;background:#075bff;color:#fff;font-size:9px;line-height:1}
.workflow-project-toggle-icon,.workflow-node-picker-toggle span{display:none}
.workflow-project-list-panel{position:absolute;top:auto;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(360px,calc(100vw - 28px));max-height:65vh;z-index:42}
.workflow-node-palette{position:absolute;top:auto;right:auto;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);width:min(740px,calc(100vw - 32px));max-width:calc(100vw - 32px);z-index:42}
body.dark-theme .workflow-bottom-toolbar{border-color:#3a3d42;background:#202124ed;box-shadow:0 9px 32px #0007}
body.dark-theme .workflow-toolbar-button,body.dark-theme .workflow-project-toggle,body.dark-theme .workflow-node-picker-toggle{color:#e5e7eb}
body.dark-theme .workflow-toolbar-button img,body.dark-theme .workflow-project-toggle img{filter:brightness(0) invert(.86)}
body.dark-theme .workflow-toolbar-button:hover,body.dark-theme .workflow-project-toggle:hover,body.dark-theme .workflow-node-picker-toggle:hover{background:#34373d;color:#fff}
body.dark-theme .workflow-toolbar-primary{background:#f2f3f5;color:#202124}
body.dark-theme .workflow-toolbar-primary:hover{background:#fff;color:#075bff}
body.dark-theme .workflow-project-count{border-color:#202124}
@media(max-width:760px){.workflow-bottom-toolbar{left:calc(50% + 32px);bottom:70px;gap:4px;padding:6px;border-radius:15px}.workflow-toolbar-button,.workflow-project-toggle,.workflow-node-picker-toggle{flex-basis:40px;width:40px;height:40px;min-height:40px}.workflow-project-list-panel{width:min(340px,calc(100vw - 24px))}.workflow-node-palette{width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}
/* Large workflow workspace with a movable and zoomable viewport. */
.workflow-canvas-scroll{overflow:auto;cursor:grab;background-image:none;overscroll-behavior:contain;scrollbar-width:none}
.workflow-canvas-scroll::-webkit-scrollbar{display:none}
.workflow-canvas-scroll.is-panning{cursor:grabbing;user-select:none}
.workflow-canvas{min-width:0;min-height:0;transform-origin:0 0;background-color:transparent;background-image:radial-gradient(#d8e0ec 1px,transparent 1px);background-size:18px 18px}
.workflow-canvas .workflow-edges{inset:auto;overflow:visible}
.workflow-canvas .workflow-canvas-empty{position:absolute;padding:0;white-space:nowrap;transform:translate(-50%,-50%);pointer-events:none}
body.dark-theme .workflow-canvas-scroll{background-image:none}
body.dark-theme .workflow-canvas{background-image:radial-gradient(#2b3b52 1px,transparent 1px)}
/* Keep node card dimensions after legacy compact-card overrides. */
.workflow-node.graph-node{box-sizing:border-box;flex-direction:column;align-items:stretch;gap:0;width:360px;height:360px;min-height:360px;padding:0;border-radius:16px}
.workflow-node.graph-node.node-type-image,.workflow-node.graph-node.node-type-video{width:560px}
@media(max-width:760px){.workflow-node.graph-node{width:320px;height:340px;min-height:340px}.workflow-node.graph-node.node-type-image,.workflow-node.graph-node.node-type-video{width:380px}}

/* Shared visual treatment for image upload entry points. */
.site-image-upload {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 116px !important;
  min-height: 116px !important;
  flex: 0 0 100px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #f4f5f7 !important;
  color: #718095 !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-decoration: none !important;
  transform: none !important;
  cursor: pointer !important;
}

.site-image-upload:hover {
  background: #eff1f4 !important;
  color: #62748b !important;
}

.site-image-upload .upload-badge {
  position: absolute !important;
  z-index: 2;
  top: 7px !important;
  left: 8px !important;
  margin: 0 !important;
  padding: 3px 8px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #8291a5 !important;
  font-size: 10px !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.site-image-upload .upload-plus {
  display: block !important;
  margin: 0 !important;
  color: #a6b1bf !important;
  font-size: 31px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
}

.site-image-upload .upload-label {
  display: block !important;
  max-width: calc(100% - 12px);
  margin: 0 !important;
  color: inherit !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
  white-space: normal !important;
}

.site-image-upload input[type="file"] {
  display: none !important;
}

/* Keep the chat composer compact while matching the shared card proportions. */
.reference-upload-add.site-image-upload {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  height: 68px !important;
  min-height: 68px !important;
  flex-basis: 58px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
}

.reference-upload-add.site-image-upload .upload-badge {
  top: 5px !important;
  left: 6px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
}

.reference-upload-add.site-image-upload .upload-plus {
  font-size: 22px !important;
}

.reference-upload-add.site-image-upload .upload-label {
  font-size: 10px !important;
}

.composer-upload.site-image-upload {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 116px !important;
  min-height: 116px !important;
  flex-basis: 100px !important;
}

.composer-upload.site-image-upload img.preview {
  z-index: 1;
  transform: none !important;
}

.detail-upload-add.site-image-upload {
  width: 100px !important;
  min-width: 100px !important;
  max-width: 100px !important;
  height: 116px !important;
  min-height: 116px !important;
  flex-basis: 100px !important;
  margin: 3px 0 0 7px;
}

.asset-tile.site-image-upload .asset-limit {
  color: #8291a5 !important;
  font-size: 10px !important;
}

.asset-tile.site-image-upload .tile-name {
  z-index: 2;
}

.asset-grid:has(.site-image-upload) .site-image-upload {
  margin: 0;
}

.material-library.source-menu {
  width: min(300px, calc(100vw - 32px));
  height: auto;
  max-height: none;
  padding: 8px;
  border-radius: 18px;
}

.reference-source-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.reference-source-options button {
  min-width: 0;
  min-height: 62px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #e8ebf0;
  border-radius: 14px;
  background: #fff;
  color: #263347;
  cursor: pointer;
}

.reference-source-options button:hover {
  border-color: #b9d2ff;
  background: #f5f8ff;
}

.reference-source-options button.active,
.reference-source-options button[aria-pressed="true"] {
  border-color: #075bea;
  background: #075bea;
  color: #fff;
  box-shadow: 0 4px 12px #075bea30;
}

.reference-source-options img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.reference-source-options strong {
  font-size: 12px;
}

.material-library-back {
  width: 26px;
  height: 28px;
  flex: 0 0 26px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: #f2f4f7;
  color: #69778a;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.reference-source-empty {
  padding: 24px 14px;
  border-radius: 13px;
  background: #f5f6f8;
  color: #7e8999;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.works-reference-grid .material-library-card {
  cursor: pointer;
}

.works-reference-grid .material-library-card > span {
  opacity: 1;
}
.works-reference-grid .material-library-card video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 92px;
  object-fit: cover;
  border-radius: 11px;
  background: #17191d;
}
.works-reference-grid .work-audio-icon {
  min-height: 92px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: #edf2fb;
  color: #526985;
  font-size: 32px;
}
.official-media-grid .official-media-card {
  display: flex;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  flex-direction: column;
  gap: 5px;
  overflow: hidden;
  padding: 7px;
  border: 1px solid #e8e9ef;
  border-radius: 13px;
  background: #f7f8fa;
}
.official-video-preview { position: relative; display: block; min-height: 82px; flex: 1 1 auto; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 9px; background: #111827; }
.official-media-card video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
  background: #111827;
}
.official-media-card strong,
.official-media-card small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.official-media-card strong { font-size: 11px; }
.official-media-card small { color: #8290a3; font-size: 9px; }
.official-media-card button {
  min-height: 28px;
  border: 0;
  border-radius: 8px;
  background: #075bea;
  color: #fff;
  font-size: 11px;
  cursor: pointer;
}
/* Compact audio tile: play, name, add. One accent circle keeps it light. */
.official-media-grid .official-audio-card {
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  height: 100%;
  align-self: stretch;
  padding: 10px 8px;
  aspect-ratio: auto;
  background: #fff;
}
.official-audio-play {
  position: relative;
  display: grid;
  width: 40px;
  min-height: 0 !important;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50% !important;
  background: var(--audio-accent, #3478c8) !important;
  color: #fff !important;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease;
}
.official-audio-play:hover { transform: translateY(-1px); box-shadow: 0 6px 14px color-mix(in srgb, var(--audio-accent, #3478c8) 28%, transparent); }
.official-audio-play .work-audio-icon {
  display: grid;
  width: auto;
  min-height: 0;
  height: auto;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 19px;
  line-height: 1;
  box-shadow: none;
}
.official-audio-play-state { display: none; }
.official-audio-card.is-playing .official-audio-play .work-audio-icon { animation: official-audio-pulse 1.2s ease-in-out infinite; }
@keyframes official-audio-pulse { 50% { transform: scale(.88); } }
.official-media-grid .official-audio-card .official-audio-name {
  display: -webkit-box;
  width: 100%;
  flex: 0 0 auto;
  min-height: 2.5em;
  color: #17243a;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  overflow: hidden;
  overflow-wrap: anywhere;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.official-media-grid .official-audio-card small { max-width: 100%; color: #8290a3; font-size: 10px; text-align: center; }
.official-media-grid .official-audio-card > button[data-material-media-url] {
  width: 100%;
  min-height: 28px;
  margin-top: auto;
  border: 1px solid #d8e4f7;
  border-radius: 8px;
  background: #f2f7ff;
  color: #075bea;
  font-size: 12px;
  font-weight: 600;
}
.official-media-grid .official-audio-card > button[data-material-media-url]:hover { background: #e4efff; }
.official-audio-card audio[hidden] { display: none; }
.asset-card video,
.asset-card .asset-audio-preview {
  display: grid;
  width: 100%;
  aspect-ratio: 1 / 1;
  place-items: center;
  object-fit: contain;
  background: #eef2f7;
  color: #62748b;
  font-size: 38px;
}
.asset-card video {
  background: #111827;
}

@media (max-width: 760px) {
  .site-image-upload:not(.reference-upload-add) {
    width: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
    height: 102px !important;
    min-height: 102px !important;
    flex-basis: 88px !important;
  }
}
/* Empty upload cards use a dashed outline across image, video and audio inputs. */
.site-image-upload{border:1px dashed #d5dce7!important}.site-image-upload:has(img.preview),.site-image-upload:has(img.preview-image),.site-image-upload.has-upload{border-style:solid!important;border-color:#d5dce7!important}.site-image-upload:hover{border-color:#a9c6ff!important}.style-guide-upload-examples{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}.style-guide-upload{box-sizing:border-box;border:1px dashed #d5dce7;background:#f4f5f7}.asset-tile{border:1px dashed #d5dce7!important}.media-reference-tile.has-media{border-style:solid!important;border-color:#cfe4c0!important}


.reference-source-options.has-online-link { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.video-link-row.is-link-entry { outline: 2px solid #075bea; outline-offset: 2px; border-radius: 14px; }
.video-link-row[hidden]{display:none!important}
.video-link-row.online-video-link-overlay{position:fixed;z-index:1200;left:50%;top:38%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(520px,calc(100vw - 32px));margin:0;padding:9px 42px 9px 10px;border:1px solid #dbe5f3;border-radius:15px;background:#fff;box-shadow:0 18px 60px #15243c38}
.video-link-row.online-video-link-overlay input{height:36px;padding:0 8px;border:0;background:transparent;font-size:12px}
.video-link-row.online-video-link-overlay select{height:34px;padding:0 8px;border:1px solid #e4eaf2;border-radius:9px;background:#fff;font-size:12px}
.video-link-row.online-video-link-overlay [data-add-media]{height:34px;flex:none;padding:0 14px;border-radius:10px}
.video-link-row.online-video-link-overlay .video-link-close{position:absolute;right:8px;top:50%;width:27px;height:27px;padding:0;transform:translateY(-50%);border:0;border-radius:50%;background:#f1f4f8;color:#64748b;font-size:20px;line-height:1}
body.dark-theme .video-link-row.online-video-link-overlay{background:#1a2638;border-color:#35465d;box-shadow:0 18px 60px #0009}
body.dark-theme .video-link-row.online-video-link-overlay select{background:#111c2c;color:#e5edf8;border-color:#35465d}
body.dark-theme .video-link-row.online-video-link-overlay .video-link-close{background:#26364d;color:#c4d1e2}
[data-media-status]:empty{display:none}

.official-video-cover { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; background: #111827; }
.official-video-source { position: absolute !important; width: 1px !important; height: 1px !important; opacity: 0; pointer-events: none; }

/* Deep navy night theme, applied across every workspace page and dialog. */
body.dark-theme{color-scheme:dark;--ink:#e5edf8;--muted:#9baac0;--line:#2d3b50;--soft:#172234;--shadow:0 18px 48px rgba(0,0,0,.28);background:#101827;color:#e5edf8}
body.dark-theme main,body.dark-theme .page{background:#101827;color:#e5edf8}
body.dark-theme .home-page{background:radial-gradient(ellipse 85% 65% at 50% 40%,#21334c 0%,#17263b 48%,#101827 100%)}
body.dark-theme .sidebar,body.dark-theme .side-bottom,body.dark-theme .topbar,body.dark-theme .generate-header,body.dark-theme .results-toolbar,body.dark-theme .video-panel,body.dark-theme .results-area,body.dark-theme .detail-assets,body.dark-theme .detail-settings,body.dark-theme .detail-output,body.dark-theme .admin-sidebar,body.dark-theme .admin-content,body.dark-theme .image-tools-panel,body.dark-theme .feature-guide,body.dark-theme .image-composer,body.dark-theme .prompt-card,body.dark-theme .composer-content,body.dark-theme .composer-toolbar,body.dark-theme .material-library,body.dark-theme .video-card,body.dark-theme .task-card,body.dark-theme .detail-workbench,body.dark-theme .detail-work-item,body.dark-theme .detail-job,body.dark-theme .agents-catalog,body.dark-theme .agent-chat,body.dark-theme .agent-message,body.dark-theme .agent-composer,body.dark-theme .works-empty,body.dark-theme .asset-card,body.dark-theme .work-row,body.dark-theme .panel-section,body.dark-theme .prompt-card,body.dark-theme .admin-panel,body.dark-theme .admin-card,body.dark-theme .modal,body.dark-theme .dialog,body.dark-theme .popover,body.dark-theme .dropdown,body.dark-theme .generation-popover,body.dark-theme .feature-popover,body.dark-theme .layout-menu,body.dark-theme .nav-tools-list,body.dark-theme .nav-tools-preview,body.dark-theme .template-recommend,body.dark-theme .case-card,body.dark-theme .composer-preset,body.dark-theme .composer-main,body.dark-theme .detail-recognition-result,body.dark-theme .task-thumb,body.dark-theme .empty-icon,body.dark-theme .account-modal,body.dark-theme .account-card,body.dark-theme .auth-card,body.dark-theme .admin-users-card,body.dark-theme .admin-feature-grid article,body.dark-theme .contact-qr,body.dark-theme .contact-hours,body.dark-theme .agent-active-icon,body.dark-theme .agent-welcome-art,body.dark-theme .placeholder-card,body.dark-theme .skill-card,body.dark-theme .skill-panel,body.dark-theme .style-guide-section,body.dark-theme .style-guide-card,body.dark-theme .upload-tile,body.dark-theme .asset-tile{background-color:#182438;color:#dce6f3;border-color:#2b3b52}
body.dark-theme .topbar{background:rgba(16,24,39,.96);border-color:#253248}
body.dark-theme .topbar-brand{color:#e5edf8}
body.dark-theme .sidebar{background:#121d2d;border-color:#29374a}
body.dark-theme .side-bottom,body.dark-theme .generate-header,body.dark-theme .results-toolbar{border-color:#29374a}
body.dark-theme .nav-item{color:#c2cee0}
body.dark-theme .nav-item.active,body.dark-theme .nav-item:hover{background:#203a60;color:#f3f7ff}
body.dark-theme .top-pill,body.dark-theme .top-home,body.dark-theme .settings,body.dark-theme .template-recommend,body.dark-theme .option-card,body.dark-theme .choice-card,body.dark-theme .video-step,body.dark-theme .video-segment button,body.dark-theme .result-filters button,body.dark-theme .layout-control-wrap>button,body.dark-theme .layout-menu button,body.dark-theme .material-library-tabs,body.dark-theme .material-library-filter span,body.dark-theme .detail-controls label,body.dark-theme .detail-control-select,body.dark-theme .detail-plan-tabs button,body.dark-theme .result-toolbar button,body.dark-theme .filter-chip,body.dark-theme .works-tabs button,body.dark-theme .admin-tabs button,body.dark-theme .admin-nav button,body.dark-theme .admin-menu button,body.dark-theme .reference-source-options button{background:#202d41;color:#dce6f3;border-color:#34455d;box-shadow:none}
body.dark-theme .top-pill.coral{background:#075bea;color:#fff;border-color:#075bea}
body.dark-theme .top-pill.recharge{background:#ff7d1b;color:#fff;border-color:#ff7d1b}
body.dark-theme .top-pill.partner,body.dark-theme .top-pill.admin-mode-toggle,body.dark-theme .top-home.active{background:#0759ed;color:#fff;border-color:#0759ed}
body.dark-theme .top-pill.points,body.dark-theme .top-pill.skills-download{background:#1a3151;color:#a9ccff;border-color:#35527a}
body.dark-theme .top-pill.tutorial{background:#202d41;color:#dce6f3;border-color:#34455d}
body.dark-theme .top-pill img,body.dark-theme .nav-icon img,body.dark-theme .settings img{filter:brightness(0) invert(.88)}
body.dark-theme .top-pill.coral img,body.dark-theme .top-pill.recharge img,body.dark-theme .top-pill.partner img,body.dark-theme .top-home.active img{filter:brightness(0) invert(1)}
body.dark-theme .switch-function,body.dark-theme .small-action,body.dark-theme .asset-button,body.dark-theme .detail-action,body.dark-theme .video-function-toolbar>button,body.dark-theme .material-library-back,body.dark-theme .material-library-close{background:#202d41;color:#dce6f3;border-color:#34455d}
/* The phone mockups keep their own light art direction; never recolour their text. */
body.dark-theme :is(h1,h2,h3,h4,h5,h6,strong,b,label,.page-label,.results-title,.video-card-heading,.admin-sidebar,.admin-panel-title,.detail-heading,.field-label,.agent-name,.skill-title):not(.design-phone-screen *){color:#e7effb}
body.dark-theme :is(p,small,.muted,.field-hint,.asset-limit,.video-card-heading p,.detail-asset-heading small,.detail-empty p,.empty-results p,.task-card small,.video-inline-status,.admin-hint,.help-text):not(.design-phone-screen *){color:#9baac0}
body.dark-theme input,body.dark-theme textarea,body.dark-theme select,body.dark-theme .prompt-editor,body.dark-theme .video-prompt,body.dark-theme .video-field input,body.dark-theme .video-field select,body.dark-theme .video-field textarea,body.dark-theme .video-select,body.dark-theme .extra-prompt>div,body.dark-theme .extra-prompt input,body.dark-theme .composer-preset kbd,body.dark-theme .style-guide-fields input,body.dark-theme .style-guide-fields select,body.dark-theme .style-guide-fields textarea,body.dark-theme .video-link-row,body.dark-theme .video-link-row input,body.dark-theme .detail-settings textarea,body.dark-theme .detail-recognition-result textarea,body.dark-theme .auth-fields input{background:#111c2c;color:#e5edf8;border-color:#35465d}
body.dark-theme input::placeholder,body.dark-theme textarea::placeholder,body.dark-theme .prompt-editor:empty:before{color:#71839d}
body.dark-theme .video-canvas-select{background:#111c2c;border-color:#35465d}
body.dark-theme .video-canvas-select .ratio-icon{background:#26364c}
body.dark-theme .video-canvas-select .ratio-icon i{border-color:#b8c9df}
body.dark-theme .material-library{background:linear-gradient(145deg,#1a273b,#131e2e);color:#dce6f3}
body.dark-theme .material-library-mark,body.dark-theme .asset-tile,body.dark-theme .reference-tile,body.dark-theme .upload-video,body.dark-theme .empty-icon,body.dark-theme .task-thumb,body.dark-theme .detail-upload-add{background:#202d41;color:#a9bbd2}
body.dark-theme .site-image-upload{background:#202d41!important;color:#a9bbd2!important;border-color:#34455d!important}
body.dark-theme .site-image-upload .upload-badge{background:#2b3b52!important;color:#bfcee1!important}
body.dark-theme .site-image-upload .upload-plus{color:#a9bbd2!important}
body.dark-theme .material-library-card,body.dark-theme .image-result-card,body.dark-theme .detail-work-thumb{background:#101827;border-color:#34445a}
body.dark-theme .material-library-tabs button.active,body.dark-theme .layout-menu button.selected,body.dark-theme .detail-mode.selected,body.dark-theme .type-chip.selected,body.dark-theme .video-segment button.selected,body.dark-theme .works-tabs button.selected,body.dark-theme .detail-results-toolbar button.selected,body.dark-theme .choice-card.selected,body.dark-theme .video-step.active,body.dark-theme .agent-category.active,body.dark-theme .agent-option.active,body.dark-theme .admin-tabs button.selected{background:#203b63;color:#c4dcff;border-color:#3c6398}
body.dark-theme .generate-video,body.dark-theme .video-submit-wrap .generate-video{background:#33445d;color:#b8c7da}
body.dark-theme .generate-video.enabled,body.dark-theme .portal-primary,body.dark-theme .submit-arrow.ready,body.dark-theme #homeSubmit.ready,body.dark-theme #generateSubmit.ready,body.dark-theme .auth-submit,body.dark-theme .detail-output>button:not(:disabled),body.dark-theme .detail-empty button,body.dark-theme .admin-action.primary{background:#075bea;border-color:#075bea;color:#fff}
body.dark-theme .work-status.succeeded,body.dark-theme .task-status{background:#204332;color:#9ae6b4}
body.dark-theme .work-status.failed,body.dark-theme .auth-error,body.dark-theme .task-error{color:#ff9e91}
body.dark-theme .notice{border-color:#101827}
body.dark-theme .theme-toggle{width:38px;min-width:38px;padding:0;justify-content:center;color:#f6c96b}
.theme-toggle svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .theme-moon{display:none}
body.dark-theme .theme-toggle .theme-sun{display:none}
body.dark-theme .theme-toggle .theme-moon{display:block;color:#b9d7ff}
body.dark-theme .generate-tabs button,body.dark-theme .layout-filter button,body.dark-theme .composer-toolbar .select-control,body.dark-theme .composer-options .option-card,body.dark-theme .composer-submit button,body.dark-theme .expand-btn,body.dark-theme .shortcut,body.dark-theme .text-link,body.dark-theme .tool-list button,body.dark-theme .case-card,body.dark-theme .agent-starter-prompts button,body.dark-theme .agents-history,body.dark-theme .catalog-search,body.dark-theme .style-guide-fields button,body.dark-theme .detail-counts button,body.dark-theme .detail-modes button,body.dark-theme .detail-plan-tabs button,body.dark-theme .result-filter-tabs button,body.dark-theme .works-toolbar button{background:#202d41;color:#dce6f3;border-color:#34455d}
body.dark-theme .image-record-filter select{background:#202d41;color:#dce6f3;border-color:#34455d}
body.dark-theme .generate-tabs button.active,body.dark-theme .generate-tabs button[aria-selected="true"],body.dark-theme .layout-filter .filter-btn,body.dark-theme .generate-header .filter-btn{background:#075bea;color:#fff;border-color:#075bea}
body.dark-theme .layout-filter small,body.dark-theme .composer-submit .remaining,body.dark-theme .composer-preset,body.dark-theme .case-card small,body.dark-theme .tool-group .group-title{color:#9baac0}
body.dark-theme .submit-arrow,body.dark-theme #generateSubmit{background:#29374a;color:#c4d1e2;border-color:#34455d}
body.dark-theme .submit-arrow.ready,body.dark-theme #generateSubmit.ready{background:#075bea;color:#fff;border-color:#075bea}
body.dark-theme .asset-grid:has(.site-image-upload) .site-image-upload{background:#202d41!important;color:#a9bbd2!important}
body.dark-theme .site-image-upload:hover{background:#273850!important;color:#dce6f3!important}
body.dark-theme .layout-control-wrap>button{background:#202d41!important;color:#dce6f3!important;border-color:#34455d!important}
body.dark-theme .admin-page{background:#101827}
body.dark-theme .admin-side-link.selected,body.dark-theme .admin-side-link.active{background:#203b63;color:#c4dcff;border-color:#3c6398}
body.dark-theme .admin-side-link,body.dark-theme .admin-back{color:#b5c4d8}
body.dark-theme .admin-users-table th{background:#202d41;color:#dce6f3;border-color:#34455d}
body.dark-theme .admin-users-table td{background:#182438;color:#bac8da;border-color:#34455d}
body.dark-theme .admin-users-table tr:hover td{background:#202d41}
body.dark-theme .admin-users-table td :is(span,strong,small,div){color:#bac8da}
body.dark-theme .admin-users-table .role-tag,body.dark-theme .admin-users-table .status-tag,body.dark-theme .admin-users-table .agent-count{background:#26374e;color:#c5d6ec}
.home-page{background-size:150% 150%;animation:portalGradient 18s ease-in-out infinite alternate}
.home-portal-art:before{animation:portalGlow 8s ease-in-out infinite alternate}
.home-portal-art i{animation:portalRays 6s ease-in-out infinite alternate}
.home-portal-art i:nth-of-type(2n){animation-delay:-2.4s}
.home-portal-art i:nth-of-type(3n){animation-delay:-4.1s}
.home-portal-art span{animation:portalCodeFloat 7s ease-in-out infinite alternate}
.home-portal-art span:nth-child(2n){animation-delay:-3s}
body.dark-theme .home-page{background:#070d1b;animation:none}
body.dark-theme .home-portal-art{display:none}
body.dark-theme .portal-brand,body.dark-theme .home-portal h1{color:#e7effb}
body.dark-theme .portal-intro{color:#a9bbd3}
body.dark-theme .portal-footnote{color:#91a8c7}
body.dark-theme .contact-qr span{color:#dce6f3}
body.dark-theme .contact-qr b{color:#bdcce0}
body.dark-theme .contact-qr small{color:#91a8c7}
@media(max-width:1040px){.top-actions .theme-toggle{display:grid;width:34px;min-width:34px;padding:0}}

/* Dark theme coverage for controls that define their own light surfaces. */
body.dark-theme .detail-counts,
body.dark-theme .detail-counts label span,
body.dark-theme .detail-controls label,
body.dark-theme .detail-plan-group,
body.dark-theme .detail-plan-tabs button,
body.dark-theme .detail-total-card,
body.dark-theme .detail-long-image-footer,
body.dark-theme .detail-long-image-thumbnail,
body.dark-theme .detail-long-image-status {
  background-color: #152238;
  border-color: #2d3b50;
  color: #dce6f3;
}
body.dark-theme .detail-counts label,
body.dark-theme .detail-counts label small,
body.dark-theme .detail-plan-field,
body.dark-theme .detail-plan-field > span,
body.dark-theme .detail-plan-group-head > strong,
body.dark-theme .detail-controls label,
body.dark-theme .detail-chip small,
body.dark-theme .detail-total-card > div,
body.dark-theme .detail-total-card > small {
  color: #a9bbd2;
}
body.dark-theme .detail-counts button { color: #a9ccff; }
body.dark-theme .detail-counts button:hover:not(:disabled) { background: #203b63; }
body.dark-theme .detail-counts label.is-inactive,
body.dark-theme .detail-counts label.is-inactive span { color: #8293aa; background: #19273b; }
body.dark-theme .detail-plan-tabs button { background: #202d41; color: #c2cee0; }
body.dark-theme .detail-plan-tabs button.selected { background: #075bea; border-color: #075bea; color: #fff; }
body.dark-theme .detail-plan-field textarea,
body.dark-theme .detail-plan-panel textarea { background: #111c2c; color: #e5edf8; border-color: #35465d; }
body.dark-theme .detail-plan-field textarea:focus { border-color: #4e83cc; outline-color: #203b63; }
body.dark-theme .detail-long-image-footer { border-top-color: #2d3b50; }
body.dark-theme .detail-output-summary #detailGenerate:disabled { background: #26364c; color: #8293aa; }
body.dark-theme .detail-upload.has-image b { background: #101827dc; color: #e5edf8; }
body.dark-theme .detail-mode,
body.dark-theme .detail-job,
body.dark-theme .detail-work-item,
body.dark-theme .detail-plan-field textarea { background-color: #182438; border-color: #2b3b52; }

body.dark-theme .admin-user-create,
body.dark-theme .admin-agent-form { background: #111c2c; border-color: #2d3b50; }
body.dark-theme .admin-user-create label,
body.dark-theme .admin-user-create-actions small,
body.dark-theme .admin-agent-form input { color: #a9bbd2; }
body.dark-theme .admin-role-badge { background: #26374e; color: #c5d6ec; }
body.dark-theme .admin-role-badge.admin { background: #203b63; color: #c4dcff; }
body.dark-theme .admin-role-badge.disabled { background: #482b32; color: #ffb2a8; }
body.dark-theme .admin-row-actions button { background: #26374e; color: #c5d6ec; border-color: #34455d; }
body.dark-theme .admin-row-actions button.points { background: #493c24; color: #f1c875; }
body.dark-theme .admin-row-actions button.agents { background: #1c3e4e; color: #9bdcf3; }
body.dark-theme .admin-row-actions button.features { background: #392d4e; color: #d3b6ff; }
body.dark-theme .admin-row-actions button.password { background: #49352b; color: #ffc39c; }
body.dark-theme .admin-row-actions button.status { background: #1f4438; color: #9ae6b4; }
body.dark-theme .admin-row-actions button.status[data-value="true"] { background: #482b32; color: #ffb2a8; }
body.dark-theme .admin-count-link { background: #203b63; color: #c4dcff; }
body.dark-theme .admin-side-link img,
body.dark-theme .admin-back img,
body.dark-theme .admin-bottom-note img { filter: brightness(0) invert(.78); }
body.dark-theme .admin-allocation-header,
body.dark-theme .admin-allocation-dialog footer { border-color: #2d3b50; }
body.dark-theme .admin-allocation-close,
body.dark-theme .admin-allocation-tabs button,
body.dark-theme .admin-allocation-option,
body.dark-theme .admin-feature-grid article > b,
body.dark-theme .admin-capability-list i { background: #202d41; color: #c5d6ec; border-color: #34455d; }
body.dark-theme .admin-allocation-tabs button.selected,
body.dark-theme .admin-allocation-option:has(input:checked) { background: #203b63; color: #c4dcff; border-color: #3c6398; }
body.dark-theme .admin-allocation-option strong,
body.dark-theme .admin-capability-list b,
body.dark-theme .admin-feature-grid h3 { color: #dce6f3; }
body.dark-theme .admin-allocation-option small,
body.dark-theme .admin-allocation-explainer,
body.dark-theme .admin-allocation-empty,
body.dark-theme .admin-allocation-dialog footer { color: #9baac0; }
body.dark-theme .admin-allocation-option input { accent-color: #4b91ff; }
body.dark-theme .admin-feature-grid article > b,
body.dark-theme .admin-capability-list i.ready { background: #203b63; color: #c4dcff; }

body.dark-theme .style-guide-tabs,
body.dark-theme .style-guide-segment,
body.dark-theme .style-guide-modal,
body.dark-theme .style-guide-empty,
body.dark-theme .style-icon-btn { background: #152238; border-color: #2d3b50; color: #dce6f3; }
body.dark-theme .style-guide-tabs button,
body.dark-theme .style-guide-segment button { color: #a9bbd2; }
body.dark-theme .style-guide-tabs button.active,
body.dark-theme .style-guide-segment button.active { background: #203b63; color: #c4dcff; }
body.dark-theme .style-guide-modal > p,
body.dark-theme .style-guide-empty small { color: #9baac0; }
body.dark-theme .style-guide-modal > div button { color: #b5c4d8; }
body.dark-theme .style-guide-progress > span { background: #26364c; }
body.dark-theme .style-chat p { background: #202d41; color: #c5d6ec; }
body.dark-theme .style-chat p.reply { background: #203b63; color: #c4dcff; }
body.dark-theme .style-message.info { background: #172d4b; border-color: #2b4c79; color: #b9d7ff; }
body.dark-theme .style-message.warning { background: #382f1d; border-color: #61502b; color: #f3d38a; }
body.dark-theme .style-message.error { background: #3c252b; border-color: #6c3942; color: #ffb2a8; }
body.dark-theme .style-guide-table th { background: #202d41; color: #a9bbd2; }
body.dark-theme .style-guide-table td { color: #c5d6ec; border-color: #2d3b50; }
body.dark-theme .style-guide-table td button { color: #8ab7ff; }
body.dark-theme .admin-mode-toggle { background: #0759ed !important; color: #fff !important; border-color: #0759ed !important; }
body.dark-theme .admin-action:not(.primary),
body.dark-theme .admin-row-actions button:disabled { background: #202d41; color: #c5d6ec; border-color: #34455d; }

/* Menus and selection controls across the image, video, and works workspaces. */
body.dark-theme .image-tool,
body.dark-theme .composer-preset > button,
body.dark-theme .slot-material-button,
body.dark-theme .reference-upload-material,
body.dark-theme .reference-mention-option,
body.dark-theme .video-tool-menu,
body.dark-theme .video-tool-item,
body.dark-theme .video-guide,
body.dark-theme .asset-filter-group,
body.dark-theme .asset-filter-group button,
body.dark-theme .asset-toolbar select,
body.dark-theme .asset-toolbar > button,
body.dark-theme .asset-batch-bar,
body.dark-theme .asset-batch-bar button,
body.dark-theme .asset-card button,
body.dark-theme .admin-tabs,
body.dark-theme .admin-tabs button {
  background: #202d41;
  color: #dce6f3;
  border-color: #34455d;
}
body.dark-theme .image-tool:hover,
body.dark-theme .image-tool.active,
body.dark-theme .feature-popover > button.selected,
body.dark-theme .generation-popover > button.selected,
body.dark-theme .ratio-choice-grid button.selected,
body.dark-theme .resolution-choice-grid button.selected,
body.dark-theme .video-tool-item:hover,
body.dark-theme .video-tool-item.selected,
body.dark-theme .asset-filter-group button.selected,
body.dark-theme .asset-toolbar > button.selected,
body.dark-theme .admin-tabs button.selected {
  background: #203b63;
  border-color: #3c6398;
  color: #c4dcff;
}
body.dark-theme .image-tool-icon,
body.dark-theme .video-tool-item img,
body.dark-theme .video-step b,
body.dark-theme .composer-preset,
body.dark-theme .composer-preset kbd,
body.dark-theme .generation-popover > button,
body.dark-theme .generation-popover small,
body.dark-theme .ratio-choice-grid button,
body.dark-theme .resolution-choice-grid button,
body.dark-theme .reference-upload-add,
body.dark-theme .reference-upload-material,
body.dark-theme .reference-mention-menu,
body.dark-theme .reference-mention-option img,
body.dark-theme .prompt-image-token,
body.dark-theme .prompt-style-token,
body.dark-theme .asset-batch-bar button,
body.dark-theme .asset-batch-toggle.selected {
  background: #19273b;
  border-color: #34455d;
  color: #c5d6ec;
}
body.dark-theme .video-tool-item img { background: transparent; filter: brightness(0) invert(.82); }
body.dark-theme .image-tool-icon img { filter: brightness(0) invert(.82); }
body.dark-theme .video-tool-item small,
body.dark-theme .video-menu-heading small,
body.dark-theme .video-segment small,
body.dark-theme .asset-toolbar .asset-batch-toggle,
body.dark-theme .asset-batch-bar #worksSelectionCount { color: #9baac0; }
body.dark-theme .video-tool-menu,
body.dark-theme .video-guide,
body.dark-theme .reference-mention-menu,
body.dark-theme .generation-popover { border-color: #34455d; }
body.dark-theme .video-function-toolbar .switch-function,
body.dark-theme .video-function-toolbar > button,
body.dark-theme .video-step.active b { background: #203b63; color: #c4dcff; border-color: #3c6398; }
body.dark-theme .video-tool-item.selected,
body.dark-theme .choice-card.selected,
body.dark-theme .video-segment button.selected { border-color: #3c6398; }
body.dark-theme .asset-tile .tile-name { background: #101827df; color: #e5edf8; }
body.dark-theme .media-reference-tile.has-media { background: #1f3a34; outline-color: #315b4c; }
body.dark-theme .reference-upload-add:hover,
body.dark-theme .reference-mention-option:hover,
body.dark-theme .reference-mention-option:focus-visible { background: #203b63; border-color: #3c6398; }
body.dark-theme .reference-source-options img,
body.dark-theme .material-library-back img,
body.dark-theme .composer-preset > button img,
body.dark-theme .slot-material-button img { filter: brightness(0) invert(.84); }
body.dark-theme .reference-source-panel:not([hidden]) { background: #152238; border-color: #34455d; color: #dce6f3; }
body.dark-theme .style-library-categories button{background:#101a2a;border-color:#34455d;color:#c5d2e3}
body.dark-theme .style-library-categories button.active{background:#203b63;border-color:#3c6398;color:#c4dcff}
body.dark-theme .style-library-credit{color:#9bacc4}
body.dark-theme .style-library-credit a{color:#79aaff}
body.dark-theme .style-library-attribution{color:#8295af}
body.dark-theme .official-media-card { background:#101b2b; border-color:#34455d; }
body.dark-theme .official-media-card small { color:#94a8c3; }
body.dark-theme .official-media-grid .official-audio-card { background:linear-gradient(180deg,#152238 0%,#101b2b 100%); }
body.dark-theme .official-audio-play { background:color-mix(in srgb,var(--audio-accent,#3478c8) 20%,#152238) !important; }
body.dark-theme .official-audio-play .work-audio-icon { background:var(--audio-accent,#3478c8); color:#fff; }
body.dark-theme .official-audio-play-state { border-color:#152238; background:#dce6f3; color:#152238; }
body.dark-theme .official-media-grid .official-audio-card .official-audio-name { color:#e4edf9; }
body.dark-theme .reference-source-options button.active,
body.dark-theme .reference-source-options button[aria-pressed="true"] { background: #075bea; border-color: #075bea; color: #fff; }
body.dark-theme .reference-upload-material:hover,
body.dark-theme .slot-material-button:hover { background: #203b63; color: #dce6f3; }
body.dark-theme .asset-filter-group button.selected,
body.dark-theme .asset-toolbar > button.selected { color: #c4dcff; }
body.dark-theme .work-asset-placeholder.pending,
body.dark-theme .work-asset-placeholder.demo,
body.dark-theme .work-asset-placeholder.failed { background: #202d41; color: #c5d6ec; }
body.dark-theme .work-asset-placeholder > b,
body.dark-theme .work-card-actions button,
body.dark-theme .work-select { background: #202d41; color: #dce6f3; border-color: #34455d; }
body.dark-theme .work-asset-card.is-selected { border-color: #3b82f6; }
body.dark-theme .asset-batch-bar { border-color: #34455d; }
body.dark-theme .asset-content-section>header,
body.dark-theme .asset-text-card h3,
body.dark-theme .asset-audio-card-copy strong { color: #e5edf8; }
body.dark-theme .asset-content-section>header small,
body.dark-theme .asset-text-card p,
body.dark-theme .asset-audio-card-copy span { color: #9baac0; }
body.dark-theme .asset-text-card,
body.dark-theme .asset-audio-card { background: #172438; border-color: #34455d; box-shadow: 0 2px 8px #0002; }
body.dark-theme .asset-text-card-head>span,
body.dark-theme .asset-audio-card-icon { background: #203653; color: #bdd5f5; }
body.dark-theme .asset-text-card-head button { background: #202d41; border-color: #34455d; color: #dce6f3; }
body.dark-theme .asset-text-card-head button:hover { background: #203b63; border-color: #3c6398; color: #c4dcff; }
body.dark-theme .asset-audio-card audio { color-scheme: dark; }

/* Keep the image and video feature flyout readable in the night theme. */
body.dark-theme .nav-tools-list{background:#182438;border-color:#2b3b52;color:#e5edf8;box-shadow:0 18px 48px rgba(0,0,0,.42)}
body.dark-theme .nav-tools-heading{border-color:#2b3b52;color:#e5edf8}
body.dark-theme .nav-tools-heading span{color:#9baac0}
body.dark-theme .nav-tools-item{background:#1c2a3f;border-color:#2b3b52;color:#e5edf8;opacity:1}
body.dark-theme .nav-tools-item:hover{background:#253954;border-color:#3a5272;color:#f2f7ff}
body.dark-theme .nav-tools-item.active{background:#203b63;border-color:#3c6398;color:#e7f0ff}
body.dark-theme .nav-tools-item.is-development,body.dark-theme .nav-tools-item.is-development:hover{background:#1a273b;border-color:#2b3b52;color:#d4dfed;opacity:1}
body.dark-theme .nav-tools-copy strong{color:#e5edf8}
body.dark-theme .nav-tools-copy small{color:#a9b8cd}
body.dark-theme .nav-tools-item.active .nav-tools-copy strong{color:#f3f7ff}
body.dark-theme .nav-tools-item.active .nav-tools-copy small{color:#c0d2ea}
body.dark-theme .nav-tools-icon{background:#2a3a50}
body.dark-theme .nav-tools-icon img{filter:brightness(0) invert(.88)}
body.dark-theme .nav-tools-item.is-development .nav-tools-icon{filter:none;opacity:.65}
body.dark-theme .nav-tools-item.is-development .feature-development{background:#26374e;color:#bacbe2}
body.dark-theme .nav-tools-list::-webkit-scrollbar-thumb{background:#40516a}

/* The video workspace has its own in-panel feature chooser. */
body.dark-theme #videoToolMenu{background:#182438!important;color:#e5edf8!important;border-color:#2b3b52!important;box-shadow:0 16px 45px rgba(0,0,0,.42)!important}
body.dark-theme #videoToolMenu .video-menu-heading{color:#e5edf8!important;border-color:#2b3b52!important}
body.dark-theme #videoToolMenu .video-menu-heading small{color:#9baac0!important}
body.dark-theme #videoToolMenu .video-tool-item{background:#1c2a3f!important;color:#dce6f3!important;border:1px solid #2b3b52!important;opacity:1!important}
body.dark-theme #videoToolMenu .video-tool-item:hover{background:#253954!important;border-color:#3a5272!important;color:#f2f7ff!important}
body.dark-theme #videoToolMenu .video-tool-item.selected{background:#203b63!important;border-color:#3c6398!important;color:#f3f7ff!important}
body.dark-theme #videoToolMenu .video-tool-item strong{color:#e5edf8!important}
body.dark-theme #videoToolMenu .video-tool-item small{color:#a9b8cd!important}
body.dark-theme #videoToolMenu .video-tool-item.selected small{color:#c0d2ea!important}
body.dark-theme #videoToolMenu .video-tool-item img{background:transparent!important;filter:brightness(0) invert(.82)!important}
body.dark-theme #videoToolMenu .feature-development{background:#26374e;color:#bacbe2}


body.dark-theme .admin-material-upload{background:#111c2d;border-color:#2b3b52}
body.dark-theme .admin-material-upload input,body.dark-theme .admin-material-upload select{background:#111c2d;border-color:#34465e;color:#dce6f3}
body.dark-theme .admin-material-item{background:#182438;border-color:#2b3b52}
body.dark-theme .admin-material-actions button{background:#202f45;border-color:#34465e;color:#dce6f3}
body.dark-theme .admin-material-empty{border-color:#34465e;color:#a5b5cb}
body.dark-theme .topbar{background:rgba(16,24,39,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
body.dark-theme .prompt-library-button{border-color:#344b6b;background:#1a2a41;color:#a9cbff}body.dark-theme .prompt-library-button:hover,body.dark-theme .prompt-library-button[aria-expanded="true"]{border-color:#527bb5;background:#203b63}body.dark-theme .prompt-library-popover{border-color:#34455d;background:#152238;color:#e4edf9}body.dark-theme .prompt-library-popover>header button{background:#203149;color:#c7d5e8}body.dark-theme .prompt-library-item{border-color:#34455d;background:#101b2b}body.dark-theme .prompt-library-item:hover,body.dark-theme .prompt-library-item:focus-visible{border-color:#527bb5;background:#1a2a41}body.dark-theme .prompt-library-item strong{color:#e4edf9}
body.dark-theme .material-library-upload-card,body.dark-theme .design-template-upload-card{border-color:#405671;background:#162337;color:#c6d6e9}body.dark-theme .material-library-upload-card label>span,body.dark-theme .design-template-upload-plus{color:#86a1c3}body.dark-theme .material-library-upload-card label>small,body.dark-theme .design-template-upload-card label>small{color:#91a5bd}body.dark-theme .material-library-upload-card:hover,body.dark-theme .design-template-upload-card:hover{border-color:#6ea8ff;background:#1b304b;color:#9cc3ff}

/*
 * Flex layouts for content that flows in one direction or wraps naturally.
 * Keep true two-dimensional stages, charts, and explicitly column-configured
 * result grids in their existing layout systems.
 */

/* Detail generator: three responsive panels that wrap, then stack on narrow screens. */
.detail-workbench {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}
.detail-workbench > .detail-assets {
  display: flex;
  flex: 0 1 24%;
  flex-flow: row wrap;
  align-content: flex-start;
  gap: 8px 10px;
}
.detail-workbench > .detail-assets > h2 { flex: 0 0 100%; }
.detail-workbench > .detail-assets > .detail-asset-group { flex: 1 1 45%; min-width: 0; }
.detail-workbench > .detail-settings { flex: 1 1 48%; min-width: min(100%, 360px); }
.detail-workbench > .detail-output { flex: 0 1 24%; min-width: min(100%, 220px); }

/* Agent workspace and linear workflow panels. */
.agents-workspace { display: flex; flex-flow: row wrap; align-items: stretch; }
.agents-workspace > :first-child { flex: 0 1 25%; min-width: min(100%, 240px); }
.agents-workspace > :not(:first-child) { flex: 1 1 70%; min-width: min(100%, 300px); }
.workflow-project-list,
.workflow-side-panel,
.workflow-node-settings-body,
.workflow-run-list,
.workflow-run-steps,
.detail-plan-fields { display: flex; flex-direction: column; }

/* Wrapping card collections. */
.detail-results:has(.image-result-card),
.image-results[data-layout]:has(.image-result-card),
.task-list,
.material-library-grid,
.asset-library-grid,
.work-asset-grid,
.asset-content-grid,
.asset-audio-grid,
.workflow-preview-assets,
.workflow-node-catalog,
.skills-card-grid,
.style-guide-grid,
.agent-list,
.admin-feature-grid,
.admin-allocation-list {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  align-items: stretch;
}
.detail-results:has(.image-result-card) > *,
.image-results[data-layout]:has(.image-result-card) > * { flex: 0 1 23%; min-width: min(100%, 180px); max-width: none; }
.image-results[data-layout]:has(.image-result-card) > * { max-width: none; }
.task-list > * { flex: 0 1 31%; min-width: min(100%, 220px); max-width: none; }
.material-library-grid > *,
.asset-library-grid > *,
.work-asset-grid > *,
.asset-content-grid > * { flex: 0 1 23%; min-width: min(100%, 180px); }
.asset-audio-grid > * { flex: 0 1 47%; min-width: min(100%, 240px); }
.workflow-preview-assets > * { flex: 0 1 30%; min-width: min(100%, 130px); }
.workflow-node-catalog > *,
.skills-card-grid > *,
.style-guide-grid > *,
.agent-list > *,
.admin-feature-grid > *,
.admin-allocation-list > * { flex: 1 1 23%; min-width: min(100%, 180px); }
.style-guide-grid > *:not(.style-guide-wide) { flex-basis: 47%; }
.style-guide-grid > .style-guide-wide { flex-basis: 100%; }
.skills-card-grid > * { flex-basis: 47%; }
.admin-feature-grid > * { flex-basis: 30%; }
.admin-allocation-list > * { flex-basis: 47%; }
.material-library-grid > * { height: auto; aspect-ratio: 1 / 1; }

/* The material picker is an explicit five-column grid, not a wrapping flex list. */
.material-library-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.material-library-grid > * { flex: none; min-width: 0; max-width: none; width: 100%; }

/* Reference upload tiles scale with the panel while retaining a square preview. */
.reference-media-grid > .asset-tile { flex: 0 1 calc((100% - 18px) / 3); width: auto; height: auto; min-width: 0; min-height: 0; max-width: 106px; aspect-ratio: 1 / 1; }
.detail-results:has(.image-result-card),
.image-results[data-layout]:has(.image-result-card) { gap: 22px 16px; }

/* Honor explicit result-count choices while allowing cards to reflow at smaller widths. */
.image-results[data-layout="3"] > .image-result-card { flex-basis: calc((100% - 32px) / 3); }
.image-results[data-layout="4"] > .image-result-card { flex-basis: calc((100% - 48px) / 4); }
.image-results[data-layout="5"] > .image-result-card { flex-basis: calc((100% - 64px) / 5); }
.image-results[data-layout="6"] > .image-result-card { flex-basis: calc((100% - 80px) / 6); }
.image-results[data-layout="9"] > .image-result-card { flex-basis: calc((100% - 128px) / 9); }

/* Form rows use two flexible columns and wrap cleanly on narrow screens. */
.video-fields,
.style-guide-fields,
.finance-form-grid {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
  gap: 9px 10px;
}
.video-fields > *,
.style-guide-fields > *,
.finance-form-grid > * { flex: 1 1 calc(50% - 10px); min-width: 180px; }

/* Center the small icon-only surfaces and marks consistently. */
.brand,
.nav-icon,
.avatar-mini,
.profile,
.notice,
.function-symbol,
.link-icon,
.checkbox-custom,
.case-arrow,
.nav-tools-icon,
.agent-option-icon,
.agent-active-icon,
.agent-welcome-art,
.agent-message-avatar,
.image-tool-icon,
.image-empty-icon,
.reference-source-panel > .reference-source-empty,
.material-library-mark,
.reference-upload-item > button,
.reference-upload-add,
.prompt-style-token button,
.prompt-image-token button,
.detail-job-image,
.detail-long-image-status > div > span,
.asset-audio-card-icon,
.work-asset-placeholder > b,
.work-card-actions button,
.work-select,
.workflow-project-icon,
.workflow-editor-empty > span,
.workflow-node-index,
.workflow-node-icon,
.workflow-catalog-item > span,
.workflow-project-count,
.workflow-node-thumbnail,
.workflow-node-placeholder,
.workflow-context-menu button span,
.workflow-toolbar-button,
.workflow-project-toggle,
.workflow-node-picker-toggle,
.skill-card-icon,
.roadmap-icon,
.style-guide-image {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 850px) {
  .detail-workbench { flex-direction: column; }
  .detail-workbench > .detail-assets,
  .detail-workbench > .detail-settings,
  .detail-workbench > .detail-output { flex: 1 1 auto; width: 100%; min-width: 0; }
  .agents-workspace { flex-direction: column; }
  .agents-workspace > * { flex: 1 1 auto; width: 100%; min-width: 0; }
}

@media (max-width: 900px) {
  .task-list > * { flex-basis: 47%; min-width: min(100%, 180px); }
  .admin-feature-grid > * { flex-basis: 47%; }
}

@media (max-width: 600px) {
  .task-list > * { flex-basis: 100%; min-width: 0; }
  .detail-results:has(.image-result-card) > .image-result-card,
  .image-results[data-layout]:has(.image-result-card) > .image-result-card {
    flex: 0 1 calc((100% - 12px) / 2);
    max-width: none;
  }
  .detail-results:has(.image-result-card),
  .image-results[data-layout]:has(.image-result-card) { gap: 12px; }
}

/* Adaptive generation cards use a compact fixed range on wide screens. */
.image-results[data-layout="auto"]:has(.image-result-card) > .image-result-card {
  flex: 0 1 176px;
  width: auto;
  min-width: 145px;
  max-width: 176px;
}

@media (max-width: 720px) {
  .image-results[data-layout="auto"]:has(.image-result-card) > .image-result-card {
    flex: 0 0 132px;
    width: 132px;
    min-width: 132px;
    max-width: 132px;
  }
}

/* Keep the Design workspace inside the viewport and let each workbench column
   manage its own content instead of scrolling the whole page. */
@media (min-width: 851px) {
  .detail-page.design-preview-active {
    height: 100vh;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 0;
  }
  .detail-page.design-preview-active .detail-shell {
    height: 100%;
    overflow: hidden;
  }
  .detail-page.design-preview-active #ecommerceDesignCategory {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    padding-bottom: 0;
    scrollbar-width: none;
  }
  .detail-page.design-preview-active #ecommerceDesignCategory::-webkit-scrollbar { display: none; }
  .detail-page.design-preview-active .detail-workbench {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.3fr) minmax(0, .98fr);
    gap: 0;
    /* Size to the workbench's own content instead of a viewport clamp: the old
       fixed height cut off the counts row and the control strip whenever the
       window was short or the columns were narrow. */
    height: auto;
    min-height: 0;
    max-height: calc(100vh - 120px);
    overflow: hidden;
    transform: translateX(-50%);
  }
  .detail-page.design-preview-active .detail-workbench > .detail-assets,
  .detail-page.design-preview-active .detail-workbench > .detail-settings,
  .detail-page.design-preview-active .detail-workbench > .detail-output {
    position: relative;
    inset: auto;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
  }
  .detail-page.design-preview-active .detail-workbench > .detail-assets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr);
    align-content: start;
    gap: 8px;
    padding: 12px;
  }
  .detail-page.design-preview-active .detail-workbench > .detail-assets > h2 { grid-column: 1 / -1; }
  .detail-page.design-preview-active .detail-workbench .detail-asset-group { min-width: 0; margin: 0; }
  .detail-page.design-preview-active .detail-workbench .detail-upload-control { width: 100%; max-width: 88px; }
  .detail-page.design-preview-active .detail-workbench .detail-upload-add.site-image-upload { width: 100%; }
  .detail-page.design-preview-active .detail-workbench .detail-upload-stack { max-width: 100%; }
  .detail-page.design-preview-active .detail-workbench .detail-assets p {
    grid-column: 1 / -1;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin: 2px 0 0;
  }
  .detail-page.design-preview-active .detail-workbench > .detail-settings {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
  }
  .detail-page.design-preview-active .detail-workbench > .detail-settings > h2 { flex: none; margin: 0; }
  .detail-page.design-preview-active .detail-workbench .detail-counts { flex: none; }
  .detail-page.design-preview-active .detail-workbench .detail-controls {
    flex: none;
    min-height: 0;
    max-height: none;
    height: auto;
    flex-wrap: wrap;
    overflow: visible;
    padding: 2px 0;
  }
  .detail-page.design-preview-active .detail-workbench .detail-prompt-wrap {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }
  .detail-page.design-preview-active .detail-workbench .detail-prompt-wrap > textarea {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 64px;
    max-height: none;
    margin: 0;
    overflow-y: auto;
    resize: none;
  }
  .detail-page.design-preview-active .detail-workbench .detail-prompt-actions { flex: none; margin-top: 4px; }
  .detail-page.design-preview-active .detail-workbench > .detail-output {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 12px;
  }
  .detail-page.design-preview-active .detail-workbench .detail-plan-panel {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    max-height: none;
    overflow: hidden;
  }
  .detail-page.design-preview-active .detail-workbench .detail-plan-panel > h2 { flex: none; margin: 0 0 4px; }
  .detail-page.design-preview-active .detail-workbench .detail-plan-fields {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .detail-page.design-preview-active .detail-workbench .detail-plan-group {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    padding: 7px;
  }
  .detail-page.design-preview-active .detail-workbench .detail-plan-group-head { flex: none; margin-bottom: 4px; }
  .detail-page.design-preview-active .detail-workbench .detail-plan-field { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; }
  .detail-page.design-preview-active .detail-workbench .detail-plan-field textarea {
    flex: 1 1 auto;
    width: 100%;
    height: auto;
    min-height: 42px;
    max-height: none;
    overflow-y: auto;
    resize: none;
  }
  .detail-page.design-preview-active .detail-workbench .detail-output-summary { flex: none; margin: 0; }
  .detail-page.design-preview-active .detail-workbench .detail-output-summary > button { width: 100%; height: 36px; margin: 0; }
}
@media (min-width: 1440px) {
  .detail-page.design-preview-active .detail-workbench {
    left: calc((80px + var(--design-template-width, 267px) + 100vw - var(--design-preview-width, 320px)) / 2);
    width: min(1200px, calc(100vw - var(--design-template-width, 267px) - var(--design-preview-width, 320px) - 112px));
  }
}
@media (min-width: 851px) and (max-width: 1439px) {
  .detail-page.design-preview-active .detail-workbench {
    /* Centre in the free area right of the 素材库 shelf. Centring on the
       viewport put the shelf (80px + its width) on top of the assets column. */
    left: calc((80px + var(--design-template-width, 267px) + 100vw) / 2);
    width: min(1200px, calc(100vw - var(--design-template-width, 267px) - 112px));
  }
}

/* Give generated records breathing room and fade them into adjacent work panels. */
.generate-page > #imageResults {
  padding-right: clamp(28px, 3.2vw, 52px);
  padding-left: clamp(28px, 3.2vw, 52px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 150px), transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 150px), transparent 100%);
}
.detail-page .detail-results {
  padding-right: clamp(24px, 2.6vw, 42px);
  padding-left: clamp(24px, 2.6vw, 42px);
}
@media (min-width: 851px) {
  .detail-page.design-preview-active::after {
    content: "";
    position: fixed;
    z-index: 24;
    right: 0;
    bottom: 0;
    left: 80px;
    height: 170px;
    background: linear-gradient(to bottom, transparent, #fafbfc 94%);
    pointer-events: none;
  }
}
@media (min-width: 1440px) {
  .detail-page.design-preview-active::after {
    left: calc(80px + var(--design-template-width, 267px));
    right: var(--design-preview-width, 320px);
  }
}
body.dark-theme .detail-page.design-preview-active::after {
  background: linear-gradient(to bottom, transparent, #101b2b 94%);
}
.results-area .task-list {
  box-sizing: border-box;
  padding-right: clamp(28px, 3vw, 46px);
  padding-left: clamp(28px, 3vw, 46px);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 72px, #000 100%);
}
@media (max-width: 850px) {
  .generate-page > #imageResults {
    padding-right: 20px;
    padding-left: 20px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 110px), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 110px), transparent 100%);
  }
  .detail-page .detail-results { padding-right: 18px; padding-left: 18px; }
  .results-area .task-list {
    padding-right: 20px;
    padding-left: 20px;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 100%);
  }
}

/* Apply the portable parts of the video-workbench layout patch. */
.topbar-brand { gap: 10px; }
.topbar-brand > img { width: 33px; height: 33px; }
.top-pill.skills-download > span { color: #000; }
body.dark-theme .top-pill.skills-download > span { color: #dce6f3; }

/* Shift the homepage portal down while keeping it in normal document flow. */
#homePage > .home-portal { top: 60px; }

/* Apply the latest layout-workbench adjustments for image generation and detail images. */
@media (min-width: 851px) {
  .generate-page > .image-composer-wrap {
    left: 379px;
    justify-content: center;
  }
  .detail-workbench > .detail-settings > .detail-controls {
    width: min(504.1px, 100%);
    height: 81.2px;
  }
}

.generate-page #composerUploads {
  width: 68px;
  height: 78px;
  justify-content: center;
  align-items: center;
  gap: 0;
  border-radius: 0;
}
.generate-page #composerUploads > .reference-upload-add.site-image-upload {
  width: 68px;
  min-width: 68px;
  flex-basis: 68px;
  height: 78px;
  line-height: 14.4px;
}

#detailAssetHint {
  position: relative;
  left: 43.3px;
}
#detailPrompt {
  height: 50px;
}

/* Detail-image uploads mirror the fixed-slot reference stack used by image generation. */
.detail-workbench .detail-asset-group { overflow: visible; }
.detail-workbench .detail-asset-heading { min-height: 16px; }
.detail-workbench .detail-upload-control {
  position: relative;
  display: flex;
  width: 68px;
  height: 88px;
  flex: 0 0 68px;
  flex-direction: column;
  align-items: flex-start;
  overflow: visible;
}
.detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload {
  position: absolute !important;
  z-index: 1;
  top: 0;
  left: 0;
  box-sizing: border-box !important;
  display: flex !important;
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 68px !important;
  min-height: 68px !important;
  max-height: 68px !important;
  flex: 0 0 68px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 1px dashed #c7d3e2 !important;
  border-radius: 10px !important;
  background: #f3f5f8 !important;
  cursor: pointer;
}
.detail-workbench .detail-upload-control > .detail-upload-add .upload-badge {
  top: 5px !important;
  left: 5px !important;
  padding: 2px 6px !important;
  font-size: 9px !important;
}
.detail-workbench .detail-upload-control > .detail-upload-add .upload-plus {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  margin: 0 !important;
  transform: translate(-50%, -50%);
  font-size: 23px !important;
}
.detail-workbench .detail-upload-stack {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  display: block;
  width: 68px;
  height: 68px;
  min-height: 0;
  padding: 0;
  overflow: visible;
  pointer-events: none;
}
.detail-workbench .detail-upload-item {
  position: absolute;
  top: 0;
  left: var(--detail-stack-offset, 0px);
  z-index: calc(20 - var(--stack-index, 0));
  display: block;
  box-sizing: border-box;
  width: 68px;
  height: 68px;
  margin: 0;
  overflow: visible;
  border: 1px solid #d8e0ea;
  border-radius: 10px;
  background: #f3f5f8;
  box-shadow: 0 2px 8px #17243a20;
  transition: left .2s ease;
  pointer-events: auto;
}
.detail-workbench .detail-upload-item:first-child { z-index: 30; }
.detail-workbench .detail-upload-item img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 9px;
  object-fit: cover;
}
.detail-workbench .detail-upload-index {
  display: none;
  top: 4px;
  bottom: auto;
  left: 4px;
  right: auto;
  background: #17243acc;
  font-size: 9px;
}
.detail-workbench .detail-upload-index:not(:empty) { display: block; }
.detail-workbench .detail-upload-item button {
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: 1px solid #ffffffd9;
  opacity: 0;
  pointer-events: none;
  cursor: pointer;
}
.detail-workbench .detail-upload-caption {
  position: absolute;
  top: 72px;
  left: 0;
  display: block;
  width: 68px;
  height: 14px;
  color: #71829a;
  font-size: 11px;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
}
.detail-workbench .detail-upload-control:hover,
.detail-workbench .detail-upload-control:focus-within { z-index: 40; }
.detail-workbench .detail-upload-control:hover .detail-upload-item,
.detail-workbench .detail-upload-control:focus-within .detail-upload-item {
  left: calc(68px + var(--stack-index, 0) * 72px);
}
.detail-workbench .detail-upload-control:hover .detail-upload-item button,
.detail-workbench .detail-upload-control:focus-within .detail-upload-item button {
  opacity: 1;
  pointer-events: auto;
}
/* Keep the empty add slot clickable; only actual thumbnail/remove controls receive pointer events. */
.detail-workbench .detail-upload-stack { pointer-events: none !important; }
.detail-workbench .detail-upload-item,
.detail-workbench .detail-upload-item button { pointer-events: auto; }
.detail-workbench .detail-upload-control > .detail-upload-add:hover {
  border-color: #8abaf2 !important;
  background: #eff5ff !important;
}
@media (max-width: 850px) {
  .detail-workbench .detail-upload-control { width: 68px; height: 88px; flex-basis: 68px; }
}
.detail-workbench > .detail-assets {
  position: relative;
  z-index: 2;
  left: .01px;
  top: 10.4px;
  row-gap: 8px;
  column-gap: 10px;
  padding-top: 12px;
  overflow: visible;
}
.detail-workbench > .detail-settings,
.detail-workbench > .detail-output { position: relative; z-index: 1; }
.detail-workbench > .detail-output {
  position: relative;
  top: 10.4px;
  height: 250px;
}

#detailCountMainGroup > span,
#detailCountPageGroup > span {
  width: 104px;
  min-height: 27px;
  box-sizing: border-box;
  justify-content: space-between;
}

.detail-settings > #detailPrompt {
  width: 100%;
  height: 150px;
  min-height: 120px;
  margin-bottom: 0;
  position: static;
}

@media (min-width: 851px) {
  .detail-workbench {
    height: min(250px, 38vh);
    max-height: min(250px, 38vh);
  }
  .detail-workbench > .detail-assets,
  .detail-workbench > .detail-settings {
    height: 100%;
    min-height: 0;
  }
  #detailCounts { justify-content: center; }
}

/* Image-generation workspace: preserve the user's left-aligned composer while
   keeping its width fluid and its controls inside the viewport. */
@media (min-width: 851px) {
  .topbar-brand { margin-left: clamp(0px, 7vw, 100px); }
  .generate-page > #imageResults { inset: 60px 0 0; width: auto; }
  .generate-page > .image-composer-wrap {
    left: 105px;
    right: 24px;
    width: auto;
    max-width: 1210px;
    transform: none;
  }
  .generate-page .image-composer {
    flex: 1 1 1000px;
    width: min(1000px, 100%);
    max-width: 1000px;
    min-height: 170px;
  }
}

@media (max-width: 850px) {
  .topbar-brand { margin-left: 0; }
  .generate-page > .image-composer-wrap {
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
  }
  .generate-page .image-composer {
    width: 100%;
    max-width: none;
    min-height: 0;
  }
}

/* Keep workbench values authoritative over the existing desktop detail-layout rules. */
.detail-workbench > .detail-assets {
  position: relative;
  left: .01px;
  top: 10.4px;
  row-gap: 8px;
  column-gap: 10px;
  padding-top: 12px;
}
.detail-settings > #detailPrompt { height: 50px; min-height: 50px; }
.detail-workbench > .detail-output { position: relative; top: 10.4px; height: 250px; }

/* E-commerce generation panel: keep the requested asset / settings / copy proportions. */
@media (min-width: 851px) {
  .detail-workbench {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
  }
  .detail-workbench > .detail-assets,
  .detail-workbench > .detail-settings,
  .detail-workbench > .detail-output {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: none;
  }
  .detail-workbench > .detail-assets { flex: 0 0 30% !important; width: 30% !important; }
  .detail-workbench > .detail-settings { flex: 0 0 30% !important; width: 30% !important; }
  .detail-workbench > .detail-output { flex: 0 0 40% !important; width: 40% !important; }
}
.detail-workbench .detail-plan-fields {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 8px;
}
.detail-workbench .detail-plan-group { min-width: 0; }
@media (max-width: 600px) {
  .detail-workbench .detail-plan-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Layout workbench adjustments exported on 2026-10-22. */
@media (min-width: 851px) {
  .detail-workbench {
    position: fixed;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    width: min(1200px, calc(100vw - 110px));
  }
  .detail-workbench > .detail-assets { height: 200px; }
  .detail-workbench > .detail-settings { width: 645.7px; height: 250px; }
  .detail-workbench > .detail-output { width: 300px; height: 230px; }
  .detail-workbench .detail-output-summary { justify-content: center; height: 35px; }
  #detailGenerate { position: relative; top: -2.5px; }
  .generate-page > .image-composer-wrap { left: 379px; }
}

/* Dialog references: compact overlapping thumbnails with an add button below. */
#composerUploads.reference-upload-list{position:relative;z-index:2;display:flex;width:84px;min-width:84px;max-width:84px;max-height:none;flex:0 0 84px;flex-direction:column;align-items:center;gap:4px;overflow:visible}
#composerUploads.reference-upload-list:has(.reference-upload-item){width:84px;min-width:84px;max-width:84px;flex:0 0 84px;display:flex;grid-template-columns:none;overflow:visible}
#composerUploads .reference-stack{position:relative;z-index:1;width:var(--stack-width,68px);height:68px;min-height:68px;flex:0 0 68px;overflow:visible;transition:width .18s ease}
#composerUploads .reference-upload-item{position:absolute;top:0;left:var(--stack-offset,0);display:flex;width:68px;min-width:68px;flex:0 0 68px;flex-direction:column;align-items:center;gap:3px;z-index:calc(20 - var(--stack-index,0));transition:left .2s ease,transform .2s ease}
#composerUploads .reference-upload-item img{display:block;width:68px;height:68px;border:2px solid #fff;border-radius:10px;object-fit:cover;box-shadow:0 3px 10px #17243a30}
#composerUploads .reference-upload-item>span{display:none;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#composerUploads .reference-stack:hover,#composerUploads .reference-stack:focus-within{z-index:30;display:flex;width:max-content;max-width:min(72vw,720px);height:84px;gap:8px;overflow-x:auto;overflow-y:visible;padding:2px 5px 5px 2px;box-sizing:border-box;border-radius:12px;background:#fff;box-shadow:0 8px 24px #15243c24;scrollbar-width:thin}
#composerUploads .reference-stack:hover .reference-upload-item,#composerUploads .reference-stack:focus-within .reference-upload-item{position:relative;top:auto;left:auto;display:flex;flex:0 0 68px;z-index:auto}
#composerUploads .reference-stack:hover .reference-upload-item>span,#composerUploads .reference-stack:focus-within .reference-upload-item>span{display:block}
#composerUploads .reference-upload-item>button{top:2px;right:2px;width:19px;height:19px;opacity:0}
#composerUploads .reference-upload-item>button[data-retry-reference]{right:23px}
#composerUploads .reference-upload-item:hover>button,#composerUploads .reference-upload-item:focus-within>button{opacity:1}
#composerUploads .reference-stack.is-empty{display:grid;place-items:center}
#composerUploads .reference-empty-slot{display:flex;width:68px;height:68px;box-sizing:border-box;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px dashed #c7d3e2;border-radius:10px;background:#f8fafc;color:#7c8ca2;font-size:11px}
#composerUploads .reference-empty-icon{font-size:20px;line-height:1;color:#98a8bb}
#composerUploads .reference-upload-add.site-image-upload{display:grid;width:68px!important;min-width:68px!important;max-width:68px!important;height:27px!important;min-height:27px!important;flex:0 0 27px!important;margin:0!important;padding:0;border:1px dashed #cfd9e4!important;border-radius:9px!important;background:#f8fafc;color:#728196;place-items:center;transform:none;overflow:hidden}
#composerUploads .reference-upload-add .upload-plus{font-size:21px!important;line-height:1;color:#8192a8}
#composerUploads .reference-upload-add:hover{border-color:#1289b8!important;background:#effaff;color:#1289b8}
@media(max-width:620px){#composerUploads .reference-stack:hover,#composerUploads .reference-stack:focus-within{max-width:min(66vw,520px)}}
@media(prefers-reduced-motion:reduce){#composerUploads .reference-stack,#composerUploads .reference-upload-item{transition:none}}

/* Dialog reference picker: use the familiar upload tile, then expose remove/add on hover. */
.generate-page #composerUploads.reference-upload-list{width:min(var(--reference-list-width,68px),34vw);min-width:min(68px,34vw);max-width:min(292px,34vw);height:96px;min-height:96px;max-height:96px;flex:0 0 auto;display:flex;flex-direction:row;align-items:flex-start;justify-content:flex-start;gap:8px;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.generate-page #composerUploads.reference-upload-list>.reference-upload-add.site-image-upload{position:relative;display:flex;width:68px!important;min-width:68px!important;max-width:68px!important;height:78px!important;min-height:78px!important;flex:0 0 68px!important;flex-direction:column;align-items:center;justify-content:center;gap:5px;margin:0!important;padding:8px 6px!important;box-sizing:border-box;border:1px dashed #c7d3e2!important;border-radius:10px!important;background:#f3f5f8;color:#71829a;overflow:hidden;transform:none}
.generate-page #composerUploads .reference-empty-badge{position:absolute;top:7px;left:7px;padding:2px 6px;border-radius:10px;background:#fff;color:#73839a;font-size:10px;line-height:1.2}
.generate-page #composerUploads .reference-empty-icon{margin-top:8px;color:#91a2b8;font-size:23px;line-height:1}
.generate-page #composerUploads .reference-empty-label{color:#71829a;font-size:11px;line-height:1.2}
.generate-page #composerUploads .reference-upload-item{position:relative;top:auto;left:auto;display:flex;width:68px;min-width:68px;height:94px;flex:0 0 68px;flex-direction:column;align-items:center;gap:2px;overflow:visible}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #17243a20}
.generate-page #composerUploads .reference-upload-item>span{display:none}
.generate-page #composerUploads .reference-card-actions{position:absolute;inset:0 0 auto;width:68px;height:94px;pointer-events:none}
.generate-page #composerUploads .reference-card-actions button{position:absolute;display:grid;width:20px;height:20px;min-width:20px;padding:0;place-items:center;border:1px solid #ffffffc9;border-radius:50%;background:#17243acc;color:#fff;line-height:1;opacity:0;pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.generate-page #composerUploads .reference-upload-item:hover .reference-card-actions button,.generate-page #composerUploads .reference-upload-item:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-card-actions [data-remove-reference]{top:3px;right:3px;font-size:16px}
.generate-page #composerUploads .reference-card-actions [data-retry-reference]{top:3px;left:3px}
.generate-page #composerUploads .reference-card-actions [data-add-reference]{top:72px;left:24px;width:22px;height:22px;border:1px solid #d6e2ef;background:#fff;color:#3476cf;font-size:19px}
@media(max-width:620px){.generate-page #composerUploads.reference-upload-list{width:min(var(--reference-list-width,68px),30vw);max-width:min(220px,30vw)}}

/* Restore the original portrait reference tile proportions and overlap multiple references. */
.generate-page #composerUploads.reference-upload-list{width:min(var(--reference-list-width,68px),34vw);min-width:68px;max-width:min(220px,34vw);height:110px;min-height:110px;max-height:110px;overflow:visible}
.generate-page #composerUploads.reference-upload-list>.reference-upload-add.site-image-upload{width:68px!important;min-width:68px!important;max-width:68px!important;height:78px!important;min-height:78px!important;flex:0 0 68px!important;padding:8px 6px!important}
.generate-page #composerUploads .reference-empty-icon{margin-top:9px}
.generate-page #composerUploads .reference-stack{position:relative;z-index:1;display:flex;width:var(--stack-width,68px);max-width:min(70vw,680px);height:78px;min-height:78px;flex:0 0 auto;overflow:visible;transition:width .18s ease}
.generate-page #composerUploads .reference-upload-item{position:absolute;top:0;left:var(--stack-offset,0);display:flex;width:68px;min-width:68px;height:106px;flex:0 0 68px;flex-direction:column;align-items:center;gap:2px;z-index:calc(20 - var(--stack-index,0));transition:left .2s ease}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:78px;min-height:78px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #17243a20}
.generate-page #composerUploads .reference-upload-item>span{display:none}
.generate-page #composerUploads .reference-card-actions{position:absolute;inset:0;width:68px;height:106px;pointer-events:none}
.generate-page #composerUploads .reference-card-actions button{position:absolute;display:grid;width:20px;height:20px;min-width:20px;padding:0;place-items:center;border:1px solid #ffffffc9;border-radius:50%;background:#17243acc;color:#fff;line-height:1;opacity:0;pointer-events:none;transition:opacity .14s ease}
.generate-page #composerUploads .reference-upload-item:hover .reference-card-actions button,.generate-page #composerUploads .reference-upload-item:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-card-actions [data-remove-reference]{top:3px;right:3px;font-size:16px}
.generate-page #composerUploads .reference-card-actions [data-retry-reference]{top:3px;left:3px}
.generate-page #composerUploads .reference-card-actions [data-add-reference]{top:82px;left:24px;width:22px;height:22px;border:1px solid #d6e2ef;background:#fff;color:#3476cf;font-size:19px}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{z-index:30;display:flex;width:max-content;max-width:min(70vw,680px);height:110px;gap:8px;overflow-x:auto;overflow-y:hidden;padding:0 5px 4px 0;box-sizing:border-box;border-radius:10px;background:#fff;box-shadow:0 8px 24px #15243c24;scrollbar-width:thin}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{position:relative;top:auto;left:auto;display:flex;flex:0 0 68px;z-index:auto}
.generate-page #composerUploads .reference-stack-add{display:none;position:relative;top:auto;left:auto;width:68px!important;min-width:68px!important;max-width:68px!important;height:78px!important;min-height:78px!important;flex:0 0 68px!important;padding:8px 6px!important;box-sizing:border-box}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex}
@media(max-width:620px){.generate-page #composerUploads.reference-upload-list{max-width:34vw}.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{max-width:min(66vw,520px)}}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item>span,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item>span{display:none!important}
.generate-page #composerUploads .reference-stack{align-items:center}
.generate-page #composerUploads .reference-upload-item{width:68px;height:68px;flex-basis:68px}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;min-height:0;object-fit:cover}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:160px;min-height:160px;align-items:center;gap:8px;padding:10px;overflow-x:auto;overflow-y:hidden}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{width:var(--expanded-width,68px);height:var(--expanded-height,68px);flex:0 0 var(--expanded-width,68px);align-self:center}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{width:var(--expanded-width,68px);height:var(--expanded-height,68px);min-height:0;object-fit:contain}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{width:var(--expanded-width,68px);height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions [data-remove-reference],.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions [data-remove-reference]{top:3px;right:3px}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions [data-retry-reference],.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions [data-retry-reference]{top:3px;left:3px}
.generate-page #composerUploads .reference-stack-add{align-self:center}
.generate-page #composerUploads>.reference-upload-add.site-image-upload,.generate-page #composerUploads .reference-stack-add{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;height:98px!important;min-height:98px!important;flex-basis:68px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible}
.generate-page #composerUploads .reference-upload-frame{position:relative;display:flex;width:68px;height:78px;min-height:78px;flex:0 0 78px;align-items:center;justify-content:center;box-sizing:border-box;border:1px dashed #c7d3e2;border-radius:10px;background:#f3f5f8;color:#91a2b8}
.generate-page #composerUploads .reference-upload-frame .reference-empty-badge{top:7px;left:7px}
.generate-page #composerUploads .reference-upload-frame .reference-empty-icon{margin:0;color:#91a2b8;font-size:23px;line-height:1}
.generate-page #composerUploads .reference-empty-label{display:block;max-width:68px;color:#71829a;font-size:11px;line-height:14px;text-align:center}
.generate-page #composerUploads .reference-upload-add:hover .reference-upload-frame{border-color:#1289b8;background:#effaff}
.generate-page #composerUploads .reference-stack-add{display:none!important}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important}
.generate-page #composerUploads .reference-stack-add{left:0;z-index:50}
/* The reference placeholder is square; expanded photos keep their ratio within that square. */
.generate-page #composerUploads>.reference-upload-add.site-image-upload,.generate-page #composerUploads .reference-stack-add{height:88px!important;min-height:88px!important;max-height:88px!important}
.generate-page #composerUploads .reference-upload-frame{width:68px;height:68px;min-height:68px;flex-basis:68px}
.generate-page #composerUploads .reference-upload-item{height:68px;min-height:68px}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;min-height:68px;object-fit:cover}
.generate-page #composerUploads .reference-card-actions{height:68px}
.generate-page #composerUploads .reference-upload-caption{top:72px}
.generate-page #composerUploads .reference-stack-add{height:88px!important;min-height:88px!important;max-height:88px!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{height:var(--expanded-height,68px)}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:78px;min-height:78px}
.generate-page #composerUploads.reference-upload-list>.reference-upload-add.site-image-upload{height:98px!important;min-height:98px!important;max-height:98px!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;overflow:visible!important}
.generate-page #composerUploads .reference-upload-caption{position:absolute;top:82px;left:0;display:block;width:68px;height:14px;color:#71829a;font-size:11px;line-height:14px;text-align:center;pointer-events:none}
.generate-page #composerUploads .reference-stack-add{height:78px!important;min-height:78px!important;max-height:78px!important;flex-basis:68px!important;padding:0!important;align-self:center}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{padding:0 10px 0 0}
.generate-page #composerUploads .reference-stack .reference-stack-add{align-self:flex-start}
/* The first uploaded thumbnail occupies the exact original reference-image frame. */
.generate-page #composerUploads .reference-upload-item{height:78px;min-height:78px}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:78px;min-height:78px;object-fit:cover}
/* Keep the empty upload slot anchored; fan uploaded photos out beside it without a popup panel. */
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{position:relative;display:block;width:var(--expanded-stack-width,68px);max-width:none;height:140px;min-height:140px;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{position:absolute;top:0;left:var(--expanded-left,0px);display:flex;width:var(--expanded-width,68px);height:var(--expanded-height,78px);min-width:0;flex:0 0 var(--expanded-width,68px);align-items:center;z-index:calc(40 - var(--stack-index,0))}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{width:var(--expanded-width,68px);height:var(--expanded-height,78px);min-height:0;object-fit:contain}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{width:var(--expanded-width,68px);height:var(--expanded-height,78px)}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions button,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-stack-add{position:absolute;top:0;left:var(--expanded-add-left,76px);align-self:auto}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important}

/* Final reference picker sizing: square stack, square expanded thumbs, 4px fan spacing. */
.generate-page #composerUploads .reference-upload-frame{width:68px;height:68px;min-height:68px;flex-basis:68px}
.generate-page #composerUploads .reference-upload-item{width:68px;height:68px;min-height:68px;flex-basis:68px;align-items:center}
.generate-page #composerUploads .reference-upload-item img{width:68px;height:68px;min-height:68px;object-fit:cover}
.generate-page #composerUploads .reference-card-actions{width:68px;height:68px}
.generate-page #composerUploads .reference-upload-caption{top:72px}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{position:relative;display:block;width:var(--expanded-stack-width,68px);max-width:none;height:68px;min-height:68px;padding:0;overflow:visible;border:0;border-radius:0;background:transparent;box-shadow:none}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{position:absolute;top:0;left:var(--expanded-left,72px);display:flex;width:68px;height:68px;min-width:68px;min-height:68px;flex:0 0 68px;align-items:center;z-index:calc(40 - var(--stack-index,0))}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item img,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item img{width:68px;height:68px;min-height:68px;object-fit:cover}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions{width:68px;height:68px}
.generate-page #composerUploads .reference-stack:hover .reference-card-actions button,.generate-page #composerUploads .reference-stack:focus-within .reference-card-actions button{opacity:1;pointer-events:auto}
.generate-page #composerUploads .reference-stack-add{position:absolute;top:0;left:0!important;width:68px!important;height:88px!important;min-width:68px!important;min-height:88px!important;max-height:88px!important;flex-basis:68px!important;align-self:flex-start;z-index:50}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important}

/* Keep the upload slot's flex footprint fixed so added photos cannot move it. */
.generate-page #composerUploads.reference-upload-list{position:relative!important;width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;margin:0!important;overflow:visible!important}
.generate-page #composerUploads .reference-stack{position:relative!important;top:0!important;left:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important;overflow:visible!important}
.generate-page #composerUploads .reference-stack-add{position:absolute!important;top:0!important;left:0!important;margin:0!important}
.generate-page #composerUploads .reference-upload-item{top:0!important;height:68px!important;min-height:68px!important;align-items:center!important}
.generate-page #composerUploads .reference-upload-item img{width:68px!important;height:68px!important;min-height:68px!important;object-fit:cover!important}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:68px!important;min-height:68px!important;padding:0!important;background:transparent!important;box-shadow:none!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{top:0!important;left:var(--expanded-left,72px)!important;width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important;flex:0 0 68px!important}

/* Keep the reference tile and its caption anchored while thumbnails fan out. */
.generate-page #composerUploads.reference-upload-list{height:88px!important;min-height:88px!important;max-height:88px!important;align-items:flex-start!important;overflow:visible!important}
.generate-page #composerUploads .reference-upload-caption{position:absolute!important;top:70px!important;left:0!important;z-index:60!important;display:block!important;width:68px!important;height:14px!important;margin:0!important;overflow:visible!important;color:#71829a!important;font-size:11px!important;line-height:14px!important;text-align:center!important;white-space:nowrap!important;visibility:visible!important;pointer-events:none!important}
.generate-page #composerUploads .reference-stack:hover,.generate-page #composerUploads .reference-stack:focus-within{height:68px!important;min-height:68px!important;overflow:visible!important}
/* Keep the upload placeholder in its original slot beneath the first thumbnail. */
.generate-page #composerUploads .reference-stack-add{display:flex!important;z-index:1!important}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{display:flex!important;z-index:1!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{top:50%!important;transform:translateY(-50%)!important}
/* Keep the production dialog uploader identical to its tuned debug preview. */
.generate-page #composerUploads.reference-upload-list{margin:0!important;padding:0!important;gap:0!important;align-items:flex-start!important;flex-direction:column!important;width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;height:86px!important;min-height:86px!important;max-height:86px!important}
.generate-page #composerUploads>.reference-upload-add.site-image-upload{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important}
.generate-page #composerUploads .reference-upload-frame{margin:0!important}
.generate-page #composerUploads .reference-upload-caption{position:relative!important;top:auto!important;left:auto!important;display:block!important;width:68px!important;height:14px!important;margin:4px 0 0!important;padding:0!important;flex:0 0 14px!important}
.generate-page #composerUploads .reference-stack-add{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important}
.generate-page #composerUploads .reference-stack-add .reference-upload-frame{margin:0!important;padding:0!important}
.generate-page #composerUploads.reference-upload-list:has(.reference-stack){width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:86px!important;min-height:86px!important;max-height:86px!important}
.generate-page #composerUploads:has(>.reference-upload-add){width:68px!important;min-width:68px!important;max-width:68px!important;flex:0 0 68px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;height:86px!important;min-height:86px!important;max-height:86px!important}
.generate-page #composerUploads:has(>.reference-upload-add)>.reference-upload-caption{position:relative!important;top:auto!important;left:auto!important;flex:0 0 14px!important;width:68px!important;height:14px!important;margin:4px 0 0!important;padding:0!important}
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack))>.reference-upload-add.site-image-upload{height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;align-items:flex-start!important;justify-content:flex-start!important;gap:0!important;padding:0!important}
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack))>.reference-upload-add.site-image-upload>.reference-upload-frame{width:68px!important;height:68px!important;min-height:68px!important;flex:0 0 68px!important;margin:0!important}
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack))>.reference-upload-caption{position:relative!important;top:auto!important;left:auto!important;width:68px!important;height:14px!important;flex:0 0 14px!important;margin:4px 0 0!important;padding:0!important}

/* Match the dialog reference stack interaction in the model three-view slots. */
.generate-page #composerUploads.multi-reference-feature{display:flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:12px!important;align-items:flex-start!important;width:max-content!important;min-width:0!important;max-width:100%!important;overflow:visible!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap{position:relative!important;display:block!important;flex:0 0 68px!important;width:68px!important;height:88px!important;overflow:visible!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload-frame{position:relative!important;width:68px!important;height:68px!important;overflow:visible!important;z-index:2}
.generate-page #composerUploads.multi-reference-feature .composer-upload{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:0!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;flex:0 0 68px!important;margin:0!important;padding:0!important;overflow:visible!important;transform:none!important;border:1px dashed #c7d3e2!important;border-radius:10px!important;background:#f3f5f8!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-tag{top:7px!important;left:7px!important;z-index:3!important;padding:2px 6px!important;border-radius:10px!important;font-size:10px!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-plus{display:block!important;margin-top:4px!important;font-size:23px!important;line-height:1!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-label{position:absolute!important;top:72px!important;left:0!important;z-index:3!important;display:block!important;width:68px!important;max-width:68px!important;margin:0!important;overflow:visible!important;color:#71829a!important;font-size:11px!important;line-height:14px!important;text-align:center!important;white-space:nowrap!important;opacity:1!important;pointer-events:none!important}
.generate-page #composerUploads.multi-reference-feature .composer-upload img.preview{position:absolute!important;inset:0!important;width:68px!important;height:68px!important;min-height:68px!important;object-fit:cover!important;transform:none!important;border:1px solid #d8e0ea!important;border-radius:10px!important;z-index:2!important}
.generate-page #composerUploads.multi-reference-feature .slot-remove-button{top:3px!important;right:3px!important;z-index:5!important;opacity:0!important;pointer-events:none!important;transition:opacity .14s ease!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-remove-button,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-remove-button{opacity:1!important;pointer-events:auto!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails{position:absolute!important;top:0!important;left:0!important;width:68px!important;height:68px!important;overflow:visible!important;pointer-events:none!important;z-index:4!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails[hidden]{display:none!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb{position:absolute!important;top:0!important;left:var(--slot-thumb-offset,0px)!important;width:68px!important;height:68px!important;border-radius:10px!important;box-shadow:0 2px 8px #17243a30!important;z-index:calc(20 - var(--slot-thumb-index,0))!important;transition:left .2s ease!important;pointer-events:none!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb.is-primary{z-index:30!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb img{display:block!important;width:68px!important;height:68px!important;object-fit:cover!important;border:1px solid #d8e0ea!important;border-radius:10px!important}
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb button{position:absolute!important;top:3px!important;right:3px!important;display:grid!important;width:20px!important;height:20px!important;min-width:20px!important;padding:0!important;place-items:center!important;border:1px solid #ffffffd9!important;border-radius:50%!important;background:#17243acc!important;color:#fff!important;font-size:16px!important;line-height:1!important;opacity:0!important;pointer-events:none!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within{z-index:30!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumbnails,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumbnails{z-index:4!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb{left:calc(68px + var(--slot-thumb-index,0)*72px)!important;pointer-events:auto!important}
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb button,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb button{opacity:1!important;pointer-events:auto!important}
@media(max-width:620px){.generate-page #composerUploads.multi-reference-feature{gap:8px!important;width:max-content!important}.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap{flex-basis:58px!important;width:58px!important}.generate-page #composerUploads.multi-reference-feature .composer-upload-frame,.generate-page #composerUploads.multi-reference-feature .composer-upload,.generate-page #composerUploads.multi-reference-feature .composer-upload img.preview,.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails,.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb,.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb img{width:58px!important;height:58px!important}.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-label{top:62px!important;width:58px!important}.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb,.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb{left:calc(58px + var(--slot-thumb-index,0)*62px)!important}}

/* Keep each expanded image fan under one continuous hover target, including the small gaps between thumbnails. */
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap::after{position:absolute;top:0;left:var(--slot-hover-bridge-left,68px);width:var(--slot-hover-bridge-width,0px);height:var(--slot-hover-bridge-height,68px);z-index:3;content:"";pointer-events:auto}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-slot-wrap::after{z-index:3}
@media(max-width:620px){.generate-page #composerUploads.multi-reference-feature:not(.three-view-upload-feature) .composer-slot-wrap::after{left:58px;width:var(--slot-hover-bridge-width-mobile,0px);height:58px}}

/* Bridge the gaps in multi-image fans used by video upload slots too. */
.video-page .video-form .asset-grid .asset-tile.has-image-preview::after{position:absolute;top:0;left:var(--thumb-bridge-left,68px);width:var(--thumb-bridge-width,0px);height:var(--thumb-bridge-height,68px);z-index:2;content:"";background:transparent;pointer-events:auto}

/* Preserve the upload target underneath the first image; fan only later images to the right. */
.generate-page #composerUploads .reference-stack-add{z-index:1!important;pointer-events:auto!important}

/* Preserve the model three-view 90px slot sizing; shared 90px rules apply below to every upload module. */
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-slot-wrap{flex:0 0 90px!important;width:90px!important;height:110px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload-frame,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload img.preview,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumbnails,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumb img{width:90px!important;height:90px!important;min-width:90px!important;min-height:90px!important;max-width:90px!important;max-height:90px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload{flex-basis:90px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload .upload-label{top:94px!important;width:90px!important;max-width:90px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-upload .upload-tag{top:7px!important;left:7px!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .slot-reference-thumb img{object-fit:cover!important}
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-slot-wrap:hover .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature.three-view-upload-feature .composer-slot-wrap:focus-within .slot-reference-thumb{left:calc(90px + var(--slot-thumb-index,0)*96px)!important}
.generate-page #composerUploads .reference-upload-item{z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack:not(:hover):not(:focus-within) .reference-upload-item:first-of-type{left:0!important;z-index:4!important}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item{left:calc(68px + var(--stack-index,0)*72px)!important;z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack:hover .reference-stack-add,.generate-page #composerUploads .reference-stack:focus-within .reference-stack-add{z-index:5!important;pointer-events:auto!important}
.generate-page #composerUploads .reference-upload-caption{margin-top:4px!important}
.generate-page #composerUploads .reference-stack.is-expanded{position:relative!important;display:block!important;width:var(--expanded-stack-width,68px)!important;max-width:none!important;height:68px!important;min-height:68px!important;padding:0!important;overflow:visible!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-stack-add{display:flex!important;z-index:5!important;pointer-events:auto!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item{position:absolute!important;top:0!important;left:calc(68px + var(--stack-index,0)*72px)!important;display:flex!important;width:68px!important;height:68px!important;min-width:68px!important;min-height:68px!important;flex:0 0 68px!important;align-items:center!important;transform:none!important;z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item img{width:68px!important;height:68px!important;min-height:68px!important;object-fit:cover!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-card-actions{width:68px!important;height:68px!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-card-actions button{opacity:1!important;pointer-events:auto!important}
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item{transition:left .2s ease!important}
/* Earliest upload stays on top; later photos sit underneath, with alternating offsets. */
.generate-page #composerUploads .reference-stack .reference-upload-item{z-index:calc(10 - var(--stack-index,0))!important}
.generate-page #composerUploads .reference-stack:not(:hover):not(:focus-within):not(.is-expanded) .reference-upload-item:first-of-type{z-index:10!important}
.generate-page #composerUploads .reference-stack:not(:hover):not(:focus-within):not(.is-expanded) .reference-upload-item{left:var(--stack-offset,0px)!important}
/* Keep debug-only layout overrides while removing all colored box-model guides. */
#referenceDebugOverlay{display:none!important}

/* Share the reference-image tile size and hover fan-out across video, model, and scene uploads. */
.video-page .video-form .asset-grid .asset-tile{position:relative;box-sizing:border-box;flex:0 0 68px!important;width:68px!important;min-width:68px!important;max-width:68px!important;height:68px!important;min-height:68px!important;max-height:68px!important;border:1px dashed #c7d3e2!important;border-radius:10px!important;background:#f3f5f8;overflow:visible!important}
.video-page .video-form .asset-grid .asset-tile:hover,.video-page .video-form .asset-grid .asset-tile:focus-visible{outline:2px solid #dbe6ff;outline-offset:2px}
.video-page .video-form .asset-grid .asset-tile .upload-badge{top:5px;left:5px;padding:2px 6px}
.video-page .video-form .asset-grid .asset-tile .upload-plus{font-size:23px}
.video-page .video-form .asset-grid .asset-tile .upload-label{font-size:10px}
.video-page .video-form .asset-grid .asset-thumb-stack{position:absolute;inset:0;display:none;overflow:visible;border-radius:10px;pointer-events:none}
.video-page .video-form .asset-tile.has-upload:hover .asset-thumb-stack,.video-page .video-form .asset-tile.has-upload:focus-within .asset-thumb-stack{pointer-events:auto}
.video-page .video-form .asset-tile.has-image-preview .asset-remove-button{display:none!important}
.video-page .video-form .asset-tile.has-image-preview .asset-thumb-stack,.video-page .video-form .asset-tile.has-video-preview .asset-thumb-stack,.video-page .video-form .asset-tile.has-audio-preview .asset-thumb-stack,.video-page .video-form .asset-tile.is-resolving .asset-thumb-stack{display:block}
.video-page .video-form .asset-thumb-card{position:absolute;top:0;left:var(--thumb-offset,0px);width:68px;height:68px;z-index:calc(20 - var(--thumb-index,0));transition:left .2s ease;pointer-events:auto}
.video-page .video-form .asset-thumb-image{display:block;width:68px;height:68px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;object-fit:cover;box-shadow:0 2px 8px #17243a20;transform:none}
.video-page .video-form .asset-thumb-remove{position:absolute;top:2px;right:2px;z-index:2;display:grid;width:20px;height:20px;padding:0;place-items:center;border:1px solid #ffffffd9;border-radius:50%;background:#152238e8;color:#fff;font-size:16px;line-height:1;opacity:0;pointer-events:none;cursor:pointer}
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card{left:calc(68px + var(--thumb-index,0)*72px);z-index:calc(20 - var(--thumb-index,0))}
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-remove,.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-remove{opacity:1;pointer-events:auto}
.video-page .video-form .asset-tile.has-image-preview .asset-thumb-remove:disabled{opacity:.5;pointer-events:none}
.video-page .video-form .asset-tile.has-image-preview:hover .upload-label,.video-page .video-form .asset-tile.has-image-preview:hover .upload-plus,.video-page .video-form .asset-tile.has-image-preview:focus-within .upload-label,.video-page .video-form .asset-tile.has-image-preview:focus-within .upload-plus{display:block;position:absolute;z-index:3;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.video-page .video-form .asset-tile.has-image-preview:hover .upload-badge,.video-page .video-form .asset-tile.has-image-preview:focus-within .upload-badge{display:block;z-index:4}
.video-page .video-form .asset-thumb-video{top:0;left:0;right:auto;width:68px;height:68px;transition:left .2s ease;pointer-events:auto}
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video{left:72px;width:68px;height:68px}
.video-page .video-form .asset-tile.has-audio-preview .asset-thumb-stack{background:transparent}
.video-page .video-form .asset-tile.has-audio-preview .asset-audio-icon{top:0;left:0;right:auto;width:68px;height:68px;box-sizing:border-box;border:1px solid #d8e0ea;border-radius:10px;background:linear-gradient(145deg,#24354d,#111b2b);transition:left .2s ease;pointer-events:none}
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon{left:72px}
.video-page .video-form .asset-tile.has-upload:hover .upload-label,.video-page .video-form .asset-tile.has-upload:hover .upload-plus{display:block;z-index:3;top:50%;right:auto;bottom:auto;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.video-page .video-form .asset-tile.has-video-preview:hover .upload-badge,.video-page .video-form .asset-tile.has-audio-preview:hover .upload-badge{display:block;z-index:4}
.video-page .video-form .asset-tile.has-video-preview:hover .asset-remove-button,.video-page .video-form .asset-tile.has-audio-preview:hover .asset-remove-button{top:2px;right:auto;left:113px;opacity:1;pointer-events:auto}

/* Unify every video-tool upload slot with the fixed square, expandable reference tiles. */
.video-page .video-form .asset-grid { overflow: visible; }
.video-page .video-form .video-upload-slot { position: relative; z-index: 0; display: block; width: 68px; height: 88px; flex: 0 0 68px; overflow: visible; }
.video-page .video-form .video-upload-slot:hover,
.video-page .video-form .video-upload-slot:focus-within { z-index: 30; }
.video-page .video-form .video-upload-caption { position: absolute; top: 72px; left: 0; display: block; width: 68px; height: 14px; overflow: hidden; color: #71829a; font-size: 11px; line-height: 14px; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.video-page .video-form .asset-grid .asset-tile { position: absolute !important; top: 0; left: 0; z-index: 1; box-sizing: border-box; display: flex !important; width: 68px !important; min-width: 68px !important; max-width: 68px !important; height: 68px !important; min-height: 68px !important; max-height: 68px !important; flex: 0 0 68px !important; margin: 0 !important; overflow: visible !important; border: 1px dashed #c7d3e2 !important; border-radius: 10px !important; background: #f3f5f8 !important; color: #71829a; }
.video-page .video-form .asset-grid .asset-tile:hover,
.video-page .video-form .asset-grid .asset-tile:focus-visible { outline: 2px solid #dbe6ff; outline-offset: 2px; }
.video-page .video-form .asset-grid .asset-tile .upload-badge { top: 5px; left: 5px; z-index: 6; display: block !important; max-width: calc(100% - 10px); padding: 2px 6px; font-size: 9px; }
.video-page .video-form .asset-grid .asset-tile .upload-plus { position: absolute; top: 50%; left: 50%; z-index: 5; display: block !important; margin: 0; transform: translate(-50%, -50%); font-size: 23px; line-height: 1; pointer-events: none; }
.video-page .video-form .asset-grid .asset-tile .upload-label { display: none !important; }
.video-page .video-form .asset-grid .asset-thumb-stack { position: absolute; z-index: 3; inset: 0; display: none; overflow: visible !important; border-radius: 10px; background: transparent; pointer-events: none !important; }
.video-page .video-form .asset-grid .asset-tile.has-image-preview .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-tile.has-video-preview .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-tile.has-audio-preview .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-tile.is-resolving .asset-thumb-stack { display: block; }
.video-page .video-form .asset-grid .asset-thumb-card { position: absolute; top: 0; left: var(--thumb-offset, 0px); z-index: calc(20 - var(--thumb-index, 0)); display: block; width: 68px; height: 68px; transition: left .2s ease; pointer-events: auto; }
.video-page .video-form .asset-grid .asset-thumb-card:first-child { z-index: 30; }
.video-page .video-form .asset-grid .asset-thumb-image { display: block; width: 68px; height: 68px; box-sizing: border-box; border: 1px solid #d8e0ea; border-radius: 10px; object-fit: cover; box-shadow: 0 2px 8px #17243a20; transform: none !important; }
.video-page .video-form .asset-grid .asset-thumb-remove { position: absolute; top: 2px; right: 2px; z-index: 2; display: grid; width: 20px; height: 20px; padding: 0; place-items: center; border: 1px solid #ffffffd9; border-radius: 50%; background: #152238e8; color: #fff; font-size: 16px; line-height: 1; opacity: 0; pointer-events: none; cursor: pointer; }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: var(--thumb-offset, 0px); }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: calc(var(--thumb-index, 0) * 72px); }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-remove,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-remove { opacity: 1; pointer-events: auto; }
.video-page .video-form .asset-grid .asset-thumb-video { position: absolute; top: 0; left: 0; right: auto; z-index: 20; width: 68px; height: 68px; border: 1px solid #d8e0ea; border-radius: 10px; object-fit: cover; transition: left .2s ease; pointer-events: auto; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video { left: 0; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video { left: 0; z-index: 40; }
.video-page .video-form .asset-grid .asset-audio-icon { position: absolute; inset: 0 auto auto 0; z-index: 20; display: grid; width: 68px; height: 68px; place-items: center; border: 1px solid #d8e0ea; border-radius: 10px; background: linear-gradient(145deg,#24354d,#111b2b); color: #f3f7ff; font-size: 30px; transition: left .2s ease; pointer-events: auto; }
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon { left: 0; }
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon { left: 0; z-index: 40; }
.video-page .video-form .asset-tile.has-video-preview .upload-badge,
.video-page .video-form .asset-tile.has-audio-preview .upload-badge,
.video-page .video-form .asset-tile.is-resolving .upload-badge { display: block !important; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-remove-button { top: 2px; right: auto; left: 118px; z-index: 22; opacity: 1; pointer-events: auto; }
.video-page .video-form .asset-tile.is-resolving .video-reference-loading { position: absolute; top: 0; left: 0; z-index: 40; width: 68px; height: 68px; pointer-events: none; }
.video-page .video-form .reference-media-grid { display: flex; align-items: flex-start; gap: 10px 18px; overflow: visible; }
.video-page .video-form .reference-media-grid > .video-upload-slot { flex: 0 0 68px; width: 68px; transition: flex-basis .2s ease, width .2s ease; }
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:focus-within),
.video-page .video-form .video-upload-slot:has(.asset-tile.is-resolving:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.is-resolving:focus-within) {
  flex-basis: var(--expanded-width, 140px);
  width: var(--expanded-width, 140px);
}
body.dark-theme .video-page .video-form .video-upload-caption { color: #9baac0; }

/* Keep the first uploaded cover anchored above its placeholder; fan out only later photos. */
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: calc(var(--thumb-index, 0) * 72px); }
.video-page .video-form .asset-grid .asset-thumb-card:first-child { z-index: 50; }
.video-page .video-form .asset-grid .asset-thumb-image { position: absolute; top: 0 !important; right: auto !important; bottom: auto !important; left: 0 !important; transform: none !important; }
.video-page .video-form .asset-grid .asset-thumb-video,
.video-page .video-form .asset-grid .asset-audio-icon { left: 0; z-index: 50; }
.video-page .video-form .asset-tile.has-image-preview .upload-badge,
.video-page .video-form .asset-tile.has-image-preview .upload-plus,
.video-page .video-form .asset-tile.has-video-preview .upload-badge,
.video-page .video-form .asset-tile.has-video-preview .upload-plus,
.video-page .video-form .asset-tile.has-audio-preview .upload-badge,
.video-page .video-form .asset-tile.has-audio-preview .upload-plus { display: none !important; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-remove-button,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-remove-button { top: 2px; right: 2px; left: auto; z-index: 60; }
.video-page .video-form .asset-tile.has-image-preview .asset-thumb-remove { z-index: 60; }

/* Extra vertical room for the 90px three-view slots and their captions. */
.generate-page .image-composer:has(#composerUploads.three-view-upload-feature) .composer-content { min-height: 150px; }

/* Standardize every reusable upload target to a 90px square, including its preview and caption. */
.generate-page .image-composer:has(#composerUploads.multi-reference-feature) .composer-content { min-height: 150px; }
.generate-page #composerUploads.multi-reference-feature { gap: 14px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap { flex: 0 0 90px !important; width: 90px !important; height: 112px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-upload-frame,
.generate-page #composerUploads.multi-reference-feature .composer-upload,
.generate-page #composerUploads.multi-reference-feature .composer-upload img.preview,
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumbnails,
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature .slot-reference-thumb img { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-upload { flex: 0 0 90px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-upload .upload-label { top: 94px !important; width: 90px !important; max-width: 90px !important; }
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb { left: calc(90px + var(--slot-thumb-index, 0) * 96px) !important; }

/* Dialog reference uploads use the same square, with extra room for the fixed caption. */
.generate-page #composerUploads.reference-upload-list { box-sizing: content-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; flex: 0 0 90px !important; height: 110px !important; min-height: 110px !important; max-height: 110px !important; }
.generate-page #composerUploads.reference-upload-list:not(:has(.reference-stack)),
.generate-page #composerUploads.reference-upload-list:has(.reference-stack) { width: 90px !important; min-width: 90px !important; max-width: 90px !important; flex: 0 0 90px !important; height: 110px !important; min-height: 110px !important; max-height: 110px !important; }
.generate-page #composerUploads.reference-upload-list > .reference-upload-add.site-image-upload,
.generate-page #composerUploads.reference-stack-add,
.generate-page #composerUploads .reference-upload-frame { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack { width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; }
.generate-page #composerUploads .reference-upload-item,
.generate-page #composerUploads .reference-upload-item img { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.generate-page #composerUploads .reference-upload-item { flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-card-actions { width: 90px !important; height: 90px !important; }
.generate-page #composerUploads .reference-upload-caption { position: relative !important; top: auto !important; left: auto !important; width: 90px !important; height: 14px !important; flex: 0 0 14px !important; margin: 4px 0 0 !important; }
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,
.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item { left: var(--expanded-left, 90px) !important; width: 90px !important; height: 90px !important; min-width: 90px !important; min-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item { left: calc(90px + var(--stack-index, 0) * 96px) !important; width: 90px !important; height: 90px !important; min-width: 90px !important; min-height: 90px !important; flex: 0 0 90px !important; }

/* Detail-image products and references. */
.detail-workbench .detail-upload-control { width: 90px !important; height: 112px !important; flex: 0 0 90px !important; }
.detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload,
.detail-workbench .detail-upload-stack,
.detail-workbench .detail-upload-item { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload { flex: 0 0 90px !important; }
.detail-workbench .detail-upload-item { flex: 0 0 90px !important; }
.detail-workbench .detail-upload-caption { top: 94px !important; width: 90px !important; }
.detail-workbench .detail-upload-control:hover .detail-upload-item,
.detail-workbench .detail-upload-control:focus-within .detail-upload-item { left: calc(90px + var(--stack-index, 0) * 96px) !important; }

/* Video, reference-video and reference-audio upload slots share 90px previews. */
.video-page .video-form .video-upload-slot,
.video-page .video-form .reference-media-grid > .video-upload-slot { box-sizing: border-box; width: 90px !important; min-width: 90px !important; flex: 0 0 90px !important; height: 112px !important; }
.video-page .video-form .video-upload-caption { top: 94px !important; width: 90px !important; }
.video-page .video-form .asset-grid .asset-tile,
.video-page .video-form .asset-grid .asset-thumb-stack,
.video-page .video-form .asset-grid .asset-thumb-card,
.video-page .video-form .asset-grid .asset-thumb-image,
.video-page .video-form .asset-grid .asset-thumb-video,
.video-page .video-form .asset-grid .asset-audio-icon,
.video-page .video-form .asset-tile.is-resolving .video-reference-loading { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; }
.video-page .video-form .asset-grid .asset-thumb-image { top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; }
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card { left: calc(var(--thumb-index, 0) * 96px) !important; }
.video-page .video-form .asset-tile.has-video-preview:hover .asset-thumb-video,
.video-page .video-form .asset-tile.has-video-preview:focus-within .asset-thumb-video,
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-icon,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-icon { left: 0 !important; }
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.has-image-preview:focus-within) { flex-basis: var(--expanded-width, 90px) !important; width: var(--expanded-width, 90px) !important; }
.legacy-home-workbench .reference-tile { box-sizing: border-box; width: 90px; min-width: 90px; max-width: 90px; height: 90px; flex: 0 0 90px; border-radius: 10px; }
.legacy-home-workbench .reference-tile .upload-label { max-width: 82px; }

/* Keep the dialog's first uploaded preview anchored over its original square. */
.generate-page #composerUploads .reference-stack { position: relative !important; width: 90px !important; min-width: 90px !important; height: 90px !important; min-height: 90px !important; overflow: visible !important; }
.generate-page #composerUploads .reference-stack-add { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack-add .reference-upload-frame { box-sizing: border-box !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack .reference-upload-item:first-of-type { left: 0 !important; z-index: 50 !important; }
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,
.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item,
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item { left: var(--expanded-left, 0px) !important; top: 0 !important; transform: none !important; width: 90px !important; min-width: 90px !important; max-width: 90px !important; height: 90px !important; min-height: 90px !important; max-height: 90px !important; flex: 0 0 90px !important; }
.generate-page #composerUploads .reference-stack .reference-upload-item:first-of-type { z-index: 50 !important; }

/* Dialog references now use the same fixed upload slot and thumbnail layer as three-view. */
.generate-page #composerUploads .dialog-reference-slot { position: relative !important; }
.generate-page #composerUploads .dialog-reference-slot.is-expanded { z-index: 30 !important; }
.generate-page #composerUploads .dialog-reference-slot.is-expanded .slot-reference-thumb { left: calc(90px + var(--slot-thumb-index, 0) * 96px) !important; pointer-events: auto !important; }
.generate-page #composerUploads .dialog-reference-slot.is-expanded .slot-reference-thumb button { opacity: 1 !important; pointer-events: auto !important; }
.generate-page #composerUploads .dialog-reference-slot .slot-reference-thumb [data-retry-reference] { right: auto !important; left: 3px !important; }

/* Audio references are separate playable, named pale-blue cards. */
.video-page .video-form .asset-grid .asset-audio-card { position: absolute; top: 0; left: var(--thumb-offset, 0px); z-index: calc(20 - var(--thumb-index, 0)); box-sizing: border-box; display: flex; width: 90px; height: 90px; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px; padding: 8px 5px 5px; overflow: hidden; border: 1px solid #c7ddf7; border-radius: 10px; background: #edf6ff; color: #365b82; cursor: pointer; pointer-events: auto !important; transition: left .2s ease; }
.video-page .video-form .asset-grid .asset-audio-card:hover,
.video-page .video-form .asset-grid .asset-audio-card.is-playing { background: #e4f0ff; }
.video-page .video-form .asset-grid .asset-audio-card .asset-audio-icon { position: static !important; inset: auto !important; display: grid; width: 40px !important; min-width: 40px !important; max-width: 40px !important; height: 40px !important; min-height: 40px !important; max-height: 40px !important; flex: 0 0 40px !important; place-items: center; border: 0; border-radius: 50%; background: var(--audio-accent, #3478c8); color: #fff; font-size: 25px; line-height: 1; text-shadow: none; pointer-events: none; }
.video-page .video-form .asset-grid .asset-audio-name { display: block; width: 100%; overflow: hidden; color: #365b82; font-size: 9px; line-height: 13px; text-align: center; text-overflow: ellipsis; white-space: nowrap; pointer-events: none; }
.video-page .video-form .asset-grid .asset-audio-card .asset-thumb-remove { top: 3px; right: 3px; z-index: 3; opacity: 0; pointer-events: none; }
.video-page .video-form .asset-grid .asset-audio-card:hover .asset-thumb-remove,
.video-page .video-form .asset-grid .asset-audio-card:focus-within .asset-thumb-remove { opacity: 1; pointer-events: auto; }
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-card,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-card { left: calc(90px + var(--thumb-index, 0) * 96px); }
.video-page .video-form .video-upload-slot:has(.asset-tile.has-audio-preview:hover),
.video-page .video-form .video-upload-slot:has(.asset-tile.has-audio-preview:focus-within) { flex-basis: var(--expanded-width, 90px) !important; width: var(--expanded-width, 90px) !important; }
.video-page .video-form .asset-tile.has-audio-preview:hover .upload-plus,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .upload-plus { position: absolute; top: 50%; left: 50%; z-index: 52; display: grid !important; transform: translate(-50%, -50%); pointer-events: auto; }
.video-page .video-form .reference-media-grid { flex-wrap: wrap; min-width: 0; }
.video-page .video-form .video-upload-slot.is-audio-expanded { box-sizing: border-box; flex: 0 0 100% !important; width: 100% !important; max-width: 100%; height: var(--audio-slot-height, 112px) !important; }
.video-page .video-form .video-upload-slot.is-audio-expanded .video-upload-caption { top: var(--audio-caption-top, 94px) !important; }
.video-page .video-form .video-upload-slot.is-audio-expanded .asset-audio-card { top: var(--audio-top, 0px) !important; left: var(--audio-left, 90px) !important; }
.video-page .video-form .video-upload-slot.is-audio-expanded .upload-plus { position: absolute; top: 50%; left: 50%; z-index: 52; display: grid !important; transform: translate(-50%, -50%); pointer-events: auto; }
.video-page .video-reference-statuses .video-inline-status { min-height: 0; margin: 0; }

/* Reference videos stay clean thumbnails: click anywhere to toggle playback without native chrome. */
.video-page .video-form .asset-thumb-video { cursor: pointer; }
.video-page .video-form .asset-video-play-hint { position: absolute; top: 50%; left: 50%; z-index: 55; display: grid; width: 32px; height: 32px; place-items: center; padding-left: 2px; transform: translate(-50%, -50%); border: 1px solid rgb(255 255 255 / 82%); border-radius: 50%; background: rgb(20 42 72 / 62%); color: #fff; font-size: 13px; line-height: 1; pointer-events: none; transition: opacity .15s ease, transform .15s ease; }
.video-page .video-form .asset-tile.is-video-playing .asset-video-play-hint { opacity: 0; transform: translate(-50%, -50%) scale(.88); }

/* The replication workflow uses one expanded card for the source video and keyframe timeline. */
.video-page .video-form .replicate-reference-card .video-upload-slot { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: 0 0 100% !important; height: 220px !important; }
.video-page .video-form .replicate-reference-card .reference-media-grid .asset-tile,
.video-page .video-form .replicate-reference-card .reference-media-grid .asset-thumb-stack,
.video-page .video-form .replicate-reference-card .reference-media-grid .asset-thumb-video { box-sizing: border-box !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; height: 100% !important; min-height: 0 !important; max-height: 100% !important; }
.video-page .video-form .replicate-reference-card .reference-media-grid .asset-thumb-video { object-fit: contain !important; }
.video-page .video-form .replicate-reference-card .video-upload-caption { top: 202px !important; width: 100% !important; }

/* Per-page result and asset layout menus. Auto preserves each page's default sizing. */
.detail-results[data-layout]:has(.image-result-card),
.task-list[data-layout],
.asset-library-grid[data-layout],
.work-asset-grid[data-layout] { --layout-columns: 4; }
.detail-results[data-layout="3"],.task-list[data-layout="3"],.asset-library-grid[data-layout="3"],.work-asset-grid[data-layout="3"] { --layout-columns: 3; }
.detail-results[data-layout="4"],.task-list[data-layout="4"],.asset-library-grid[data-layout="4"],.work-asset-grid[data-layout="4"] { --layout-columns: 4; }
.detail-results[data-layout="5"],.task-list[data-layout="5"],.asset-library-grid[data-layout="5"],.work-asset-grid[data-layout="5"] { --layout-columns: 5; }
.detail-results[data-layout="6"],.task-list[data-layout="6"],.asset-library-grid[data-layout="6"],.work-asset-grid[data-layout="6"] { --layout-columns: 6; }
.detail-results[data-layout="9"],.task-list[data-layout="9"],.asset-library-grid[data-layout="9"],.work-asset-grid[data-layout="9"] { --layout-columns: 9; }
.detail-results[data-layout]:has(.image-result-card),
.task-list[data-layout],
.asset-library-grid[data-layout],
.work-asset-grid[data-layout] { display:grid;grid-template-columns:repeat(var(--layout-columns),minmax(0,1fr));align-content:start;align-items:stretch;gap:14px; }
.detail-results[data-layout]:has(.image-result-card) > *,
.task-list[data-layout] > *,
.asset-library-grid[data-layout] > *,
.work-asset-grid[data-layout] > * { width:auto;min-width:0;max-width:none;flex:none; }
.detail-results[data-layout] > .result-load-more,
.asset-library-grid[data-layout] > .result-load-more { grid-column:1/-1; }
.detail-results-toolbar [data-layout-control] { margin-left:auto; }
.works-heading-actions { display:flex;align-items:center;gap:9px; }
.works-heading-actions .layout-control-wrap > button { display:flex;align-items:center;gap:5px;height:38px;padding:0 13px; }
.works-heading-actions .layout-control-wrap > button img:first-child { width:15px;height:15px; }
.works-heading-actions .layout-control-wrap > button .chevron-icon { width:13px;height:13px; }

/* Keep auto layout responsive on the design and video result surfaces. */
#detailResults[data-layout="auto"]:has(.image-result-card) {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(190px,100%),1fr));
  grid-auto-flow:row;
  justify-content:stretch;
  align-content:start;
  align-items:start;
  gap:16px;
}
#detailResults[data-layout="auto"]:has(.image-result-card) > .image-result-card {
  width:100%;
  min-width:0;
  max-width:none;
}
#taskList[data-layout="auto"] {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(220px,100%),1fr));
  justify-content:stretch;
  align-content:start;
  align-items:stretch;
  gap:18px;
}
#taskList[data-layout="auto"] > .task-card { width:100%;min-width:0;max-width:none; }
#detailResults[data-layout="3"]:has(.image-result-card) { grid-template-columns:repeat(3,minmax(0,1fr)); }
#detailResults[data-layout="4"]:has(.image-result-card) { grid-template-columns:repeat(4,minmax(0,1fr)); }
#detailResults[data-layout="5"]:has(.image-result-card) { grid-template-columns:repeat(5,minmax(0,1fr)); }
#detailResults[data-layout="6"]:has(.image-result-card) { grid-template-columns:repeat(6,minmax(0,1fr)); }
#detailResults[data-layout="9"]:has(.image-result-card) { grid-template-columns:repeat(9,minmax(0,1fr)); }
#taskList[data-layout="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
#taskList[data-layout="4"] { grid-template-columns:repeat(4,minmax(0,1fr)); }
#taskList[data-layout="5"] { grid-template-columns:repeat(5,minmax(0,1fr)); }
#taskList[data-layout="6"] { grid-template-columns:repeat(6,minmax(0,1fr)); }
#taskList[data-layout="9"] { grid-template-columns:repeat(9,minmax(0,1fr)); }

/* Material favorites are subtle until the user points at a tile. */
.material-library-heading .material-favorites-first { margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border:1px solid #e4e8ef;border-radius:15px;background:#fff;color:#667085;font-size:11px;white-space:nowrap;cursor:pointer; }
.material-library-heading .material-favorites-first span { color:#98a2b3;font-size:17px; }
.material-library-heading .material-favorites-first.is-active { border-color:#f4cf68;background:#fff9e8;color:#8a6500; }
.material-library-heading .material-favorites-first.is-active span { color:#e0a900; }
.material-library-heading .material-library-close { margin-left:0;flex:none; }
.material-library-card { position:relative; }
.material-library-card .material-favorite-button,
.official-media-card .material-favorite-button { position:absolute;z-index:3;top:7px;right:7px;display:grid;place-items:center;width:28px;height:28px;min-height:0;padding:0;border:1px solid #ffffffc9;border-radius:50%;background:#ffffffed;color:#687386;font-size:18px;line-height:1;opacity:0;pointer-events:none;box-shadow:0 2px 8px #11182726;cursor:pointer;transition:opacity .14s,transform .14s,color .14s; }
.material-library-card .material-favorite-button svg,
.official-media-card .material-favorite-button svg { display:block;width:17px;height:17px; }
.material-library-card:hover .material-favorite-button,
.official-media-card:hover .material-favorite-button { opacity:1;pointer-events:auto; }
.material-library-card .material-favorite-button:hover,
.official-media-card .material-favorite-button:hover { transform:scale(1.08); }
.material-library-card .material-favorite-button.is-favorite,
.official-media-card .material-favorite-button.is-favorite { color:#ec4899; }
.official-media-card { position:relative; }

/* The design toolbar styles its child divs as flex rows; keep its menu vertical. */
.detail-results-toolbar .layout-menu:not([hidden]) { display:block;width:210px; }
.detail-results-toolbar .layout-menu > button { display:flex;flex:0 0 100%;width:100%;white-space:nowrap; }

/* Video previews keep their real frame ratio as result columns reflow. */
.results-area #taskList .video-result-card .task-thumb { height:auto;aspect-ratio:var(--video-card-ratio,9/16); }
.results-area #taskList .video-result-card .video-result-open video { object-fit:contain; }

/* Image history loads the next batch when its non-interactive sentinel nears view. */
.image-results .result-load-more.is-scroll-sentinel {
  flex: 0 0 100%;
  width: 100%;
  min-height: 32px;
  display: grid;
  place-items: center;
  margin: 8px 0 18px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #8b95a5;
  font-size: 12px;
  font-weight: 400;
  cursor: default;
}
.image-results .result-load-more.is-scroll-sentinel:hover { border: 0; background: transparent; color: #8b95a5; }

/* Keep the floating image composer centered in the available page area. */
@media (min-width: 851px) {
  .generate-page > .image-composer-wrap {
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    justify-content: center;
  }
  .generate-page .image-composer {
    flex: 0 1 1000px;
    width: min(1000px, calc(100% - 48px));
    max-width: 1000px;
  }
}

@media (max-width: 850px) {
  .generate-page > .image-composer-wrap {
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    justify-content: center;
  }
  .generate-page .image-composer {
    flex: 1 1 auto;
    width: 100%;
    max-width: none;
  }
}

/* Share the same template shelf with every image-generation subfeature. */
.generate-page{--generate-template-width:clamp(220px,17.5vw,267px)}
.generate-page>.generate-template-panel{position:absolute;top:0;right:auto;bottom:0;left:0;width:var(--generate-template-width);padding:14px 12px 12px;z-index:7}
.generate-page>.generate-header{padding-left:calc(var(--generate-template-width) + 22px)}
.generate-page>#imageResults{left:calc(var(--generate-template-width) + 8px);right:0}
.generate-page>.image-composer-wrap{left:calc(var(--generate-template-width) + 16px);right:16px;width:auto;max-width:none;transform:none;justify-content:center}
.generate-page .image-composer{flex:0 1 1000px;width:min(1000px,100%);max-width:1000px}
@media(max-width:850px){.generate-page{--generate-template-width:clamp(190px,24vw,230px)}.generate-page>.generate-header{padding-left:calc(var(--generate-template-width) + 14px);padding-right:10px;gap:8px}.generate-page>#imageResults{left:calc(var(--generate-template-width) + 6px)}.generate-page>.image-composer-wrap{left:calc(var(--generate-template-width) + 8px);right:8px}.generate-page>.generate-template-panel{padding-inline:9px}}

/* E-commerce composer: three content-sized columns that keep a usable minimum
   from roughly 520px (851px viewport with the shelf open) to 1200px. Tracks and
   padding are deliberately tight: the dock now sits beside the shelf, so every
   pixel taken by chrome is a pixel the controls lose. */
@media (min-width: 851px) {
  #ecommerceDesignCategory .detail-workbench {
    display: grid !important;
    grid-template-columns: minmax(108px, .82fr) minmax(196px, 1.36fr) minmax(200px, 1.42fr);
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
  }
  #ecommerceDesignCategory .detail-workbench > .detail-assets,
  #ecommerceDesignCategory .detail-workbench > .detail-settings,
  #ecommerceDesignCategory .detail-workbench > .detail-output {
    box-sizing: border-box !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    padding: 8px !important;
  }
  #ecommerceDesignCategory .detail-workbench > .detail-settings,
  #ecommerceDesignCategory .detail-workbench > .detail-output {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  /* auto-fit instead of two fixed tracks: the assets column is only ~110-270px
     wide here, so a second 90px slot track would bleed over its neighbour. */
  #ecommerceDesignCategory .detail-workbench > .detail-assets {
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr)) !important;
  }
  /* The hint spans the whole assets row here, so drop the old +43px nudge that
     pushed it past the column border. */
  #ecommerceDesignCategory .detail-workbench #detailAssetHint { left: 0 !important; }
  /* The 90px fixed slots are sized for the wide desktop composer. Let each slot
     fill its cell (capped at 90px) and keep the caption inside the control. */
  #ecommerceDesignCategory .detail-workbench .detail-upload-control {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    flex: 0 0 auto !important;
    padding-bottom: 16px !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-upload-add.site-image-upload,
  #ecommerceDesignCategory .detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 90px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-upload-stack {
    box-sizing: border-box !important;
    top: 0 !important;
    bottom: 16px !important;
    width: 100% !important;
    max-width: 90px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-upload-item {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-upload-caption {
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    max-width: 90px !important;
    height: 14px !important;
    font-size: 10px !important;
    text-align: center !important;
  }
  /* Let the controls re-flow by the column's own width, not the viewport's. */
  #ecommerceDesignCategory .detail-workbench > .detail-settings {
    gap: 3px !important;
    container: detail-settings / inline-size;
  }
  #ecommerceDesignCategory .detail-workbench .detail-counts {
    min-height: 30px !important;
    height: auto !important;
    margin: 0 !important;
    padding: 3px 6px !important;
    gap: 6px !important;
    flex-wrap: wrap !important;
    white-space: normal !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-count-group {
    gap: 4px !important;
  }
  /* The count labels are pinned to 104px for the wide desktop panel, which
     forces each group onto its own row. Let them shrink-wrap so 主图 and
     详情图 share a row in the dock. */
  #ecommerceDesignCategory .detail-workbench .detail-count-group > span {
    width: auto !important;
    min-height: 0 !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-count-group > span:first-child {
    justify-content: flex-start !important;
  }
  /* Controls become an evenly sized grid so they wrap in whole rows and can
     never be cut off by a max-height, whatever the column width. */
  #ecommerceDesignCategory .detail-workbench .detail-controls {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-controls > * {
    box-sizing: border-box;
    height: 26px !important;
    min-width: 0 !important;
    padding: 0 4px !important;
    gap: 2px !important;
    justify-content: center;
    overflow: hidden;
    white-space: nowrap !important;
    border-radius: 8px !important;
    font-size: 10px !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-controls .detail-action {
    border-color: transparent !important;
    background: #f5f7fa !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-controls label {
    border: 1px solid #edf0f2 !important;
    background: #fff !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-controls select {
    width: 100%;
    min-width: 0;
    max-width: 100% !important;
    font-size: 10px !important;
    text-overflow: ellipsis;
  }
  #ecommerceDesignCategory .detail-workbench .detail-prompt-wrap {
    gap: 3px;
  }
  #ecommerceDesignCategory .detail-workbench .detail-prompt-wrap > textarea {
    min-height: 58px !important;
    padding: 8px !important;
    font-size: 12px !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-prompt-actions {
    margin-top: 0 !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-prompt-actions > button {
    height: 26px !important;
    padding: 0 8px !important;
    font-size: 11px !important;
  }
  #ecommerceDesignCategory .detail-workbench .detail-upload-add.site-image-upload {
    border-radius: 10px !important;
  }
  #ecommerceDesignCategory .detail-workbench > .detail-output {
    gap: 3px !important;
    container: detail-output / inline-size;
  }
  #ecommerceDesignCategory .detail-workbench .detail-output-summary > button {
    height: 30px !important;
  }
}

/* Two control columns once the settings track drops below ~250px: three would
   shrink every label to an unreadable stub, two keeps 商品类型/比例 legible. */
@container detail-settings (max-width: 250px) {
  #ecommerceDesignCategory .detail-workbench .detail-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

#ecommerceDesignCategory .detail-plan-fields {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  align-items: stretch;
  gap: 5px;
}
#ecommerceDesignCategory .detail-plan-group { min-width: 0; padding: 5px; }
#ecommerceDesignCategory .detail-plan-group-head { flex-wrap: nowrap; margin-bottom: 3px; gap: 3px; }
/* The tabs used to wrap onto a second line in a ~120px card, doubling the head.
   Keep the title on one line and the tabs at their natural width instead. */
#ecommerceDesignCategory .detail-plan-group-head > strong {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
}
#ecommerceDesignCategory .detail-plan-tabs { flex: none; gap: 3px; }
#ecommerceDesignCategory .detail-plan-tabs button { box-sizing: border-box; width: 19px; height: 19px; border-radius: 6px; font-size: 9px; }
/* Narrow output column: shrink the tab chips so the 策划 title keeps its
   four characters instead of ellipsing to 主图…/详情…. */
@container detail-output (max-width: 300px) {
  #ecommerceDesignCategory .detail-plan-group-head { gap: 2px; }
  #ecommerceDesignCategory .detail-plan-tabs { gap: 2px; }
  #ecommerceDesignCategory .detail-plan-tabs button { width: 16px; height: 16px; border-radius: 5px; font-size: 9px; }
}
#ecommerceDesignCategory .detail-plan-field span { font-size: 10px; }
#ecommerceDesignCategory .detail-plan-field textarea { min-height: 34px; padding: 6px 7px; font-size: 11px; }
@media (max-width: 600px) {
  #ecommerceDesignCategory .detail-plan-fields { grid-template-columns: minmax(0, 1fr); }
}

/* Let expanded e-commerce asset thumbnails paint above the adjacent settings column.
   The design-preview layout applies overflow:hidden to the workbench and every
   child column; undo that clipping only for the e-commerce workbench. */
@media (min-width: 851px) {
  #ecommerceDesignCategory .detail-workbench {
    overflow: visible !important;
  }
  #ecommerceDesignCategory .detail-workbench > .detail-assets {
    position: relative !important;
    z-index: 8 !important;
    overflow: visible !important;
  }
  #ecommerceDesignCategory .detail-workbench > .detail-settings,
  #ecommerceDesignCategory .detail-workbench > .detail-output {
    position: relative !important;
    z-index: 1 !important;
  }
}
#detailCounts { position: relative; z-index: 2; }

/* Expanded multi-asset stacks should form one seamless strip, with zero gap. */
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:hover .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature .composer-slot-wrap:focus-within .slot-reference-thumb,
.generate-page #composerUploads.multi-reference-feature .dialog-reference-slot.is-expanded .slot-reference-thumb {
  left: calc(90px + var(--slot-thumb-index, 0) * 90px) !important;
}
.generate-page #composerUploads .reference-stack:hover .reference-upload-item,
.generate-page #composerUploads .reference-stack:focus-within .reference-upload-item {
  left: calc(90px + var(--stack-index, 0) * 90px) !important;
}
.generate-page #composerUploads .reference-stack.is-expanded .reference-upload-item {
  left: calc(90px + var(--stack-index, 0) * 90px) !important;
}
.detail-workbench .detail-upload-control:hover .detail-upload-item,
.detail-workbench .detail-upload-control:focus-within .detail-upload-item {
  left: calc(90px + var(--stack-index, 0) * 90px) !important;
}
.video-page .video-form .asset-tile.has-image-preview:hover .asset-thumb-card,
.video-page .video-form .asset-tile.has-image-preview:focus-within .asset-thumb-card {
  left: calc(var(--thumb-index, 0) * 90px) !important;
}
.video-page .video-form .asset-tile.has-audio-preview:hover .asset-audio-card,
.video-page .video-form .asset-tile.has-audio-preview:focus-within .asset-audio-card {
  left: var(--audio-left, 90px) !important;
}

.video-depth-page{min-height:calc(100vh - 72px);padding:28px clamp(20px,3vw,48px) 42px;background:#f6f8fb;color:#172235;overflow:auto}
.video-depth-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;margin:0 auto 22px;max-width:1440px}
.video-depth-heading small{color:#71829a;font-size:12px;font-weight:700;letter-spacing:.03em}
.video-depth-heading h1{margin:7px 0 5px;font-size:26px;letter-spacing:-.03em}
.video-depth-heading p{margin:0;color:#7c899a;font-size:13px}
.video-depth-local-badge{padding:8px 13px;border:1px solid #c8dcff;border-radius:22px;background:#edf4ff;color:#0059ff;font-size:12px;font-weight:700;white-space:nowrap}
.video-depth-layout{display:grid;grid-template-columns:minmax(280px,360px) minmax(0,1fr);gap:20px;max-width:1440px;margin:auto;align-items:start}
.video-depth-controls,.video-depth-preview-card{border:1px solid #e4eaf2;border-radius:18px;background:#fff;box-shadow:0 8px 28px #17243a08}
.video-depth-controls{padding:18px;display:flex;flex-direction:column;gap:14px}
.video-depth-file{min-height:126px;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;border:1px dashed #aabbd0;border-radius:15px;background:#f8faff;text-align:center;cursor:pointer}
.video-depth-file:hover{border-color:#0059ff;background:#f4f8ff}
.video-depth-file input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.video-depth-file-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#e7f0ff;color:#0059ff;font-size:23px;line-height:1}
.video-depth-file strong{font-size:13px}
.video-depth-file small{color:#8491a4;font-size:11px}
.video-depth-engine{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:12px;background:#f7f9fc}
.video-depth-engine strong,.video-depth-engine small{display:block}
.video-depth-engine strong{font-size:12px}
.video-depth-engine small{margin-top:4px;color:#8190a3;font-size:11px}
.video-depth-engine>span{padding:5px 8px;border-radius:12px;background:#edf4ff;color:#2763bc;font-size:10px;white-space:nowrap}
.video-depth-setting{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:10px;color:#637287;font-size:12px}
.video-depth-setting select{height:38px;min-width:0;padding:0 10px;border:1px solid #e1e7ef;border-radius:10px;background:#fff;color:#233249}
.video-depth-notice{padding:11px 12px;border-radius:12px;background:#fff8e9;color:#85672d;font-size:11px;line-height:1.65}
.video-depth-start,.video-depth-cancel{height:44px;border:0;border-radius:12px;background:#0059ff;color:#fff;font-weight:700}
.video-depth-start:disabled{background:#cbd4e1;color:#fff;cursor:not-allowed}
.video-depth-cancel{border:1px solid #e2e7ee;background:#fff;color:#58677b}
.video-depth-progress{padding-top:2px}
.video-depth-progress-heading{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#69788d;font-size:11px}
.video-depth-progress-heading span:last-child{color:#0059ff;font-weight:700}
.video-depth-progress progress{width:100%;height:8px;overflow:hidden;border:0;border-radius:8px;background:#edf1f6}
.video-depth-progress progress::-webkit-progress-bar{background:#edf1f6}
.video-depth-progress progress::-webkit-progress-value{border-radius:8px;background:#0059ff}
.video-depth-feedback{min-height:18px;margin:0;color:#718198;font-size:11px;line-height:1.5}
.video-depth-feedback.error{color:#c03535}
.video-depth-preview{min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.video-depth-preview-card{min-width:0;padding:15px}
.video-depth-preview-card h2{margin:0 0 12px;font-size:13px}
.video-depth-video-wrap{position:relative;display:grid;min-height:250px;aspect-ratio:9/16;max-height:calc(100vh - 260px);place-items:center;overflow:hidden;border-radius:13px;background:#111722}
.video-depth-video-wrap video{width:100%;height:100%;object-fit:contain;background:#111722}
.video-depth-video-wrap video[hidden]{display:none}
.video-depth-empty{position:absolute;color:#8996a8;font-size:12px;text-align:center;pointer-events:none}
.video-depth-preview-card>small{display:block;margin-top:10px;color:#8592a3;font-size:11px}
.video-depth-download{display:inline-flex;margin-top:10px;padding:9px 12px;border-radius:10px;background:#edf4ff;color:#0059ff;font-size:12px;font-weight:700;text-decoration:none}
.video-depth-download[hidden]{display:none}
@media(max-width:1050px){.video-depth-layout{grid-template-columns:minmax(260px,320px) minmax(0,1fr);gap:12px}.video-depth-preview{grid-template-columns:1fr}.video-depth-video-wrap{max-height:42vh;aspect-ratio:16/9}}
@media(max-width:760px){.video-depth-page{padding:20px 14px 32px}.video-depth-layout{grid-template-columns:1fr}.video-depth-preview{grid-template-columns:repeat(2,minmax(0,1fr))}.video-depth-video-wrap{min-height:190px;max-height:45vh;aspect-ratio:9/16}.video-depth-preview-card{padding:10px}.video-depth-heading h1{font-size:23px}}

.viral-page{min-height:calc(100vh - 70px);padding:28px 36px 56px;background:radial-gradient(ellipse at 50% -25%,#263d92 0,#111935 44%,#0b1026 100%);color:#f4f5ff}
.viral-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1600px;margin:0 auto 22px}.viral-heading small{color:#a4b4ff;letter-spacing:.12em}.viral-heading h1{margin:5px 0;font-size:28px}.viral-heading p{margin:0;color:#b4bddb}.viral-heading>button,.viral-remix{border:0;border-radius:999px;padding:12px 22px;background:linear-gradient(100deg,#536dff,#b440ff 65%,#ff795e);color:#fff;font-weight:700;box-shadow:0 7px 22px #8a59ff44}.viral-type-switch{width:min(390px,100%);height:60px;padding:5px;margin:18px auto 26px;border:1px solid #afdbff;border-radius:999px;background:#f9faff;display:flex;box-shadow:0 0 30px #6edcff55,0 0 56px #814bff3b}.viral-type-switch button{flex:1;border:0;border-radius:999px;background:transparent;color:#48506a;font-weight:700}.viral-type-switch button.selected{background:linear-gradient(110deg,#e8f8ff,#eee9ff);color:#643cff;box-shadow:0 3px 12px #4c62d526}.viral-tags{max-width:1600px;margin:0 auto 22px;display:flex;gap:8px;overflow:auto;padding:3px 0 10px;scrollbar-width:thin}.viral-tags button{flex:none;border:1px solid #555d89;border-radius:999px;padding:8px 15px;background:#151d3c;color:#d9def5}.viral-tags button.selected{border-color:#a184ff;background:#6638e8;color:#fff}.viral-grid{max-width:1600px;margin:0 auto;columns:5 210px;column-gap:12px}.viral-card{position:relative;break-inside:avoid;margin:0 0 12px;border-radius:12px;overflow:hidden;background:#191e33;box-shadow:0 8px 24px #0003}.viral-card[draggable="true"]{cursor:grab}.viral-card.dragging{opacity:.4}.viral-card-open{position:relative;display:block;width:100%;padding:0;border:0;background:transparent;text-align:left;color:#fff}.viral-card img,.viral-card video{display:block;width:100%;height:auto;max-height:620px;object-fit:cover}.viral-card video{aspect-ratio:9/16;object-fit:cover}.viral-play{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#101426ad;color:white}.viral-card-caption{display:block;padding:11px 12px 13px;background:linear-gradient(transparent,#11172a18)}.viral-card-caption strong{display:block;font-size:14px;line-height:1.45}.viral-card-caption small{display:block;margin-top:7px;color:#acb5d7;font-size:11px}.viral-drag-hint{position:absolute;top:8px;left:8px;padding:3px 8px;border-radius:12px;background:#080d1bbd;color:white;pointer-events:none}.viral-empty{padding:72px 20px;text-align:center;color:#a8b1d0;border:1px dashed #555d89;border-radius:16px;break-inside:avoid}.viral-detail-dialog{position:fixed;inset:0;width:min(1080px,calc(100vw - 36px));max-width:none;max-height:calc(100vh - 36px);padding:0;border:1px solid #ffffff20;border-radius:22px;background:#11172b;color:#f4f5ff;box-shadow:0 24px 80px #0009}.viral-detail-dialog::backdrop{background:#050817bd;backdrop-filter:blur(5px)}.viral-detail-dialog>div>header{display:flex;align-items:center;justify-content:space-between;padding:17px 20px;border-bottom:1px solid #ffffff18}.viral-detail-dialog header small{color:#9eabda}.viral-detail-dialog h2{margin:3px 0;font-size:20px}.viral-detail-dialog header button{width:38px;height:38px;border:0;border-radius:50%;background:#ffffff16;color:#fff;font-size:24px}.viral-detail-body{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:24px;padding:20px;max-height:calc(100vh - 110px);overflow:auto}.viral-detail-media{display:block;width:100%;max-height:calc(100vh - 170px);object-fit:contain;border-radius:12px;background:#070a14}.viral-detail-body section{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.viral-detail-body section p{margin:0;color:#d1d7ec;line-height:1.7;white-space:pre-wrap}.viral-detail-tags{display:flex;gap:7px;flex-wrap:wrap}.viral-detail-tags span{padding:6px 10px;border-radius:999px;background:#252e52;color:#c5cbeb;font-size:12px}.viral-remix{margin-top:auto}.viral-admin-tools{display:flex;gap:8px;flex-wrap:wrap}.viral-admin-tools button{border:1px solid #64709b;border-radius:9px;background:#1a2240;color:#e3e8ff;padding:8px 12px}.viral-admin-tools .danger{color:#ffb4ba;border-color:#ab5966}
@media(max-width:900px){.viral-page{padding:22px 18px 40px}.viral-grid{columns:3 170px}.viral-detail-body{grid-template-columns:1fr}.viral-detail-media{max-height:65vh}}
@media(max-width:560px){.viral-grid{columns:2 135px;column-gap:8px}.viral-card{margin-bottom:8px}.viral-heading{align-items:flex-start}.viral-heading p{max-width:70vw;font-size:12px}.viral-type-switch{height:50px}.viral-card-caption{padding:8px}.viral-card-caption strong{font-size:12px}}
.viral-upload-dialog{position:fixed;inset:0;width:min(520px,calc(100vw - 28px));max-width:none;max-height:calc(100vh - 32px);padding:0;border:1px solid #ffffff24;border-radius:18px;background:#11172b;color:#f4f5ff;box-shadow:0 24px 80px #0009}.viral-upload-dialog::backdrop{background:#050817bd;backdrop-filter:blur(5px)}.viral-upload-dialog form{display:grid;gap:13px;padding:20px}.viral-upload-dialog header{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #ffffff18}.viral-upload-dialog header small{color:#9eabda}.viral-upload-dialog h2{margin:3px 0;font-size:20px}.viral-upload-dialog header button{width:36px;height:36px;border:0;border-radius:50%;background:#ffffff16;color:#fff;font-size:23px}.viral-upload-file{overflow:hidden;margin:0;padding:10px 12px;border:1px solid #ffffff1c;border-radius:9px;background:#ffffff0a;color:#b9c4e5;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.viral-upload-dialog label{display:grid;gap:6px;color:#cbd4ed;font-size:12px}.viral-upload-dialog input,.viral-upload-dialog select,.viral-upload-dialog textarea{width:100%;min-width:0;padding:10px 11px;border:1px solid #465174;border-radius:9px;background:#0c1225;color:#f4f5ff}.viral-upload-dialog textarea{resize:vertical}.viral-upload-feedback{min-height:18px;margin:0;color:#b8c8ff;font-size:12px;line-height:1.5}.viral-upload-dialog footer{display:flex;justify-content:flex-end;gap:9px}.viral-upload-dialog footer button{padding:9px 14px;border:1px solid #59658b;border-radius:9px;background:#1b2441;color:#e8ecff}.viral-upload-dialog footer button[type="submit"]{border-color:#705bff;background:#6448ff;color:#fff;font-weight:700}.viral-upload-dialog footer button:disabled{opacity:.65;cursor:wait}

/* Final dark-theme pass. Loaded after every other stylesheet so it can beat
   late, high-specificity light rules in flex-layout.css and the workspace files.
   Keep selectors scoped to body.dark-theme. */

/* --- Upload tiles: composer slots, three-view, design categories, detail --- */
body.dark-theme .site-image-upload,
body.dark-theme .generate-page #composerUploads.multi-reference-feature .composer-upload,
body.dark-theme .design-category-composer #designCategoryUploads .composer-upload,
body.dark-theme .detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload {
  background: #202d41 !important;
  border-color: #34455d !important;
  color: #a9bbd2 !important;
}
body.dark-theme .site-image-upload:hover,
body.dark-theme .generate-page #composerUploads.multi-reference-feature .composer-upload:hover,
body.dark-theme .design-category-composer #designCategoryUploads .composer-upload:hover,
body.dark-theme .detail-workbench .detail-upload-control > .detail-upload-add.site-image-upload:hover {
  background: #273850 !important;
  border-color: #4a5f7d !important;
  color: #dce6f3 !important;
}
body.dark-theme .generate-page #composerUploads.multi-reference-feature .composer-upload .upload-label,
body.dark-theme .design-category-composer #designCategoryUploads .upload-label {
  color: #a9bbd2 !important;
}
body.dark-theme .site-image-upload .upload-plus {
  color: #a9bbd2 !important;
}
body.dark-theme .site-image-upload .upload-badge {
  background: #2b3b52 !important;
  color: #bfcee1 !important;
}

/* --- Design category composer (小红书封面, 文创, 海报 …) --- */
body.dark-theme .design-category-name-control {
  background: #203b63;
  border-color: #3c6398;
  color: #c4dcff;
}
body.dark-theme .design-category-name-control img {
  filter: brightness(0) invert(.84);
}
body.dark-theme .design-category-select {
  background: #202d41;
  border-color: #34455d;
  color: #a9bbd2;
}
body.dark-theme .design-category-select select {
  background: transparent;
  color: #e5edf8;
}
body.dark-theme .design-category-composer .composer-submit small {
  color: #9baac0;
}
body.dark-theme .design-record-status-filter button {
  color: #a9bbd2;
}
body.dark-theme .design-record-status-filter button.selected {
  background: #203b63;
  color: #c4dcff;
}

/* --- E-commerce detail controls and count steppers --- */
body.dark-theme #ecommerceDesignCategory .detail-workbench .detail-controls .detail-action {
  background: #202d41 !important;
  border-color: #34455d !important;
  color: #dce6f3 !important;
}
body.dark-theme #ecommerceDesignCategory .detail-workbench .detail-controls .detail-action img {
  filter: brightness(0) invert(.82);
}
body.dark-theme #ecommerceDesignCategory .detail-workbench .detail-controls label {
  background: #202d41 !important;
  border-color: #34455d !important;
  color: #a9bbd2 !important;
}
body.dark-theme #ecommerceDesignCategory .detail-workbench .detail-controls label select {
  background: transparent;
  color: #e5edf8;
}
body.dark-theme .detail-chip {
  background: #202d41;
  border-color: #34455d;
  color: #dce6f3;
}
body.dark-theme .detail-chip small,
body.dark-theme .detail-chip.muted {
  color: #9baac0;
}
body.dark-theme .detail-count-group {
  color: #a9bbd2;
}
body.dark-theme .detail-count-group.is-inactive {
  color: #71839d;
}
body.dark-theme .detail-count-stepper {
  background: #152238;
  border-color: #2d3b50;
}
body.dark-theme .detail-count-group.is-inactive .detail-count-stepper {
  background: #19273b;
}
body.dark-theme .detail-count-group button {
  color: #8ab7ff;
}
body.dark-theme .detail-count-group button:hover:not(:disabled) {
  background: #203b63;
}
body.dark-theme .detail-count-group button:disabled {
  color: #5c6d85;
}

/* --- Model card workspace --- */
body.dark-theme #generatePage.model-card-active > #imageResults {
  background: linear-gradient(180deg, #0f1927 0%, #101827 50%);
}
body.dark-theme #generatePage.model-card-active > .feature-guide {
  background: #152238;
  border-color: #2b3b52;
  color: #dce6f3;
  box-shadow: 0 10px 28px #0004;
}
body.dark-theme .model-card-parameter-icon {
  background: #203b63;
}
body.dark-theme .model-card-parameter-icon img {
  filter: brightness(0) invert(.84);
}
body.dark-theme .model-card-name-field,
body.dark-theme .model-card-profile-grid label,
body.dark-theme .model-card-look-prompt,
body.dark-theme .model-card-look-prompt span {
  color: #a9bbd2;
}
body.dark-theme .model-card-profile-grid input,
body.dark-theme .model-card-profile-grid select,
body.dark-theme .model-card-name-field input,
body.dark-theme .model-card-look-prompt textarea {
  background: #111c2c;
  border-color: #35465d;
  color: #e5edf8;
}
body.dark-theme .model-card-look-editor {
  border-top-color: #2b3b52;
}
body.dark-theme .model-card-look-heading strong {
  color: #e7effb;
}
body.dark-theme .model-card-look-heading small {
  color: #9baac0;
}
body.dark-theme .model-card-look-editor nav button {
  background: #202d41;
  border-color: #34455d;
  color: #c5d6ec;
}
body.dark-theme .model-card-look-editor nav button.selected {
  background: #075bea;
  border-color: #075bea;
  color: #fff;
}
body.dark-theme .model-card-flow-note {
  background: #172438;
  color: #9baac0;
}
body.dark-theme .model-card-sheet {
  background: #182438;
  border-color: #2b3b52;
  color: #dce6f3;
  box-shadow: none;
}
body.dark-theme .model-card-sheet > header {
  border-bottom-color: #2b3b52;
}
body.dark-theme .model-card-info > span {
  color: #8ab7ff;
}
body.dark-theme .model-card-info h2 {
  color: #e7effb;
}
body.dark-theme .model-card-info p,
body.dark-theme .model-card-info small {
  color: #9baac0;
}
body.dark-theme .model-card-image {
  background: #101b2b;
  border-color: #34455d;
  color: #a9bbd2;
}
body.dark-theme .model-card-image img {
  background: #101b2b;
}
body.dark-theme .model-card-image > span,
body.dark-theme .model-card-image > small {
  background: linear-gradient(0deg, #101b2b 0%, #101b2be6 78%, transparent 100%);
}
body.dark-theme .model-card-image > small {
  color: #9baac0;
}
body.dark-theme .model-card-image.is-empty {
  background: linear-gradient(145deg, #172438, #111b2a);
}
body.dark-theme .model-card-image.is-empty > span,
body.dark-theme .model-card-image.is-empty > small {
  background: none;
  color: #8293aa;
}
body.dark-theme .model-card-image.is-failed {
  border-color: #6c3942;
  background: #2b1c22;
}

/* --- Works text assets --- */
body.dark-theme .text-asset-add {
  background: #1a2a41;
  border-color: #344b6b;
  color: #a9cbff;
}
body.dark-theme .text-asset-add:hover {
  background: #203b63;
}
body.dark-theme .text-asset-dialog {
  background: #152238;
  border-color: #2b3b52;
  color: #e5edf8;
  box-shadow: 0 24px 80px #0007;
}
body.dark-theme .text-asset-dialog form > header small {
  color: #8ab7ff;
}
body.dark-theme .text-asset-dialog form > header button {
  background: #202d41;
  color: #c5d6ec;
}
body.dark-theme .text-asset-dialog label {
  color: #c5d6ec;
}
body.dark-theme .text-asset-dialog input,
body.dark-theme .text-asset-dialog select,
body.dark-theme .text-asset-dialog textarea {
  background: #111c2c;
  border-color: #35465d;
  color: #e5edf8;
}
body.dark-theme .text-asset-dialog footer button {
  background: #202d41;
  border-color: #34455d;
  color: #dce6f3;
}
body.dark-theme .text-asset-dialog footer button[type=submit] {
  background: #1268d3;
  border-color: #1268d3;
  color: #fff;
}

/* --- Credit shortage dialog --- */
body.dark-theme .credit-shortage-dialog {
  background: #152238;
  border-color: #2b3b52;
  color: #e5edf8;
  box-shadow: 0 24px 80px #0007;
}
body.dark-theme .credit-shortage-close button {
  background: #202d41;
  color: #c5d6ec;
}
body.dark-theme .credit-shortage-kicker {
  background: #493c24;
  color: #f1c875;
}
body.dark-theme .credit-shortage-content > p,
body.dark-theme .credit-shortage-amounts,
body.dark-theme .credit-shortage-contact small {
  color: #9baac0;
}
body.dark-theme .credit-shortage-amounts b,
body.dark-theme .credit-shortage-contact strong {
  color: #e7effb;
}
body.dark-theme .credit-shortage-contact {
  background: #111c2c;
  border-color: #2d3b50;
}

/* --- Admin controls --- */
body.dark-theme .admin-preview-tag {
  background: #493c24;
  color: #f1c875;
}
body.dark-theme .admin-user-type-control button {
  background: #203149;
  border-color: #34455d;
  color: #a9cbff;
}
body.dark-theme .admin-user-type-control select {
  background: #111c2c;
  border-color: #35465d;
  color: #dce6f3;
}

/* --- Admin dialogs: user detail, allocation, points, password, finance --- */
body.dark-theme .admin-user-detail-dialog {
  background: #152238;
  border-color: #2b3b52;
  color: #e5edf8;
  box-shadow: 0 20px 70px #0007;
}
body.dark-theme .admin-user-detail-header,
body.dark-theme .admin-user-detail-tabs,
body.dark-theme .admin-user-detail-limit {
  background: #182438;
  border-color: #2b3b52;
}
body.dark-theme .admin-user-detail-header h2,
body.dark-theme .admin-user-detail-profile strong,
body.dark-theme .admin-user-detail-kpis article strong,
body.dark-theme .admin-user-task header strong,
body.dark-theme .admin-user-work-card strong,
body.dark-theme .admin-user-usage-breakdown h3,
body.dark-theme .admin-user-usage-breakdown > div b {
  color: #e7effb;
}
body.dark-theme .admin-user-detail-header p,
body.dark-theme .admin-user-detail-tabs button,
body.dark-theme .admin-user-detail-limit,
body.dark-theme .admin-user-detail-profile span,
body.dark-theme .admin-user-detail-profile small,
body.dark-theme .admin-user-detail-kpis article small,
body.dark-theme .admin-user-detail-kpis article span,
body.dark-theme .admin-user-detail-status span,
body.dark-theme .admin-user-task header small,
body.dark-theme .admin-user-task header > b,
body.dark-theme .admin-user-task > p,
body.dark-theme .admin-user-work-card small,
body.dark-theme .admin-user-work-card p,
body.dark-theme .admin-user-usage-breakdown > div,
body.dark-theme .admin-user-usage-breakdown > p {
  color: #9baac0;
}
body.dark-theme .admin-user-detail-tabs button.selected {
  background: #203b63;
  color: #c4dcff;
}
body.dark-theme .admin-user-detail-profile,
body.dark-theme .admin-user-detail-kpis article,
body.dark-theme .admin-user-detail-status span,
body.dark-theme .admin-user-task,
body.dark-theme .admin-user-works-grid .admin-user-work-card,
body.dark-theme .admin-user-usage-breakdown {
  background: #182438;
  border-color: #2b3b52;
}
body.dark-theme .admin-user-detail-status b {
  color: #dce6f3;
}
body.dark-theme .admin-user-work-card > a {
  background: #111c2c;
  color: #a9bbd2;
}
body.dark-theme .admin-user-usage-breakdown > div i {
  background: #26364c;
}
body.dark-theme .admin-user-task-error {
  background: #3c252b;
  color: #ffb2a8;
}
body.dark-theme .admin-allocation-dialog,
body.dark-theme .admin-points-dialog,
body.dark-theme .admin-password-dialog,
body.dark-theme .finance-dialog {
  background: #152238;
  border-color: #2b3b52;
  color: #e5edf8;
  box-shadow: 0 20px 70px #0007;
}
body.dark-theme .admin-allocation-dialog footer,
body.dark-theme .admin-points-dialog footer,
body.dark-theme .admin-password-dialog footer {
  border-color: #2b3b52;
  color: #9baac0;
}
body.dark-theme .admin-points-dialog header > button,
body.dark-theme .admin-password-dialog header > button,
body.dark-theme .finance-dialog-close {
  background: #202d41;
  color: #c5d6ec;
}
body.dark-theme .admin-points-dialog label input,
body.dark-theme .finance-dialog input {
  background: #111c2c;
  border-color: #35465d;
  color: #e5edf8;
}
body.dark-theme .admin-points-dialog label small,
body.dark-theme .finance-dialog p,
body.dark-theme .finance-form-grid label,
body.dark-theme .finance-dialog label {
  color: #9baac0;
}
body.dark-theme .admin-points-dialog footer button,
body.dark-theme .admin-password-dialog footer button {
  background: #202d41;
  border-color: #34455d;
  color: #dce6f3;
}
body.dark-theme .admin-points-dialog footer button.primary,
body.dark-theme .admin-password-dialog footer button.primary {
  background: #1763e9;
  border-color: #1763e9;
  color: #fff;
}
body.dark-theme .admin-password-dialog code {
  background: #111c2c;
  border-color: #2d3b50;
  color: #c4dcff;
}
body.dark-theme .finance-preview,
body.dark-theme .finance-toolbar > div:first-child strong,
body.dark-theme .finance-card > header strong,
body.dark-theme .finance-kpis article > strong,
body.dark-theme .finance-rule-grid article > strong,
body.dark-theme .finance-dialog h3 {
  color: #e7effb;
}
body.dark-theme .finance-preview-banner,
body.dark-theme .finance-tabs,
body.dark-theme .finance-kpis article,
body.dark-theme .finance-rule-grid article,
body.dark-theme .finance-card,
body.dark-theme .finance-source-grid article,
body.dark-theme .finance-form-footer,
body.dark-theme .finance-calc-result {
  background: #182438;
  border-color: #2b3b52;
  color: #dce6f3;
}
body.dark-theme .finance-preview-banner {
  background: linear-gradient(115deg, #182438 0%, #162740 100%);
}
body.dark-theme .finance-preview-banner p,
body.dark-theme .finance-toolbar small,
body.dark-theme .finance-card header small,
body.dark-theme .finance-kpis article > span,
body.dark-theme .finance-rule-grid article > span,
body.dark-theme .finance-kpis article > small,
body.dark-theme .finance-rule-grid article > small,
body.dark-theme .finance-form-footer small,
body.dark-theme .finance-calculator > small {
  color: #9baac0;
}
body.dark-theme .finance-tabs button,
body.dark-theme .finance-filter-pills button {
  color: #a9bbd2;
}
body.dark-theme .finance-tabs button.selected,
body.dark-theme .finance-filter-pills button.active {
  background: #203b63;
  color: #c4dcff;
}
body.dark-theme .finance-toolbar select,
body.dark-theme .finance-form-grid input,
body.dark-theme .finance-calculator input,
body.dark-theme .finance-button {
  background: #111c2c;
  border-color: #35465d;
  color: #dce6f3;
}
body.dark-theme .finance-form-grid input[readonly] {
  background: #172438;
  color: #9cc3ff;
}
body.dark-theme .finance-table-wrap th {
  background: #202d41;
  color: #9baac0;
}
body.dark-theme .finance-table-wrap td {
  color: #c5d6ec;
  border-color: #2d3b50;
}
body.dark-theme .finance-table-wrap th {
  border-color: #2d3b50;
}
body.dark-theme .finance-kpis article.profit {
  background: #173226;
  border-color: #27513d;
}
body.dark-theme .finance-kpis article.profit > strong {
  color: #7fe0a9;
}
body.dark-theme .finance-calc-result.target {
  background: #173226;
}
body.dark-theme .finance-calc-result.target b {
  color: #7fe0a9;
}

/* --- Video reference trim dialog --- */
body.dark-theme .reference-trim-dialog {
  background: #152238;
  border-color: #2b3b52;
  color: #e5edf8;
  box-shadow: 0 24px 80px #0007;
}
body.dark-theme .reference-trim-head {
  border-color: #2b3b52;
}
body.dark-theme .reference-trim-head small {
  color: #8ab7ff;
}
body.dark-theme .reference-trim-head p {
  color: #9baac0;
}
body.dark-theme .reference-trim-head > button {
  background: #202d41;
  color: #c5d6ec;
}
body.dark-theme .reference-trim-upgrade {
  background: #172d4b;
  border-color: #2b4c79;
  color: #b9d7ff;
}
body.dark-theme .reference-trim-upgrade small {
  color: #9baac0;
}
body.dark-theme .reference-trim-fields input {
  background: #111c2c;
  border-color: #35465d;
  color: #e5edf8;
}
body.dark-theme .reference-trim-fields p {
  color: #9baac0;
}
body.dark-theme .reference-trim-fields button {
  background: #202d41;
  border-color: #34455d;
  color: #dce6f3;
}
body.dark-theme .reference-trim-fields button.primary {
  background: #1763e9;
  border-color: #1763e9;
  color: #fff;
}

/* --- Account dialog --- */
body.dark-theme .account-dialog {
  background: #152238;
  border: 1px solid #2b3b52;
  color: #e5edf8;
  box-shadow: 0 26px 90px #0008;
}
body.dark-theme .account-dialog::backdrop {
  background: #050a14a6;
  backdrop-filter: blur(4px);
}
body.dark-theme .account-close {
  background: #202d41;
  color: #dce6f3;
}
body.dark-theme .account-brand {
  color: #8ab7ff;
}
body.dark-theme .account-brand span {
  color: #dce6f3;
}
body.dark-theme .account-brand b,
body.dark-theme #accountModeBadge {
  background: #203b63;
  color: #c4dcff;
}
body.dark-theme .account-modal-content > p {
  color: #9baac0;
}
body.dark-theme .account-balance {
  background: #172d4b;
  color: #a9c7f5;
}
body.dark-theme .account-balance strong {
  color: #c4dcff;
}
body.dark-theme .password-change {
  background: #111c2c;
  border-color: #2d3b50;
}
body.dark-theme .password-change > strong {
  color: #c5d6ec;
}
body.dark-theme .password-change label,
body.dark-theme .auth-fields label {
  color: #9baac0;
}
body.dark-theme .password-change input,
body.dark-theme .auth-fields input {
  background: #0d1726;
  border-color: #35465d;
  color: #e5edf8;
}
body.dark-theme .password-change > button {
  background: #203b63;
  color: #c4dcff;
}
body.dark-theme .password-change-message {
  color: #7fc4dd;
}
body.dark-theme .auth-logout {
  background: #1f4438;
  color: #9ae6b4;
}
body.dark-theme .auth-switch {
  color: #8ab7ff;
}
body.dark-theme .auth-error {
  color: #ff9e91;
}
body.dark-theme .ledger-preview {
  border-color: #2d3b50;
}
body.dark-theme .ledger-line {
  color: #9baac0;
  border-color: #2d3b50;
}
body.dark-theme .ledger-line b {
  color: #8ab7ff;
}

/* --- Agents page: the recommendation list cards --- */
body.dark-theme .agent-option {
  background: #182438;
  border-color: transparent;
  color: #dce6f3;
}
body.dark-theme .agent-option:hover {
  background: #202d41;
}
body.dark-theme .agent-option.active {
  background: #203b63;
  border-color: #3c6398;
}
body.dark-theme .agent-option-icon {
  background: linear-gradient(145deg, #203b63, #1a2f4d);
  color: #8ab7ff;
}
body.dark-theme .agent-option-copy strong {
  color: #e7effb;
}
body.dark-theme .agent-option-copy small {
  color: #9baac0;
}
body.dark-theme .agent-option-arrow {
  color: #8194ad;
}
body.dark-theme .agents-empty {
  color: #9baac0;
}
body.dark-theme .agent-category {
  background: #202d41;
  border-color: transparent;
  color: #a9bbd2;
}
body.dark-theme .agent-category:hover {
  background: #273850;
}
body.dark-theme .agent-composer-bottom button:disabled {
  background: #26374e;
  color: #8194ad;
}

/* "开发中" badges stay neutral in dark mode. */
body.dark-theme .page-development-tag {
  background: #2b3b52;
  color: #a9bbd2;
}

/* --- Local depth video (video-edit) page --- */
body.dark-theme .video-depth-page {
  background: #0f1927;
  color: #e5edf8;
}
body.dark-theme .video-depth-heading small {
  color: #8ab7ff;
}
body.dark-theme .video-depth-heading p {
  color: #9baac0;
}
body.dark-theme .video-depth-local-badge {
  background: #203b63;
  border-color: #3c6398;
  color: #c4dcff;
}
body.dark-theme .video-depth-controls,
body.dark-theme .video-depth-preview-card {
  background: #152238;
  border-color: #2b3b52;
  box-shadow: none;
}
body.dark-theme .video-depth-file {
  background: #182438;
  border-color: #34455d;
}
body.dark-theme .video-depth-file:hover {
  background: #202d41;
  border-color: #4a7ab8;
}
body.dark-theme .video-depth-file-icon {
  background: #203b63;
  color: #8ab7ff;
}
body.dark-theme .video-depth-file strong {
  color: #e5edf8;
}
body.dark-theme .video-depth-file small {
  color: #9baac0;
}
body.dark-theme .video-depth-engine {
  background: #172438;
}
body.dark-theme .video-depth-engine strong {
  color: #e5edf8;
}
body.dark-theme .video-depth-engine small {
  color: #9baac0;
}
body.dark-theme .video-depth-engine > span {
  background: #203b63;
  color: #c4dcff;
}
body.dark-theme .video-depth-setting {
  color: #a9bbd2;
}
body.dark-theme .video-depth-setting select {
  background: #111c2c;
  border-color: #35465d;
  color: #e5edf8;
}
body.dark-theme .video-depth-notice {
  background: #3a301c;
  color: #e8cd8f;
}
body.dark-theme .video-depth-start {
  background: #075bea;
  color: #fff;
}
body.dark-theme .video-depth-start:disabled {
  background: #26374e;
  color: #8194ad;
}
body.dark-theme .video-depth-cancel {
  background: #202d41;
  border-color: #34455d;
  color: #c5d6ec;
}
body.dark-theme .video-depth-progress-heading {
  color: #9baac0;
}
body.dark-theme .video-depth-progress-heading span:last-child {
  color: #8ab7ff;
}
body.dark-theme .video-depth-progress progress,
body.dark-theme .video-depth-progress progress::-webkit-progress-bar {
  background: #26374e;
}
body.dark-theme .video-depth-feedback {
  color: #9baac0;
}
body.dark-theme .video-depth-feedback.error {
  color: #ff9e91;
}
body.dark-theme .video-depth-preview-card h2 {
  color: #e5edf8;
}
body.dark-theme .video-depth-preview-card > small {
  color: #8194ad;
}
body.dark-theme .video-depth-empty {
  color: #8194ad;
}
body.dark-theme .video-depth-download {
  background: #203b63;
  color: #c4dcff;
}

/* --- "Load earlier results" tiles (video / works / detail grids) --- */
body.dark-theme .result-load-more {
  background: #182438;
  border-color: #34455d;
  color: #9bc4ff;
}
body.dark-theme .result-load-more:hover {
  background: #202d41;
  border-color: #4a5f7d;
  color: #dce6f3;
}

/* --- Placeholder pages (画布 / 批量创作 …) --- */
body.dark-theme .placeholder-card button {
  background: #075bea;
  color: #fff;
}
body.dark-theme .placeholder-card button:hover {
  background: #1a6cf0;
}

/* --- Workflow (批量创作) toolbar primary button --- */
body.dark-theme .workflow-toolbar-primary {
  background: #2b3b52;
  color: #e5edf8;
}
body.dark-theme .workflow-toolbar-primary:hover {
  background: #34455d;
  color: #fff;
}

/* --- Skills download page --- */
body.dark-theme .skills-page {
  background: #0f1927;
  color: #e5edf8;
}
body.dark-theme .skills-page-heading p {
  color: #9baac0;
}
body.dark-theme .skills-status.available {
  background: #1f4438;
  color: #9ae6b4;
}
body.dark-theme .skills-status.planned {
  background: #26374e;
  color: #c5d6ec;
}
body.dark-theme .skills-setup-card,
body.dark-theme .skills-simple-card,
body.dark-theme .skills-install,
body.dark-theme .skill-roadmap-card {
  background: #152238;
  border-color: #2b3b52;
  box-shadow: none;
}
body.dark-theme .skills-step {
  background: #203b63;
  color: #c4dcff;
}
body.dark-theme .skills-setup-card > small,
body.dark-theme .skills-setup-heading p,
body.dark-theme .skills-section-heading p,
body.dark-theme .skills-key-meta {
  color: #9baac0;
}
body.dark-theme .skills-setup-card textarea {
  background: #111c2c;
  border-color: #35465d;
  color: #e5edf8;
}
body.dark-theme .skills-list,
body.dark-theme .skills-list-item,
body.dark-theme .skills-key-details,
body.dark-theme .skills-update-note {
  border-color: #2d3b50;
}
body.dark-theme .skills-list-item h3 {
  color: #e7effb;
}
body.dark-theme .skills-list-item p,
body.dark-theme .skills-list-item .skill-version,
body.dark-theme .skill-development {
  color: #9baac0;
}
body.dark-theme .skills-list-item.is-planned .skill-card-icon {
  background: #26374e;
}
body.dark-theme .skills-key-details summary {
  color: #c5d6ec;
}
body.dark-theme .skills-key-details summary span {
  color: #9baac0;
}
body.dark-theme .skills-connect-actions button,
body.dark-theme .skill-card > button {
  background: #202d41;
  border-color: #34455d;
  color: #c5d6ec;
}
body.dark-theme .skills-connect-actions .skills-primary,
body.dark-theme .skills-copy-prompt {
  background: #075bea;
  border-color: #075bea;
  color: #fff;
}
body.dark-theme .skills-connect-actions .skills-secondary {
  background: #203b63;
  border-color: #3c6398;
  color: #c4dcff;
}
body.dark-theme .skills-connect-actions .skills-danger {
  background: #4a2429;
  border-color: #7c3b43;
  color: #ff9e91;
}
body.dark-theme .skills-key-panel {
  background: #172d4b;
  border-color: #3c6398;
}
body.dark-theme .skills-key-panel strong {
  color: #e5edf8;
}
body.dark-theme .skills-key-panel p {
  color: #9bc4ff;
}
body.dark-theme .skills-key-panel code {
  color: #8ab7ff;
}
body.dark-theme .skills-key-panel button {
  background: #203b63;
  border-color: #3c6398;
  color: #c4dcff;
}
body.dark-theme .skills-feedback {
  color: #7fc4dd;
}
body.dark-theme .skill-capabilities span,
body.dark-theme .skill-example {
  background: #1a2a41;
  border-color: #2d3b50;
  color: #a9bbd2;
}
body.dark-theme .skill-example span {
  color: #c5d6ec;
}
body.dark-theme .skill-example small {
  color: #9baac0;
}