:root { --accent: #38bdf8; --bg: #0f172a; }
body { margin: 0; background: var(--bg); color: white; font-family: 'Inter', sans-serif; display: flex; height: 100vh; overflow: hidden; }
.container { display: flex; width: 100%; }
.sidebar { width: 350px; background: #1e293b; padding: 40px; box-shadow: 5px 0 15px rgba(0,0,0,0.3); z-index: 10; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; }
h2 { margin: 0 0 10px; font-size: 1.5rem; color: var(--accent); }
.field label { display: block; margin-bottom: 8px; font-size: 0.9rem; color: #94a3b8; }
input, select { width: 100%; padding: 12px; background: #0f172a; border: 1px solid #334155; color: white; border-radius: 8px; outline: none; transition: 0.3s; box-sizing: border-box; }
input:focus { border-color: var(--accent); }
input[type="color"] { height: 50px; cursor: pointer; padding: 5px; width: 100%; }
.preview { flex: 1; display: flex; align-items: center; justify-content: center; background: #020617; padding: 40px; }
canvas { max-width: 90%; max-height: 90%; border-radius: 12px; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5); background: white; object-fit: contain; }
#download-btn { margin-top: auto; padding: 18px; background: var(--accent); color: #0f172a; border: none; border-radius: 10px; font-weight: 800; cursor: pointer; transition: 0.3s; }
#download-btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(56, 189, 248, 0.3); }

/* Scrollbar fina para sidebar */
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: #0f172a; }
.sidebar::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }