.studio-workspace.canvas-workspace{height:calc(100dvh - 68px);min-height:0}
#studio-main.canvas-main{height:100%;min-height:0;padding:0;overflow:hidden;background:#faf9f5}
.canvas-page{height:100%;min-height:0;display:flex;flex-direction:column}
.canvas-toolbar{flex:none;z-index:2;background:#fffdf9;border-bottom:1px solid #e9e6de;padding:18px clamp(18px,2.7vw,38px) 14px;box-shadow:0 5px 20px #26301b08}
.canvas-heading{display:flex;align-items:end;justify-content:space-between;gap:18px;margin-bottom:14px}
.canvas-heading .eyebrow{font-size:9px}
.canvas-heading h1{margin:4px 0 2px;font-size:clamp(24px,2.5vw,34px);line-height:1.05;letter-spacing:-1.3px}
.canvas-heading p{margin:0;color:#737b6d;font-size:11px}
.canvas-count{white-space:nowrap;color:#66725a;font-size:11px;background:#f4f7ed;border:1px solid #e1e9d4;border-radius:100px;padding:8px 12px}
.canvas-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.canvas-controls .search{width:clamp(180px,22vw,310px);max-width:none;min-width:150px;background:#fff}
.canvas-kinds{display:flex;gap:4px;align-items:center;overflow-x:auto;scrollbar-width:none}
.canvas-kinds::-webkit-scrollbar{display:none}
.canvas-kind{border:1px solid transparent;border-radius:100px;padding:9px 12px;background:transparent;color:#67705f;white-space:nowrap;font-size:11px;font-weight:650}
.canvas-kind:hover{background:#f1f6e7}
.canvas-kind.active{background:#d1fc64;border-color:#bce754;color:#26340f}
.canvas-sort{margin-left:auto;background:#fff;max-width:145px}
.canvas-stage{position:relative;flex:1;min-height:0;background:radial-gradient(#d7d9d1 1px,transparent 1px) 0 0/22px 22px,#faf9f5;overflow:hidden}
.canvas-viewport{position:absolute;inset:0;overflow:hidden;cursor:grab;touch-action:none;user-select:none}
.canvas-viewport.is-panning{cursor:grabbing}
.canvas-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.canvas-tile{position:absolute;border:1px solid #e4e7dc;border-radius:15px;background:#fff;overflow:hidden;box-shadow:0 8px 22px #27321e14;cursor:pointer;outline:0;transition:box-shadow .16s,border-color .16s}
.canvas-tile:hover,.canvas-tile:focus-visible{border-color:#a5c95c;box-shadow:0 12px 30px #27321e27}
.canvas-tile:focus-visible{outline:3px solid #8ab83d;outline-offset:2px}
.canvas-preview{position:relative;display:grid;place-items:center;overflow:hidden;background:#e8ede3}
.canvas-preview img,.canvas-preview video{width:100%;height:100%;object-fit:cover;pointer-events:none}
.canvas-preview video{background:#303630}
.canvas-audio{width:100%;height:100%;display:grid;place-items:center;background:linear-gradient(130deg,#e4eed5,#d1e5c0 60%,#e8f3d9)}
.canvas-audio span{font-size:48px;color:#4d7139;line-height:1}
.canvas-caption{height:51px;padding:8px 10px 7px;display:flex;align-items:center;gap:8px}
.canvas-caption-copy{min-width:0;flex:1}
.canvas-caption strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.canvas-caption small{display:block;color:#798274;font-size:9px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile-more{flex:none;width:28px;height:28px;border:0;border-radius:8px;background:#f3f6ed;color:#3b4930;font-size:18px;line-height:1;display:grid;place-items:center}
.tile-more:hover,.tile-more:focus-visible{background:#d1fc64;outline:none}
.canvas-folder{background:#f5f9e9;border-color:#e0e9cf}
.canvas-folder-face{height:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px;padding:19px 18px}
.canvas-folder-face svg{width:47px;height:47px;color:#a5ce4d;filter:drop-shadow(0 4px 7px #7a9d3150)}
.canvas-folder-face strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.canvas-folder-face small{color:#7c8b67;font-size:10px}
.canvas-folder .tile-more{position:absolute;right:9px;top:9px}
.canvas-hud{position:absolute;z-index:3;left:18px;bottom:17px;display:flex;align-items:center;background:#fff;border:1px solid #e2e4db;border-radius:12px;box-shadow:0 7px 22px #222a1a15;overflow:hidden}
.canvas-hud button{border:0;background:transparent;width:38px;height:38px;font-size:20px;color:#253020}
.canvas-hud button:hover{background:#eff6df}
.canvas-hud span{min-width:48px;text-align:center;font-size:10px;color:#697363}
.canvas-hud .canvas-fit{border-left:1px solid #e7eadf;font-size:15px}
.canvas-tip{position:absolute;z-index:2;bottom:21px;left:50%;transform:translateX(-50%);pointer-events:none;white-space:nowrap;border:1px solid #e5e9dc;background:#fffdf9de;border-radius:100px;padding:7px 13px;font-size:10px;color:#73806c}
.canvas-fab{position:absolute;z-index:3;right:18px;bottom:17px;border:0;border-radius:100px;background:#242a20;color:#fff;padding:12px 17px;font-size:12px;font-weight:750;box-shadow:0 10px 24px #1c251a33}
.canvas-fab:hover{background:#3a5026}
.canvas-empty{position:absolute;z-index:1;left:50%;top:46%;transform:translate(-50%,-50%);width:min(360px,calc(100% - 40px));text-align:center;background:#fffffff0;border:1px solid #e4e9d9;border-radius:18px;padding:22px;box-shadow:0 12px 40px #29331e12}
.canvas-empty .symbol{font-size:26px;color:#8fae50}
.canvas-empty h2{font-size:17px;margin:6px 0}
.canvas-empty p{font-size:11px;line-height:1.5;color:#697563}
.canvas-context{position:fixed;z-index:150;width:208px;padding:6px;border:1px solid #dfe5d6;border-radius:12px;background:#fff;box-shadow:0 20px 55px #18201244}
.canvas-context-label{padding:7px 9px 9px;border-bottom:1px solid #ecf0e8;margin-bottom:4px;font-size:10px;color:#75806f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.canvas-context button{display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:7px;padding:9px 10px;font-size:11px;color:#283123}
.canvas-context button:hover,.canvas-context button:focus-visible{background:#eff7df;outline:0}
.canvas-context button.danger{color:#9d423c}
.canvas-context button.danger:hover{background:#fff0ed}
.studio-edit{display:grid;gap:13px;padding:16px 4px 2px}
.studio-edit h2{font-size:23px;letter-spacing:-.7px;margin:0 0 7px}
.studio-edit label{font-size:11px;font-weight:750}
.studio-edit .field,.studio-edit select{width:100%;max-width:480px}
.studio-edit .detail-actions{margin-top:7px}
@media(max-width:900px){.studio-workspace{grid-template-columns:minmax(0,1fr)}.studio-workspace.canvas-workspace{grid-template-rows:auto minmax(0,1fr)}.studio-sidebar{min-width:0}.studio-sidebar nav{min-width:0;max-width:100%;scrollbar-width:none}.studio-sidebar nav::-webkit-scrollbar{display:none}.canvas-toolbar{padding:12px 13px}.canvas-heading{margin-bottom:9px}.canvas-heading p{display:none}.canvas-controls .search{flex:1;width:160px}.canvas-sort{margin-left:0}}
@media(max-width:620px){.canvas-heading h1{font-size:23px}.canvas-count{font-size:9px;padding:6px 9px}.canvas-controls{gap:6px}.canvas-kinds{order:3;width:100%}.canvas-kind{font-size:10px;padding:7px 10px}.canvas-controls .search{width:calc(100% - 148px);min-width:0}.canvas-sort{width:140px}.canvas-files .canvas-controls .search{flex:0 0 100%;width:100%}.canvas-files .canvas-sort{order:2;flex:1;min-width:105px;max-width:none}.canvas-files .canvas-controls>.btn{order:2;padding:8px 10px}.canvas-tip{display:none}.canvas-hud{left:10px;bottom:11px}.canvas-fab{right:10px;bottom:11px;padding:11px 14px}}
/* The active sidebar item names these views; let their controls use the space. */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#studio-main.generator-main{padding-top:20px}
@media(max-width:600px){#studio-main.generator-main{padding-top:13px}}
.canvas-storage{position:absolute;z-index:3;left:50%;bottom:58px;transform:translateX(-50%);width:min(620px,calc(100% - 260px));padding:10px 13px;border:1px solid #e1e5d9;border-radius:13px;background:#fffdf9f2;box-shadow:0 7px 24px #222a1a19;color:#34402c;font-size:10px}
.storage-summary,.storage-details{display:flex;align-items:center;justify-content:space-between;gap:9px}.storage-summary strong{font-size:11px}.storage-summary span{color:#66735d}.storage-track{display:flex;width:100%;height:5px;margin:8px 0;border-radius:100px;overflow:hidden;background:#e7eadf}.storage-segment{height:100%;flex:none}.storage-image{background:#a2c658}.storage-video{background:#6e96bd}.storage-audio{background:#cf9c73}.storage-document{background:#ad9dc2}.storage-details{justify-content:flex-start;flex-wrap:wrap;column-gap:13px;row-gap:4px;color:#5c6657}.storage-detail{white-space:nowrap}.storage-dot{display:inline-block;width:6px;height:6px;margin-right:4px;border-radius:50%;vertical-align:1px}
@media(max-width:900px){.canvas-storage{width:min(620px,calc(100% - 235px))}}
@media(max-width:620px){.canvas-storage{left:10px;right:10px;bottom:58px;transform:none;width:auto;padding:8px 10px}.storage-details{column-gap:9px}.storage-summary strong{font-size:10px}}
.canvas-back{position:absolute;z-index:3;left:18px;top:18px;border:1px solid #e1e5d9;border-radius:100px;background:#fff;color:#263023;padding:11px 16px;font-size:11px;font-weight:750;box-shadow:0 8px 24px #222a1a18}
.canvas-back:hover{background:#eaffbd;border-color:#bce754}
.canvas-tile.is-dragging{z-index:4;cursor:grabbing;box-shadow:0 17px 42px #26321e38;border-color:#a5c95c;transition:none}
@media(max-width:620px){.canvas-back{left:10px;top:10px;padding:9px 12px}}
.canvas-tile.sync-pending::after{content:'Sync pending';position:absolute;left:8px;top:8px;padding:4px 6px;border-radius:6px;background:#fff8e9;color:#795e27;border:1px solid #e7d8b5;font-size:9px;font-weight:700;pointer-events:none}
.canvas-flags{position:absolute;right:8px;top:8px;display:flex;gap:5px;pointer-events:none}.canvas-flags span{width:25px;height:25px;display:grid;place-items:center;border:1px solid #ffffffb9;border-radius:8px;background:#1d291edc;color:#fff;box-shadow:0 3px 10px #17201838}.canvas-flags svg{width:14px;height:14px}
#studio-dialog.file-detail-dialog{width:min(1080px,calc(100vw - 32px));max-height:92vh;padding:24px;border-radius:22px}
.file-detail-dialog .detail-layout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(310px,.88fr);gap:26px;margin-top:28px;align-items:start}
.file-detail-dialog .detail-media{height:min(65vh,620px);min-height:370px;padding:14px;border:1px solid #e6e9e0;border-radius:16px;background:#f3f5ef;display:grid;place-items:center;overflow:hidden}
.file-detail-dialog .detail-media img,.file-detail-dialog .detail-media video{width:100%;height:100%;max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;background:transparent}
.file-detail-dialog .detail-media audio{width:min(100%,420px)}
.file-detail-dialog .detail-info{min-width:0;padding:5px 10px 8px 0}
.detail-badges{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:16px}.detail-kind,.detail-state{display:inline-flex;align-items:center;gap:5px;min-height:26px;padding:5px 9px;border:1px solid #dfe8d3;border-radius:100px;background:#f7fbf1;color:#536d3d;font-size:10px;font-weight:750}.detail-state.shared{background:#f0f5fb;border-color:#d9e4f0;color:#476789}.detail-state.community{background:#ecf8da;border-color:#d4eab5;color:#446327}.detail-state .action-icon{width:12px;height:12px}
.detail-heading{display:flex;align-items:flex-start;gap:8px}.file-detail-dialog .detail-heading h2{margin:0;font-size:clamp(21px,2.4vw,31px);line-height:1.1;letter-spacing:-.8px;overflow-wrap:anywhere}.detail-rename{width:32px;height:32px;flex:none;display:grid;place-items:center;border:1px solid #dbe3d2;border-radius:9px;background:#fff;color:#53654a}.detail-rename:hover{background:#eaffbd}.detail-rename .action-icon{width:16px;height:16px}
.file-detail-dialog .detail-subline{margin:9px 0 0;color:#7a8375;font-size:11px}.detail-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:20px 0 0}.detail-settings div{padding:8px 10px;border:1px solid #e8ece2;border-radius:9px;background:#fafbf8}.detail-settings dt{color:#889183;font-size:9px;text-transform:capitalize}.detail-settings dd{margin:3px 0 0;font-size:11px;font-weight:700;overflow-wrap:anywhere}
.file-detail-dialog .detail-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:22px}.file-detail-dialog .detail-actions .btn{justify-content:flex-start;text-align:left;min-height:42px;padding:9px 11px;line-height:1.25}.file-detail-dialog .detail-actions .btn-primary,.file-detail-dialog .detail-actions .btn-publish{grid-column:1/-1}.file-detail-dialog .detail-actions .btn-publish{background:#e8ffb5;border-color:#b9e34e;color:#21380e}.action-icon{width:16px;height:16px;flex:none}.detail-note{margin:12px 0 0;color:#7b846f;font-size:10px;line-height:1.45}
.detail-prompt{margin-top:24px;border-top:1px solid #e9ede4;padding-top:16px}.detail-prompt>div{display:flex;align-items:center;justify-content:space-between;gap:8px}.detail-prompt h3{margin:0;font-size:12px}.detail-copy{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;color:#5b7344;font-size:10px;font-weight:750}.detail-copy .action-icon{width:13px;height:13px}.file-detail-dialog .detail-prompt pre{margin:8px 0 0;padding:12px;border-radius:10px;background:#f6f8f2;color:#576152;font:11px/1.5 inherit;white-space:pre-wrap;overflow-wrap:anywhere}
#inline-rename-form{display:flex;flex-wrap:wrap;gap:7px;width:100%}#inline-rename-form input{flex:1;min-width:160px;font-size:15px;font-weight:700}#inline-rename-form .btn{min-height:39px}
@media(max-width:760px){#studio-dialog.file-detail-dialog{padding:16px;width:calc(100vw - 20px)}.file-detail-dialog .detail-layout{grid-template-columns:1fr;gap:18px;margin-top:24px}.file-detail-dialog .detail-media{height:min(43vh,430px);min-height:230px}.file-detail-dialog .detail-info{padding:0}.file-detail-dialog .detail-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}