*{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:#1a1a1a;line-height:1.6;font-size:15px}.app{min-height:100vh;display:flex;flex-direction:column;max-width:1200px;margin:0 auto;padding:12px;width:100%}.app-header{display:flex;flex-direction:column;flex-wrap:wrap;justify-content:space-between;align-items:stretch;gap:16px;margin-bottom:16px;padding:12px 0}.app-header-text{flex:1;min-width:0;width:100%}.app-header-title-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:6px}.app-header-title-row h1{margin-bottom:0}.app-header h1{font-size:1.75rem;color:#1a1a1a;margin-bottom:6px;font-weight:700;line-height:1.2}.subtitle{color:#4a5568;font-size:1rem;margin-bottom:0;padding-top:17px;line-height:1.5;max-width:100%}.subtitle-second{padding-top:10px;margin-top:6px}.app-header .clear-session-button{margin-top:17px;flex-shrink:0;align-self:flex-end}.app-header-title-row .clear-session-button-mobile{margin-top:0}.clear-session-button-mobile{margin-top:0;padding:10px;display:inline-flex;align-items:center;justify-content:center;transform:translateY(-.35em)}.clear-session-button-mobile .clear-session-icon{display:inline-flex;align-items:center;justify-content:center}.clear-session-button-desktop{display:none}.clear-session-button{margin-top:12px;padding:8px 16px;background-color:#e74c3c;color:#fff;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 4px #e74c3c33}.clear-session-button:hover{background-color:#c0392b;box-shadow:0 4px 8px #e74c3c4d;transform:translateY(-1px)}.clear-session-button:active{transform:translateY(0);box-shadow:0 1px 2px #e74c3c33}.clear-session-button:focus-visible{outline:3px solid #e74c3c;outline-offset:2px}.clear-session-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#0006;display:flex;align-items:center;justify-content:center;z-index:1000;padding:16px}.clear-session-dialog{background:#fff;border-radius:12px;padding:24px;max-width:360px;width:100%;box-shadow:0 8px 32px #0003}.clear-session-dialog-title{font-size:1.25rem;font-weight:700;color:#1a1a1a;margin:0 0 12px}.clear-session-dialog-desc{font-size:1rem;color:#4a5568;line-height:1.5;margin:0 0 20px}.clear-session-dialog-actions{display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap}.clear-session-dialog-cancel{padding:8px 16px;font-size:.95rem;font-weight:600;border:2px solid #ddd;background:#fff;color:#1a1a1a;border-radius:6px;cursor:pointer;transition:all .2s ease}.clear-session-dialog-cancel:hover{border-color:#999;background:#f5f5f5}.clear-session-dialog-confirm{padding:8px 16px;font-size:.95rem;font-weight:600;border:none;background-color:#e74c3c;color:#fff;border-radius:6px;cursor:pointer;box-shadow:0 2px 4px #e74c3c33;transition:all .2s ease}.clear-session-dialog-confirm:hover{background-color:#c0392b;box-shadow:0 4px 8px #e74c3c4d}.app-main{flex:1;display:flex;flex-direction:column;gap:16px}section{background:#fff;padding:14px;border-radius:12px;box-shadow:0 2px 8px #00000014,0 1px 2px #0000000a;transition:box-shadow .3s ease,transform .2s ease}section:hover{box-shadow:0 4px 12px #0000001f,0 2px 4px #0000000f}.input-section{display:flex;flex-direction:column;gap:14px}.input-section .persona-selector-container{margin-top:11px;margin-bottom:6px}.input-section .generate-cta-in-input{margin-top:12px}.input-section-container{display:flex;flex-direction:column;gap:14px}.input-group{display:flex;flex-direction:column;gap:6px}.input-group label{font-weight:600;color:#1a1a1a;font-size:.95rem;line-height:1.5}.description-textarea{width:100%;padding:10px;border:2px solid #ddd;border-radius:8px;font-family:inherit;font-size:1rem;resize:vertical;transition:all .2s ease;line-height:1.6;color:#1a1a1a}.description-textarea:focus{outline:none;border-color:#3b82d6;box-shadow:0 0 0 3px #3498db1a}.description-textarea:focus-visible{outline:2px solid #3b82d6;outline-offset:2px}.file-input{padding:8px;border:2px dashed #ddd;border-radius:8px;cursor:pointer;transition:all .2s ease}.file-input:hover{border-color:#3b82d6;background-color:#f8f9fa}.file-input:focus-visible{outline:2px solid #3b82d6;outline-offset:2px;border-color:#3b82d6}.input-help-text{display:block;margin-top:4px;font-size:.85rem;color:#4a5568;font-style:italic;line-height:1.5}.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:6px;font-size:.9rem;cursor:pointer;transition:all .2s ease;font-weight:600}.clear-image-button:hover{background-color:#c0392b;transform:translateY(-1px);box-shadow:0 2px 4px #e74c3c4d}.clear-image-button:focus-visible{outline:2px solid #e74c3c;outline-offset:2px}.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:12px;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:10px}.persona-radio-input{margin-top:4px;width:20px;height:20px;cursor:pointer;accent-color:#3b82d6;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:#4a5568;font-style:italic;line-height:1.5}.persona-radio-input:focus,.persona-radio-input:focus-visible{outline:3px solid #3b82d6;outline-offset:3px}.persona-radio-label:focus-within{color:#3b82d6}.persona-radio-option:hover .persona-radio-label{color:#3b82d6}@media (min-width: 768px){.persona-radio-group{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}}:root{--btn-primary: #3b82d6;--btn-primary-hover: #3182ce;--btn-copy: #ffc320;--btn-copy-hover: #f4ba1b;--btn-download: #f08025;--btn-download-hover: #dd6b20;--btn-pdf: #bf4204;--btn-pdf-hover: #9c3c21;--btn-disabled-bg: #cbd5e0;--btn-disabled-text: #4a5568}.generate-section{text-align:center}.generate-button{background-color:var(--btn-primary);color:#fff;border:none;padding:10px 24px;font-size:1rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 6px #3b82f64d;width:100%;max-width:300px}.generate-button:hover{background-color:var(--btn-primary-hover);transform:translateY(-2px);box-shadow:0 4px 12px #3b82f666}.generate-button:active{transform:translateY(0);box-shadow:0 1px 3px #3b82f64d}.generate-button:focus-visible{outline:3px solid var(--btn-primary);outline-offset:3px}.generate-button:disabled{background-color:var(--btn-disabled-bg);color:var(--btn-disabled-text);cursor:not-allowed;transform:none;box-shadow:none;opacity:.9}.generate-button:disabled:hover{background-color:var(--btn-disabled-bg);transform:none;box-shadow:none}.generate-buttons-container{display:flex;flex-direction:column;align-items:center;gap:15px}.secondary-actions-section{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:21px}.generate-buttons-container>.generate-button.regenerate-button{width:100%;max-width:300px;margin-bottom:5px}.regenerate-button{background-color:var(--btn-pdf)}.regenerate-button:hover{background-color:var(--btn-pdf-hover)}.export-buttons{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:18px;width:100%;align-items:center}.export-button{display:inline-flex;background-color:transparent;border:2px solid;padding:10px 12px;font-size:.9rem;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;min-width:0;flex:1 1 0;max-width:120px;flex-direction:column;align-items:center;justify-content:center}.export-button-text{display:none}.export-button-icon{display:inline-flex;align-items:center;justify-content:center}.export-button-icon svg{width:26px;height:26px}.export-button-label{display:block;font-size:.65rem;font-weight:600;margin-top:4px;line-height:1.2}.export-button:hover{transform:translateY(-2px)}.export-button:active{transform:translateY(0)}.export-button:focus-visible{outline:3px solid currentColor;outline-offset:2px}.copy-button,.download-button,.pdf-button{border-color:var(--btn-primary);color:var(--btn-primary)}.copy-button:hover,.download-button:hover,.pdf-button:hover{background-color:#3b82f61f}.export-button:disabled{background-color:transparent;border-color:var(--btn-disabled-bg);color:var(--btn-disabled-text);opacity:.9;cursor:not-allowed;transform:none}.export-button:disabled:hover{background-color:transparent;transform:none}.loading-indicator{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;padding:12px;color:#4a5568;font-size:.95rem;line-height:1.5}.loading-spinner{width:20px;height:20px;border:3px solid #ecf0f1;border-top-color:#3b82d6;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.feedback-section{min-height:80px;display:flex;flex-direction:column;gap:16px}.next-test-steps{margin-top:24px;border:1px solid #e0e0e0;border-radius:8px;background-color:#f8f9fa;overflow:hidden;max-height:150px;transition:max-height .25s ease-out}.next-test-steps:has(.next-test-steps-content--expanded){max-height:400px}.next-test-steps-header{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;font-size:.95rem;font-weight:600;color:#2c3e50;background-color:#ecf0f1;border:none;cursor:pointer;text-align:left;transition:background-color .2s}.next-test-steps-header:hover{background-color:#dfe6e9}.next-test-steps-header:focus-visible{outline:2px solid #3b82d6;outline-offset:-2px}.next-test-steps-title{flex:1}.next-test-steps-chevron{flex-shrink:0;font-size:.8rem;color:#4a5568}.next-test-steps-content{padding:0 14px 12px}.next-test-steps-content[hidden]{display:none}.next-test-steps-list{margin:8px 0 0;padding-left:20px;font-size:.9rem;line-height:1.5;color:#4a5568}.next-test-steps-list li{margin-bottom:6px}.next-test-steps-list li:last-child{margin-bottom:0}.feedback-grid-empty{text-align:center;padding:12px 16px;color:#95a5a6}.empty-state-icon{font-size:3rem;margin-bottom:16px;opacity:.6}.empty-state-message{font-size:1rem;font-weight:600;color:#4a5568;margin-bottom:4px;line-height:1.5}.empty-state-hint{font-size:.9rem;color:#4a5568;font-style:italic;margin:0;line-height:1.5}.persona-filter-info{margin-bottom:16px;padding:12px 16px;background-color:#e8f4f8;border-left:4px solid #3b82d6;border-radius:4px;font-size:.9rem;color:#2c3e50}.filter-info-text{display:block}.filter-info-text strong{color:#2980b9;font-weight:600}.feedback-two-column-layout{display:grid;grid-template-columns:1fr;gap:24px;width:100%}.feedback-column{display:flex;flex-direction:column;gap:16px;min-width:0}.feedback-column-header{font-size:1.1rem;font-weight:700;color:#1a1a1a;margin:0 0 4px;padding-bottom:8px;border-bottom:2px solid #e0e0e0;line-height:1.3}.issues-column .feedback-column-header{border-bottom-color:#e74c3c;color:#c0392b}.strengths-column .feedback-column-header{border-bottom-color:#27ae60;color:#1e8449}.feedback-column-empty{margin:0;padding:20px 16px;font-size:.95rem;color:#4a5568;font-style:italic;background-color:#f8f9fa;border-radius:8px;border:1px dashed #ddd;text-align:center}.feedback-column-cards{display:flex;flex-direction:column;gap:16px}.feedback-column-cards>*{min-width:0}.feedback-category-group{display:flex;flex-direction:column;gap:12px}.feedback-category-group+.feedback-category-group{margin-top:8px}.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:12px;overflow:hidden;transition:all .3s ease;background:#fff;box-shadow:0 2px 8px #00000014,0 1px 2px #0000000a;animation:fadeIn .4s ease-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.feedback-card:hover{box-shadow:0 8px 16px #0000001f,0 4px 8px #00000014;transform:translateY(-2px)}.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,.feedback-card-header:focus-visible{outline:3px solid #3b82d6;outline-offset:-3px;background-color:#e3f2fd}.feedback-badge{color:#fff;padding:4px 10px;border-radius:12px;font-size:.85rem;font-weight:600;white-space:nowrap}.badge-usability{background-color:#3b82d6}.badge-hierarchy{background-color:#9b59b6}.badge-accessibility{background-color:#e67e22}.badge-navigation{background-color:#1abc9c}.badge-form{background-color:#f39c12}.badge-mobile{background-color:#d53f8c}.badge-default{background-color:#95a5a6}.feedback-type{flex:1;font-weight:600;color:#1a1a1a;text-transform:capitalize;line-height:1.5}.expand-icon{font-size:1.5rem;color:#4a5568;font-weight:700;transition:transform .2s ease}.feedback-card-header[aria-expanded=true] .expand-icon{transform:rotate(180deg)}.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:#1a1a1a;line-height:1.7}.feedback-content{margin-bottom:16px}.feedback-suggestion{margin-top:12px;padding:12px;background-color:#ecf0f1;border-left:3px solid #3b82d6;border-radius:8px;color:#1a1a1a;line-height:1.6;transition:background-color .2s ease}.feedback-suggestion strong{display:block;color:#1a1a1a;margin-bottom:6px}.feedback-suggestion p{margin:0;color:#1a1a1a}.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:#3b82d6;box-shadow:0 0 0 3px #3498db1a}.notes-textarea:focus-visible{outline:2px solid #3b82d6;outline-offset:2px}@media (min-width: 768px){.app{padding:18px}.app-header{position:relative;flex-direction:column;align-items:stretch}.app-header-text{width:100%}.app-header .clear-session-button-desktop{position:absolute;top:12px;right:0}.app-header-title-row{padding-right:160px}.clear-session-button-mobile{display:none}.clear-session-button-desktop{display:inline-flex}.app-header h1{font-size:2rem}.subtitle{font-size:1.1rem}.subtitle-second{padding-top:0;margin-top:0}section{padding:18px}.generate-button{width:auto;font-size:1rem}.export-buttons{flex-direction:row;flex-wrap:wrap;justify-content:center;width:auto}.export-button{flex:none;max-width:none;flex-direction:row;padding:10px 20px;font-size:.95rem;min-width:120px}.export-button-text{display:inline}.export-button-icon,.export-button-label{display:none}.feedback-two-column-layout{grid-template-columns:1fr 1fr;gap:28px}.feedback-grid{grid-template-columns:repeat(2,1fr);gap:24px}.input-section-container{gap:16px}}@media (min-width: 1024px){.app{padding:30px}.app-header h1{font-size:3rem}section{padding:28px}.generate-buttons-container{flex-direction:column;justify-content:center;align-items:center;gap:15px}.generate-buttons-container>.generate-button.regenerate-button{max-width:350px}.export-buttons{flex-direction:row;flex-wrap:nowrap;width:auto}.feedback-two-column-layout{grid-template-columns:1fr 1fr;gap:32px}.feedback-grid{grid-template-columns:repeat(3,1fr);gap:24px}.input-section-container{flex-direction:row;gap:18px}.input-section-container .input-group:first-child{flex:1.5;min-width:0}.input-section-container .input-group:last-child{flex:1}}@media (min-width: 1440px){.app{padding:40px}.feedback-two-column-layout{grid-template-columns:1fr 1fr;gap:36px}.feedback-grid{grid-template-columns:repeat(4,1fr);gap:28px}section{padding:24px}}.skip-link{position:absolute;top:-40px;left:0;background:#2c3e50;color:#fff;padding:8px;text-decoration:none;z-index:100}.skip-link:focus{top:0}@media (prefers-contrast: high){.feedback-card{border-width:3px}.generate-button,.export-button{border:2px solid currentColor}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.feedback-card,.loading-spinner{animation:none}}