.workspace{flex:1;min-height:0;display:grid;grid-template-columns:var(--left-panel-width) 1fr var(--right-panel-width);position:relative}
    .sidebar,.rightbar{background:var(--panel);min-height:0;min-width:0;overflow:auto;position:relative;z-index:90}
    .sidebar{border-right:1px solid var(--line)}
    .rightbar{border-left:1px solid var(--line);background:var(--panel2)}
    .sidebar.collapsed,.rightbar.collapsed{width:0 !important;min-width:0 !important;overflow:visible;padding:0;border:0;background:transparent}
    .sidebar.collapsed .section,.rightbar.collapsed .section,.sidebar.collapsed .side-panel-tabs,.rightbar.collapsed .side-panel-tabs,.sidebar.collapsed .side-panel-section,.rightbar.collapsed .side-panel-section{display:none}
    .workspace.left-collapsed{grid-template-columns:var(--panel-handle-width) 1fr var(--right-panel-width)}
    .workspace.right-collapsed{grid-template-columns:var(--left-panel-width) 1fr var(--panel-handle-width)}
    .workspace.left-collapsed.right-collapsed{grid-template-columns:var(--panel-handle-width) 1fr var(--panel-handle-width)}
    .section{padding:14px;border-bottom:1px solid var(--line)}
    .sidebar .section:first-of-type,.rightbar .section:first-of-type{padding-top:14px}
    .section h3{margin:0 0 10px;font-size:14px;color:#f8fafc}
    .section p,.hint{margin:0 0 10px;color:var(--muted);font-size:12px;line-height:1.5}
    .stack{display:flex;flex-direction:column;gap:8px}
    .row{display:flex;gap:8px;flex-wrap:wrap}
    .chip,.panel-badge{display:inline-flex;align-items:center;gap:6px;background:var(--chip);color:#cbd5e1;border:1px solid #334155;border-radius:999px;padding:5px 10px;font-size:12px}
    .chip.device-desktop{background:#13203a;color:#dbeafe;border-color:#1e3a8a}
    .chip.device-tablet{background:#0f2c2c;color:#ccfbf1;border-color:#0f766e}
    .chip.device-mobile{background:#2a1835;color:#f5d0fe;border-color:#a21caf}
    .panel-toggle{position:absolute;top:0;z-index:120;display:flex;padding:0;pointer-events:none}
    .panel-toggle.left{right:0;justify-content:flex-end;padding-right:0}
    .panel-toggle.right{left:0;justify-content:flex-start;padding-left:0}
    .panel-toggle .panel-tab{pointer-events:auto}
    .sidebar.collapsed .panel-toggle,.rightbar.collapsed .panel-toggle{position:fixed;top:calc(var(--workspace-top,0px) + 16px);left:auto;right:auto;justify-content:center;padding:0;z-index:999999}
    .sidebar.collapsed .panel-toggle.left{left:0}
    .rightbar.collapsed .panel-toggle.right{right:0}
    .sidebar.collapsed,.rightbar.collapsed{overflow:visible}
    .sidebar.collapsed .panel-toggle,.rightbar.collapsed .panel-toggle,.bottom-panel-toggle{pointer-events:none}
    .sidebar.collapsed .panel-toggle .panel-tab,.rightbar.collapsed .panel-toggle .panel-tab,.bottom-panel-toggle .panel-tab{pointer-events:auto}
    .sidebar,.rightbar,.bottom-panel,.panel-toggle,.bottom-panel-toggle,.panel-resizer{touch-action:none}
    .panel-resizer{position:fixed;top:var(--workspace-top,0px);bottom:var(--bottom-panel-height,0px);width:18px;cursor:ew-resize;z-index:999998;background:linear-gradient(90deg,rgba(96,165,250,0),rgba(96,165,250,.16),rgba(96,165,250,0));transition:background .16s ease,box-shadow .16s ease;pointer-events:auto}
    .panel-resizer:hover,.panel-resizer.is-dragging{background:linear-gradient(90deg,rgba(96,165,250,.04),rgba(96,165,250,.38),rgba(96,165,250,.04));box-shadow:0 0 0 1px rgba(147,197,253,.2) inset}
    .panel-resizer.left{left:calc(var(--left-panel-width) - 9px)}
    .panel-resizer.right{right:calc(var(--right-panel-width) - 9px)}
    .sidebar.collapsed .panel-resizer,.rightbar.collapsed .panel-resizer{display:block}
    /* Ensure the resizer is reachable when panels are collapsed */
    .sidebar.collapsed .panel-resizer.left{left:4px;right:auto;z-index:9999999;background:linear-gradient(90deg,rgba(96,165,250,.06),rgba(96,165,250,.18),rgba(96,165,250,.06))}
    .rightbar.collapsed .panel-resizer.right{right:4px;left:auto;z-index:9999999;background:linear-gradient(270deg,rgba(96,165,250,.06),rgba(96,165,250,.18),rgba(96,165,250,.06))}
    .panel-toggle.left .panel-tab,.panel-toggle.right .panel-tab{width:8px;height:76px;border-radius:999px;background:rgba(96,165,250,.32);border:1px solid rgba(191,219,254,.34);color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;position:relative;z-index:140;box-shadow:0 8px 18px rgba(2,6,23,.18);opacity:.62;overflow:hidden;transition:width .18s ease,opacity .18s ease,background .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
    .panel-toggle.left .panel-tab{transform:translateX(3px)}
    .panel-toggle.right .panel-tab{transform:translateX(-3px)}
    .sidebar:hover .panel-toggle.left .panel-tab,.rightbar:hover .panel-toggle.right .panel-tab,.panel-toggle.left .panel-tab:hover,.panel-toggle.right .panel-tab:hover,.panel-toggle.left .panel-tab:focus,.panel-toggle.right .panel-tab:focus,.panel-toggle.left .panel-tab:focus-visible,.panel-toggle.right .panel-tab:focus-visible{width:24px;color:#f8fafc;opacity:1;background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%);border-color:#bfdbfe;box-shadow:0 12px 26px rgba(2,6,23,.35);transform:translateX(0)}
    .sidebar.collapsed .panel-toggle.left .panel-tab,.rightbar.collapsed .panel-toggle.right .panel-tab{width:14px;height:84px;color:#dbeafe;opacity:.82;background:rgba(37,99,235,.58);border-color:rgba(191,219,254,.58);transform:translateX(0)}
    .sidebar.collapsed:hover .panel-toggle.left .panel-tab,.rightbar.collapsed:hover .panel-toggle.right .panel-tab,.sidebar.collapsed .panel-toggle.left .panel-tab:hover,.rightbar.collapsed .panel-toggle.right .panel-tab:hover,.sidebar.collapsed .panel-toggle.left .panel-tab:focus,.rightbar.collapsed .panel-toggle.right .panel-tab:focus,.sidebar.collapsed .panel-toggle.left .panel-tab:focus-visible,.rightbar.collapsed .panel-toggle.right .panel-tab:focus-visible{width:24px;color:#f8fafc;opacity:1;background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%)}
    .bottom-panel-toggle .panel-tab{border-radius:999px;background:linear-gradient(180deg,#60a5fa 0%,#2563eb 100%);border:1px solid #bfdbfe;color:#f8fafc;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;position:relative;z-index:140;box-shadow:0 12px 26px rgba(2,6,23,.35)}
    .panel-tab:hover{filter:brightness(1.08)}
    .panel-tab:focus-visible{outline:2px solid #bfdbfe;outline-offset:3px}
    .panel-tab span{writing-mode:horizontal-tb;transform:none;font-size:18px;font-weight:800;line-height:1;text-shadow:0 1px 2px rgba(15,23,42,.45)}
    #editorShell{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;background:#0b1220}
    .canvasbar{height:42px;min-height:42px;display:flex;align-items:center;gap:8px;padding:0 10px;border-bottom:1px solid var(--line);background:#0f172a;overflow-x:auto}
    .center-tabbar{height:48px;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0f172a,#09111f);overflow-x:auto;overflow-y:hidden}
    .center-tab-list{display:flex;align-items:center;gap:8px;flex:0 0 auto}
    .center-tab-btn{height:34px;border-radius:999px;border:1px solid #334155;background:#0f172a;color:#cbd5e1;padding:0 13px;cursor:pointer;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
    .center-tab-btn.is-active{background:#1d4ed8;border-color:#93c5fd;color:#f8fafc;box-shadow:0 0 0 1px rgba(147,197,253,.16) inset}
    .center-logic-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:max-content;flex:1}
    .center-tabbar[data-active-tab="canvas"] .center-logic-actions{display:none}
    .center-tabbar[data-active-tab="logic"]{height:auto;min-height:48px;overflow-x:hidden;flex-wrap:wrap}
    .center-tabbar[data-active-tab="logic"] .center-logic-actions{min-width:0;flex:1 1 520px;flex-wrap:wrap}
    .center-logic-target{max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#94a3b8;font-size:12px}
    .center-tab-panel{display:none;flex:1;min-height:0;min-width:0}
    .center-tab-panel.is-active{display:flex}
    .canvaswrap{flex:1;min-height:0;position:relative;background:#0b1220}
    .center-logic-panel{background:#020617}
    .center-logic-layout{position:relative;display:block;flex:1;min-width:0;min-height:0;overflow:hidden;background:#111827}
    .center-logic-layout .logic-workspace-wrap{position:absolute;inset:0;min-width:0;min-height:0;overflow:hidden}
    .center-logic-layout #centerBlocklyWorkspace{inset:0 0 0 26px}
    .center-logic-preview{display:none !important;position:absolute;top:10px;right:10px;bottom:10px;width:min(430px,calc(100% - 20px));z-index:30;border:1px solid #243041;border-radius:14px;box-shadow:0 24px 60px rgba(2,6,23,.55);overflow:hidden}
    .center-logic-layout.show-preview .center-logic-preview{display:flex !important}
    .center-logic-preview .logic-preview-body{min-height:0}
    .center-logic-preview .logic-generated-code{min-height:0}
    body.center-logic-active .sidebar.collapsed .panel-toggle,
    body.center-logic-active .rightbar.collapsed .panel-toggle,
    body.center-logic-active .panel-resizer.left,
    body.center-logic-active .panel-resizer.right{display:none !important;pointer-events:none !important}