/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:5px}

/* Container - ULTRA COMPACTO */
.container{max-width:600px;margin:0 auto;background:#fff;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,.25);overflow:hidden}

/* Header - ULTRA COMPACTO */
.header{background:linear-gradient(135deg,#dbeafe 0%,#93c5fd 100%);padding:8px;text-align:center}
.logo{max-width:160px;height:auto}

/* Progress - ULTRA COMPACTO */
.progress-container{background:#e0e7ff;height:4px}
.progress-bar{background:linear-gradient(90deg,#667eea 0%,#764ba2 100%);height:100%;width:5.5%;transition:width .3s}
.progress-text{padding:6px 12px;text-align:center;color:#6b7280;font-size:12px;font-weight:600;background:#fff;border-bottom:1px solid #e5e7eb}

/* Score Badge - COMPACTO */
.score-badge{position:fixed;top:10px;right:10px;background:linear-gradient(135deg,#10b981 0%,#059669 100%);color:#fff;padding:6px 14px;border-radius:50px;font-weight:700;font-size:13px;box-shadow:0 3px 10px rgba(16,185,129,.4);z-index:100}

/* Form Content - ULTRA COMPACTO */
.form-content{padding:12px 10px;min-height:200px}

/* Questions */
.question{display:none}
.question.active{display:block;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* Titles - ULTRA COMPACTO */
h2{color:#1e3a8a;font-size:16px;margin-bottom:6px;font-weight:600;line-height:1.2}
.subtitle{color:#6b7280;font-size:13px;margin-bottom:10px;line-height:1.3}

/* Options - ULTRA COMPACTO */
.options{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:6px;margin-bottom:8px}
.options-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:5px;margin-bottom:8px}
.option-card{border:2px solid #e5e7eb;border-radius:8px;padding:8px 6px;text-align:center;cursor:pointer;transition:all .15s;background:#fff;font-size:13px;line-height:1.2}
.option-card:hover{border-color:#667eea;transform:translateY(-1px);box-shadow:0 3px 10px rgba(102,126,234,.2)}
.option-card.selected{border-color:#667eea;background:linear-gradient(135deg,rgba(102,126,234,.15),rgba(118,75,162,.15))}

/* Input Fields - ULTRA COMPACTO */
.input-field{width:100%;padding:10px;border:2px solid #e5e7eb;border-radius:7px;font-size:13px;margin-bottom:3px;font-family:inherit;transition:border-color .3s}
.input-field:focus{outline:none;border-color:#667eea}
.input-field.error{border-color:#ef4444}
select.input-field{cursor:pointer}
textarea.input-field{resize:vertical;min-height:50px;line-height:1.3}

/* Error Messages */
.error-msg{display:block;color:#ef4444;font-size:11px;margin-bottom:8px;min-height:14px;line-height:1.2}

/* Comment Balloon - ULTRA COMPACTO */
.comment-balloon{background:linear-gradient(135deg,#8b5cf6 0%,#6d28d9 100%);color:#fff;padding:8px 14px;border-radius:8px;margin:6px 0;font-size:12px;line-height:1.3;opacity:0;max-height:0;overflow:hidden;transition:all .25s}
.comment-balloon.show{opacity:1;max-height:150px;margin:8px 0}
.comment-balloon::before{content:'💡';margin-right:6px;font-size:14px}

/* Navigation Buttons - ULTRA COMPACTO */
.nav-buttons{padding:8px;display:flex;gap:6px;background:#f9fafb;border-top:1px solid #e5e7eb}
.btn{flex:1;padding:9px 16px;border:none;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-primary{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);color:#fff}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(102,126,234,.4)}
.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}
.btn-secondary{background:#e5e7eb;color:#374151;font-size:12px}
.btn-secondary:hover{background:#d1d5db}

/* Responsive - Mobile */
@media(max-width:640px){
    body{padding:3px}
    .container{border-radius:10px}
    .header{padding:6px}
    .logo{max-width:140px}
    .form-content{padding:10px 8px}
    h2{font-size:15px;margin-bottom:5px}
    .subtitle{font-size:12px;margin-bottom:8px}
    .options{grid-template-columns:1fr;gap:5px}
    .options-grid{grid-template-columns:repeat(2,1fr);gap:4px}
    .option-card{padding:7px 5px;font-size:12px}
    .score-badge{top:8px;right:8px;padding:5px 12px;font-size:12px}
    .nav-buttons{padding:6px}
    .btn{padding:8px 14px;font-size:12px}
}

/* Landscape Mobile - ULTRA COMPACTO */
@media(max-height:500px){
    .form-content{padding:8px;min-height:150px}
    h2{font-size:14px;margin-bottom:4px}
    .subtitle{font-size:11px;margin-bottom:6px}
    .options,.options-grid{gap:4px}
    .option-card{padding:6px;font-size:11px}
    .input-field{padding:8px;font-size:12px;margin-bottom:6px}
    .comment-balloon{padding:6px 12px;font-size:11px}
}