* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, sans-serif; color: #fff; min-height: 100vh; background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 100%); }

.nav { display: flex; justify-content: space-between; align-items: center; padding: 20px 32px; }
.logo { color: white; text-decoration: none; font-weight: 700; font-size: 1.2rem; }
#navStatus { color: #94a3b8; font-size: 0.85rem; }

.hero { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 70px); padding: 20px; }

.wizard { width: 100%; max-width: 560px; }
.step { display: none; }
.step.active { display: block; }
.step h1 { font-size: 2rem; margin-bottom: 8px; }
.step h2 { font-size: 1.5rem; margin-bottom: 8px; }
.step-sub { color: #94a3b8; margin-bottom: 24px; }

textarea { width: 100%; padding: 14px; border-radius: 8px; border: 1px solid #334155; background: #1e293b; color: white; font-size: 1rem; resize: vertical; margin-bottom: 16px; }
textarea::placeholder { color: #64748b; }

.mic-btn { width: 80px; height: 80px; border-radius: 50%; border: 2px solid #3b82f6; background: transparent; color: #3b82f6; cursor: pointer; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; transition: all 0.2s; }
.mic-btn:hover { background: rgba(59,130,246,0.1); }
.mic-btn.recording { background: #3b82f6; color: white; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(59,130,246,0.4); } 50% { box-shadow: 0 0 0 16px rgba(59,130,246,0); } }

.btn-next, .btn-generate { width: 100%; padding: 14px; background: #3b82f6; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; margin-top: 8px; }
.btn-next:hover, .btn-generate:hover { background: #2563eb; }
.btn-generate { background: #10b981; }
.btn-generate:hover { background: #059669; }
.btn-back { padding: 14px 24px; background: transparent; border: 1px solid #334155; color: #94a3b8; border-radius: 8px; cursor: pointer; }
.step-nav { display: flex; gap: 12px; margin-top: 24px; }
.step-nav .btn-next, .step-nav .btn-generate { flex: 1; }

.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option-card { padding: 16px; border: 2px solid #334155; border-radius: 10px; background: transparent; color: white; cursor: pointer; text-align: left; transition: border-color 0.2s; }
.option-card:hover { border-color: #64748b; }
.option-card.selected { border-color: #3b82f6; background: rgba(59,130,246,0.1); }
.option-card strong { display: block; margin-bottom: 4px; }
.option-card span { font-size: 0.8rem; color: #94a3b8; }

.color-pickers { display: flex; gap: 24px; justify-content: center; margin-bottom: 20px; }
.color-pick { text-align: center; }
.color-pick label { display: block; margin-bottom: 8px; color: #94a3b8; font-size: 0.85rem; }
.color-pick input[type="color"] { width: 60px; height: 60px; border: none; border-radius: 8px; cursor: pointer; background: none; }
.color-presets { display: flex; gap: 10px; justify-content: center; }
.preset { width: 40px; height: 40px; border-radius: 50%; border: 2px solid #334155; cursor: pointer; transition: transform 0.2s; }
.preset:hover { transform: scale(1.2); }

.sections-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.section-check { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid #334155; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
.section-check input { accent-color: #3b82f6; width: 16px; height: 16px; }
.section-check:has(input:checked) { border-color: #3b82f6; background: rgba(59,130,246,0.05); }

.price-input { display: flex; align-items: center; justify-content: center; gap: 4px; margin-bottom: 16px; }
.currency { font-size: 2rem; font-weight: 700; }
.price-input input { width: 120px; font-size: 2rem; font-weight: 700; background: transparent; border: none; border-bottom: 2px solid #3b82f6; color: white; text-align: center; outline: none; }
.price-suggestions { display: flex; gap: 8px; justify-content: center; }
.price-btn { padding: 8px 16px; border: 1px solid #334155; background: transparent; color: #94a3b8; border-radius: 6px; cursor: pointer; }
.price-btn:hover { border-color: #3b82f6; color: white; }

.spinner { width: 48px; height: 48px; border: 4px solid #334155; border-top-color: #3b82f6; border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto 24px; }
@keyframes spin { to { transform: rotate(360deg); } }

.result-link { display: block; font-size: 1.1rem; color: #3b82f6; margin: 16px 0; word-break: break-all; }
.result-qr { width: 120px; height: 120px; margin: 16px auto; display: block; border-radius: 8px; }
.result-price { color: #10b981; font-weight: 700; font-size: 1.2rem; margin-bottom: 24px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal-content { background: #1e293b; padding: 32px; border-radius: 12px; width: 90%; max-width: 360px; }
.modal-content h3 { margin-bottom: 16px; }
.modal-content input { width: 100%; padding: 12px; border: 1px solid #334155; background: #0f172a; color: white; border-radius: 6px; margin-bottom: 12px; font-size: 1rem; }
.modal-content .btn-next { margin-top: 4px; }
.auth-toggle { margin-top: 12px; text-align: center; font-size: 0.85rem; }
.auth-toggle a { color: #3b82f6; }
.error { color: #f87171; font-size: 0.85rem; margin-top: 8px; }

@media (max-width: 600px) {
  .option-grid { grid-template-columns: 1fr; }
  .sections-grid { grid-template-columns: 1fr; }
  .step h1 { font-size: 1.5rem; }
}