.studio-grid{flex:1;grid-template-columns:460px 1fr;height:calc(100vh - 52px);display:grid;overflow:hidden}@media (width<=960px){.studio-grid{grid-template-columns:1fr;height:auto;overflow:visible}}.controls-pane{background:var(--bg-surface);border-right:1px solid var(--border);flex-direction:column;gap:18px;padding:24px;display:flex;overflow-y:auto}.template-bar{color:var(--text-secondary);justify-content:space-between;align-items:center;font-size:12px;display:flex}.template-select{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);cursor:pointer;outline:none;padding:3px 8px;font-size:11.5px}.segmented-control{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-md);gap:2px;padding:2px;display:flex}.segment-btn{color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;background:0 0;border:none;flex:1;justify-content:center;align-items:center;gap:6px;padding:7px 12px;font-size:13px;font-weight:500;transition:all .12s;display:flex}.segment-btn:hover{color:var(--text-primary)}.segment-btn.active{background:var(--bg-surface);color:var(--text-primary);font-weight:600;box-shadow:0 1px 2px #0000000f}.dropzone-container{border:1.5px dashed var(--border);background:var(--bg);border-radius:var(--radius-lg);text-align:center;cursor:pointer;padding:28px 20px;transition:all .15s;position:relative}.dropzone-container:hover,.dropzone-container.dragover{border-color:var(--text-primary);background:var(--bg-subtle)}.dropzone-icon{width:30px;height:30px;color:var(--text-secondary);margin-bottom:6px}.dropzone-title{color:var(--text-primary);font-size:13.5px;font-weight:600}.dropzone-sub{color:var(--text-secondary);margin-top:2px;font-size:12px}.file-chip{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-primary);font-size:11.5px;font-family:var(--font-mono);align-items:center;gap:8px;margin-top:10px;padding:5px 10px;display:inline-flex}.code-input-container{flex-direction:column;gap:6px;display:none}.raw-code-area{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;height:180px;font-family:var(--font-mono);color:var(--text-primary);resize:vertical;outline:none;padding:12px 14px;font-size:12px;line-height:1.5;transition:border-color .15s}.raw-code-area:focus{border-color:var(--border-focus);background:var(--bg-surface)}.code-meta-bar{color:var(--text-tertiary);font-size:11px;font-family:var(--font-mono);justify-content:space-between;display:flex}.diagnostics-bar{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);font-size:11.5px;font-family:var(--font-mono);align-items:center;gap:8px;padding:6px 10px;display:none}.diag-item{align-items:center;gap:4px;display:flex}.diag-item.warn{color:var(--warning)}.form-stack{flex-direction:column;gap:13px;display:flex}.field-group{flex-direction:column;gap:5px;display:flex}.field-header{justify-content:space-between;align-items:center;display:flex}.field-label{color:var(--text-primary);font-size:12px;font-weight:600}.field-hint{color:var(--text-tertiary);font-size:11px}.input-field{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-md);width:100%;height:36px;color:var(--text-primary);outline:none;padding:0 12px;font-size:13px;transition:all .15s}.input-field:focus{background:var(--bg-surface);border-color:var(--border-focus)}.input-mono{font-family:var(--font-mono);font-size:12px}.ttl-row{gap:8px;display:flex}.ttl-row select{flex:auto;min-width:0}.ttl-row input{flex:0 0 110px}.advanced-toggle{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;align-items:center;gap:6px;padding:4px 0;font-size:12px;font-weight:500;display:flex}.advanced-toggle:hover{color:var(--text-primary)}.advanced-drawer{flex-direction:column;gap:12px;padding-top:4px;display:none}.advanced-drawer.open{display:flex}.btn-publish{color:#fff;border-radius:var(--radius-md);cursor:pointer;background:#18181b;border:1px solid #18181b;justify-content:center;align-items:center;gap:8px;width:100%;height:42px;margin-top:6px;font-size:13.5px;font-weight:600;transition:all .12s;display:flex;box-shadow:0 1px 3px #0000001a}.btn-publish:hover{background:#27272a;transform:translateY(-.5px);box-shadow:0 3px 8px #0000001f}.btn-publish:active{transform:translateY(0)}.kbd-badge{font-size:11px;font-family:var(--font-mono);color:#e4e4e7;background:#ffffff29;border-radius:4px;padding:2px 6px}.preview-pane{background:#f4f4f5;flex-direction:column;display:flex;overflow:hidden}.preview-toolbar{background:var(--bg-surface);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;gap:12px;height:44px;padding:0 16px;display:flex}.preview-title-group{color:var(--text-secondary);align-items:center;gap:8px;font-size:12px;font-weight:600;display:flex}.toolbar-actions{align-items:center;gap:8px;display:flex}.device-switcher{background:var(--bg-subtle);border:1px solid var(--border);border-radius:var(--radius-sm);gap:2px;padding:2px;display:flex}.device-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px 8px;font-size:11px;font-weight:500}.device-btn.active{background:var(--bg-surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}.icon-tool-btn{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text-secondary);cursor:pointer;align-items:center;gap:4px;padding:4px 8px;font-size:11.5px;transition:all .15s;display:flex}.icon-tool-btn:hover{color:var(--text-primary);border-color:var(--text-secondary)}.preview-stage{flex:1;justify-content:center;align-items:center;padding:20px;display:flex;position:relative;overflow:hidden}.preview-viewport{border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;flex-direction:column;width:100%;height:100%;transition:width .25s cubic-bezier(.4,0,.2,1);display:flex;overflow:hidden;box-shadow:0 4px 20px -2px #0000000f}.preview-viewport.mode-tablet{width:768px}.preview-viewport.mode-mobile{width:375px}.preview-frame{background:#fff;border:none;width:100%;height:100%}.empty-preview-state{height:100%;color:var(--text-tertiary);text-align:center;flex-direction:column;justify-content:center;align-items:center;gap:12px;padding:40px;display:flex}.empty-icon{stroke-width:1.5px;color:#cbd5e1;width:44px;height:44px}.success-banner{background:var(--success-bg);border:1px solid var(--success-border);border-radius:var(--radius-md);padding:14px;animation:.2s ease-out fadeIn;display:none}.success-header{color:#15803d;align-items:center;gap:6px;font-size:13px;font-weight:700;display:flex}.success-link{font-family:var(--font-mono);color:#166534;border:1px solid var(--success-border);border-radius:var(--radius-sm);word-break:break-all;background:#fff;margin:8px 0;padding:6px 10px;font-size:12px;font-weight:600;text-decoration:none;display:block}.success-actions{gap:8px;display:flex}.btn-secondary{border:1px solid var(--border);border-radius:var(--radius-sm);height:32px;color:var(--text-primary);cursor:pointer;background:#fff;flex:1;justify-content:center;align-items:center;gap:4px;font-size:12px;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.btn-secondary:hover{background:var(--bg-subtle)}