*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333;line-height:1.6}.app{min-height:100vh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:20px}.app-header{text-align:center;margin-bottom:30px;padding:20px 0}.app-header h1{font-size:2.5rem;color:#2c3e50;margin-bottom:10px}.subtitle{color:#7f8c8d;font-size:1.1rem}.app-main{flex:1;display:flex;flex-direction:column;gap:25px}section{background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.input-section-container{display:flex;flex-direction:column;gap:20px}.input-group{display:flex;flex-direction:column;gap:8px}.input-group label{font-weight:600;color:#2c3e50;font-size:.95rem}.description-textarea{width:100%;padding:12px;border:2px solid #ddd;border-radius:4px;font-family:inherit;font-size:1rem;resize:vertical;transition:border-color .3s}.description-textarea:focus{outline:none;border-color:#3498db}.file-input{padding:8px;border:2px dashed #ddd;border-radius:4px;cursor:pointer;transition:border-color .3s}.file-input:hover{border-color:#3498db}.input-help-text{display:block;margin-top:4px;font-size:.85rem;color:#7f8c8d;font-style:italic}.image-preview{margin-top:10px;position:relative}.preview-image{max-width:100%;max-height:300px;border-radius:4px;box-shadow:0 2px 8px #0000001a;display:block}.clear-image-button{margin-top:8px;padding:6px 12px;background-color:#e74c3c;color:#fff;border:none;border-radius:4px;font-size:.9rem;cursor:pointer;transition:background-color .3s}.clear-image-button:hover{background-color:#c0392b}.image-error{margin-top:8px;padding:8px 12px;background-color:#fee;color:#c33;border:1px solid #fcc;border-radius:4px;font-size:.9rem}.persona-selector-container{width:100%}.persona-fieldset{border:2px solid #e0e0e0;border-radius:6px;padding:16px;margin:0}.persona-legend{font-weight:600;color:#2c3e50;font-size:1rem;padding:0 8px}.persona-radio-group{display:flex;flex-direction:column;gap:12px;margin-top:8px}.persona-radio-option{display:flex;align-items:flex-start;gap:12px}.persona-radio-input{margin-top:4px;width:20px;height:20px;cursor:pointer;accent-color:#3498db;flex-shrink:0}.persona-radio-label{display:flex;flex-direction:column;gap:4px;cursor:pointer;flex:1;-webkit-user-select:none;user-select:none}.persona-name{font-weight:600;color:#2c3e50;font-size:1rem}.persona-description{font-size:.9rem;color:#7f8c8d;font-style:italic}.persona-radio-input:focus{outline:2px solid #3498db;outline-offset:2px}.persona-radio-option:hover .persona-radio-label{color:#3498db}@media (min-width: 768px){.persona-radio-group{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}}.generate-section{text-align:center}.generate-button{background-color:#3498db;color:#fff;border:none;padding:14px 32px;font-size:1.1rem;font-weight:600;border-radius:6px;cursor:pointer;transition:background-color .3s,transform .1s}.generate-button:hover{background-color:#2980b9;transform:translateY(-2px)}.generate-button:active{transform:translateY(0)}.generate-button:disabled{background-color:#95a5a6;cursor:not-allowed;transform:none}.generate-button:disabled:hover{background-color:#95a5a6;transform:none}.generate-buttons-container{display:flex;flex-direction:column;align-items:center;gap:15px}.regenerate-button{background-color:#9b59b6}.regenerate-button:hover{background-color:#8e44ad}.export-buttons{display:flex;gap:10px}.export-button{background-color:#34495e;color:#fff;border:none;padding:10px 20px;font-size:.95rem;font-weight:600;border-radius:6px;cursor:pointer;transition:background-color .3s,transform .1s}.export-button:hover{background-color:#2c3e50;transform:translateY(-2px)}.export-button:active{transform:translateY(0)}.copy-button{background-color:#16a085}.copy-button:hover{background-color:#138d75}.download-button{background-color:#e67e22}.download-button:hover{background-color:#d35400}.loading-indicator{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;padding:12px;color:#7f8c8d;font-size:.95rem}.loading-spinner{width:20px;height:20px;border:3px solid #ecf0f1;border-top-color:#3498db;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.feedback-section{min-height:200px}.feedback-grid-empty{text-align:center;padding:60px 20px;color:#95a5a6}.empty-state-icon{font-size:3rem;margin-bottom:16px;opacity:.6}.empty-state-message{font-size:1.1rem;font-weight:600;color:#7f8c8d;margin-bottom:8px}.empty-state-hint{font-size:.95rem;color:#95a5a6;font-style:italic;margin:0}.feedback-grid{display:grid;grid-template-columns:1fr;gap:20px;width:100%}.feedback-grid>*{min-width:0}.feedback-card{border:2px solid #e0e0e0;border-radius:6px;overflow:hidden;transition:box-shadow .3s;background:#fff}.feedback-card:hover{box-shadow:0 4px 8px #00000026}.feedback-card.strength{border-left:4px solid #27ae60}.feedback-card.issue{border-left:4px solid #e74c3c}.feedback-card-header{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;background-color:#f8f9fa;-webkit-user-select:none;user-select:none;transition:background-color .2s}.feedback-card-header:hover{background-color:#e9ecef}.feedback-card-header:focus{outline:2px solid #3498db;outline-offset:-2px}.feedback-badge{color:#fff;padding:4px 10px;border-radius:12px;font-size:.85rem;font-weight:600;white-space:nowrap}.badge-usability{background-color:#3498db}.badge-hierarchy{background-color:#9b59b6}.badge-accessibility{background-color:#e67e22}.badge-navigation{background-color:#1abc9c}.badge-form{background-color:#f39c12}.badge-mobile{background-color:#e74c3c}.badge-default{background-color:#95a5a6}.feedback-type{flex:1;font-weight:600;color:#2c3e50;text-transform:capitalize}.expand-icon{font-size:1.5rem;color:#7f8c8d;font-weight:700}.feedback-card-body{padding:16px;border-top:1px solid #e0e0e0;background:#fff;animation:slideDown .2s ease-out}@keyframes slideDown{0%{opacity:0;max-height:0}to{opacity:1;max-height:1000px}}.feedback-text{margin-bottom:12px;color:#34495e;line-height:1.7}.feedback-content{margin-bottom:16px}.feedback-suggestion{margin-top:12px;padding:12px;background-color:#ecf0f1;border-left:3px solid #3498db;border-radius:4px;color:#2c3e50;line-height:1.6}.feedback-suggestion strong{display:block;color:#2c3e50;margin-bottom:6px}.feedback-suggestion p{margin:0;color:#34495e}.feedback-notes{margin-top:16px;padding-top:16px;border-top:1px solid #e0e0e0}.notes-label{display:block;font-weight:600;color:#2c3e50;font-size:.9rem;margin-bottom:6px}.notes-textarea{width:100%;padding:10px;border:2px solid #ddd;border-radius:4px;font-family:inherit;font-size:.9rem;resize:vertical;transition:border-color .3s;line-height:1.5}.notes-textarea:focus{outline:none;border-color:#3498db}@media (min-width: 768px){.app{padding:30px}.app-header h1{font-size:3rem}.feedback-grid{grid-template-columns:repeat(2,1fr);gap:24px}}@media (min-width: 1024px){.feedback-grid{grid-template-columns:repeat(3,1fr);gap:24px}}@media (min-width: 1440px){.feedback-grid{grid-template-columns:repeat(4,1fr);gap:28px}.input-section-container{flex-direction:row}.input-group{flex:1}}