/* Last layer: measured home/project composition, independent of legacy mode CSS. */
#viewChat #workBody { grid-template-columns:minmax(300px,30%) minmax(0,1fr)!important; }
#viewChat #workspace.generation-project #workBody { grid-template-columns:400px minmax(0,1fr)!important; }
#viewChat #workspace #workMain { grid-column:1!important; grid-row:1!important; position:relative!important; inset:auto!important; width:100%!important; height:100%!important; max-height:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; overflow:hidden!important; background:#161616!important; display:flex!important; }
#viewChat #workspace #generationLibrary { grid-column:2!important; grid-row:1!important; border-left:1px solid #ffffff12!important; border-right:0!important; }
#viewChat #workspace #generationLibrary #chatTopbar { display:block!important; flex:0 0 40px!important; padding:4px 12px!important; background:#161616; border-bottom:1px solid #ffffff12; }
#viewChat #workspace #generationLibrary #lovartStage { display:none!important; background:#191919!important; }
#viewChat #workspace.generation-project #generationLibrary[data-source="canvas"] #lovartStage { display:flex!important; }
#viewChat #workspace #generationLibrary #genSourcePanel:not(.hidden) { display:block!important; }
#viewChat #workspace #generationLibrary[data-source="canvas"] #genSourcePanel { display:none!important; }
#viewChat #workspace #generationLibrary #assetsDrawer { display:none!important; }
#viewChat #workspace #generationLibrary[data-source="assets"] #assetsDrawer { display:none!important; }
#viewChat #workspace #workMain #workScroll { display:block!important; flex:1!important; height:auto!important; max-height:none!important; padding:18px!important; }
#viewChat #workspace.empty #workMain #workScroll { display:none!important; }
#viewChat #workspace #workMain #composerDock { padding:8px!important; }
#viewChat #workspace.empty #workMain #composerDock { padding:8px 16px!important; }
#viewChat #workspace #workMain #composerGlassChat { border-radius:22px!important; }
#viewChat #workspace #workMain #promptChat { font-size:13px!important; min-height:52px!important; height:52px; }
#viewChat #workspace #timeline { font-size:13px; line-height:1.65; }
#viewChat #workspace.generation-project #timeline .tl-media-tile img,
#viewChat #workspace.generation-project #timeline .tl-media-tile video { position:absolute;inset:0;width:100%;height:100%;max-width:none!important;max-height:none!important;object-fit:contain; }
#viewChat #workspace.generation-project #timeline .load-card:not(.tl-batch-load-card) { width:min(var(--tl-w,220px),220px,100%);max-width:100%!important;aspect-ratio:var(--tl-ar,3/4);box-sizing:border-box; }
#projectConversationHeader { display:none; }
.generation-project #projectConversationHeader { display:flex; align-items:center; gap:8px; height:40px; flex:0 0 40px; padding:0 10px; border-bottom:1px solid #ffffff0a; }
#projectConversationHeader button { padding:5px; border:0; background:none; color:#bbb; font-size:16px; cursor:pointer; }
#projectTitle { flex:1; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#generationCanvasTab { display:none; }
.generation-project #generationCanvasTab { display:block; border:0; border-radius:6px; background:#292929; color:#ddd; padding:5px 12px; font-size:12px; white-space:nowrap; }
#projectChatReopen { display:none; }
#viewChat #workspace.generation-project.project-chat-collapsed #workBody { grid-template-columns:0 minmax(0,1fr)!important; }
#viewChat #workspace.generation-project.project-chat-collapsed #workMain { display:none!important; }
.generation-project.project-chat-collapsed #projectChatReopen { display:block; position:absolute; left:12px; top:48px; z-index:30; background:#252525; color:#ddd; border:1px solid #444; border-radius:8px; padding:8px; cursor:pointer; }
#viewChat #workspace #lovartToolbar { left:auto!important; right:14px!important; bottom:10px!important; top:auto!important; transform:none!important; max-width:none!important; background:transparent!important; border:0!important; box-shadow:none!important; padding:0!important; }
#viewChat #workspace #modeOrb { display:none!important; }
#viewChat #workspace #lovartCanvasWrap { background:#191919!important; }
#viewChat #workspace .lovart-node,#viewChat #workspace .lovart-node-media { border-radius:0!important; box-shadow:none!important; }
#viewChat #workspace .lovart-node.is-selected { outline:1px solid #628dff!important; }
#viewChat #workspace .lovart-node [data-handle] { border-radius:0!important; width:7px!important; height:7px!important; background:white!important; border:1px solid #628dff!important; box-shadow:none!important; }
#viewChat #workspace #cfbSourceRow { gap:6px; }
#viewChat #workspace .cfb-source { font-size:14px!important; font-weight:400; gap:8px; }
#viewChat #gspSkill { padding:0 18px 24px!important; position:relative; height:100%; min-height:0; box-sizing:border-box; display:flex; flex-direction:column; }
#viewChat #gspSkill .gsp-lead { text-align:left; font-size:13px; line-height:20px; padding:12px 0; margin:0; border-bottom:1px solid #ffffff12; flex:none; }
#viewChat #gspSkill.is-detail .gsp-lead,
#viewChat #gspSkill.is-detail #gspSkillGrid { visibility:hidden; }
#viewChat #gspSkillGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px 16px; padding:16px 0 24px; }
#viewChat #gspSkillGrid .gsp-card.gsp-skill-card { min-width:0; border:0; border-radius:0; overflow:visible; text-align:left; background:none; color:inherit; padding:0; line-height:0; cursor:pointer; }
#viewChat #gspSkillGrid .gsp-skill-cover { position:relative; display:block; aspect-ratio:16/11; padding:1.5px; border-radius:14px; box-sizing:border-box; line-height:0; overflow:hidden; background:linear-gradient(135deg,rgba(255,224,138,.7),rgba(255,180,208,.55) 42%,rgba(203,182,255,.55) 70%,rgba(155,232,255,.7)); }
#viewChat #gspSkillGrid .gsp-skill-card:hover .gsp-skill-cover { background:var(--brand-grad); }
#viewChat #gspSkillGrid .gsp-skill-cover img { position:absolute; inset:1.5px; width:calc(100% - 3px); height:calc(100% - 3px); aspect-ratio:auto; object-fit:cover; display:block; border-radius:12.5px; }
#viewChat #gspSkillGrid .gsp-skill-play,
.gsd-play { position:absolute; left:10px; bottom:10px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:#0009; color:#fff; }
#viewChat #gspSkillGrid .gsp-skill-play svg,
.gsd-play svg { width:12px; height:12px; display:block; margin-left:1px; }
#viewChat #gspSkillGrid .gsp-skill-body { display:block; padding:8px 2px 0; line-height:normal; }
#viewChat #gspSkillGrid .gsp-skill-body strong { display:block; font-size:14px; font-weight:650; line-height:20px; color:#f2f2f4; }
#viewChat #gspSkillGrid .gsp-skill-body em { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:3px; font-style:normal; font-size:12px; line-height:17px; color:#8a8a90; }
#viewChat #gspSkillGrid .gsp-skill-meta { display:flex; align-items:center; gap:6px; margin-top:6px; color:#7a7a82; font-size:12px; line-height:16px; min-width:0; }
#viewChat #gspSkillGrid .gsp-skill-meta img { width:18px; height:18px; border-radius:50%; object-fit:cover; object-position:center top; flex:none; position:static; inset:auto; }
#viewChat #gspSkillGrid .gsp-skill-meta b { font-weight:500; color:#b8b8be; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; flex:0 1 auto; }
#viewChat #gspSkillGrid .gsp-skill-meta i { width:3px; height:3px; border-radius:50%; background:#5a5a62; flex:none; }
#viewChat #gspSkillGrid .gsp-skill-meta span { display:inline-flex; align-items:center; gap:3px; flex:none; }
#viewChat #gspSkillGrid .gsp-skill-meta svg { width:13px; height:13px; display:block; opacity:.8; }
.gsp-skill-detail { position:absolute; inset:0; z-index:12; display:flex; flex-direction:column; gap:22px; padding:22px 28px 28px; overflow:auto; background:#161616; box-sizing:border-box; }
.gsp-skill-detail.hidden { display:none !important; }
.gsd-top { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; }
.gsd-copy { min-width:0; flex:1; }
.gsd-title { margin:0; font-size:22px; font-weight:700; letter-spacing:-.02em; color:#f4f4f6; }
.gsd-desc { margin:8px 0 0; max-width:640px; font-size:14px; line-height:22px; color:#9a9aa2; }
.gsd-byline { display:flex; align-items:center; gap:8px; margin-top:14px; color:#8a8a90; font-size:13px; }
.gsd-byline img { width:22px; height:22px; border-radius:50%; object-fit:cover; }
.gsd-byline i { width:3px; height:3px; border-radius:50%; background:#5a5a62; }
.gsd-stat { display:inline-flex; align-items:center; gap:4px; }
.gsd-stat svg { width:14px; height:14px; display:block; }
.gsd-tools { display:flex; align-items:center; gap:10px; flex:none; }
.gsd-use { height:36px; padding:0 16px; border:0; border-radius:10px; background:var(--brand-grad); background-size:140% 140%; color:#0a0e18; font:700 13px/1 inherit; cursor:pointer; box-shadow:0 4px 16px rgba(46,239,255,.18),inset 0 1px 0 rgba(255,255,255,.35); }
.gsd-use:hover { filter:brightness(1.06) saturate(1.05); }
.gsd-close { width:36px; height:36px; padding:0; border:0; border-radius:10px; background:rgba(255,255,255,.06); color:#ddd; cursor:pointer; display:grid; place-items:center; }
.gsd-close:hover { background:rgba(255,255,255,.1); color:#fff; }
.gsd-close svg { width:16px; height:16px; display:block; }
.gsd-gallery { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.gsd-shot { position:relative; flex:0 0 auto; width:min(240px,42%); aspect-ratio:3/4; margin:0; border-radius:16px; overflow:hidden; background:#111; scroll-snap-align:start; }
.gsd-shot img { width:100%; height:100%; object-fit:cover; display:block; }
.gsd-tags { display:flex; flex-wrap:wrap; gap:8px; }
.gsd-tags span { padding:5px 10px; border-radius:8px; background:#ffffff10; color:#b8b8be; font-size:12px; }
@media(max-width:900px){ .gsd-top{flex-direction:column;} .gsd-shot{width:min(200px,70%);} }
.platform-logo { width:18px; height:18px; object-fit:contain; flex:none; }
.gsp-pin-logo .platform-logo { width:30px; height:30px; }
.chuyan-clip-empty h2 { font-size:18px!important; line-height:27px; font-weight:600; margin:26px 0 12px; }
.chuyan-clip-empty p { font-size:13px!important; line-height:20px; max-width:500px; }
.clip-sites a { display:inline-flex; align-items:center; gap:10px; font-size:14px; line-height:22px; padding:8px 16px; }
.clip-illustration { width:380px; max-width:90%; height:auto; aspect-ratio:380/213; display:block; background:url('/static/chuyan-clipper/clipper-guide.webp') center/cover; }
.clip-art-one,.clip-art-two,.clip-art-three { display:none; }
.clip-save-demo { bottom:8px; left:0; height:36px; box-sizing:border-box; font-size:14px; line-height:20px; padding:8px 14px; background:#333e; }
#viewChat .lovart-sel-bar { background:#222!important; border-radius:12px!important; gap:0!important; padding:4px!important; }
#viewChat .lovart-sel-btn { width:auto!important; min-width:32px; padding:7px 9px!important; gap:6px; font-size:12px; border-radius:4px!important; }
.selection-tool-label { white-space:nowrap; }
.selection-more { position:relative; }
.selection-more summary { cursor:pointer; list-style:none; padding:6px 10px; }
.selection-more-items { position:fixed; z-index:50; background:#292929; border:1px solid #444; border-radius:10px; padding:6px; display:grid; gap:4px; min-width:130px; }
#viewChat .lovart-sel-btn:disabled { opacity:.4; cursor:not-allowed; }
#canvasQuickEdit { position:absolute; z-index:35; width:340px; max-width:calc(100% - 24px); background:#252525; padding:12px; border:1px solid #ffffff20; border-radius:14px; box-shadow:0 12px 30px #0004; }
#canvasQuickEdit[hidden] { display:none; }
#canvasQuickEdit textarea { width:100%; box-sizing:border-box; min-height:76px; resize:vertical; background:none; border:0; color:#eee; font:13px/1.6 system-ui; outline:none; }
#canvasQuickEdit button { background:#ddd; border:0; color:#222; border-radius:7px; padding:6px 12px; cursor:pointer; font-size:12px; }
#canvasQuickEdit button:disabled { opacity:.4; cursor:default; }
#canvasQuickEdit .quick-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; color:#999; font-size:11px; }
@media(max-width:1000px) { #viewChat #workspace.generation-project #workBody { grid-template-columns:320px minmax(0,1fr)!important; } }

/* My materials: kit categories and detail editors, not the output asset drawer. */
#viewChat #gspMaterials { height:100%; padding:0!important; color:#eee; font:13px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
#viewChat #gspMaterials:not(.hidden) { display:flex!important; flex-direction:column; }
.material-tabs { display:flex; gap:24px; flex:0 0 40px; padding:0 20px; border-bottom:1px solid #ffffff12; }
#gspMaterials button { cursor:pointer; font:inherit; }
.material-tabs button { border:0; border-bottom:1px solid transparent; border-radius:0; background:none; color:#999; padding:8px 0; white-space:nowrap; }
.material-tabs button[aria-selected="true"] { color:#eee; border-bottom-color:#eee; }
#materialContent { flex:1; min-height:0; overflow:auto; }
.material-empty { box-sizing:border-box; min-height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:36px 24px; text-align:center; }
.material-guide,.material-brand-art { width:min(420px,100%); max-width:100%; aspect-ratio:380/213; border-radius:9px; object-fit:contain; }
.material-guide { border:8px solid #272727; box-sizing:border-box; background:#272727; }
.material-empty h2 { font-size:18px; line-height:27px; font-weight:600; margin:28px 0 10px; }
.material-empty p { width:min(420px,100%); max-width:100%; font-size:13px; line-height:22px; color:#999; margin:0 0 24px; text-wrap:pretty; text-wrap:balance; overflow-wrap:break-word; word-break:normal; }
#gspMaterials .material-primary { background:#fff; color:#181818; border:0; border-radius:8px; padding:8px 16px; font-size:13px; }
.material-brand-art { display:grid; grid-template-columns:26% 30% 1fr; grid-template-rows:72% 10% 18%; gap:4px; padding:9px; box-sizing:border-box; background:#272727; overflow:hidden; text-align:left; }
.brand-type { background:#e5ff85; color:#293c00; display:grid; place-items:center; font-size:55px; }
.brand-word { background:#303b02; color:#dcf784; padding:10px 8px; font-size:12px; line-height:1.35; display:flex; align-items:center; }
.material-brand-art img { grid-column:3; grid-row:1/3; width:100%; height:100%; object-fit:cover; }
.brand-palette { grid-column:1/3; background:linear-gradient(90deg,#e7ff9c 0 20%,#c6ec55 20% 40%,#94ba10 40% 60%,#597005 60% 80%,#293706 80%); }
.brand-identity { grid-column:1/4; font-size:18px; background:#e7ff9c; color:#203500; display:flex; align-items:center; justify-content:space-between; padding:0 10px; }
.brand-identity small { font-size:9px; letter-spacing:2px; }
.material-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px; padding:16px 20px; }
.material-card,.material-new { min-height:120px; box-sizing:border-box; border:1px solid #ffffff12; border-radius:12px; padding:12px; background:transparent; position:relative; }
.material-new { border-style:dashed; color:#999; }
.material-new-character { min-height:88px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:14px; color:#bbb; }
.material-character-hint { margin:0 20px 20px; color:#888; font-size:12px; line-height:1.6; }
.material-review { display:inline-block; margin:8px 0 0; font-size:11px; padding:2px 8px; border-radius:999px; }
.material-review.is-wait { color:#f5c542; background:#f5c54222; }
.material-review.is-ok { color:#7dffa8; background:#7dffa822; }
.material-card:hover { background:#242424; }
.material-card-title { display:flex; justify-content:space-between; gap:8px; width:100%; background:none; color:#eee; border:0; padding:0; text-align:left; }
.material-card-title span { color:#777; }
.material-card-files { display:flex; gap:5px; margin-top:12px; }
.material-card-files img,.material-placeholder { width:60px; height:60px; object-fit:contain; background:#242424; border-radius:5px; }
.material-placeholder { display:grid; place-items:center; color:#777; }
.material-use { position:absolute; right:12px; bottom:12px; opacity:0; }
.material-card:hover .material-use,.material-card:focus-within .material-use { opacity:1; }
.material-editor { height:100%; display:flex; flex-direction:column; }
.material-editor>header { display:flex; align-items:center; flex:0 0 60px; gap:10px; padding:0 20px; }
.material-editor button:not(.material-primary) { background:transparent; border:0; color:#aaa; padding:6px; }
.material-editor #materialName { flex:1; min-width:0; background:none; border:0; color:#eee; font:inherit; outline-offset:4px; }
#materialSaveState { font-size:11px; color:#888; }
.material-editor-scroll { flex:1; overflow:auto; padding:0 20px; }
#gspMaterials .material-drop { width:100%; background:#252525; display:flex; align-items:center; gap:32px; min-height:96px; border:1px dashed #444; border-radius:16px; padding:24px 36px; text-align:left; }
.material-drop>span { font-size:24px; }
.material-drop small { display:block; color:#777; font-size:11px; margin-top:3px; }
.material-description { border-top:1px solid #ffffff12; margin-top:28px; padding:28px 0; }
.material-description label { display:block; margin-bottom:8px; }
.material-description textarea { background:#242424; border:0; border-radius:7px; width:100%; box-sizing:border-box; color:#eee; font:inherit; padding:8px 10px; min-height:36px; resize:vertical; }
.material-section { border-top:1px solid #ffffff12; padding:22px 0; }
.material-section header { display:flex; align-items:center; justify-content:space-between; }
.material-files { display:flex; gap:10px; flex-wrap:wrap; }
.material-file { position:relative; width:92px; margin-top:12px; }
.material-file img,.material-file-icon { width:92px; height:80px; object-fit:contain; background:#242424; border-radius:6px; display:grid; place-items:center; }
.material-file>span:not(.material-file-icon) { display:block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; color:#888; }
.material-file button { position:absolute; right:0; top:0; background:#111!important; border-radius:50%; line-height:12px!important; }
.material-colors,.material-fonts { color:#aaa; white-space:pre-wrap; }
.material-colors { display:flex; gap:12px; flex-wrap:wrap; }
.material-color-chip { display:flex; align-items:center; gap:8px; margin-top:8px; }
.material-color-chip i { width:30px; height:30px; border:1px solid #ffffff20; border-radius:6px; }
.material-editor footer { border-top:1px solid #ffffff12; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 20px; flex:none; }
.material-editor footer>span,.material-processing-note { color:#777; font-size:11px; }
#materialStatus { flex:none; padding:0 20px; color:#aaa; font-size:12px; }
#materialStatus:not(:empty) { padding-top:6px; padding-bottom:6px; }
#materialReferences { display:flex; flex-wrap:wrap; gap:6px; padding:6px 0; }
#materialReferences[hidden] { display:none; }
#materialReferences span { background:#303030; border:1px solid #ffffff18; border-radius:6px; padding:3px 8px; color:#ccc; font-size:12px; }
#materialReferences button { border:0; color:#aaa; background:none; cursor:pointer; margin-left:8px; }
#materialFieldDialog { width:380px; max-width:90vw; background:#242424; color:#eee; border:1px solid #444; border-radius:14px; padding:24px; }
#materialFieldDialog::backdrop { background:#0008; }
#materialFieldDialog h3 { margin:0 0 20px; font-size:16px; }
#materialFieldDialog label span { display:block; font-size:12px; color:#aaa; margin-bottom:8px; }
#materialFieldDialog textarea { background:#181818; color:#eee; border:1px solid #444; border-radius:6px; padding:10px; width:100%; box-sizing:border-box; }
#materialFieldDialog form>div { display:flex; gap:10px; justify-content:flex-end; margin-top:20px; }
#materialFieldDialog button { border:0; border-radius:6px; padding:7px 15px; cursor:pointer; }