:root{--bg:#f5f5f5;--panel:#ffffff;--accent:#F7DF1E;--muted:#555;--gap:12px;--header-bg: linear-gradient(#f7df1e,#d4be12);--header-color:#000}
html,body,#app{height:100%;margin:0;background:var(--bg);font-family:Inter,system-ui,Arial,sans-serif}
#app{display:flex;flex-direction:column;padding:0;box-sizing:border-box;gap:var(--gap);height:100%}
#appHeader{background:var(--header-bg);color:var(--header-color);padding:10px 12px;box-sizing:border-box}
.titleRow{display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px}
.brandLink{display:flex;align-items:center;text-decoration:none;color:inherit;cursor:pointer}
.appTitle{font-weight:800;font-size:22px;color:var(--header-color)}
.fileMenu{display:flex;align-items:center;gap:8px}
.fileLabel{font-size:12px;color:var(--header-color);opacity:0.95;font-weight:700}
.fileActions{display:flex;align-items:center}
.fileActions button{background:transparent;border:none;color:var(--header-color);padding:6px 8px;cursor:pointer;font-weight:700}
.fileActions button:hover{background:rgba(255,255,255,0.06)}
.sampleWrapper{position:relative;display:inline-block}
#sampleMenu{position:absolute;top:100%;left:0;display:none;flex-direction:column;background:var(--header-bg);color:var(--header-color);border:none;min-width:150px;z-index:100}
#sampleMenu button{background:transparent;color:var(--header-color);border:none;border-bottom:1px solid rgba(0,0,0,0.3);padding:6px 12px;text-align:left;cursor:pointer;font-weight:700}
#sampleMenu button:last-child{border-bottom:none}
#sampleMenu button:hover{background:rgba(255,255,255,0.05)}
#workspaceArea{flex:1;position:relative;background:var(--panel);box-shadow:0 4px 12px rgba(0,0,0,0.06);overflow:hidden}
#leftColumn{display:flex;flex-direction:column;height:48px;box-sizing:border-box;padding:0 12px 0 12px;z-index:2}
.tabs{display:inline-flex;border:0;border-radius:0;overflow:hidden;align-items:center;gap:6px;height:48px}
.panel{position:absolute;left:0;right:0;top:48px;bottom:0;box-sizing:border-box;padding:12px;border:0;border-radius:0;min-height:0;overflow:auto;background:transparent}
#blocklyDiv{background:transparent}
#codeOutput{background:#0f1724;color:#e6eef8;margin:0;font-family:monospace;font-size:12px;white-space:pre-wrap}
#controls{display:flex;gap:8px;align-items:center;padding:6px 12px}
.tabs button{background:#f0f0f0;color:#111;border:1px solid #e0e0e0;padding:8px 12px;margin:0;cursor:pointer;font-weight:700;border-radius:0;height:32px}
.tabs button[aria-selected="true"]{background:var(--accent);color:#000;border-color:#d4be12}
button{background:var(--accent);color:#fff;border:none;padding:8px 12px;border-radius:0;font-weight:600;cursor:pointer}
button[title="New workspace"],#hdrNew,#hdrSave,#hdrLoad{padding:6px 10px}
.headerActions{margin-left:auto;display:flex;align-items:center;gap:8px}
.headerActions button{background:#F7DF1E;color:#000;border:none;padding:8px 12px;cursor:pointer;font-weight:700;border-radius:0}
.brandLogo{width:40px;height:40px;object-fit:contain;margin-right:8px}
.menuDivider{width:1px;height:18px;background:rgba(0,0,0,0.5);margin:0 6px}
@media (max-width:640px){.headerActions button{padding:10px 14px;font-size:15px}}
@media (max-width:640px){#workspaceArea{flex-direction:column}#leftColumn{height:40px;padding-left:8px;padding-right:8px}.panel{top:40px}#controls{flex-wrap:wrap}#codeOutput{font-size:11px}}