* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#f8f9fa; color:#333; min-height:100vh; }

/* Header */
header { text-align:center; padding:20px 20px 12px; border-bottom:1px solid #e5e7eb; background:#fff; }
header .logo { color:#7c3aed; text-decoration:none; font-size:0.9em; float:left; margin-top:6px; }
header h1 { font-size:1.5em; color:#1f2937; margin-bottom:4px; }
header p { color:#9ca3af; font-size:0.85em; }

/* Main layout */
.main-layout { display:flex; gap:16px; padding:16px; max-width:1200px; margin:0 auto; }
.panel { flex:1; background:#fff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,0.04); }
.panel-title { padding:10px 16px; font-size:0.85em; color:#6b7280; border-bottom:1px solid #f3f4f6; }

/* Drop zone */
.drop-zone { flex:1; min-height:300px; display:flex; align-items:center; justify-content:center; position:relative; }
.drop-zone.drag-over { background:rgba(167,139,250,0.06); border:2px dashed #a78bfa; }
.drop-hint { color:#9ca3af; font-size:1.1em; text-align:center; line-height:1.8; }
#canvasOriginal, #canvasPreview { max-width:100%; max-height:100%; object-fit:contain; display:none; }
.preview-container { flex:1; display:flex; align-items:center; justify-content:center; position:relative; min-height:300px; }
.preview-placeholder { color:#d1d5db; font-size:1em; text-align:center; }

.image-info { padding:8px 16px; border-top:1px solid #f3f4f6; font-size:0.8em; color:#9ca3af; }

/* Toolbar */
.toolbar { border-top:1px solid #f3f4f6; padding:0 16px; background:#fff; }
.tool-tabs { display:flex; gap:4px; padding:12px 0 8px; overflow-x:auto; }
.tab { padding:8px 14px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#6b7280; cursor:pointer; font-size:0.9em; white-space:nowrap; transition:all 0.15s; font-family:inherit; }
.tab:hover { border-color:#a78bfa; color:#374151; background:#fafafe; }
.tab.active { background:#ede9fe; border-color:#a78bfa; color:#7c3aed; }

.tool-panels { padding-bottom:12px; }
.tool-panel { display:none; }
.tool-panel.active { display:block; }
.tool-row { display:flex; gap:8px; align-items:center; padding:6px 0; flex-wrap:wrap; }

/* Buttons */
.btn { padding:8px 16px; border:1px solid #d1d5db; border-radius:8px; background:#fff; color:#374151; cursor:pointer; font-size:0.9em; font-family:inherit; transition:all 0.15s; }
.btn:hover { border-color:#a78bfa; background:#fafafe; }
.btn-primary { background:#7c3aed; border-color:#7c3aed; color:#fff; }
.btn-primary:hover { background:#8b5cf6; }
.btn-reset { background:transparent; border-color:#d1d5db; color:#6b7280; }
.btn-reset:hover { border-color:#ef4444; color:#ef4444; }

/* Style buttons */
.style-grid { display:flex; gap:8px; flex-wrap:wrap; }
.style-btn { padding:10px 14px; border:1px solid #e5e7eb; border-radius:10px; background:#fff; color:#6b7280; cursor:pointer; font-size:0.85em; text-align:center; font-family:inherit; transition:all 0.15s; min-width:80px; }
.style-btn:hover { border-color:#a78bfa; color:#374151; background:#fafafe; }
.style-btn.selected { border-color:#7c3aed; background:#ede9fe; color:#7c3aed; }
.style-btn small { display:block; color:#9ca3af; font-size:0.8em; margin-top:3px; }

/* Inputs */
.input-lg { flex:1; padding:10px 14px; border:1px solid #e5e7eb; border-radius:8px; background:#fff; color:#333; font-size:0.95em; font-family:inherit; min-width:200px; }
.input-lg:focus { outline:none; border-color:#a78bfa; box-shadow:0 0 0 3px rgba(167,139,250,0.1); }
.input-sm { width:70px; padding:6px 8px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; color:#333; font-size:0.9em; text-align:center; font-family:inherit; }
select { padding:8px 12px; border:1px solid #e5e7eb; border-radius:6px; background:#fff; color:#333; font-family:inherit; font-size:0.9em; }
.slider { accent-color:#7c3aed; }
.hint { color:#9ca3af; font-size:0.8em; width:100%; }

/* Status bar */
.status-bar { display:flex; gap:16px; align-items:center; padding:8px 16px; border-top:1px solid #f3f4f6; font-size:0.8em; color:#9ca3af; background:#fff; }
.status-bar .btn { font-size:0.85em; }

/* Responsive */
@media (max-width:768px) {
  .main-layout { flex-direction:column; }
  .panel { min-height:200px; }
  .drop-zone { min-height:200px; }
  .tool-tabs { flex-wrap:nowrap; }
}