html,body,#root{width:100vw;height:100vh;overflow:hidden}body{color:#111827;background:#f6f7fb;margin:0;font-family:Arial,sans-serif}button,input,textarea,select{font:inherit}button{color:#fff;cursor:pointer;background:#111827;border:0;border-radius:10px;padding:12px 14px}input,textarea,select{border:1px solid #d1d5db;border-radius:10px;padding:12px 14px}button:disabled{opacity:.6;cursor:not-allowed}.auth-page,.app{place-items:center;min-height:100vh;display:grid}.auth-card{background:#fff;border-radius:18px;gap:14px;width:360px;padding:32px;display:grid;box-shadow:0 20px 50px #0f172a14}.auth-card h1{margin:0}.auth-card p{color:#6b7280;margin:0 0 12px}.dashboard{grid-template-columns:240px 1fr;min-height:100vh;display:grid}.sidebar,.builder-sidebar{color:#fff;background:#111827;padding:20px}.sidebar{flex-direction:column;justify-content:space-between;display:flex}.sidebar h2,.builder-sidebar h2{margin:0}.sidebar p,.builder-sidebar p{color:#9ca3af}.sidebar button,.builder-sidebar button{color:#111827;background:#fff}.main{padding:32px}.main-header{margin-bottom:24px}.main-header h1{margin:0}.main-header p{color:#6b7280}.new-app-card,.empty-card,.app-card{background:#fff;border-radius:18px;padding:24px;box-shadow:0 10px 30px #0f172a0f}.new-app-card{margin-bottom:24px}.new-app-row{gap:12px;display:flex}.new-app-row input{flex:1}.apps-grid{grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;display:grid}.app-card-open{width:100%;color:inherit;text-align:left;background:0 0;padding:0}.app-card p,.empty-card p{color:#6b7280}.app-card span{color:#374151;background:#f3f4f6;border-radius:999px;margin-top:12px;padding:5px 10px;font-size:13px;display:inline-block}.delete-app-button{background:#dc2626;width:100%;margin-top:14px}.builder-page{grid-template-columns:220px minmax(0,1fr) 340px;width:100vw;height:100vh;display:grid;overflow:hidden}.builder-sidebar{align-content:start;gap:24px;display:grid;overflow-y:auto}.builder-section{gap:10px;display:grid}.builder-section h4{margin-bottom:4px}.builder-section button{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.builder-main{flex-direction:column;min-width:0;padding:18px;display:flex;overflow:hidden}.builder-header{flex:none;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;margin-bottom:14px;display:grid}.builder-header h1{margin:0}.builder-header p{color:#6b7280;margin:4px 0 0}.builder-canvas{background:#e5e7eb;border-radius:18px;flex:1;justify-content:center;align-items:flex-start;padding:24px;display:flex;overflow:auto}.preview-panel{box-sizing:border-box;background:#fff;border-radius:14px;min-height:1800px;padding:32px;position:relative;box-shadow:0 10px 30px #0f172a0f}.builder-inspector{background:#fff;border-left:1px solid #e5e7eb;width:auto;min-width:0;padding:16px;overflow:hidden auto}.builder-inspector h3{text-transform:capitalize;margin-top:0}.builder-inspector p{color:#6b7280}.builder-inspector pre{background:#f3f4f6;border-radius:12px;padding:12px;font-size:12px;overflow:auto}.component-shell{cursor:move;-webkit-user-select:none;user-select:none;box-sizing:border-box;background:0 0;border:2px solid #0000;border-radius:12px;padding:8px}.component-shell:hover,.component-shell.selected{background:#eff6ff;border-color:#2563eb}.component-content{box-sizing:border-box;width:100%;height:100%;overflow:auto}.component-content>*{box-sizing:border-box;width:100%;height:100%}.resize-handle{cursor:nwse-resize;background:#2563eb;border-radius:4px;width:14px;height:14px;position:absolute;bottom:3px;right:3px}.preview-text,.runtime-text{white-space:pre-wrap;text-align:left;font-size:18px;font-weight:400;line-height:1.6;overflow:visible}.preview-button,.runtime-button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:10px}.preview-image,.runtime-image{object-fit:contain;object-position:center;background:#fff;border-radius:8px;width:100%;height:100%}.clickable-image{cursor:pointer}.preview-table,.runtime-table{border-collapse:collapse;background:#fff;width:100%;height:100%}.preview-table th,.preview-table td,.runtime-table th,.runtime-table td{text-align:left;border:1px solid #e5e7eb;padding:10px}.preview-table th,.runtime-table th{background:#f9fafb}.preview-form,.runtime-form{gap:12px;width:100%;height:100%;display:grid;overflow:auto}.preview-form label,.runtime-form label{gap:6px;font-weight:600;display:grid}.preview-unknown,.empty-preview{color:#6b7280}.inspector-field{gap:8px;margin-bottom:16px;font-weight:600;display:grid}.inspector-field textarea{resize:vertical;min-height:220px;font-family:monospace;font-size:13px;line-height:1.5}.layout-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px;display:grid}.layout-grid label{color:#374151;gap:6px;font-size:13px;display:grid}.layout-grid input{color:#6b7280;background:#f9fafb}.danger-button{color:#fff;background:#dc2626}.script-help{color:#6b7280;gap:6px;margin-bottom:18px;font-size:13px;display:grid}.script-help code{color:#111827;background:#f3f4f6;border-radius:6px;padding:5px 7px;display:inline-block}.public-loading{color:#6b7280;place-items:center;min-height:100vh;display:grid}.public-runtime{background:#fff;min-height:100vh;overflow:visible}.public-canvas{background:#fff;min-height:3000px;position:relative;overflow:visible}.runtime-component{box-sizing:border-box;position:absolute;overflow:visible}.builder-header>div:first-child{min-width:0}.builder-header h1{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.builder-header p{color:#6b7280;text-overflow:ellipsis;white-space:nowrap;margin:4px 0 0;overflow:hidden}.builder-inspector input,.builder-inspector textarea,.builder-inspector select{box-sizing:border-box;width:100%}.preview-image.responsive,.runtime-image.responsive{object-fit:contain;width:100%;height:auto}.preview-image.cover,.runtime-image.cover{object-fit:cover;width:100%;height:100%}.preview-image.contain,.runtime-image.contain{object-fit:contain;width:100%;height:100%}.runtime-image{pointer-events:auto;z-index:10}.runtime-component{pointer-events:auto}.runtime-image-clickbox{pointer-events:auto;position:absolute}.runtime-image-clickbox img{pointer-events:none;width:100%;height:100%;display:block}.script-editor{resize:vertical;min-height:300px;font-family:Consolas,Monaco,monospace;font-size:13px;line-height:1.6}