body{margin:0;padding:0;background-color:#1a1a1a;color:#fff;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;line-height:1.4}.container,.friend-detail-container{max-width:1400px;margin:0 auto;padding:4rem 1rem 1rem}.main-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:2rem;position:relative;padding-left:1.5rem;padding-right:1.5rem}.header-left{flex:1;display:flex;align-items:center}.header-center{flex:1;display:flex;justify-content:center;align-items:center}.header-right{flex:1;display:flex;justify-content:flex-end;align-items:center;position:relative}header h1{font-size:1.75rem;color:#a855f7;margin:0}header{text-align:unset}header p{color:#9ca3af;font-size:1.125rem}.logout-button{position:absolute;top:0;right:0;background-color:transparent;color:#9ca3af;border:1px solid #4b5563;padding:.5rem 1rem;font-size:.875rem;transition:all .2s ease}.logout-button:hover{background-color:#4b5563;color:#fff}.card{background-color:#27272a;border-radius:.25rem;padding:1rem}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.card-header h2{margin:0;font-size:1.1rem;font-weight:600;color:#e5e7eb}.movie-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.5rem;margin-bottom:1rem}.movie-card{background-color:#3f3f46;border:1px solid #52525b;padding:.75rem;border-radius:.25rem;display:flex;flex-direction:column;gap:.5rem;transition:all .15s ease}.movie-card h3{margin:0;font-size:.875rem;font-weight:600;line-height:1.3;color:#e5e7eb}button{background-color:#7c3aed;color:#fff;border:none;padding:.375rem .75rem;border-radius:.25rem;cursor:pointer;font-size:.875rem;font-weight:500}button:hover{background-color:#6d28d9}.refresh-button{width:100%;padding:.5rem}.connect-button{padding:.75rem 1.5rem;font-size:.875rem}.auth-prompt{text-align:center;padding:1.5rem 0}.auth-prompt p{color:#9ca3af;margin-bottom:1rem;font-size:.875rem}.loading{text-align:center;padding:2rem 0;color:#9ca3af;font-size:.875rem}.empty-message{text-align:center;color:#9ca3af;padding:1.5rem 0;font-size:.875rem}.friend-ratings{margin-top:.5rem}.friend-ratings-list{display:flex;flex-direction:column;gap:.25rem}.friend-rating{background-color:#52525b;padding:.5rem;border-radius:.25rem;display:flex;align-items:center;gap:.5rem;position:relative}.friend-rating .friend-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.2)}.friend-avatar-large{width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.2);margin-right:1rem}.friend-rating-content{flex:1;display:flex;align-items:center;justify-content:space-between}.friend-rating .friend-name{font-size:.75rem;font-weight:500;color:#d1d5db;margin:0}.friend-rating-stars{display:flex;align-items:center}.friend-rating-stars .star,.friend-rating-stars .half-star-container{font-size:.75rem}.friend-ratings-status{text-align:center;color:#9ca3af;font-size:.875rem;padding:.75rem;margin-top:1rem;background-color:#27272a;border-radius:.375rem;animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}.header-loading{display:flex;align-items:center;justify-content:center;gap:.75rem;margin-top:1rem;height:0;opacity:0;overflow:hidden;transition:all .2s ease-in-out}.header-loading.visible{height:2rem;opacity:1}.header-loading span{color:#9ca3af;font-size:.875rem;white-space:nowrap}.spinner{width:1.5rem;height:1.5rem;border:2px solid #a855f7;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.compatibility-section{margin-bottom:1.5rem}.compatibility-section h2{margin:0 0 .75rem;font-size:1.1rem;font-weight:600;color:#e5e7eb}.compatibility-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:.5rem}.compatibility-row{background-color:#3f3f46;border:1px solid #52525b;border-radius:.375rem;padding:.75rem 1rem;display:flex;align-items:center;justify-content:space-between;transition:all .15s ease;cursor:pointer;position:relative;min-height:48px}.compatibility-row:hover,.compatibility-row.active{background-color:#52525b;border-color:#6b7280}.friend-info{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}.friend-avatar{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.2);flex-shrink:0}.friend-name{font-size:.875rem;font-weight:500;color:#e5e7eb;margin:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.compatibility-stats{display:flex;align-items:center;gap:1rem;flex-shrink:0}.shared-count{font-size:.75rem;color:#9ca3af;white-space:nowrap}.score-circle{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:.75rem;font-weight:600;flex-shrink:0}.score-circle:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:#27272a;border-radius:50%;z-index:1}.score-circle span{position:relative;z-index:2;font-size:.75rem;font-weight:600}.compatibility-tooltip{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#27272a;border-radius:.375rem;padding:1rem;width:250px;box-shadow:0 4px 15px #0000004d;z-index:10;margin-top:8px;max-height:80vh;overflow-y:auto;border:1px solid #3f3f46}.compatibility-tooltip:before{content:"";position:absolute;top:-8px;left:50%;transform:translate(-50%);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:8px solid #27272a}.tooltip-content h4{margin-top:0;margin-bottom:.75rem;text-align:center;color:#e5e7eb}.tooltip-stat{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.875rem}.tooltip-stat span:first-child{color:#9ca3af}.tooltip-stat span:last-child{font-weight:500}.tooltip-explanation{margin-top:.75rem;padding-top:.75rem;border-top:1px solid #4b5563;font-size:.875rem;color:#d1d5db}.tooltip-explanation p{margin:0}.tooltip-footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #4b5563;text-align:center}.tooltip-footer button{background-color:#7c3aed;color:#fff;border:none;padding:.5rem 1rem;border-radius:.375rem;font-size:.875rem;cursor:pointer;width:100%;transition:background-color .2s ease}.tooltip-footer button:hover{background-color:#6d28d9}.back-button-nav{background:none;border:none;color:#fff;cursor:pointer;padding:.25rem;font-size:.875rem;display:flex;align-items:center;transition:opacity .2s;font-weight:500}.back-button-nav:hover{opacity:.7;background:none;color:#fff}.friend-score-nav{display:flex;align-items:center}.score-circle-nav{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;font-size:.75rem;font-weight:600}.score-circle-nav:before{content:"";position:absolute;top:2px;left:2px;right:2px;bottom:2px;background:#a855f7;border-radius:50%;z-index:1}.score-circle-nav span{position:relative;z-index:2;color:#fff;font-size:.75rem;font-weight:600}.friend-detail-stats{margin-bottom:2rem}.stat-row{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #3f3f46;font-size:.875rem}.stat-row:last-child{border-bottom:none}.stat-row span:first-child{color:#9ca3af}.stat-row span:last-child{font-weight:500;color:#e5e7eb}.friend-detail-breakdown{margin-bottom:2rem}.breakdown-row{margin-bottom:1.25rem}.breakdown-row:last-child{margin-bottom:0}.breakdown-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem}.breakdown-row-header span:first-child{color:#9ca3af;font-size:.875rem}.breakdown-row-header span:last-child{color:#e5e7eb;font-size:.8125rem;font-weight:500}.friend-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:.75rem;margin-bottom:1.5rem}.stat-card{background-color:#3f3f46;padding:1rem;border-radius:.375rem;border:1px solid #52525b}.stat-card h3{margin-top:0;margin-bottom:1rem;color:#e5e7eb;font-size:1rem;font-weight:600}.stat-item{display:flex;justify-content:space-between;margin-bottom:.5rem;font-size:.875rem}.stat-item span:first-child{color:#9ca3af}.stat-item span:last-child{font-weight:500}.progress-bar-container{margin-bottom:.75rem}.progress-label{display:flex;justify-content:space-between;margin-bottom:.375rem;font-size:.8125rem}.progress-label span:first-child{color:#9ca3af}.progress-bar{height:8px;background-color:#52525b;border-radius:4px;overflow:hidden}.progress-fill{height:100%;background-color:#4caf50;border-radius:4px}.progress-fill.difference{background-color:#ef4444}.section-title{margin-top:0;margin-bottom:1rem;color:#e5e7eb;font-size:1rem;font-weight:600}.shared-movies-table{background-color:#3f3f46;border-radius:.375rem;border:1px solid #52525b;margin-bottom:1.5rem;overflow-x:auto;padding:0}.shared-movies-table table{width:100%;border-collapse:collapse;color:#e5e7eb}.shared-movies-table th,.shared-movies-table td{padding:.5rem .75rem;text-align:left;border-bottom:1px solid #52525b}.shared-movies-table th{color:#9ca3af;font-weight:500;text-transform:uppercase;font-size:.6875rem;letter-spacing:.05em}.shared-movies-table tr:last-child td{border-bottom:none}.shared-movies-table .high-difference{background-color:#ef44441a}.shared-movies-table .perfect-match{color:#4caf50;font-weight:500}.shared-movies-table th.sortable{cursor:pointer;-webkit-user-select:none;user-select:none;transition:background-color .2s ease}.shared-movies-table th.sortable:hover{background-color:#ffffff0d}.shared-movies-table .sort-icon{margin-left:.25rem;opacity:.5;font-size:.6rem}.shared-movies-table .perfect-agreement{background-color:#4caf5026}.shared-movies-table .high-disagreement{background-color:#ef444440}.difference-cell{text-align:center}.difference-with-direction{display:inline-flex;align-items:center;gap:.25rem}.difference-arrow{font-size:.75rem;font-weight:700}.difference-arrow.user-higher{color:#60a5fa}.difference-arrow.friend-higher{color:#f59e0b}.table-star-rating{justify-content:center}.movie-link{color:#60a5fa;text-decoration:none;transition:color .2s ease}.movie-link:hover{color:#93c5fd;text-decoration:underline}.compatibility-summary{margin-bottom:1rem}.final-score{display:flex;align-items:center;gap:.5rem;font-size:1rem}.score-label{color:#9ca3af}.score-value{font-size:1.5rem;font-weight:700;color:#a855f7}.algorithm-version{color:#6b7280;font-size:.875rem}.changelog-link{color:#60a5fa;text-decoration:none;transition:color .2s ease}.changelog-link:hover{color:#93c5fd;text-decoration:underline}.breakdown-toggle{background:none;border:1px solid #52525b;color:#9ca3af;padding:.25rem .75rem;font-size:.75rem;border-radius:.25rem;cursor:pointer;transition:all .2s ease}.breakdown-toggle:hover{background-color:#3f3f46;color:#e5e7eb}.breakdown-details{border-top:1px solid #3f3f46;padding-top:1rem;margin-top:1rem}.breakdown-section{margin-bottom:1.5rem}.breakdown-section h4{margin:0 0 .75rem;color:#e5e7eb;font-size:.9rem;font-weight:600}.breakdown-grid{display:grid;gap:.5rem}.breakdown-item{display:flex;justify-content:space-between;align-items:center;padding:.375rem 0;font-size:.875rem}.breakdown-item .label{color:#9ca3af}.breakdown-item .value{color:#e5e7eb;font-weight:500}.formula-breakdown{display:flex;flex-direction:column;gap:.375rem}.formula-line{display:flex;justify-content:space-between;align-items:center;font-size:.875rem;font-family:Courier New,monospace}.formula-line .calculation{color:#e5e7eb}.formula-line .explanation{color:#9ca3af;font-size:.75rem;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.formula-total{border-top:1px solid #3f3f46;padding-top:.375rem;margin-top:.375rem}.formula-total .calculation{color:#e5e7eb;font-weight:600;font-family:Courier New,monospace;font-size:.875rem}.formula-result{padding:.5rem;background-color:#3f3f46;border-radius:.25rem;margin-top:.5rem}.formula-result .calculation{color:#a855f7;font-weight:600;font-family:Courier New,monospace;font-size:.875rem}.adjustments{display:flex;flex-direction:column;gap:.5rem}.adjustment-item{display:flex;align-items:center;gap:.75rem;font-size:.875rem}.adjustment-item .label{color:#9ca3af;min-width:120px}.adjustment-item .value{color:#e5e7eb;font-weight:600;font-family:Courier New,monospace;min-width:40px}.adjustment-item .formula{color:#6b7280;font-size:.75rem;font-family:Courier New,monospace}.final-calculation{background-color:#27272a;padding:.75rem;border-radius:.25rem;border:1px solid #3f3f46}.calculation-line{font-family:Courier New,monospace;font-size:1rem;font-weight:600;color:#a855f7;text-align:center}.calculation-note{font-size:.75rem;color:#9ca3af;text-align:center;margin-top:.25rem}.changelog-content{line-height:1.6}.changelog-intro{color:#d1d5db;font-size:1rem;margin-bottom:2rem;padding:1rem;background-color:#3f3f46;border-radius:.375rem;border-left:3px solid #a855f7}.changelog-entry{margin-bottom:3rem;border:1px solid #3f3f46;border-radius:.5rem;overflow:hidden}.version-header{display:flex;align-items:center;gap:1rem;padding:1rem 1.5rem;background-color:#27272a;border-bottom:1px solid #3f3f46}.version-header h3{margin:0;color:#e5e7eb;font-size:1.25rem;font-weight:700}.version-date{color:#9ca3af;font-size:.875rem}.version-status{padding:.25rem .75rem;border-radius:1rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.version-status.current{background-color:#065f46;color:#34d399}.version-status.legacy{background-color:#451a03;color:#fb923c}.version-details{padding:1.5rem}.version-details h4{color:#e5e7eb;font-size:1rem;font-weight:600;margin:1.5rem 0 .75rem}.version-details h4:first-child{margin-top:0}.version-details ul{margin:.75rem 0;padding-left:1.5rem;color:#d1d5db}.version-details li{margin-bottom:.5rem}.version-details li strong{color:#e5e7eb}.formula-section{background-color:#1f2937;border-radius:.5rem;padding:1.5rem;margin:1rem 0;border:1px solid #374151}.formula-step{margin-bottom:1.5rem}.formula-step:last-child{margin-bottom:0}.formula-step strong{color:#e5e7eb;display:block;margin-bottom:.5rem}.formula-step ul{margin-top:.5rem;margin-bottom:.75rem}.formula-code{background-color:#111827;color:#f59e0b;padding:.5rem 1rem;border-radius:.25rem;font-family:Courier New,monospace;font-size:.875rem;margin:.5rem 0;border:1px solid #374151}.formula-final{background-color:#7c2d12;padding:1rem;border-radius:.375rem;margin-top:1.5rem;text-align:center}.formula-final strong{color:#fed7aa;font-size:1rem}.formula-final code{color:#fdba74;font-size:1rem;font-weight:600}.changelog-footer{margin-top:3rem;padding-top:2rem;border-top:1px solid #3f3f46}.changelog-footer h4{color:#e5e7eb;font-size:1rem;font-weight:600;margin-bottom:.75rem}.changelog-footer p{color:#d1d5db;margin-bottom:1rem}.changelog-footer ul{color:#9ca3af;padding-left:1.5rem}.changelog-footer li{margin-bottom:.375rem}.table-star-rating .stars{gap:.1rem}.table-star-rating .star{font-size:.875rem}.overview-section{display:flex;gap:1rem;margin-bottom:1rem}.overview-card,.breakdown-card{flex:1}.rating-breakdown-chart{display:flex;align-items:center;gap:1.5rem;padding:1rem 0}.pie-chart-container{flex-shrink:0}.pie-chart{filter:drop-shadow(0 2px 4px rgba(0,0,0,.1))}.pie-slice{transition:opacity .2s ease}.pie-slice:hover{opacity:.8}.chart-legend{flex:1;display:flex;flex-direction:column;gap:.5rem}.legend-item{display:flex;align-items:center;gap:.5rem;font-size:.875rem}.legend-color{width:12px;height:12px;border-radius:2px;flex-shrink:0}.legend-label{color:#e5e7eb}@media (max-width: 768px){.overview-section{flex-direction:column;gap:1rem}.rating-breakdown-chart{flex-direction:column;align-items:center;text-align:center;gap:1rem}}@media (max-width: 768px){.compatibility-tooltip{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:300px;z-index:1000}.compatibility-tooltip:before{display:none}}.settings-button{background:none;border:none;color:#9ca3af;cursor:pointer;padding:.5rem;font-size:1.25rem;transition:opacity .2s ease;outline:none}.settings-button:hover{opacity:.7;color:#9ca3af;background:none;box-shadow:none}.settings-menu{position:absolute;top:100%;right:0;background-color:#27272a;border-radius:.5rem;padding:.5rem;margin-top:.5rem;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;z-index:10;min-width:150px}.settings-menu button{display:block;width:100%;text-align:left;padding:.5rem 1rem;background:none;border:none;color:#e5e7eb;cursor:pointer;font-size:.875rem;transition:background-color .2s ease}.settings-menu button:hover{background-color:#3f3f46}.settings-menu button:not(:last-child){border-bottom:1px solid #3f3f46}.menu-bar{width:100vw;background:#a855f7;color:#fff;position:fixed;top:0;left:0;z-index:100;height:48px;display:flex;align-items:center}.menu-bar-content{width:100%;display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px}.menu-title{font-size:1.1rem;font-weight:600;color:#fff;letter-spacing:.01em}.menu-actions{display:flex;align-items:center;gap:1rem}.settings-gear-container{position:relative;display:flex;align-items:center}.settings-button{background:none;border:none;color:#fff;cursor:pointer;padding:.25rem;font-size:1.5rem;display:flex;align-items:center;transition:opacity .2s}.settings-button:hover{opacity:.7}.settings-button svg{display:block;stroke:#fff;fill:none}.menu-spinner{width:1.5rem;height:1.5rem;border:2px solid #fff;border-top-color:transparent;border-radius:50%;animation:spin 1s linear infinite;margin-right:.5rem}.settings-tooltip{position:absolute;right:0;top:120%;background:#27272a;color:#fff;padding:.5rem 1rem;border-radius:.375rem;font-size:.95rem;white-space:nowrap;box-shadow:0 4px 16px #0000002e;z-index:10;pointer-events:none;opacity:.95}.menu-loading-text{color:#fff;font-size:.75rem;margin-right:.5rem;white-space:nowrap;opacity:.95;letter-spacing:.01em}.app-loading-overlay{position:fixed;top:48px;left:0;width:100vw;height:calc(100vh - 48px);background:rgba(40,40,40,.45);z-index:100;pointer-events:all;border-radius:0;opacity:1;transition:opacity .2s ease-in-out}@media (hover: none) and (pointer: coarse){.compatibility-tooltip{display:none!important}}@media (max-width: 600px){.container,.friend-detail-container{max-width:100vw;padding-left:.5rem;padding-right:.5rem;padding-top:4rem;padding-bottom:0}.card{border-radius:.25rem}.movie-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.compatibility-list{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.375rem}.compatibility-row{padding:.5rem .75rem}.friend-name{font-size:.8125rem}.shared-count{font-size:.6875rem}.score-circle{width:24px;height:24px}.compatibility-stats{gap:.75rem}}.star-rating{display:flex;align-items:center;gap:.375rem}.stars{display:flex;align-items:center;gap:.0625rem}.star{position:relative;font-size:.875rem;line-height:1;color:#6b7280}.star.filled{color:#fbbf24}.half-star-container{position:relative;display:inline-block;line-height:1}.half-star-empty{color:#6b7280;line-height:1;font-size:inherit}.half-star-filled{position:absolute;top:0;left:0;width:50%;overflow:hidden;color:#fbbf24;line-height:1;font-size:inherit}.rating-text{font-size:.75rem;color:#9ca3af;font-weight:500}.friend-rating-stars,.friend-rating-stars .star,.friend-rating-stars .half-star-container{font-size:.75rem}