* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; }
html, body { height: 100%; }
body { background: #f0f2f5; color: #1a1a1a; }

.app { min-height: 100vh; display: flex; flex-direction: column; }

.header { background: #4F46E5; color: #fff; padding: 2rem 1rem; text-align: center; }
.logo { font-size: 2rem; font-weight: 800; letter-spacing: -0.5px; }
.tagline { margin-top: 0.3rem; opacity: 0.9; font-size: 0.95rem; }

.main { flex: 1; padding: 1.2rem 1rem 2rem; max-width: 520px; margin: 0 auto; width: 100%; }

.type-selector { margin-bottom: 1.2rem; }
.type-tabs { display: grid; grid-template-columns: repeat(4,1fr); gap: 0.5rem; }
.type-btn { background: #fff; border: 2px solid #e5e7eb; border-radius: 1rem; padding: 0.6rem 0.2rem; font-size: 0.8rem; font-weight: 600; color: #4b5563; cursor: pointer; transition: all .15s; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.type-btn svg { width: 20px; height: 20px; fill: currentColor; }
.type-btn.active { border-color: #4F46E5; color: #4F46E5; background: #eef2ff; }
.type-btn:active { transform: scale(0.97); }

.form { background: #fff; border-radius: 1rem; padding: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 1rem; }
.form-section { display: none; }
.form-section.active { display: block; }
.form label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.35rem; color: #374151; margin-top: 0.7rem; }
.form label:first-of-type { margin-top: 0; }
.form input, .form select, .form textarea { width: 100%; padding: 0.7rem 0.8rem; border: 2px solid #e5e7eb; border-radius: 0.7rem; font-size: 1rem; background: #fff; transition: border .15s; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: #4F46E5; }
.form textarea { resize: vertical; }

.design-options { background: #fff; border-radius: 1rem; padding: 1rem; margin-bottom: 1rem; }
.option-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.option-row:last-child { margin-bottom: 0; }
.option-row label { font-size: 0.85rem; font-weight: 600; color: #374151; }

/* Color Picker Custom */
.color-picker-wrap { position: relative; width: 44px; height: 44px; }
.color-preview { width: 44px; height: 44px; border-radius: 8px; border: 2px solid #e5e7eb; cursor: pointer; pointer-events: none; }
.color-picker-wrap input[type="color"] {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; border: none; padding: 0; margin: 0;
}

/* Size Buttons */
.size-buttons { display: flex; gap: 0.5rem; }
.size-btn { padding: 0.5rem 1.2rem; font-weight: 700; font-size: 0.85rem; border: 2px solid #e5e7eb; border-radius: 0.6rem; background: #fff; color: #6b7280; cursor: pointer; transition: all .15s; }
.size-btn.active { border-color: #4F46E5; color: #4F46E5; background: #eef2ff; }
.size-btn:active { transform: scale(0.95); }

.btn-generate { width: 100%; padding: 1rem; font-size: 1.1rem; font-weight: 700; color: #fff; background: #4F46E5; border: none; border-radius: 1rem; cursor: pointer; transition: background .15s, transform .1s; }
.btn-generate:active { background: #4338ca; transform: scale(0.98); }

.result { margin-top: 1.2rem; background: #fff; border-radius: 1rem; padding: 1.2rem; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
#qr-display { margin-bottom: 1rem; }
#qr-display img { max-width: 100%; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.result-actions { display: flex; justify-content: center; }
.btn-download { padding: 0.8rem 2rem; font-size: 1rem; font-weight: 700; border: none; border-radius: 0.8rem; background: #4F46E5; color: #fff; cursor: pointer; }
.btn-download:active { background: #4338ca; transform: scale(0.97); }

.footer { text-align: center; padding: 1.2rem; border-top: 1px solid #e5e7eb; }
.footer-text { font-size: 0.85rem; color: #9ca3af; }

@media (min-width: 640px) {
  .main { padding: 2rem; }
  .type-btn { font-size: 0.9rem; padding: 0.8rem; }
}