#viewProjects {display:none;height:100%;overflow:auto;background:#161616;padding:36px clamp(24px,4.5vw,86px);box-sizing:border-box;color:#e5e5e5;}
#viewProjects.on {display:block;}
#viewProjects header {display:flex;align-items:center;gap:14px;margin-bottom:30px;}
#viewProjects h1 {font-size:24px;font-weight:500;margin:0;}
#viewProjects header button {background:none;border:0;color:#aaa;font-size:22px;cursor:pointer;}
#projectSearch {margin-left:auto;background:#202020;border:1px solid #333;border-radius:8px;padding:9px 12px;color:#ddd;width:200px;}
#projectListStatus {font-size:13px;color:#aaa;}
#projectListStatus:empty {display:none;}
#projectGrid {display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:32px 18px;}
.project-card {position:relative;min-width:0;background:none;border:0;color:inherit;text-align:left;padding:0;}
.project-entry {display:block;width:100%;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;}
.project-cover {display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:16/10;background:#1c1c1c;border:0;border-radius:16px;overflow:hidden;box-sizing:border-box;gap:2px;}
.project-cover img,.project-cover video {width:100%;height:100%;object-fit:cover;display:block;background:#141414;}
.project-cover.is-pair,.project-cover.is-mosaic,.project-cover.is-triple {display:grid;}
.project-cover.is-pair {grid-template-columns:1fr 1fr;}
.project-cover.is-mosaic {grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;}
.project-cover.is-triple {grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;}
.project-cover.is-triple > :first-child {grid-row:1 / span 2;}
.project-cover-empty {background:#1a1a1a;}
.project-video-badge {position:absolute;left:10px;bottom:10px;padding:2px 8px;border-radius:999px;background:#0009;color:#eee;font-size:11px;pointer-events:none;}
.project-card .project-cover {position:relative;}
.project-load-more {grid-column:1/-1;padding:12px;background:#202020;border:1px solid #333;border-radius:10px;color:#ddd;cursor:pointer;}
.image-size-options {display:flex;gap:10px;margin:16px 0;}
.image-size-options button {flex:1;padding:12px 8px;background:#181818;border:1px solid #555;border-radius:8px;color:#eee;}
.image-size-options button:hover {border-color:#888;}
.image-size-options button:disabled {opacity:.5;}
.project-name {display:block;font-size:14px;line-height:22px;margin:10px 4px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.project-entry small {font-size:11px;color:#888;margin:0 4px;}
.project-new {cursor:pointer;align-self:start;}
.project-new .project-cover {border-style:dashed;background:#323232;font-size:30px;color:#aaa;}
.project-rename {position:absolute;right:8px;top:8px;border:1px solid #444;background:#202020ef;color:#ddd;border-radius:6px;padding:5px 8px;opacity:0;cursor:pointer;}
.project-card:hover .project-rename,.project-card:focus-within .project-rename {opacity:1;}
.project-entry:hover .project-cover,.project-new:hover .project-cover {border-color:#777;}
#projectGrid.is-list {grid-template-columns:1fr;gap:14px;}
#projectGrid.is-list .project-entry,#projectGrid.is-list .project-new {display:flex;align-items:center;gap:20px;}
#projectGrid.is-list .project-cover {width:140px;flex:none;}
.project-name-dialog {background:#252525;color:#eee;border:1px solid #444;border-radius:14px;width:360px;padding:24px;}
.project-name-dialog::backdrop {background:#0008;}
.project-name-dialog h2 {font-size:18px;margin:0 0 20px;}
.project-name-dialog input {width:100%;box-sizing:border-box;padding:10px;background:#181818;border:1px solid #555;border-radius:6px;color:white;}
.project-name-dialog footer {display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.project-name-dialog button {padding:8px 18px;border:1px solid #494949;border-radius:8px;cursor:pointer;background:#303030;color:#eee;font-family:inherit;font-size:14px;font-weight:500;line-height:20px;min-width:72px;}
.project-name-dialog button[type=submit] {background:#f4f4f4;color:#181818;border-color:#f4f4f4;}
.project-name-dialog button:hover {filter:brightness(1.12);}
.project-name-dialog button:disabled {opacity:.5;cursor:wait;}
.project-name-dialog button.is-danger {background:#db453a;border-color:#db453a;color:#fff;}
.project-name-dialog input {font-size:14px;line-height:22px;}
.project-name-dialog input:focus {outline:2px solid #777;outline-offset:2px;border-color:#aaa;}
.project-name-dialog {max-width:calc(100vw - 64px);box-sizing:border-box;width:400px;}
.project-name-dialog p {font-size:13px;line-height:1.6;color:#aaa;}
.project-name-dialog [role=status]:empty {display:none;}
.project-card .project-name {padding-right:32px;}
.project-more {position:absolute;right:0;bottom:20px;width:28px;height:28px;padding:0;border:0;border-radius:9px;background:transparent;color:#ddd;font-size:22px;line-height:24px;cursor:pointer;opacity:0;}
.project-card:hover .project-more,.project-card:focus-within .project-more,.project-more[aria-expanded=true] {opacity:1;}
.project-more:hover,.project-more[aria-expanded=true] {background:#2c2c2c;}
.project-action-menu {position:fixed;inset:auto;margin:0;min-width:148px;padding:6px;border:1px solid #363636;border-radius:13px;background:#202020;color:#eee;box-shadow:0 8px 24px #0003;}
.project-action-menu button {display:flex;align-items:center;gap:12px;width:100%;padding:10px 9px;border:0;border-radius:7px;background:transparent;color:#eee;text-align:left;font-size:14px;cursor:pointer;}
.project-action-menu button:hover,.project-action-menu button:focus-visible {background:#303030;outline:none;}
.project-action-menu button.is-danger {color:#ef5144;}
@media(hover:none){.project-more{opacity:1;}}
/* Project canvas proportions and neutral chrome match the supplied reference. */
#viewChat #workspace.generation-project #workBody {grid-template-columns:clamp(300px,22vw,400px) minmax(0,1fr)!important;}
#viewChat #workspace.generation-project.project-chat-collapsed #workBody {grid-template-columns:0 minmax(0,1fr)!important;}
#viewChat #workspace #lovartSelBar {background:#212121!important;box-shadow:none!important;border:1px solid #363636!important;border-radius:14px!important;padding:5px 8px!important;gap:4px!important;min-height:42px;}
#lovartSelBar .lovart-sel-btn {font-size:12px!important;white-space:nowrap;}
#lovartSelBar .lovart-sel-btn svg {width:20px;height:20px;flex:none;}
#viewChat #workspace .lovart-node.is-selected {outline-color:#3695ff!important;}
.canvas-node-caption {display:none;position:absolute;left:0;right:0;top:-22px;color:#389bff;font:12px/18px sans-serif;pointer-events:none;align-items:center;gap:12px;}
.is-selected .canvas-node-caption {display:flex;}
.canvas-node-caption {font-size:calc(12px / var(--canvas-scale,1));line-height:calc(18px / var(--canvas-scale,1));top:calc(-22px / var(--canvas-scale,1));gap:calc(12px / var(--canvas-scale,1));}
#viewChat #workspace .lovart-node [data-handle] {width:calc(7px / var(--canvas-scale,1))!important;height:calc(7px / var(--canvas-scale,1))!important;}
#workspace.generation-project.empty #sourceComposeHero,#workspace.generation-project.empty #sourceComposeHints {display:none!important;}
#viewChat #workspace.generation-project.empty #composerDock {margin-top:auto;}
.canvas-node-caption span:first-child {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.canvas-node-caption span:last-child {white-space:nowrap;}
#viewChat #workspace #lovartToolbar {left:auto!important;right:14px!important;bottom:10px!important;top:auto!important;transform:none!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;gap:4px!important;flex-wrap:nowrap!important;justify-content:flex-end!important;}
#lovartToolbar [data-lovart-tool],
#lovartToolbar .lovart-sel-sep {display:none!important;}
.generation-project .cfb-source {width:30px;min-width:30px;justify-content:center;}
#viewChat #workspace.generation-project .cfb-source {font-size:0!important;gap:0!important;}
.generation-project .cfb-source svg,.generation-project .cfb-source img {width:18px;height:18px;}
.generation-project .cfb-source img {filter:grayscale(1);}
@media(min-width:1500px){#projectGrid:not(.is-list){grid-template-columns:repeat(5,minmax(0,1fr));}}
#canvasPrimaryTools {position:absolute;bottom:12px;left:50%;transform:translateX(-50%);display:flex;gap:2px;padding:4px;background:#1f1f1f;border:1px solid #3a3a3a;border-radius:14px;z-index:20;}
#canvasPrimaryTools button {background:none;border:0;border-radius:8px;color:#ddd;padding:8px 10px;font-size:12px;cursor:pointer;white-space:nowrap;}
#canvasPrimaryTools button.on,#canvasPrimaryTools button:hover {background:#333;}
#canvasPrimaryTools button:disabled {opacity:.4;cursor:not-allowed;}
#lovartCanvasWrap.is-hand-tool {cursor:grab;}
#lovartCanvasWrap.is-hand-tool.is-panning {cursor:grabbing;}
.project-name-dialog textarea {width:100%;min-height:88px;box-sizing:border-box;margin:12px 0;padding:10px;background:#181818;border:1px solid #555;border-radius:6px;color:white;resize:vertical;}
#anglePanel {position:fixed;z-index:80;width:280px;padding:16px;background:#2a2a2a;border:1px solid #3d3d3d;border-radius:16px;color:#eee;box-shadow:0 18px 40px #0008;}
#anglePanel {box-sizing:border-box;max-width:calc(100vw - 16px);max-height:calc(100vh - 16px);overflow-y:auto;}
.image-upscale-popover {position:fixed;inset:auto;margin:0;padding:6px;width:230px;max-width:calc(100vw - 16px);box-sizing:border-box;background:#202020;color:#eee;border:1px solid #373737;border-radius:14px;z-index:100;box-shadow:0 8px 24px #0005;}
.image-upscale-popover .image-size-options {display:flex;flex-direction:column;gap:2px;margin:0;}
.image-upscale-popover .image-size-options button {text-align:left;padding:10px 12px;border:0;background:transparent;font-size:14px;border-radius:10px;color:#eee;cursor:pointer;}
.image-upscale-popover .image-size-options button:hover {background:#363636;}
.image-upscale-popover .image-size-options span {color:#929292;}
.image-upscale-popover [role=status]:empty {display:none;}
.image-upscale-popover [role=status] {font-size:12px;padding:0 8px;}
.image-upscale-popover [data-close] {background:none;border:0;color:#aaa;font-size:12px;padding:6px 12px;cursor:pointer;}
#anglePanel header {display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
#anglePanel h2 {margin:0;font-size:16px;font-weight:600;}
#anglePanel [data-angle-reset] {border:0;background:none;color:#bbb;font-size:16px;cursor:pointer;}
.angle-tabs {display:flex;background:#1f1f1f;border-radius:10px;padding:3px;margin-bottom:14px;}
.angle-tabs button {flex:1;border:0;background:none;color:#aaa;border-radius:8px;padding:7px 0;cursor:pointer;}
.angle-tabs button.on {background:#333;color:#fff;}
.angle-stage {height:168px;perspective:640px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;}
.angle-cube {width:86px;height:86px;position:relative;transform-style:preserve-3d;transition:transform .18s ease;}
.angle-cube .face {position:absolute;inset:0;border:1px solid #6a6a6a;border-radius:4px;background:#1a1a1a center/cover no-repeat;display:flex;align-items:flex-end;justify-content:center;color:#cfcfcf;font-size:18px;font-weight:600;}
.angle-cube .front {transform:translateZ(43px);}
.angle-cube .back {transform:rotateY(180deg) translateZ(43px);}
.angle-cube .right {transform:rotateY(90deg) translateZ(43px);}
.angle-cube .left {transform:rotateY(-90deg) translateZ(43px);}
.angle-cube .top {transform:rotateX(90deg) translateZ(43px);}
.angle-cube .bottom {transform:rotateX(-90deg) translateZ(43px);}
.angle-row {display:flex;justify-content:space-between;font-size:13px;color:#ccc;margin:10px 0 4px;}
.angle-row b {font-weight:500;color:#ddd;}
#anglePanel input[type=range] {width:100%;accent-color:#d8d8d8;}
#anglePanel footer {display:flex;gap:10px;margin-top:16px;}
#anglePanel footer button {flex:1;border:0;border-radius:10px;padding:10px 0;cursor:pointer;background:#3a3a3a;color:#eee;}
#anglePanel .angle-run {background:#f2f2f2;color:#111;font-weight:600;}
body.view-chat .session-fold {display:none !important;}
@media(max-width:1100px){#viewChat #workspace #lovartToolbar {bottom:60px!important;}#projectGrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));}}