.topbar{height:62px;padding:0 24px;gap:26px}
.brand{min-width:215px}
.brand-icon{background:linear-gradient(145deg,#6298f3,#3669bc);box-shadow:0 5px 16px #2c5eaa44}
.file-actions{gap:4px}
.projectbar{height:52px;padding:0 20px}
.project-heading,.view-actions{gap:10px}
.panel-toggle{min-height:34px;padding:7px 10px;border:1px solid var(--line);background:var(--surface);font-size:11px;color:var(--muted)}
.panel-toggle .icon{width:15px;height:15px}
.panel-toggle:hover{border-color:var(--accent)}
#project-name{width:min(34vw,330px);font-size:13px;border-color:transparent}
.project-type{font-size:9px;letter-spacing:.7px;padding:5px 8px}
.editor{grid-template-columns:0 minmax(0,1fr) 0}
.editor.left-collapsed.right-collapsed{grid-template-columns:0 minmax(0,1fr) 0}
.editor:not(.left-collapsed).right-collapsed{grid-template-columns:250px minmax(0,1fr) 0}
.editor.left-collapsed:not(.right-collapsed){grid-template-columns:0 minmax(0,1fr) 280px}
.editor:not(.left-collapsed):not(.right-collapsed){grid-template-columns:250px minmax(0,1fr) 280px}
.editor.left-collapsed .left-sidebar,.editor.right-collapsed .right-sidebar{visibility:hidden;overflow:hidden;pointer-events:none}
.canvas-toolbar{top:20px;left:24px;right:24px}
.canvas-main-actions{display:flex;align-items:center;gap:12px}
.generate-button{min-height:38px;padding:8px 14px;box-shadow:0 5px 18px #3976d833}
.generate-button .icon{width:16px;height:16px}
.segmented{padding:4px}
.segmented button{min-height:30px}
.canvas-options{padding:4px}
.canvas-options button{min-height:30px}
.canvas-caption{top:105px;left:30px}
.canvas-caption h1{font-size:27px;font-weight:550;letter-spacing:-.9px}
.canvas-caption p{font-size:12px}
.workspace{background-size:24px 24px}
.workspace-bottom{bottom:18px}
.statusbar{height:30px;background:var(--surface);border-top:1px solid var(--line)}
.statusbar>div:last-child>span:last-child{display:none}
.sidebar{transition:opacity .16s ease}
.editor.left-collapsed .left-sidebar,.editor.right-collapsed .right-sidebar{opacity:0}
.editor:not(.left-collapsed) .left-sidebar,.editor:not(.right-collapsed) .right-sidebar{opacity:1}

@media(max-width:1150px){
  .editor:not(.left-collapsed).right-collapsed{grid-template-columns:220px minmax(0,1fr) 0}
  .editor.left-collapsed:not(.right-collapsed){grid-template-columns:0 minmax(0,1fr) 250px}
  .editor:not(.left-collapsed):not(.right-collapsed){grid-template-columns:220px minmax(0,1fr) 250px}
  .editor.left-collapsed.right-collapsed{grid-template-columns:0 minmax(0,1fr) 0}
  .topbar{gap:15px}
  .canvas-caption h1{font-size:24px}
}
@media(max-width:900px){
  .editor:not(.left-collapsed).right-collapsed{grid-template-columns:200px minmax(0,1fr) 0}
  .editor.left-collapsed:not(.right-collapsed){grid-template-columns:0 minmax(0,1fr) 240px}
  .editor:not(.left-collapsed):not(.right-collapsed){grid-template-columns:200px minmax(0,1fr) 240px}
  .editor.left-collapsed.right-collapsed{grid-template-columns:0 minmax(0,1fr) 0}
  .view-actions .button-text{display:inline}
  .canvas-toolbar{left:16px;right:16px}
}
@media(max-width:620px){
  .topbar{height:58px;padding:0 12px;gap:8px}
  .brand{min-width:0;font-size:13px;gap:8px}
  .brand small{display:none}
  .brand-icon{width:31px;height:32px}
  .file-actions{margin-left:auto}
  .file-actions .button-text,.save-status{display:none}
  .topbar-end{margin-left:2px}
  .export-button{min-width:38px!important;width:38px;padding:7px}
  .export-button .button-text,.export-button .chevron{display:none}
  .export-button .icon{width:16px;height:16px}
  .projectbar{height:48px;padding:0 9px}
  .project-heading{gap:5px;min-width:0}
  #project-name{width:min(39vw,185px);font-size:11px;padding:6px}
  .project-type{display:none}
  .panel-toggle{min-height:34px;padding:6px 8px}
  .view-actions{gap:4px}
  .view-actions .button-text{display:inline;font-size:10px}
  .editor{display:block;position:relative}
  .editor .left-sidebar,.editor .right-sidebar{position:absolute;top:0;bottom:0;width:min(270px,86vw);z-index:6;box-shadow:0 8px 30px #0005}
  .editor .left-sidebar{left:0;right:auto;display:none}
  .editor .right-sidebar{right:0;left:auto;display:none}
  .editor:not(.left-collapsed) .left-sidebar,.editor:not(.right-collapsed) .right-sidebar{display:flex;visibility:visible;overflow:auto;pointer-events:auto}
  .editor.left-collapsed .left-sidebar,.editor.right-collapsed .right-sidebar{display:none}
  .workspace{height:100%}
  .canvas-toolbar{top:12px;left:10px;right:10px;gap:6px}
  .canvas-main-actions{gap:6px}
  .generate-button{min-height:35px;padding:6px 9px;font-size:10px;gap:5px}
  .generate-button .icon{width:14px;height:14px}
  .segmented button{min-height:31px;padding:5px 7px;font-size:9px}
  .canvas-options button{min-height:31px;padding:5px}
  .canvas-options .button-text{display:none}
  .canvas-caption{top:77px;left:16px}
  .canvas-caption h1{font-size:21px}
  .canvas-caption p{font-size:10px}
  .statusbar{height:26px;padding:0 10px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
  .sidebar{transition:none}
}