:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color:#213547;background-color:#fff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%}*{box-sizing:border-box}body{margin:0;display:flex;place-items:start;min-width:320px;min-height:100vh}#app{max-width:600px;width:100%;margin:0 auto;padding:20px;text-align:center}#app:has(.documentation-container),body:has(.documentation-container) #app{max-width:none;text-align:left}.survey-container{background:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 10px #0000001a;text-align:left}.survey-container:has(.survey-info),.survey-container .survey-info{text-align:center}.progress{margin-bottom:24px}.progress-bar{background:#f0f0f0;border-radius:20px;height:8px;overflow:hidden;margin-bottom:8px}.progress-fill{background:linear-gradient(90deg,#674fa3,#543b8c);height:100%;border-radius:20px;transition:width .3s ease}.progress-text{font-size:14px;text-align:center;color:#666}h1{font-size:24px;margin:0 0 32px;text-align:center}h2{font-size:18px;margin:0 0 20px;font-weight:500}.question-container{margin-bottom:32px}.static-text{margin:0;padding:0}.static-text h2{color:#674fa3;margin:0 0 12px}.static-text p{color:#666;margin:0;line-height:1.6}input[type=text],input[type=email],input[type=number],input[type=date],textarea,select{width:100%;padding:12px;border:2px solid #e1e5e9;border-radius:8px;font-size:16px;font-family:inherit}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=date]:focus,textarea:focus,select:focus{outline:none;border-color:#674fa3}textarea{min-height:100px;resize:vertical}.radio-option,.checkbox-option{display:block;margin:12px 0;cursor:pointer;font-size:16px}.radio-option input,.checkbox-option input{margin-right:12px;width:auto}.buttons{display:flex;gap:12px;justify-content:space-between;margin-top:32px}.survey-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}.survey-header h1{margin:0;text-align:center;font-size:20px;flex-grow:1}.back-button,.back-button-placeholder,.header-placeholder{flex:0 0 40px;width:40px}.back-button{background:transparent;border:none;font-size:24px;cursor:pointer;color:#6c757d;padding:0;line-height:1;text-align:left}.back-button:hover{color:#333;background-color:transparent}button{border-radius:8px;border:none;padding:12px 24px;font-size:16px;font-weight:500;font-family:inherit;background-color:#674fa3;color:#fff;cursor:pointer;transition:background-color .25s}button:hover{background-color:#543b8c}select{appearance:none;background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");background-position:right 12px center;background-repeat:no-repeat;background-size:16px;cursor:pointer}.rating-container{display:flex;gap:4px;margin:8px 0}.star{font-size:32px;color:#ddd;cursor:pointer;transition:color .2s ease;-webkit-user-select:none;user-select:none}.star:hover,.star.selected{color:#ffc107}.grid-question{margin:16px 0;width:100%}.grid-table-container{border:1px solid #e1e5e9;border-radius:8px;overflow:hidden;background:#fff}.grid-table{width:100%;border-collapse:collapse;font-size:14px}.grid-header{background:#f8f9fa;padding:12px 8px;text-align:center;font-weight:600;color:#495057;border-bottom:1px solid #e1e5e9;white-space:nowrap;min-width:80px}.grid-statement-header{background:#f8f9fa;padding:12px 16px;text-align:left;font-weight:600;color:#495057;border-bottom:1px solid #e1e5e9;border-right:1px solid #e1e5e9}.grid-row{border-bottom:1px solid #e1e5e9}.grid-row:last-child{border-bottom:none}.grid-statement{padding:16px;font-weight:500;color:#213547;border-right:1px solid #e1e5e9;vertical-align:top;min-width:200px}.grid-cell{padding:8px;text-align:center;border-right:1px solid #e1e5e9;vertical-align:middle;min-width:80px}.grid-cell:last-child{border-right:none}.grid-radio-label{display:flex;align-items:center;justify-content:center;cursor:pointer;padding:8px;border-radius:4px;transition:background-color .2s ease;margin:0}.grid-radio-label:hover{background-color:#f8f9fa}.grid-radio-label input[type=radio]{margin:0 6px 0 0;width:auto;cursor:pointer}.grid-radio-text{font-size:13px;color:#495057}.grid-radio-label input[type=radio]:checked+.grid-radio-text{color:#674fa3;font-weight:500}.error-message{background:#fee;color:#c33;padding:8px 12px;border-radius:6px;border-left:4px solid #c33;font-size:14px;margin-top:8px}.required-indicator{color:#c33;font-weight:700;margin-left:4px}input.error,textarea.error,select.error{border-color:#c33}input.error:focus,textarea.error:focus,select.error:focus{border-color:#c33;box-shadow:0 0 0 2px #c333}.loading-container,.error-container{text-align:center;padding:40px 20px;background:linear-gradient(135deg,#f8fafc,#f1f5f9);border-radius:12px;border:1px solid #e2e8f0}.loading-container h2,.error-container h2{color:#334155;margin-bottom:16px;font-size:1.5rem;font-weight:500}.loading-container p,.error-container p{color:#666;margin-bottom:24px;line-height:1.6}.error-icon{font-size:3rem;margin-bottom:16px;opacity:.6;filter:grayscale(.3)}.error-actions{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}.loading-spinner{width:48px;height:48px;border:4px solid #f0f0f0;border-top:4px solid #674fa3;border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 24px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.retry-btn{background:#674fa3;color:#fff;border:none;padding:12px 24px;border-radius:8px;cursor:pointer;font-size:16px;font-weight:500;transition:all .3s ease;min-width:120px}.retry-btn:hover{background:#543b8c;transform:translateY(-1px)}.retry-btn.secondary{background:#f7f8fa;color:#555;border:1px solid #d1d5db}.retry-btn.secondary:hover{background:#e5e7eb;transform:translateY(-1px)}.survey-info{text-align:center!important;margin-bottom:24px;padding:0 8px}.survey-info h1{color:#674fa3;margin-bottom:16px;font-size:28px;font-weight:700;line-height:1.2;text-align:center!important}.survey-info p{font-size:16px;line-height:1.6;color:#6b7280;margin-bottom:0;max-width:500px;margin-left:auto;margin-right:auto;text-align:center!important}.intro-actions{margin-top:32px;text-align:center}.intro-actions .btn{padding:12px 32px;font-size:16px;font-weight:600;min-width:150px}.enhanced-success{background:linear-gradient(135deg,#e6fff2,#f8fafc);box-shadow:0 4px 24px #2ecc4012;animation:fadeInSuccess .7s cubic-bezier(.68,-.55,.27,1.55)}@keyframes fadeInSuccess{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.success-checkmark{font-size:6rem;color:#2ecc40;margin-bottom:24px;animation:pop-in .5s cubic-bezier(.68,-.55,.27,1.55);text-shadow:0 2px 12px rgba(46,204,64,.08)}@keyframes pop-in{0%{transform:scale(.5);opacity:0}80%{transform:scale(1.2);opacity:1}to{transform:scale(1)}}@media (min-width: 768px){#app{max-width:750px;padding:30px}.survey-container{padding:40px 48px}h1{font-size:28px;margin:0 0 32px}h2{font-size:20px;margin:0 0 20px}.question-container{margin-bottom:36px}input[type=text],input[type=email],input[type=number],input[type=date],textarea,select{padding:13px 14px;font-size:16px}.radio-option,.checkbox-option{margin:14px 0;font-size:16px;padding:6px;border-radius:6px;transition:background-color .2s ease}.radio-option:hover,.checkbox-option:hover{background-color:#f8f9fa}.radio-option input,.checkbox-option input{transform:scale(1.1);margin-right:14px}button{padding:13px 28px;font-size:16px}.grid-question{overflow-x:auto}.grid-table{font-size:15px}.grid-table-container{overflow-x:auto}.grid-header{padding:14px 10px;font-size:13px;min-width:90px}.grid-statement-header{padding:14px 20px;min-width:220px}.grid-row:hover{background-color:#fafbfc}.grid-statement{padding:18px 20px;font-size:15px;min-width:250px;max-width:450px}.grid-cell{padding:10px;min-width:90px}.grid-radio-label{padding:10px}.grid-radio-label input[type=radio]{transform:scale(1.15);margin:0 6px 0 0}.grid-radio-text{display:none}.survey-info h1{font-size:24px}.survey-info p{font-size:14px}.intro-actions .btn{padding:14px 28px;font-size:16px;width:100%;max-width:250px}}@media (min-width: 1024px){#app{max-width:850px}}@media (max-width: 767px){.grid-table{display:block}.grid-table thead{display:none}.grid-table tbody{display:block}.grid-row{display:block;margin-bottom:16px;border:1px solid #e1e5e9;border-radius:8px;padding:12px;background:#fff}.grid-statement{display:block;padding:0 0 12px;border-right:none;border-bottom:1px solid #e1e5e9;margin-bottom:12px;font-weight:500;color:#213547;min-width:auto}.grid-cell{display:inline-block;padding:4px;border-right:none;margin-right:8px}.grid-radio-label{padding:6px 12px;border:1px solid #e1e5e9;border-radius:6px;background:#fff;transition:all .2s ease}.grid-radio-label:hover{background-color:#f8f9fa;border-color:#674fa3}.grid-radio-label input[type=radio]:checked+.grid-radio-text{color:#674fa3;font-weight:600}.grid-radio-label:has(input[type=radio]:checked){background-color:#674fa3;border-color:#674fa3;color:#fff}.grid-radio-label:has(input[type=radio]:checked) .grid-radio-text{color:#fff}}@media (max-width: 600px){#app,.survey-container{padding:16px}.survey-header{padding:0 8px}.buttons{flex-direction:column}button{width:100%}.star{font-size:28px}}@media (max-width: 480px){.grid-statement{font-size:14px;line-height:1.4}.grid-radio-text{font-size:12px}.grid-radio-label{padding:8px 10px;font-size:12px}.loading-container,.error-container{padding:24px 16px}.loading-container h2,.error-container h2{font-size:1.3rem}.loading-spinner{width:40px;height:40px;margin-bottom:20px}.error-icon{font-size:2.5rem;margin-bottom:12px}.error-actions{flex-direction:column;gap:8px}.retry-btn{width:100%;max-width:200px}.enhanced-success{padding:16px 4px!important;min-height:60vh;border-radius:8px}.enhanced-success h1,.enhanced-success h2{font-size:1.1rem!important;margin-bottom:10px!important}.success-checkmark{font-size:3rem!important;margin-bottom:10px!important}.enhanced-success p{font-size:.98rem!important;margin-bottom:16px!important;line-height:1.5!important}.enhanced-success button{width:100%;max-width:220px;font-size:1rem;padding:14px 0}.enhanced-success canvas{width:100vw!important;height:40vh!important}}