body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; margin: 0; background: #f0f2f5; height: 100vh; overflow: hidden; }
.container { height: 100%; display: flex; flex-direction: column; }
.upload-card { margin: auto; background: white; padding: 40px; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); width: 450px; text-align: center; }
.editor-layout { display: flex; flex: 1; height: 100%; overflow: hidden; }

/* Sidebar increased by 50% (420px -> 630px) */
.sidebar { width: 630px; background: white; border-right: 1px solid #e0e0e0; display: flex; flex-direction: column; box-shadow: 2px 0 10px rgba(0,0,0,0.02); flex-shrink: 0; }

.sidebar-header { padding: 20px; border-bottom: 1px solid #f0f0f0; }
.tabs { display: flex; background: #f8f9fa; border-bottom: 1px solid #e0e0e0; }
.tab-btn { flex: 1; border: none; background: none; padding: 12px; cursor: pointer; border-bottom: 3px solid transparent; font-size: 13px; font-weight: 600; color: #666; }
.tab-btn.active { border-bottom-color: #0066ff; color: #0066ff; background: white; }
.tab-content { padding: 20px; overflow-y: auto; flex: 1; display: none; }
.form-group { margin-bottom: 25px; border-bottom: 1px solid #f0f0f0; padding-bottom: 20px; }
.form-group:last-child { border: none; }
.form-group label { display: block; margin-bottom: 10px; font-weight: 600; font-size: 14px; color: #333; }

.gallery-item { display: flex; gap: 12px; margin-bottom: 12px; padding: 10px; border: 1px solid #eee; border-radius: 8px; align-items: center; background: #fafafa; }
.gallery-item.hidden-slot { opacity: 0.6; border-style: dashed; }
.preview { width: 70px; height: 70px; background-size: cover; background-position: center; background-color: #eee; border-radius: 6px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05); }
.controls { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.url-input { width: 100%; padding: 6px 10px; box-sizing: border-box; font-size: 12px; border: 1px solid #ddd; border-radius: 4px; }
.btn-row { display: flex; gap: 6px; }

/* Improved Preview Area */
.preview-area { flex: 1; background: #333; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.preview-toolbar { background: #222; padding: 10px; display: flex; justify-content: center; gap: 15px; border-bottom: 1px solid #000; flex-shrink: 0; }
.view-btn { background: #444; color: #fff; border: 1px solid #555; padding: 6px 20px; border-radius: 20px; cursor: pointer; font-size: 12px; transition: all 0.2s; }
.view-btn.active { background: #0066ff; border-color: #0066ff; box-shadow: 0 0 10px rgba(0,102,255,0.4); }
.preview-container { flex: 1; padding: 20px; overflow: auto; display: flex; justify-content: center; align-items: flex-start; background: #525659; }
#f { width: 100%; height: 100%; border: none; background: white; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 30px rgba(0,0,0,0.5); }
#f.mobile { width: 375px !important; height: 667px !important; border: 16px solid #1a1a1a; border-top-width: 40px; border-bottom-width: 40px; border-radius: 36px; }

.btn { padding: 10px 20px; border-radius: 6px; border: none; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.2s; }
.btn-primary { background: #0066ff; color: white; }
.btn-primary:hover { background: #0052cc; }
.btn-success { background: #28a745; color: white; width: 100%; margin-bottom: 10px; font-weight: 700; font-size: 16px; }
.btn-sm { padding: 4px 10px; font-size: 11px; background: #fff; border: 1px solid #ddd; border-radius: 4px; color: #555; }
.btn-sm:hover { background: #f0f0f0; }
.btn-danger { color: #dc3545; border-color: #f8d7da; }