.welcome-page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background:linear-gradient(135deg,#667eea,#764ba2);padding:0}.welcome-container{background:#fff;border-radius:16px;padding:48px;max-width:600px;width:100%;box-shadow:0 10px 40px #0003;margin:0 20px 20px}.welcome-title{font-size:2.5rem;font-weight:700;color:#764ba2;text-align:center;margin-bottom:24px}.welcome-content{text-align:center}.welcome-description{font-size:1.1rem;color:#666;line-height:1.6;margin-bottom:32px}.welcome-description a{color:#764ba2;text-decoration:none;font-weight:600;transition:color .2s}.welcome-description a:hover{color:#667eea;text-decoration:underline}.welcome-instructions{background:#f8f9fa;border-radius:8px;padding:20px;margin-bottom:32px;border-left:4px solid #764ba2}.welcome-instructions-text{font-size:1rem;color:#555;line-height:1.6;margin:0}.welcome-instructions-text strong{color:#764ba2;font-weight:600}.welcome-actions{display:flex;flex-direction:column;gap:16px}.welcome-btn{padding:14px 28px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.welcome-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 12px #764ba24d}.welcome-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #764ba266}.welcome-btn.secondary{background:#6c757d;color:#fff}.welcome-btn.secondary:hover{background:#5a6268;transform:translateY(-2px)}.divider{display:flex;align-items:center;text-align:center;margin:8px 0}.divider:before,.divider:after{content:"";flex:1;border-bottom:1px solid #dee2e6}.divider span{padding:0 16px;color:#999;font-size:.9rem}.code-form{display:flex;flex-direction:column;gap:12px}.code-form-header{display:flex;flex-direction:column;gap:4px;margin-bottom:4px}.code-form-label{font-size:1rem;font-weight:600;color:#333;text-align:center}.code-form-hint{font-size:.85rem;color:#666;text-align:center;font-style:italic}.code-input{padding:12px 16px;border:2px solid #dee2e6;border-radius:8px;font-size:1.1rem;text-align:center;transition:border-color .2s}.code-input:focus{outline:none;border-color:#764ba2;box-shadow:0 0 0 3px #764ba21a}.code-error{color:#dc3545;font-size:.9rem;margin-top:8px;text-align:center}.invalid-code-banner{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:16px 20px;box-shadow:0 4px 12px #00000026;width:100%;border-radius:0 0 12px 12px;margin-bottom:20px}.invalid-code-content{max-width:1800px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.invalid-code-text{display:flex;align-items:center;gap:16px;flex:1;min-width:200px}.invalid-code-icon{font-size:1.5rem;flex-shrink:0}.invalid-code-title{font-size:1.1rem;font-weight:700;margin-bottom:4px}.invalid-code-message{font-size:.9rem;opacity:.95;line-height:1.4}.invalid-code-message strong{font-family:monospace;font-size:1rem;letter-spacing:2px;background:#fff3;padding:2px 8px;border-radius:4px}.invalid-code-actions{display:flex;gap:12px;flex-shrink:0}.invalid-code-btn{padding:10px 20px;border:none;border-radius:6px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.invalid-code-btn.primary{background:#fff;color:#d97706}.invalid-code-btn.primary:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 2px 8px #0003}@media (max-width: 768px){.welcome-container{padding:32px 24px}.welcome-title{font-size:2rem}.welcome-description{font-size:1rem}.welcome-instructions{padding:16px}.welcome-instructions-text{font-size:.95rem}}.question-page{max-width:1800px;margin:0 auto;padding:20px 40px 20px 20px;position:relative}.share-icon{font-size:1.2rem}.read-only-banner{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:12px 20px;box-shadow:0 4px 12px #00000026;margin-bottom:20px;border-radius:0 0 12px 12px}.read-only-banner-content{max-width:1800px;margin:0 auto;display:flex;align-items:center;gap:12px;font-size:.95rem}.read-only-icon{font-size:1.2rem}.edit-code-banner{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,#10b981,#059669);color:#fff;padding:12px 20px;box-shadow:0 4px 12px #00000026;margin-bottom:20px;border-radius:0 0 12px 12px}.edit-code-banner-content{max-width:1800px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.edit-code-banner-text{display:flex;align-items:center;gap:12px;font-size:.95rem;flex:1}.edit-code-icon{font-size:1.2rem}.edit-code-display{font-family:monospace;font-size:1.1rem;letter-spacing:2px;background:#fff3;padding:4px 10px;border-radius:6px;font-weight:700}.edit-code-copy-btn{padding:8px 16px;background:#fff;color:#10b981;border:none;border-radius:6px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.edit-code-copy-btn:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 2px 8px #0003}.rating-button:disabled,.experience-button:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.custom-scrollbar{position:fixed;top:0;right:0;width:20px;height:100vh;z-index:1000;display:flex;justify-content:center;align-items:flex-start;padding:10px 0;pointer-events:none}.scrollbar-track{width:12px;height:calc(100vh - 20px);background:#0000000d;border-radius:6px;display:flex;flex-direction:column;gap:2px;padding:4px;pointer-events:auto;cursor:pointer;-webkit-user-select:none;user-select:none}.scrollbar-block{flex:1;min-height:4px;border-radius:2px;transition:all .2s;cursor:pointer}.scrollbar-block.unanswered{background:#0000001a}.scrollbar-block.answered{background:#16a34a}.scrollbar-block.current{background:#764ba2;box-shadow:0 0 4px #764ba280;transform:scaleX(1.3)}.scrollbar-block:hover{opacity:.8;transform:scaleX(1.2)}.scrollbar-block.current:hover{transform:scaleX(1.4)}.scrollbar-magnifier{position:fixed;pointer-events:none;z-index:1001;transform:translate(-50%,-100%);margin-top:-10px}.magnifier-content{background:#000000d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;padding:12px 16px;color:#fff;font-size:.9rem;min-width:120px;text-align:center;box-shadow:0 4px 20px #0000004d;border:1px solid rgba(255,255,255,.1)}.magnifier-question-number{font-size:1.5rem;font-weight:700;color:#764ba2;margin-bottom:4px}.magnifier-status{font-size:.75rem;color:#ccc;margin-bottom:4px}.magnifier-category{font-size:.7rem;color:#999;text-transform:uppercase;letter-spacing:.5px}.magnifier-arrow{position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid rgba(0,0,0,.85)}.header{background:#fff;border-radius:12px;padding:24px;margin-bottom:12px;box-shadow:0 4px 6px #0000001a;position:relative;z-index:10;max-width:1200px;margin-left:auto;margin-right:auto}.header h1{font-size:2rem;color:#333;margin-bottom:16px;text-align:center}.dev-button{position:absolute;top:20px;right:20px;padding:8px 16px;background:#ff6b6b;color:#fff;border:none;border-radius:6px;font-size:.85rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 2px 4px #0000001a}.dev-button:hover{background:#ff5252;transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.progress{text-align:center}.progress-text{font-size:.9rem;color:#666;margin-bottom:8px}.progress-bar{width:100%;height:8px;background:#e0e0e0;border-radius:4px;margin-top:12px;overflow:hidden}.progress-fill{height:100%;background:linear-gradient(90deg,#667eea,#764ba2);transition:width .3s ease}.legend{position:fixed;top:80px;left:20px;z-index:1000;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 4px 12px #00000026;display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:600px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.legend-title{font-weight:600;color:#333;font-size:.85rem;white-space:nowrap}.legend-items{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.legend-item{display:flex;align-items:center;gap:4px}.legend-button{width:28px;height:28px;border:2px solid #e0e0e0;border-radius:4px;font-size:.75rem;font-weight:600;cursor:help;display:flex;align-items:center;justify-content:center;pointer-events:auto}.legend-label{font-size:.7rem;color:#666;white-space:nowrap}.legend-button.legend-never{background:#ef4444;color:#fff;border-color:#dc2626}.legend-button.legend-no-desire{background:#f97316;color:#fff;border-color:#ea580c}.legend-button.legend-forced{background:#eab308;color:#1f2937;border-color:#ca8a04}.legend-button.legend-maybe{background:#facc15;color:#1f2937;border-color:#eab308}.legend-button.legend-maybe-interest{background:#84cc16;color:#fff;border-color:#65a30d}.legend-button.legend-yes{background:#16a34a;color:#fff;border-color:#15803d}.legend-button.legend-fetish{background:#15803d;color:#fff;border-color:#166534}.legend-button.legend-na{background:#6b7280;color:#fff;border-color:#4b5563}.question-card-container{display:flex;justify-content:center;align-items:flex-start;min-height:60vh;padding:0;margin-top:0;margin-bottom:12px;position:relative;z-index:10;pointer-events:none}.question-card-container>*{pointer-events:auto}.question-page{position:relative;z-index:2}.question-card{background:#fff;border-radius:16px;padding:48px;box-shadow:0 4px 6px #0000001a;max-width:1200px;width:100%;display:flex;flex-direction:column;gap:32px;margin:0 auto}.question-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.question-number{font-size:1rem;color:#666;font-weight:500}.question-category{font-size:.9rem;color:#764ba2;font-weight:600;text-transform:uppercase;letter-spacing:1px}.question-text{font-size:2.5rem;font-weight:600;color:#333;line-height:1.3;text-align:center;padding:8px 0 24px;margin-top:-24px}.lead-in-phrase{font-size:1.5rem;font-weight:400;color:#999;opacity:.6;font-style:italic;text-align:center;margin-bottom:0}.questions-list{display:flex;flex-direction:column;gap:32px;margin-top:24px}.question-item{padding:24px;border:1px solid #e0e0e0;border-radius:12px;background:#fafafa;transition:all .3s ease}.question-item:hover{border-color:#764ba2;box-shadow:0 2px 8px #764ba21a}.question-item.unanswered{border-color:#fbbf24;background:#fffbeb}.question-item.highlighted{border:3px solid #ef4444;box-shadow:0 0 0 4px #ef444433,0 4px 12px #ef44444d;animation:pulse-highlight 1s ease-in-out;background:#fef2f2}@keyframes pulse-highlight{0%,to{box-shadow:0 0 0 4px #ef444433,0 4px 12px #ef44444d}50%{box-shadow:0 0 0 8px #ef44444d,0 4px 16px #ef444466}}.question-item-header{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start}.question-item-number{font-size:.85rem;color:#764ba2;font-weight:600;min-width:50px;padding-top:4px}.question-item-text{flex:1}.lead-in-phrase-small{font-size:1rem;font-weight:400;color:#999;opacity:.7;font-style:italic;margin-bottom:8px}.question-text-small{font-size:1.3rem;font-weight:600;color:#333;line-height:1.4}.question-row{display:grid;grid-template-columns:2fr 3fr;gap:16px;align-items:start;padding:14px 12px;border-bottom:1px solid #e0e0e0;transition:background-color .2s}.question-row:hover{background-color:#f8f9fa}.question-row:last-child{border-bottom:none}.question-name{font-size:1rem;color:#333;font-weight:500;line-height:1.4;padding-right:8px}.rating-container{display:flex;gap:16px;align-items:flex-start;justify-content:center}.combined-rating-column{display:flex;flex-direction:column;gap:12px;min-width:0;overflow:visible;max-width:1000px;margin:0 auto}.rating-section{display:flex;flex-direction:column;gap:6px;min-width:0;position:relative}.rating-row{display:flex;gap:24px;align-items:flex-start;flex-wrap:nowrap;width:100%}.category-header{font-size:1rem;font-weight:600;color:#764ba2;margin:8px 0 4px;padding:6px 10px;background:#f8f9fa;border-radius:6px;border-left:4px solid #764ba2}.header-row{display:flex;gap:24px;align-items:center;margin-bottom:8px}.header-spacer{width:50px;flex-shrink:0}.column-label{font-size:.7rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px;flex:1;min-width:0}.row-label{font-size:.7rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px;min-width:50px;align-self:center;cursor:help}.rating-buttons{display:flex;flex-wrap:nowrap;gap:4px;flex-shrink:1;min-width:0}.rating-button{padding:12px 16px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;font-size:1rem;cursor:pointer;transition:all .2s;white-space:nowrap;font-weight:600;flex:1;min-width:0}.rating-button:hover{transform:translateY(-2px);box-shadow:0 2px 4px #0000001a}.rating-button[data-rating=never]{background:#ef4444;color:#fff;border-color:#dc2626}.rating-button[data-rating=never]:hover{background:#f87171;border-color:#ef4444}.rating-button[data-rating=no-desire]{background:#f97316;color:#fff;border-color:#ea580c}.rating-button[data-rating=no-desire]:hover{background:#fb923c;border-color:#f97316}.rating-button[data-rating=forced]{background:#eab308;color:#1f2937;border-color:#ca8a04}.rating-button[data-rating=forced]:hover{background:#facc15;border-color:#eab308}.rating-button[data-rating=maybe]{background:#facc15;color:#1f2937;border-color:#eab308}.rating-button[data-rating=maybe]:hover{background:#fde047;border-color:#facc15}.rating-button[data-rating=maybe-interest]{background:#84cc16;color:#fff;border-color:#65a30d}.rating-button[data-rating=maybe-interest]:hover{background:#a3e635;border-color:#84cc16}.rating-button[data-rating=yes]{background:#16a34a;color:#fff;border-color:#15803d}.rating-button[data-rating=yes]:hover{background:#22c55e;border-color:#16a34a}.rating-button[data-rating=fetish]{background:#15803d;color:#fff;border-color:#166534}.rating-button[data-rating=fetish]:hover{background:#16a34a;border-color:#15803d}.rating-button[data-rating=na]{background:#6b7280;color:#fff;border-color:#4b5563}.rating-button[data-rating=na]:hover{background:#9ca3af;border-color:#6b7280}.rating-button.active{box-shadow:0 0 0 3px #0003;transform:scale(1.05)}.rating-button.faded{opacity:.3;filter:brightness(1.3)}.rating-button.disabled-role,.experience-button.disabled-role{opacity:.3;cursor:not-allowed;background:#f0f0f0;color:#999}.rating-button.disabled-role:hover,.experience-button.disabled-role:hover{transform:none;box-shadow:none}.experience-button.disabled-na{opacity:.4;cursor:not-allowed;background:#f5f5f5;color:#999;border-color:#e0e0e0}.experience-button.disabled-na:hover{transform:none;box-shadow:none}.role-disabled-indicator{position:absolute;right:20px;font-size:1.2rem;font-weight:700;color:#999;opacity:.5}.experience-group{display:flex;flex-direction:column;gap:6px;flex-shrink:0}.experience-label{font-size:.7rem;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.5px}.experience-buttons{display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;align-items:center}.experience-button{padding:10px 16px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;font-size:.9rem;cursor:pointer;transition:all .2s;font-weight:500;white-space:nowrap}.experience-button:hover{border-color:#667eea;background:#f0f0ff}.experience-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#764ba2;box-shadow:0 0 0 2px #764ba233}.experience-button.faded{opacity:.3;filter:brightness(1.3)}.role-buttons{display:flex;flex-direction:column;gap:3px}.role-button{padding:10px 16px;border:2px solid #e0e0e0;border-radius:6px;background:#fff;font-size:.9rem;cursor:pointer;transition:all .2s;text-align:center;font-weight:600}.role-button:hover{border-color:#667eea;background:#f0f0ff}.role-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:#764ba2}.navigation{display:flex;justify-content:center;align-items:center;margin-top:12px;gap:16px;padding:0 20px}.nav-button{padding:16px 32px;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s;background:#fff;color:#333;box-shadow:0 2px 4px #0000001a;min-width:150px}.nav-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.nav-button:disabled{opacity:.5;cursor:not-allowed}.results-button-hint{font-size:.85rem;font-weight:400;margin-left:8px;opacity:.9}.nav-button.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;flex:1;max-width:300px}.nav-button.primary:hover:not(:disabled){background:linear-gradient(135deg,#7c8ef5,#8a5fb8)}.nav-button.secondary{background:#6c757d;color:#fff}.nav-button.secondary:hover:not(:disabled){background:#5a6268}@media (max-width: 768px){html,body{overflow:hidden;height:100%;position:fixed;width:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.question-page{padding:0;height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0;background:#f8f9fa}.custom-scrollbar{display:none}.read-only-banner,.edit-code-banner{padding:8px 12px;font-size:.7rem;flex-shrink:0;margin-bottom:0;border-radius:0;box-shadow:0 2px 8px #0000000d}.edit-code-banner-content{flex-direction:row;align-items:center;gap:10px;max-width:100%}.edit-code-banner-text{font-size:.75rem;flex-wrap:wrap;flex:1;line-height:1.4}.edit-code-display{font-size:.8rem;letter-spacing:1px;padding:4px 8px;border-radius:6px;font-weight:700}.edit-code-copy-btn{padding:6px 12px;font-size:.75rem;flex-shrink:0;border-radius:8px;font-weight:600;transition:transform .1s ease}.edit-code-copy-btn:active{transform:scale(.95)}.header{padding:8px 12px 6px;margin-bottom:0;flex-shrink:0;background:#fff;border-bottom:1px solid #f0f0f0}.header h1{font-size:.95rem;margin-bottom:0;font-weight:700;letter-spacing:-.5px}.dev-button,.progress{display:none}.legend{position:fixed;top:100px;left:0;right:0;z-index:999;background:#fff;border-radius:0;padding:8px 12px;box-shadow:0 2px 8px #0000001a;max-width:100%;margin:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid #e0e0e0}.legend-title{font-size:.7rem;margin-bottom:6px}.legend-items{gap:6px}.legend-item{gap:3px}.legend-button{width:24px;height:24px;font-size:.65rem}.legend-label{font-size:.6rem}.question-card-container{padding:0;margin-bottom:0;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;width:100%}.question-card{padding:0;gap:0;border-radius:0;flex:1;display:flex;flex-direction:column;overflow:hidden;margin:0;box-shadow:none;background:#fff;max-width:100%;width:100%}.question-header{display:none}.mobile-question-header{padding:10px 16px 8px;margin-bottom:0;flex-shrink:0;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.mobile-category-info{font-size:.7rem;color:#fffffff2;text-align:center;font-weight:600;letter-spacing:.3px;text-transform:uppercase}.questions-list{gap:0;margin-top:0;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;padding:160px 16px 16px;width:100%}.question-item{padding:0;border-radius:0;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0;background:transparent;border:none}.question-item-header{gap:0;margin-bottom:12px;flex-shrink:0}.question-item-number{display:none}.question-text-small{font-size:1.1rem;line-height:1.4;font-weight:700;color:#1a1a1a;letter-spacing:-.3px;margin-bottom:16px}.rating-container{width:100%;flex:1;display:flex;flex-direction:column;min-height:0;padding:0}.combined-rating-column{gap:16px;flex:1;display:flex;flex-direction:column;min-height:0;justify-content:flex-start;width:100%;max-width:100%}.header-row{display:none}.rating-section{gap:8px;flex-shrink:0}.rating-section:not(:first-child){padding-top:16px;border-top:1px solid #e0e0e0;margin-top:0}.rating-row{flex-direction:column;gap:8px;align-items:stretch}.row-label{font-size:.7rem;min-width:auto;padding:6px 10px;align-self:flex-start;background:#f0f0f0;border-radius:8px;font-weight:700;color:#667eea;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}.rating-buttons{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%}.rating-button{font-size:.85rem;padding:10px 4px;min-height:44px;display:flex;align-items:center;justify-content:center;font-weight:800;border-radius:8px;border:2px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #0000001f;position:relative;overflow:hidden}.rating-button:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:#ffffff1a;opacity:0;transition:opacity .2s}.rating-button:active:before{opacity:1}.rating-button:active{transform:scale(.96)}.rating-button.active{border-color:#00000040;box-shadow:0 6px 16px #00000040;transform:scale(1.05);z-index:1}.rating-button.faded{opacity:.35;filter:grayscale(.3)}.experience-group{width:100%}.experience-buttons{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;width:100%}.experience-button{font-size:.7rem;padding:8px 4px;min-height:36px;text-align:center;font-weight:600;border-radius:6px;border:2px solid #e0e0e0;background:#fff;color:#333;transition:all .2s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 4px #0000000d}.experience-button:active{transform:scale(.96)}.experience-button.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-color:transparent;box-shadow:0 4px 12px #667eea4d;transform:scale(1.02)}.experience-button.faded{opacity:.4}.role-disabled-indicator{position:static;text-align:center;padding:10px 0;font-size:1.4rem;color:#e0e0e0;font-weight:300;background:#f8f9fa;border-radius:8px;margin-top:4px}.rating-button.disabled-role,.experience-button.disabled-role{opacity:.25;filter:grayscale(.5);background:#f5f5f5!important;color:#bbb!important;border-color:#e0e0e0!important;cursor:not-allowed}.rating-button.disabled-role:active,.experience-button.disabled-role:active{transform:none}.experience-button.disabled-na{opacity:.4;cursor:not-allowed;background:#f5f5f5!important;color:#999!important;border-color:#e0e0e0!important}.experience-button.disabled-na:active{transform:none}.mobile-question-nav{padding:8px 12px;border-top:1px solid #f0f0f0;margin-top:0;flex-shrink:0;background:#fff}.mobile-question-counter{display:none}.mobile-question-buttons{display:flex;gap:8px;justify-content:center}.mobile-nav-btn{padding:10px 16px;border:2px solid #667eea;border-radius:10px;background:#fff;color:#667eea;font-size:.85rem;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:40px;flex:1;max-width:150px;box-shadow:0 2px 4px #0000000d}.mobile-nav-btn:active:not(:disabled){transform:scale(.96);background:#667eea;color:#fff}.mobile-nav-btn:disabled{opacity:.3;cursor:not-allowed;border-color:#e0e0e0;color:#999}.mobile-category-nav{padding:10px 12px;border-top:1px solid #f0f0f0;background:#fff;flex-shrink:0;box-shadow:0 -2px 8px #0000000d}.mobile-category-btn{width:100%;padding:12px 20px;border:none;border-radius:12px;font-size:.95rem;font-weight:700;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);min-height:44px;box-shadow:0 4px 12px #00000026;letter-spacing:.3px}.mobile-category-btn:active:not(:disabled){transform:scale(.98)}.mobile-category-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.mobile-category-btn.primary:hover:not(:disabled){box-shadow:0 6px 16px #667eea66}.mobile-category-btn.secondary{background:#6c757d;color:#fff}.mobile-category-btn.secondary:hover:not(:disabled){background:#5a6268;box-shadow:0 6px 16px #6c757d66}.mobile-category-btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.navigation{display:none}.results-button-hint{display:block;margin-top:6px;font-size:.8rem;opacity:.9;font-weight:400}}@media (max-width: 480px){.question-page{padding:0}.header{padding:6px 10px 4px}.header h1{font-size:.85rem}.read-only-banner,.edit-code-banner{padding:6px 10px;font-size:.65rem}.mobile-question-header{padding:8px 12px 6px}.mobile-category-info{font-size:.65rem}.question-card-container{padding:0}.questions-list{padding:12px}.question-text-small{font-size:1rem;line-height:1.3;margin-bottom:12px}.question-item-header{margin-bottom:10px}.combined-rating-column{gap:14px}.rating-section:not(:first-child){padding-top:14px;border-top:1px solid #e0e0e0}.rating-section,.rating-row{gap:6px}.row-label{font-size:.65rem;padding:5px 8px;margin-bottom:2px}.rating-buttons{grid-template-columns:repeat(7,1fr);gap:3px}.rating-button{font-size:.75rem;padding:8px 2px;min-height:38px;font-weight:700}.experience-buttons{grid-template-columns:repeat(5,1fr);gap:3px}.experience-button{font-size:.65rem;padding:6px 2px;min-height:32px}.role-disabled-indicator{padding:8px 0;font-size:1.2rem;margin-top:4px}.mobile-question-nav{padding:6px 10px}.mobile-nav-btn{padding:8px 12px;font-size:.8rem;min-height:36px}.mobile-category-nav{padding:8px 10px}.mobile-category-btn{padding:10px 16px;font-size:.9rem;min-height:40px}}.results-page{max-width:1800px;margin:0 auto;padding:0 20px 20px;position:relative}.share-banner{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:16px 20px;box-shadow:0 4px 12px #00000026;margin-bottom:20px;border-radius:0 0 12px 12px}.share-banner-content{max-width:1800px;margin:0 auto;display:flex;flex-direction:column;gap:16px}.share-banner-main{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}.compare-input-group{display:flex;gap:12px;align-items:center;flex:0 0 auto}.share-banner-text{display:flex;align-items:center;gap:12px;font-size:1rem;flex:1}.share-icon{font-size:1.2rem;vertical-align:middle}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:1em;line-height:1;letter-spacing:normal;text-transform:none;display:inline-block;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-feature-settings:"liga";-webkit-font-smoothing:antialiased;vertical-align:middle}.share-code-display{font-family:monospace;font-size:1.3rem;letter-spacing:3px;background:#fff3;padding:6px 12px;border-radius:6px;font-weight:700}.share-banner-actions{display:flex;gap:12px;align-items:center}.share-copy-btn{padding:10px 20px;background:#fff;color:#667eea;border:none;border-radius:6px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.share-copy-btn:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 2px 8px #0003}.share-share-btn{padding:10px 20px;background:#ffffffe6;color:#667eea;border:2px solid white;border-radius:6px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s}.share-share-btn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 2px 8px #0003}.share-close-btn{padding:8px 12px;background:#fff3;color:#fff;border:none;border-radius:6px;font-size:1.2rem;font-weight:600;cursor:pointer;transition:all .2s;line-height:1}.share-close-btn:hover{background:#ffffff4d}.compare-prompt-banner{position:sticky;top:0;z-index:1000;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;padding:24px 20px;box-shadow:0 4px 12px #00000026;margin-bottom:20px;border-radius:0 0 12px 12px}.compare-prompt-content{max-width:1800px;margin:0 auto;display:flex;flex-direction:column;gap:20px}.compare-prompt-text{display:flex;align-items:center;gap:16px;font-size:1rem}.compare-prompt-icon{font-size:2rem;vertical-align:middle}.compare-prompt-icon.material-icons{font-size:2rem}.compare-prompt-title{font-size:1.3rem;font-weight:700;margin-bottom:4px}.compare-prompt-description{font-size:.95rem;opacity:.9}.compare-prompt-input-group{display:flex;gap:12px;align-items:center;max-width:500px;margin:0 auto;width:100%}.compare-prompt-input{flex:1;padding:16px 20px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff26;color:#fff;font-size:1.2rem;text-align:center;transition:all .2s}.compare-prompt-input::placeholder{color:#fff9}.compare-prompt-input:focus{outline:none;border-color:#ffffff80;background:#fff3;box-shadow:0 0 0 3px #fff3}.compare-prompt-btn{padding:16px 32px;background:#fff;color:#2563eb;border:none;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap}.compare-prompt-btn:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.compare-prompt-error{color:#fef2f2;background:#ef444433;padding:12px 16px;border-radius:6px;text-align:center;font-size:.95rem;border:1px solid rgba(239,68,68,.3)}.compare-code-input{flex:1;padding:12px 16px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff1a;color:#fff;font-size:1.1rem;text-align:center;max-width:200px}.compare-code-input::placeholder{color:#fff9}.compare-code-input:focus{outline:none;border-color:#fff;background:#fff3}.compare-btn{padding:12px 24px;background:#fff;color:#667eea;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.compare-btn:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 2px 8px #0003}.comparison-error{padding:8px 12px;background:#fff3;color:#ffebee;border-radius:6px;font-size:.9rem;border-left:3px solid #ffcdd2;margin-top:12px}.comparison-results-section{background:#fff;border-radius:12px;padding:32px;margin:32px auto;box-shadow:0 4px 6px #0000001a;max-width:1200px}.comparison-results-section h2{font-size:1.8rem;color:#333;margin-bottom:24px;text-align:center}.compatibility-score{display:flex;justify-content:center;margin-bottom:32px}.score-circle{width:150px;height:150px;border-radius:50%;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;box-shadow:0 4px 12px #667eea4d}.score-value{font-size:2.5rem;font-weight:700}.score-label{font-size:.9rem;opacity:.9}.top-bottom-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-bottom:32px}.metric-section{background:#f8f9fa;border-radius:12px;padding:24px;border:2px solid #e0e0e0}.metric-section h3{font-size:1.2rem;color:#333;margin-bottom:8px;text-align:center;font-weight:600}.metric-subtitle{font-size:.85rem;color:#666;text-align:center;margin-bottom:16px;font-style:italic}.metric-score{font-size:3rem;font-weight:700;color:#667eea;text-align:center;margin-bottom:20px}.metric-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:16px}.metric-stat{display:flex;flex-direction:column;align-items:center;padding:12px;background:#fff;border-radius:8px}.metric-stat-value{font-size:1.5rem;font-weight:700;color:#333}.metric-stat-label{font-size:.85rem;color:#666;margin-top:4px}.metric-total{text-align:center;font-size:.9rem;color:#666;font-weight:500;padding-top:12px;border-top:1px solid #e0e0e0}.compatibility-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:24px}.stat-item{text-align:center;padding:16px;background:#f8f9fa;border-radius:8px}.stat-value{font-size:2rem;font-weight:700;color:#667eea}.stat-label{font-size:.9rem;color:#666;margin-top:4px}.close-comparison-btn{width:100%;padding:16px;background:#6c757d;color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:16px}.close-comparison-btn:hover{background:#5a6268;transform:translateY(-2px)}.results-header{background:#fff;border-radius:12px;padding:24px;margin-bottom:24px;box-shadow:0 4px 6px #0000001a}.results-header h1{font-size:2rem;color:#333;margin-bottom:20px;text-align:center}.export-buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.export-btn{padding:12px 24px;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 4px #0000001a}.export-btn:hover{transform:translateY(-2px);box-shadow:0 4px 8px #00000026}.export-btn.secondary{background:#6c757d}.results-content{display:flex;flex-direction:column;gap:24px;position:relative}.balance-gauge-container{display:flex;justify-content:center;margin-bottom:32px}.balance-gauge-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 8px 24px #0000001f;width:100%;max-width:800px;position:relative;overflow:hidden}.balance-gauge-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;background:linear-gradient(90deg,#667eea,#764ba2 50%,#f093fb 50%,#f5576c);z-index:1}.balance-gauge-header{text-align:center;margin-bottom:32px}.balance-gauge-title{font-size:2rem;font-weight:700;color:#333;margin-bottom:8px;background:linear-gradient(135deg,#667eea,#764ba2 50%,#f093fb 50%,#f5576c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.balance-gauge-subtitle{font-size:1.1rem;color:#666;font-weight:500}.balance-gauge-wrapper{display:flex;flex-direction:column;gap:16px}.balance-gauge-labels{display:flex;justify-content:space-between;font-size:.9rem;font-weight:600;color:#666;padding:0 4px}.balance-label-bottom{color:#667eea}.balance-label-top{color:#f5576c}.balance-gauge-track{position:relative;height:40px;background:linear-gradient(90deg,#667eea,#764ba2 50%,#f093fb 50%,#f5576c);border-radius:20px;overflow:visible;box-shadow:inset 0 2px 4px #0000001a}.balance-gauge-fill{position:absolute;top:0;left:0;height:100%;border-radius:20px;transition:width .5s ease,background .5s ease;box-shadow:0 2px 8px #00000026}.balance-gauge-indicator{position:absolute;top:50%;transform:translate(-50%,-50%);z-index:10;transition:left .5s ease}.balance-gauge-marker{width:4px;height:50px;background:#333;border-radius:2px;margin:0 auto;box-shadow:0 2px 4px #0000004d}.balance-gauge-value{position:absolute;top:-35px;left:50%;transform:translate(-50%);background:#333;color:#fff;padding:4px 12px;border-radius:6px;font-size:.9rem;font-weight:700;white-space:nowrap;box-shadow:0 2px 8px #0003}.balance-gauge-value:after{content:"";position:absolute;bottom:-4px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #333}.balance-gauge-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px}.balance-stat{text-align:center;padding:16px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:12px;border:2px solid #e0e0e0}.balance-stat-label{font-size:.85rem;color:#666;font-weight:500;margin-bottom:8px}.balance-stat-value{font-size:1.8rem;font-weight:700;color:#333}.summary-card{background:#fff;border-radius:16px;padding:32px;box-shadow:0 8px 24px #0000001f;position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}.summary-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px #00000029}.summary-card:before{content:"";position:absolute;top:0;left:0;right:0;height:6px;z-index:1}.summary-card-desired:before{background:linear-gradient(90deg,#667eea,#764ba2,#f093fb)}.summary-card-avoid:before{background:linear-gradient(90deg,#f093fb,#f5576c,#f093fb)}.summary-card-header{margin-bottom:24px;text-align:center}.summary-card-icon{font-size:3.5rem;margin-bottom:12px;display:block;animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.summary-card-title{font-size:1.8rem;font-weight:700;color:#333;margin-bottom:8px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.summary-card-avoid .summary-card-title{background:linear-gradient(135deg,#f5576c,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.summary-card-subtitle{font-size:.95rem;color:#666;font-weight:500}.summary-card-content{max-height:500px;overflow-y:auto;display:flex;flex-direction:column;gap:24px}.summary-section{display:flex;flex-direction:column;gap:12px}.summary-section-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:8px;border-left:4px solid;margin-bottom:4px}.summary-card-desired .summary-section-header{border-left-color:#764ba2}.summary-card-avoid .summary-section-header{border-left-color:#f5576c}.summary-section-title{font-size:1.1rem;font-weight:700;color:#333}.summary-section-count{font-size:.9rem;font-weight:600;color:#666;background:#0000000d;padding:4px 12px;border-radius:12px}.summary-items-list{display:flex;flex-direction:column;gap:12px}.summary-item{padding:12px 16px;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:12px;border-left:4px solid transparent;transition:all .2s ease;display:flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-card-desired .summary-item{border-left-color:#764ba2}.summary-card-desired .summary-item:hover{background:linear-gradient(135deg,#f0f4ff,#fff);transform:translate(4px)}.summary-card-avoid .summary-item{border-left-color:#f5576c}.summary-card-avoid .summary-item:hover{background:linear-gradient(135deg,#fff0f2,#fff);transform:translate(4px)}.summary-item-name{font-size:1rem;font-weight:600;color:#333;flex-shrink:0}.summary-item-meta{font-size:.9rem;color:#666;font-weight:500;margin-left:4px;flex-shrink:0}.summary-item-more{padding:16px;text-align:center;font-size:.95rem;color:#764ba2;font-weight:600;background:linear-gradient(135deg,#f8f9fa,#fff);border-radius:12px;border:2px dashed #dee2e6}.summary-card-avoid .summary-item-more{color:#f5576c}.export-header{background:#fff;border-radius:12px;padding:20px 24px;box-shadow:0 4px 6px #0000001a;margin-bottom:8px}.export-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.export-header-title{font-size:1.6rem;font-weight:700;color:#333;margin:0}.export-header-code{font-size:1.8rem;font-weight:700;color:#764ba2;margin:0}.export-header-info{font-size:1.2rem;color:#666;text-align:left;font-weight:600}.edit-code-section{margin:20px 0;padding:20px;background:#f8f9fa;border-radius:8px;border:2px solid #e0e0e0}.edit-code-label{display:flex;align-items:center;gap:8px;font-size:.95rem;color:#333;font-weight:600;margin-bottom:12px}.edit-code-icon{font-size:1.2rem;vertical-align:middle}.edit-code-icon.material-icons{font-size:1.2rem}.edit-code-display-group{display:flex;align-items:center;gap:12px;margin-bottom:8px}.edit-code-section .edit-code-display{font-family:monospace;font-size:1.1rem;letter-spacing:2px;background:#fff;padding:10px 16px;border-radius:6px;border:2px solid #dee2e6;font-weight:700;flex:1;max-width:400px}.edit-code-copy-btn{padding:10px 20px;background:#764ba2;color:#fff;border:none;border-radius:6px;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;white-space:nowrap}.edit-code-copy-btn:hover{background:#667eea;transform:translateY(-2px);box-shadow:0 2px 8px #0003}.edit-code-note{font-size:.85rem;color:#666;font-style:italic}.edit-mode-section{margin:24px 0;padding:24px;background:#fff;border-radius:8px;border:2px solid #764ba2}.edit-mode-header{margin-bottom:20px}.edit-mode-header h3{font-size:1.5rem;color:#333;margin:0 0 8px}.edit-mode-header p{font-size:.95rem;color:#666;margin:0}.edit-question-selector{margin-bottom:24px}.edit-question-selector label{display:block;font-size:1rem;font-weight:600;color:#333;margin-bottom:8px}.question-select{width:100%;padding:12px 16px;border:2px solid #dee2e6;border-radius:6px;font-size:1rem;background:#fff;cursor:pointer;transition:border-color .2s}.question-select:focus{outline:none;border-color:#764ba2;box-shadow:0 0 0 3px #764ba21a}.edit-form{background:#f8f9fa;border-radius:8px;padding:24px;border:1px solid #e0e0e0}.edit-form-content{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px;margin-bottom:24px}.edit-form-section{display:flex;flex-direction:column;gap:12px}.edit-form-label{font-size:.9rem;font-weight:600;color:#333;text-transform:uppercase;letter-spacing:.5px}.edit-rating-buttons,.edit-experience-buttons{display:flex;flex-wrap:wrap;gap:6px}.edit-rating-btn,.edit-experience-btn{padding:10px 14px;border:2px solid #dee2e6;border-radius:6px;background:#fff;font-size:.95rem;cursor:pointer;transition:all .2s;font-weight:600}.edit-rating-btn:hover:not(.disabled),.edit-experience-btn:hover:not(.disabled){border-color:#764ba2;background:#f8f9fa}.edit-rating-btn.active,.edit-experience-btn.active{background:#764ba2;color:#fff;border-color:#764ba2}.edit-rating-btn.disabled,.edit-experience-btn.disabled{opacity:.4;cursor:not-allowed;background:#f0f0f0}.edit-form-actions{display:flex;gap:12px;justify-content:flex-end;padding-top:16px;border-top:1px solid #e0e0e0}.edit-save-btn{padding:12px 24px;background:#764ba2;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.edit-save-btn:hover{background:#667eea;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.edit-cancel-btn{padding:12px 24px;background:#6c757d;color:#fff;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.edit-cancel-btn:hover{background:#5a6268;transform:translateY(-2px);box-shadow:0 4px 8px #0003}.category-section{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 6px #0000001a;margin-bottom:24px;overflow-x:auto}.category-title{font-size:1.5rem;color:#764ba2;margin-bottom:16px;padding-bottom:12px;border-bottom:2px solid #e0e0e0}.results-table{width:100%;border-collapse:collapse;font-size:.9rem}.results-table thead{background:#f8f9fa}.results-table th{padding:12px 8px;text-align:left;font-weight:600;color:#333;border-bottom:2px solid #dee2e6;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px}.results-table th.col-code-header{color:#fff!important}.results-table td{padding:10px 8px;border-bottom:1px solid #e9ecef;vertical-align:top}.results-table tbody tr:hover{background:#f8f9fa}.results-table tbody tr.no-answer{color:#999}.results-table tbody tr.has-answer{color:#333}.col-activity{width:40%;min-width:200px}.col-top-header,.col-bottom-header{text-align:left;font-size:.9rem;background:#e9ecef;border-bottom:2px solid #dee2e6;padding-left:12px}.col-top-rating,.col-bottom-rating{width:15%;min-width:120px}.col-top-exp,.col-bottom-exp{width:15%;min-width:100px}.activity-cell{font-weight:500}.rating-cell.rating-never{color:#ef4444;font-weight:600}.rating-cell.rating-no-desire{color:#f97316;font-weight:600}.rating-cell.rating-forced{color:#eab308;font-weight:600}.rating-cell.rating-maybe{color:#facc15;font-weight:600}.rating-cell.rating-maybe-interest{color:#84cc16;font-weight:600}.rating-cell.rating-yes{color:#16a34a;font-weight:600}.rating-cell.rating-fetish{color:#15803d;font-weight:600}.rating-cell.rating-incompatible{color:#999;font-weight:600;font-style:italic}.rating-cell.rating-na{color:#6b7280;font-weight:600;font-style:italic}.experience-cell.experience-none{color:#9ca3af;font-weight:500}.experience-cell.experience-curious{color:#3b82f6;font-weight:500}.experience-cell.experience-newbie{color:#8b5cf6;font-weight:500}.experience-cell.experience-good{color:#10b981;font-weight:500}.experience-cell.experience-expert{color:#f59e0b;font-weight:600}.rating-cell,.experience-cell{text-align:left;color:#666}.rating-cell.editable,.experience-cell.editable{cursor:pointer;position:relative;transition:background-color .2s}.rating-cell.editable:hover,.experience-cell.editable:hover{background-color:#667eea1a;border-radius:4px}.edit-dropdown{background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 4px 12px #00000026;max-height:400px;overflow-y:auto;min-width:200px;margin-top:4px}.edit-dropdown-options{display:flex;flex-direction:column;padding:4px}.edit-dropdown-option{padding:10px 14px;text-align:left;border:none;background:transparent;cursor:pointer;border-radius:4px;font-size:.9rem;color:#374151;transition:background-color .2s}.edit-dropdown-option:hover{background-color:#f3f4f6}.edit-dropdown-option.active{background-color:#667eea;color:#fff;font-weight:600}.edit-dropdown-option.active:hover{background-color:#5568d3}.comparison-table{font-size:.85rem}.col-code-header{text-align:center;font-size:.95rem;background:#764ba2;color:#fff!important;font-weight:700;border-bottom:2px solid #dee2e6}.col-compatibility{width:120px;text-align:center;vertical-align:middle}.compatibility-cell{text-align:center;vertical-align:middle}.compatibility-badge{display:inline-block;padding:4px 8px;border-radius:4px;font-size:.75rem;font-weight:600;white-space:nowrap}.compatibility-badge.match{background-color:#d4edda;color:#155724}.compatibility-badge.compatible{background-color:#d1ecf1;color:#0c5460}.compatibility-badge.incompatible{background-color:#f8d7da;color:#721c24}.compatibility-badge.neutral{background-color:#e2e3e5;color:#383d41}.comparison-row.match{background-color:#f0f9f2}.comparison-row.compatible{background-color:#f0f8fa}.comparison-row.incompatible{background-color:#fef0f1}.comparison-row:hover{background-color:#f8f9fa!important}.nickname-inputs{display:flex;gap:16px;margin:16px 0;justify-content:center;flex-wrap:wrap}.nickname-input-group{display:flex;flex-direction:column;gap:6px;min-width:200px;flex:1;max-width:300px}.nickname-input-group label{font-size:.85rem;color:#666;font-weight:500}.nickname-input{padding:8px 12px;border:1px solid #dee2e6;border-radius:6px;font-size:.9rem;transition:border-color .2s}.nickname-input:focus{outline:none;border-color:#764ba2;box-shadow:0 0 0 3px #764ba21a}.nickname-note{font-size:.85rem;color:#999;text-align:center;font-style:italic;margin-top:8px;margin-bottom:16px}.comparison-toggle-container{display:flex;gap:12px;margin:16px 0;justify-content:center}.comparison-toggle-btn{flex:1;max-width:300px;padding:12px 20px;border:2px solid #dee2e6;border-radius:8px;background:#fff;color:#333;font-size:.95rem;font-weight:600;cursor:pointer;transition:all .2s;display:flex;justify-content:space-between;align-items:center}.comparison-toggle-btn:hover{border-color:#764ba2;background:#f8f9fa}.comparison-toggle-btn.active{border-color:#764ba2;background:#764ba2;color:#fff}.toggle-score{font-size:.85rem;opacity:.9;font-weight:700}.comparison-toggle-btn.active .toggle-score{opacity:1}.compatibility-filter-container{display:flex;gap:8px;margin:12px 0;justify-content:center;flex-wrap:wrap}.filter-btn{padding:8px 16px;border:2px solid #dee2e6;border-radius:6px;background:#fff;color:#333;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s}.filter-btn:hover{border-color:#764ba2;background:#f8f9fa}.filter-btn.active{border-color:#764ba2;background:#764ba2;color:#fff}@media (max-width: 768px){html,body{overflow:auto!important;height:auto!important;position:relative!important;width:100%!important}.results-page.mobile-layout{padding:0;max-width:100%;width:100%;height:100vh;overflow:hidden;position:fixed;top:0;left:0;right:0;bottom:0;display:flex;flex-direction:column;background:#f5f5f5}.results-page.mobile-layout .floating-compare-button{position:absolute;bottom:16px;right:16px;z-index:1001}.mobile-frame-header{position:sticky;top:0;z-index:1000;background:#fff;box-shadow:0 2px 8px #0000001a;display:flex;flex-direction:column;flex-shrink:0}.mobile-share-code-section{padding:12px 16px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}.mobile-share-code-label{font-size:.75rem;opacity:.9;margin-bottom:6px;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.mobile-share-code-display{display:flex;align-items:center;justify-content:space-between;gap:12px}.mobile-share-code-text{font-family:monospace;font-size:1.4rem;letter-spacing:3px;font-weight:700;flex:1}.mobile-share-code-actions{display:flex;gap:8px;align-items:center}.mobile-share-code-copy-btn,.mobile-share-code-share-btn{padding:8px 12px;background:#fff3;color:#fff;border:1px solid rgba(255,255,255,.3);border-radius:6px;font-size:1rem;cursor:pointer;transition:all .2s;min-width:44px;display:flex;align-items:center;justify-content:center}.mobile-share-code-copy-btn .material-icons,.mobile-share-code-share-btn .material-icons{font-size:1.2rem}.mobile-share-code-copy-btn:hover,.mobile-share-code-share-btn:hover{background:#ffffff4d;transform:scale(1.05)}.mobile-share-code-share-btn{background:#ffffff40}.mobile-share-code-share-btn:hover{background:#ffffff59}.mobile-frame-content{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:8px;min-height:0}.mobile-frame-content .category-section{margin-bottom:12px;padding:12px;background:#fff;border-radius:8px;box-shadow:0 2px 4px #0000000d}.mobile-frame-content .category-section:first-child{margin-top:0}.results-page:not(.mobile-layout){padding:0 8px 8px;max-width:100%;width:100%;min-height:100vh;overflow:visible;position:relative}.results-content{overflow:visible;position:relative;display:flex;flex-direction:column}.share-banner{padding:10px 12px;margin-bottom:12px;font-size:.85rem}.share-code-display{font-size:.95rem;letter-spacing:1px;padding:4px 8px}.share-copy-btn{padding:8px 12px;font-size:.85rem}.compare-prompt-banner{padding:16px 12px;margin-bottom:12px}.compare-prompt-title{font-size:1.1rem}.compare-prompt-description{font-size:.85rem}.compare-prompt-input{font-size:1rem;padding:12px 16px}.compare-prompt-btn{padding:12px 20px;font-size:1rem}.share-banner-content{gap:12px}.share-banner-main{flex-direction:column;align-items:stretch;gap:12px}.compare-input-group{width:100%;order:3}.compare-code-input{flex:1}.compare-btn{flex-shrink:0}.top-bottom-metrics{grid-template-columns:1fr}.compatibility-stats{grid-template-columns:repeat(2,1fr)}.share-banner-text{flex-direction:column;align-items:flex-start;gap:8px}.share-code-display{font-size:1.1rem;letter-spacing:2px}.share-banner-actions{justify-content:space-between}.share-copy-btn{flex:1}.results-header{padding:12px;margin-bottom:12px}.results-header h1{font-size:1.2rem;margin-bottom:12px}.export-buttons{flex-direction:column;gap:8px}.export-btn{width:100%;padding:10px 16px;font-size:.9rem}.export-header{padding:12px;margin-bottom:8px}.export-header-title{font-size:1.1rem}.export-header-code{font-size:1.2rem}.export-header-info{font-size:.75rem}.category-section{padding:12px;margin-bottom:12px;overflow-x:auto;-webkit-overflow-scrolling:touch}.category-title{font-size:1.1rem;margin-bottom:12px;padding-bottom:8px}.results-table{font-size:.7rem;width:100%;min-width:600px}.results-table th,.results-table td{padding:6px 4px;font-size:.7rem}.col-activity{min-width:120px;width:30%}.col-top-rating,.col-bottom-rating{min-width:60px;width:12%}.col-top-exp,.col-bottom-exp{min-width:55px;width:12%}.activity-cell{font-size:.7rem;line-height:1.3}.rating-cell,.experience-cell{font-size:.65rem}.edit-code-section{padding:12px;margin:12px 0}.edit-code-label{font-size:.85rem}.edit-code-section .edit-code-display{font-size:.9rem;padding:8px 12px}.edit-code-copy-btn{padding:8px 16px;font-size:.85rem}.edit-mode-section{padding:12px;margin:12px 0}.edit-mode-header h3{font-size:1.1rem}.edit-mode-header p{font-size:.85rem}.balance-gauge-card{padding:16px}.balance-gauge-title{font-size:1.2rem}.balance-gauge-subtitle{font-size:.85rem}.balance-gauge-track{height:32px}.balance-gauge-marker{height:40px}.balance-gauge-value{font-size:.8rem;padding:3px 10px;top:-32px}.balance-gauge-stats{gap:8px}.balance-stat{padding:10px}.balance-stat-label{font-size:.75rem}.balance-stat-value{font-size:1.2rem}.comparison-toggle-container{flex-direction:column;gap:8px}.comparison-toggle-btn{max-width:100%;padding:10px 16px;font-size:.85rem}.nickname-inputs{flex-direction:column;gap:12px}.nickname-input-group{max-width:100%}.compatibility-filter-container{flex-wrap:wrap;gap:6px}.filter-btn{padding:6px 12px;font-size:.8rem;flex:1;min-width:calc(33.333% - 4px)}.comparison-table{font-size:.65rem;min-width:700px}.comparison-table th,.comparison-table td{padding:6px 3px;font-size:.65rem}.compatibility-badge{font-size:.65rem;padding:3px 6px}.mobile-results-tabs{display:flex;gap:8px;padding:12px 16px;background:#fff;border-bottom:1px solid #e0e0e0;width:100%;box-sizing:border-box}.mobile-frame-header .mobile-results-tabs{margin:0;border-radius:0;box-shadow:none;position:relative}.mobile-frame-header:has(.mobile-results-tabs:first-child) .mobile-results-tabs{border-top:none}.results-content{overflow:visible!important;position:relative;display:flex;flex-direction:column}.category-section{overflow-x:auto;overflow-y:visible}.results-page{overflow:visible!important;position:relative}html,body{overflow-y:auto!important;overflow-x:hidden!important}.mobile-tab{flex:1;padding:12px 20px;border:2px solid #e0e0e0;border-radius:8px;background:#fff;color:#333;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s}.mobile-tab:hover{border-color:#764ba2;background:#f8f9fa}.mobile-tab.active{border-color:#764ba2;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 2px 8px #764ba24d}.mobile-frame-content .results-table{min-width:auto!important;width:100%}.mobile-frame-content .category-section{overflow-x:visible}.results-table{min-width:auto!important}.col-activity{width:50%!important;min-width:auto!important}.col-top-rating,.col-bottom-rating,.col-top-exp,.col-bottom-exp{width:25%!important;min-width:auto!important}}.floating-compare-button{position:fixed;bottom:24px;right:24px;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;border:none;border-radius:50px;padding:14px 24px;box-shadow:0 4px 12px #667eea66;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:1rem;font-weight:600;z-index:999;transition:all .3s ease;min-width:120px;justify-content:center}.floating-compare-button:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.floating-compare-button:active{transform:translateY(0)}.floating-compare-button .material-icons{font-size:1.2rem}.floating-compare-text{white-space:nowrap}.compare-section-bottom{margin-top:32px;margin-bottom:100px;padding:0;animation:slideUp .3s ease}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.compare-section-content{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:32px;border-radius:12px;box-shadow:0 4px 12px #00000026;display:flex;flex-direction:column;gap:24px;max-width:800px;margin:0 auto}.compare-section-header{display:flex;align-items:center;gap:16px;text-align:left}.compare-section-icon{font-size:2.5rem;flex-shrink:0}.compare-section-title{font-size:1.5rem;font-weight:700;margin-bottom:6px}.compare-section-description{font-size:1rem;opacity:.9}.compare-section-input-group{display:flex;gap:12px;align-items:center;width:100%}.compare-section-input{flex:1;padding:16px 20px;border:2px solid rgba(255,255,255,.3);border-radius:8px;background:#ffffff26;color:#fff;font-size:1.2rem;text-align:center;transition:all .2s}.compare-section-input::placeholder{color:#fff9}.compare-section-input:focus{outline:none;border-color:#ffffff80;background:#fff3;box-shadow:0 0 0 3px #fff3}.compare-section-btn{padding:16px 32px;background:#fff;color:#667eea;border:none;border-radius:8px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .2s;white-space:nowrap;flex-shrink:0}.compare-section-btn:hover{background:#f0f0f0;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.compare-section-error{color:#fef2f2;background:#ef444433;padding:12px 16px;border-radius:6px;text-align:center;font-size:.95rem;border:1px solid rgba(239,68,68,.3)}@media (max-width: 768px){.floating-compare-button{bottom:16px;right:16px;padding:12px 20px;font-size:.9rem;min-width:100px}.floating-compare-button .material-icons{font-size:1.1rem}.compare-section-bottom{margin-top:16px;margin-bottom:80px;padding:0 8px}.compare-section-content{padding:20px 16px;gap:16px}.compare-section-header{flex-direction:column;text-align:center;gap:12px}.compare-section-icon{font-size:2rem}.compare-section-title{font-size:1.2rem}.compare-section-description{font-size:.9rem}.compare-section-input-group{flex-direction:column;gap:12px}.compare-section-input{width:100%;padding:14px 16px;font-size:1rem}.compare-section-btn{width:100%;padding:14px 24px;font-size:1rem}.compare-section-error{font-size:.85rem;padding:10px 12px}}.silly-error-container{margin-top:24px;animation:sillyBounce .5s ease}@keyframes sillyBounce{0%,to{transform:translateY(0)}25%{transform:translateY(-10px)}50%{transform:translateY(0)}75%{transform:translateY(-5px)}}.silly-error-content{background:linear-gradient(135deg,#ff6b6b,#ee5a6f,#ff8e8e);color:#fff;padding:32px;border-radius:16px;box-shadow:0 8px 24px #ff6b6b4d;text-align:center;position:relative;overflow:hidden}.silly-error-content:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);animation:sillyShimmer 3s ease-in-out infinite}@keyframes sillyShimmer{0%,to{transform:rotate(0)}50%{transform:rotate(180deg)}}.silly-error-emoji{font-size:4rem;margin-bottom:16px;animation:sillyWiggle .5s ease infinite;display:inline-block}@keyframes sillyWiggle{0%,to{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}.silly-error-title{font-size:2rem;font-weight:800;margin-bottom:16px;text-shadow:2px 2px 4px rgba(0,0,0,.2);letter-spacing:-.5px}.silly-error-message{font-size:1.3rem;margin-bottom:16px;font-weight:600;line-height:1.4}.silly-error-message strong{background:#ffffff4d;padding:4px 12px;border-radius:8px;font-family:monospace;letter-spacing:2px;display:inline-block;margin:0 4px}.silly-error-subtitle{font-size:1.1rem;margin-bottom:20px;line-height:1.6;opacity:.95;max-width:600px;margin-left:auto;margin-right:auto}.silly-error-tip{font-size:1rem;margin-bottom:24px;font-style:italic;opacity:.9}.silly-error-tip em{font-weight:600;text-decoration:underline}.silly-error-close{padding:14px 32px;background:#fff;color:#ff6b6b;border:3px solid white;border-radius:50px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;box-shadow:0 4px 12px #0003;position:relative;z-index:1}.silly-error-close:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 6px 20px #0000004d;background:#fff5f5}.silly-error-close:active{transform:translateY(-1px) scale(1.02)}@media (max-width: 768px){.silly-error-content{padding:24px 16px}.silly-error-emoji{font-size:3rem;margin-bottom:12px}.silly-error-title{font-size:1.5rem;margin-bottom:12px}.silly-error-message{font-size:1.1rem;margin-bottom:12px}.silly-error-message strong{padding:3px 8px;font-size:.9rem;display:block;margin:8px 0}.silly-error-subtitle{font-size:.95rem;margin-bottom:16px}.silly-error-tip{font-size:.9rem;margin-bottom:20px}.silly-error-close{padding:12px 24px;font-size:1rem;width:100%}}.role-selection-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:20px}.role-selection-container{background:#fff;border-radius:16px;padding:48px;max-width:900px;width:100%;box-shadow:0 20px 60px #0000004d}.role-selection-title{font-size:2.5rem;color:#333;text-align:center;margin-bottom:32px;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.role-selection-content{display:flex;flex-direction:column;gap:32px}.role-selection-warning{background:#fff3cd;border:2px solid #ffc107;border-radius:12px;padding:20px;margin-bottom:8px}.role-selection-description{font-size:1.1rem;color:#666;text-align:center;line-height:1.6;margin:0}.role-selection-description+.role-selection-description{margin-top:12px}.role-selection-description strong{color:#333;font-weight:700}.role-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:24px}.role-option{background:#fff;border:3px solid #e0e0e0;border-radius:12px;padding:32px 24px;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}.role-option:hover{border-color:#764ba2;transform:translateY(-4px);box-shadow:0 8px 24px #764ba233}.role-option-icon{font-size:3rem;margin-bottom:8px}.role-option-title{font-size:1.5rem;font-weight:700;color:#333}.role-option-description{font-size:.95rem;color:#666;line-height:1.5}.role-option-warning{font-size:.85rem;color:#d97706;line-height:1.4;font-weight:600;margin-top:8px;padding-top:12px;border-top:1px solid #e0e0e0}@media (max-width: 768px){html,body{overflow:hidden;height:100%;position:fixed;width:100%}.role-selection-page{min-height:100vh;min-height:100dvh;height:100vh;height:100dvh;padding:8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.role-selection-container{padding:16px 12px;max-width:100%;width:100%;height:100%;display:flex;flex-direction:column;border-radius:12px;overflow:hidden}.role-selection-title{font-size:1.3rem;margin-bottom:12px;flex-shrink:0}.role-selection-content{flex:1;display:flex;flex-direction:column;gap:8px;overflow:hidden;min-height:0}.role-options{grid-template-columns:1fr;gap:8px;flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}.role-option{padding:12px 16px;gap:8px;flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0}.role-option-icon{font-size:2rem;margin-bottom:4px}.role-option-title{font-size:1.2rem}.role-option-description{font-size:.85rem;line-height:1.4}.role-option-warning{font-size:.75rem;padding-top:8px;margin-top:4px;line-height:1.3}}*{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:linear-gradient(135deg,#667eea,#764ba2);min-height:100vh;padding:20px}@media (max-width: 768px){body{padding:0;background:#f8f9fa}}#root{max-width:1200px;margin:0 auto}