.home-page{min-height:100vh;background-color:var(--color-neutral-50)}.hero-section{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;min-height:680px;overflow:hidden}.hero-bg{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0}.hero-bg-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.hero-bg-gradient{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to top,#0f1419d9,#0f141966 40%,#0f141926)}.scroll-hint{position:absolute;bottom:20px;left:50%;transform:translate(-50%);z-index:20;animation:fadeUp .6s ease-out 1.2s both}.scroll-text{font-size:10px;font-weight:400;letter-spacing:.15em;color:#ffffff80}.scroll-mouse{width:20px;height:32px;border-radius:10px;border:1.5px solid rgba(255,255,255,.35);position:relative}.scroll-dot{width:3px;height:6px;border-radius:2px;background:#fff9;position:absolute;left:50%;top:6px;transform:translate(-50%);animation:scrollDotBounce 1.8s ease-in-out 1.6s infinite}.version-badge{position:absolute;top:4px;right:4px;z-index:20;padding:4px 10px;font-size:10px;font-weight:500;letter-spacing:.05em;border-radius:9999px;background:#ffffff1f;color:#ffffffb3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.18)}.hero-content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 12px}.glass-card{position:relative;width:100%;max-width:900px;padding:36px 56px;text-align:center;background:#ffffff2e;backdrop-filter:blur(60px) saturate(180%) brightness(1.05);-webkit-backdrop-filter:blur(60px) saturate(180%) brightness(1.05);border:.5px solid rgba(255,255,255,.4);border-radius:24px;box-shadow:0 0 0 .5px #ffffff1a,0 4px 16px #00000014,0 1px 3px #0000000f;animation:glassSlideUp .8s var(--transition-spring) .5s both;overflow:hidden}.glass-card:before{content:"";position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.25) 0%,rgba(255,255,255,.06) 40%,transparent 100%);border-radius:24px 24px 0 0;pointer-events:none}.glass-card:after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 10%,rgba(255,255,255,.15) 50%,transparent 90%);pointer-events:none}.logo-area{margin-bottom:24px}.logo-ring{display:inline-flex;align-items:center;justify-content:center;width:80px;height:80px;border-radius:50%;background:#ffffff26;border:.5px solid rgba(255,255,255,.35);box-shadow:0 2px 12px #0000001a,inset 0 1px #fff3;backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);margin-bottom:16px}.logo-text{font-family:var(--font-display);font-size:32px;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--color-neutral-0)}.school-name{font-size:14px;font-weight:400;letter-spacing:.1em;color:#ffffffd9}.hero-title{font-family:var(--font-display);font-size:36px;font-weight:700;letter-spacing:var(--tracking-tight);line-height:var(--leading-tight);color:var(--color-neutral-0);margin-bottom:12px}.hero-tagline{font-size:16px;font-weight:400;color:#fffc;margin-bottom:32px}.school-motto{font-size:14px;font-weight:400;letter-spacing:.12em;color:#ffffff8c;margin-bottom:32px}.cta-btn-wrapper{margin-bottom:16px}.cta-btn{width:100%;padding:14px 32px;font-size:16px;font-weight:600;letter-spacing:var(--tracking-tight);background-color:var(--color-primary);color:var(--color-neutral-0);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast),transform var(--transition-fast);animation:ctaPulse 2.5s ease-in-out 1.3s infinite}.cta-btn:hover{background-color:var(--color-primary-dark)}.cta-btn:active{transform:scale(.97);animation:none}.learn-more-btn{display:inline-block;padding:8px 16px;font-size:14px;font-weight:400;color:#fff9;background:none;border:none;cursor:pointer;transition:opacity var(--transition-fast)}.learn-more-btn:hover{opacity:.8}.intro-section{padding:48px 20px 100px;background-color:var(--color-neutral-50)}.section-header{text-align:center;margin-bottom:40px}.section-title{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--color-neutral-800);margin-bottom:12px}.section-desc{font-size:14px;font-weight:400;line-height:var(--leading-relaxed);color:var(--color-neutral-500)}.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:32px}.feature-card{background-color:var(--color-neutral-0);border-radius:var(--radius-xl);padding:20px 16px;border:1px solid var(--color-neutral-100);box-shadow:var(--shadow-sm);opacity:0;transform:translateY(20px);transition:opacity .5s ease,transform .5s ease}.feature-card.visible{opacity:1;transform:translateY(0)}.feature-icon{width:40px;height:40px;border-radius:12px;background-color:var(--color-primary-lightest);display:flex;align-items:center;justify-content:center;margin-bottom:12px}.feature-title{font-size:14px;font-weight:600;color:var(--color-neutral-800);margin-bottom:6px}.feature-desc{font-size:12px;font-weight:400;line-height:var(--leading-relaxed);color:var(--color-neutral-500)}.steps-section{margin-bottom:40px}.steps-title{font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:var(--tracking-tight);color:var(--color-neutral-800);text-align:center;margin-bottom:24px}.step-list{display:flex;flex-direction:column;gap:0}.step-item{display:flex;align-items:flex-start;gap:16px;padding:16px 0;opacity:0;transform:translate(-16px);transition:opacity .4s ease,transform .4s ease}.step-item.visible{opacity:1;transform:translate(0)}.step-number{flex-shrink:0;width:32px;height:32px;border-radius:50%;background-color:var(--color-primary);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--color-neutral-0)}.step-content{flex:1}.step-title{font-size:14px;font-weight:600;color:var(--color-neutral-800);margin-bottom:4px}.step-desc{font-size:12px;font-weight:400;line-height:var(--leading-relaxed);color:var(--color-neutral-500)}.step-connector{margin-left:15px;width:2px;height:16px;background-color:var(--color-neutral-200)}.bottom-cta{text-align:center}.bottom-cta-btn{padding:14px 40px;font-size:16px;font-weight:600;letter-spacing:var(--tracking-tight);background-color:var(--color-primary);color:var(--color-neutral-0);border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.bottom-cta-btn:hover{background-color:var(--color-primary-dark)}.bottom-cta-btn:active{transform:scale(.98)}.cta-hint{font-size:12px;font-weight:400;color:var(--color-neutral-400);margin-top:12px}.name-modal-overlay,.existing-modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background-color:#00000080;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}.name-modal{width:90%;max-width:360px;background-color:var(--color-neutral-0);border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow-lg);animation:slideUp .3s ease}.modal-title{font-size:18px;font-weight:600;color:var(--color-neutral-800);margin-bottom:8px}.modal-desc{font-size:14px;color:var(--color-neutral-500);margin-bottom:20px}.name-input-group,.user-select-group{display:flex;flex-direction:column;gap:12px}.name-input{width:100%;padding:12px 16px;font-size:15px;border:1.5px solid var(--color-neutral-200);border-radius:var(--radius-md);background-color:var(--color-neutral-50);color:var(--color-neutral-800);transition:border-color var(--transition-fast)}.name-input:focus{border-color:var(--color-primary)}.user-select{width:100%;padding:12px 16px;font-size:15px;border:1.5px solid var(--color-neutral-200);border-radius:var(--radius-md);background-color:var(--color-neutral-50);color:var(--color-neutral-800);cursor:pointer;transition:border-color var(--transition-fast)}.user-select:focus{border-color:var(--color-primary)}.modal-switch-btn{margin-top:16px;width:100%;padding:10px 16px;font-size:14px;font-weight:500;color:var(--color-primary);background:none;border:1px solid var(--color-primary-100);border-radius:var(--radius-md);cursor:pointer;transition:background var(--transition-fast)}.modal-switch-btn:hover{background-color:var(--color-primary-50)}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.gap-1{gap:4px}@media (min-width: 640px){.glass-card{max-width:600px}}@media (min-width: 768px){.glass-card{max-width:720px;padding:36px 64px}}@media (min-width: 1024px){.glass-card{max-width:900px;padding:36px 72px}}@media (prefers-reduced-motion: reduce){.hero-bg,.glass-card,.cta-btn,.scroll-hint,.scroll-dot{animation:none}.glass-card,.scroll-hint{opacity:1}.feature-card,.step-item{opacity:1;transform:none}}.survey-container{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-neutral-50);position:relative}.survey-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;height:56px}.survey-back-btn{width:40px;height:40px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.survey-back-btn:hover:not(:disabled){background-color:var(--color-primary-lightest)}.survey-back-btn:disabled{opacity:.4;cursor:not-allowed}.survey-title{flex:1;text-align:center;font-size:var(--text-base);font-weight:600;color:var(--color-neutral-800);letter-spacing:var(--tracking-tight)}.survey-step{font-size:var(--text-sm);font-weight:500;color:var(--color-primary);min-width:60px;text-align:right}.survey-progress-bar{padding:0 16px;margin-bottom:16px}.progress-track{height:4px;border-radius:var(--radius-full);background-color:var(--color-neutral-100);overflow:hidden}.progress-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-primary),var(--color-primary-lighter));transition:width .8s cubic-bezier(.4,0,.2,1)}.survey-content{flex:1;padding:0 16px 120px;overflow-y:auto}.survey-welcome-card{background-color:var(--color-neutral-0);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-neutral-100);padding:32px 24px;text-align:center;animation:slideUpFade .3s ease-out}.welcome-icon{font-size:48px;margin-bottom:16px}.welcome-title{font-size:var(--text-xl);font-weight:700;color:var(--color-neutral-800);margin-bottom:8px;letter-spacing:var(--tracking-tight)}.welcome-desc{font-size:var(--text-sm);color:var(--color-neutral-500);line-height:var(--leading-relaxed);margin-bottom:24px}.name-input-group{display:flex;flex-direction:column;gap:12px}.name-input{width:100%;padding:12px 16px;font-size:var(--text-base);border:1.5px solid var(--color-neutral-200);border-radius:var(--radius-md);background-color:var(--color-neutral-50);color:var(--color-neutral-800);transition:border-color var(--transition-fast)}.name-input:focus{border-color:var(--color-primary);outline:none}.name-input::placeholder{color:var(--color-neutral-400)}.survey-question-card{background-color:var(--color-neutral-0);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-neutral-100);padding:24px;animation:slideUpFade .3s cubic-bezier(.4,0,.2,1)}.slide-in-right{animation:slideInRight .35s ease}@keyframes slideInRight{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.slide-in-left{animation:slideInLeft .35s ease}@keyframes slideInLeft{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}.question-header{display:flex;align-items:flex-start;gap:12px;margin-bottom:8px}.question-number{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--radius-full);background-color:var(--color-primary);color:var(--color-neutral-0);font-size:var(--text-sm);font-weight:700;flex-shrink:0}.question-text{font-size:var(--text-xl);font-weight:700;line-height:var(--leading-tight);color:var(--color-neutral-800);margin:0}.question-hint{font-size:var(--text-sm);color:var(--color-neutral-400);margin-bottom:20px;padding-left:48px}.flow-options{display:flex;flex-direction:column;gap:12px}.flow-option-label{cursor:pointer;animation:optionAppear .3s cubic-bezier(.4,0,.2,1) forwards;opacity:0}.flow-option-inner{display:flex;align-items:center;gap:12px;padding:16px;background-color:var(--color-neutral-0);border:2px solid var(--color-neutral-200);border-radius:var(--radius-lg);transition:all var(--transition-base)}.flow-option-label:hover .flow-option-inner{border-color:var(--color-primary-light);transform:scale(1.01)}.flow-option-label:active .flow-option-inner{transform:scale(.99)}.flow-option-label.selected .flow-option-inner{background-color:var(--color-primary-lightest);border-color:var(--color-primary)}.option-icon{width:28px;height:28px;border-radius:var(--radius-full);background-color:var(--color-neutral-100);flex-shrink:0;transition:all var(--transition-base)}.flow-option-label.selected .option-icon{background-color:var(--color-primary)}.option-text{flex:1;font-size:var(--text-base);font-weight:500;color:var(--color-neutral-700);transition:color var(--transition-base)}.flow-option-label.selected .option-text{color:var(--color-primary)}.radio-indicator{width:20px;height:20px;border-radius:var(--radius-full);border:2px solid var(--color-neutral-300);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition-base)}.flow-option-label.selected .radio-indicator{border-color:var(--color-primary)}.radio-inner{width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-primary)}.multi-options{display:flex;flex-direction:column;gap:12px}.multi-option-label{cursor:pointer;animation:optionAppear .3s cubic-bezier(.4,0,.2,1) forwards;opacity:0}.multi-option-inner{display:flex;align-items:center;gap:12px;padding:16px;background-color:var(--color-neutral-0);border:2px solid var(--color-neutral-200);border-radius:var(--radius-lg);transition:all var(--transition-base)}.multi-option-label:hover .multi-option-inner{border-color:var(--color-primary-light);transform:scale(1.01)}.multi-option-label:active .multi-option-inner{transform:scale(.99)}.multi-option-label.selected .multi-option-inner{background-color:var(--color-primary-lightest);border-color:var(--color-primary)}.multi-option-label.selected .option-text{color:var(--color-primary)}.multi-check{width:20px;height:20px;border-radius:var(--radius-full);border:2px solid var(--color-neutral-300);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition-base)}.multi-option-label.selected .multi-check{border-color:var(--color-primary)}.check-inner{width:10px;height:10px;border-radius:var(--radius-full);background-color:var(--color-primary)}.custom-section{margin-top:24px;padding-top:24px;border-top:1px solid var(--color-neutral-100)}.custom-trigger{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-primary)}.custom-input-area{margin-top:12px}.custom-textarea{width:100%;padding:14px 16px;border:1.5px solid var(--color-neutral-200);border-radius:var(--radius-lg);font-size:var(--text-sm);resize:none;background-color:var(--color-neutral-50);transition:border-color var(--transition-fast);line-height:1.5}.custom-textarea:focus{border-color:var(--color-primary);outline:none}.survey-action-bar{position:fixed;bottom:70px;left:50%;transform:translate(-50%);width:100%;max-width:480px;display:flex;align-items:center;justify-content:center;gap:12px;padding:12px 16px;background-color:var(--color-neutral-50)}.survey-action-bar .btn{flex:1;height:44px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:500}.priority-card{background-color:var(--color-neutral-0);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);border:1px solid var(--color-neutral-100);padding:24px}.priority-title{font-size:var(--text-xl);font-weight:700;color:var(--color-neutral-800);margin-bottom:8px;letter-spacing:var(--tracking-tight)}.priority-desc{font-size:var(--text-sm);color:var(--color-neutral-500);line-height:var(--leading-relaxed);margin-bottom:8px}.priority-hint{font-size:var(--text-sm);color:var(--color-primary);font-weight:500;margin-bottom:24px}.priority-selected{margin-bottom:20px;background-color:var(--color-primary-50);border-radius:var(--radius-xl);padding:16px;border:1px solid var(--color-primary-100)}.priority-section-label{font-size:var(--text-xs);font-weight:600;color:var(--color-neutral-500);margin-bottom:12px;letter-spacing:.5px}.priority-ranked-list{display:flex;flex-direction:column;gap:8px}.priority-ranked-item{display:flex;align-items:center;gap:12px;padding:12px 16px;background-color:var(--color-neutral-0);border-radius:var(--radius-lg);border:1px solid var(--color-neutral-100)}.priority-rank-num{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));color:#fff;display:flex;align-items:center;justify-content:center;font-size:var(--text-sm);font-weight:600;flex-shrink:0}.priority-ranked-content{display:flex;align-items:center;gap:10px;flex:1}.priority-ranked-icon{font-size:20px}.priority-ranked-label{font-size:var(--text-sm);font-weight:500;color:var(--color-neutral-800)}.rank-btn-remove{width:28px;height:28px;border:1px solid var(--state-error);border-radius:var(--radius-md);background:transparent;font-size:var(--text-xs);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--state-error);transition:all var(--transition-fast)}.rank-btn-remove:hover{background-color:var(--state-error-bg)}.priority-unselected{margin-bottom:24px}.priority-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.priority-card-btn{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:16px;border:1.5px solid var(--color-neutral-200);border-radius:var(--radius-lg);background-color:var(--color-neutral-50);cursor:pointer;transition:all var(--transition-fast)}.priority-card-btn:hover:not(:disabled){border-color:var(--color-primary);background-color:var(--color-primary-50)}.priority-card-btn:disabled{opacity:.5;cursor:not-allowed}.priority-card-icon{font-size:24px}.priority-card-label{font-size:var(--text-sm);font-weight:500;color:var(--color-neutral-800)}.priority-footer{display:flex;align-items:center;justify-content:center;gap:16px;padding-top:24px;border-top:1px solid var(--color-neutral-100)}.btn-text{background:none;border:none;color:var(--color-primary);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:opacity var(--transition-fast)}.btn-text:hover{opacity:.8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media (prefers-reduced-motion: reduce){.survey-welcome-card,.survey-question-card,.flow-option-label,.multi-option-label,.progress-fill{animation:none}.flow-option-label,.multi-option-label{opacity:1}}.match-container{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;background-color:var(--color-neutral-50)}.match-header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;height:56px}.match-back-btn{width:40px;height:40px;border-radius:var(--radius-md);border:none;background:transparent;color:var(--color-primary);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--transition-fast)}.match-back-btn:hover{background-color:var(--color-primary-lightest)}.match-title{flex:1;text-align:center;font-size:var(--text-base);font-weight:600;color:var(--color-neutral-800);letter-spacing:var(--tracking-tight)}.match-header-placeholder{width:40px}.match-content{flex:1;padding:0 16px 120px;overflow-y:auto}.match-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;gap:16px}.loading-spinner{width:48px;height:48px;border:4px solid var(--color-neutral-200);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.match-loading p{font-size:var(--text-sm);color:var(--color-neutral-500)}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:60px 24px;text-align:center}.empty-icon{font-size:64px;margin-bottom:16px}.empty-state h2{font-size:var(--text-xl);font-weight:700;color:var(--color-neutral-800);margin-bottom:8px}.empty-state p{font-size:var(--text-sm);color:var(--color-neutral-500);margin-bottom:24px}.match-overview-card{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);border-radius:var(--radius-xl);padding:24px;margin-bottom:20px;color:#fff;animation:slideUpFade .4s ease-out}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.overview-header{display:flex;align-items:center;gap:20px;margin-bottom:16px}.overview-score{flex-shrink:0}.score-ring-container{position:relative;display:inline-flex;align-items:center;justify-content:center}.score-ring-svg{transform:rotate(-90deg)}.score-ring-bg{fill:none;stroke:#fff3}.score-ring-progress{fill:none;stroke-linecap:round;transition:stroke-dashoffset 1.2s cubic-bezier(.4,0,.2,1)}.score-ring-content{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center}.score-value{font-size:36px;font-weight:700;line-height:1}.score-label{font-size:var(--text-xs);opacity:.9;margin-top:4px}.overview-info{flex:1;display:flex;flex-direction:column;gap:6px}.overview-avatar{width:56px;height:56px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:var(--text-xl);font-weight:600;margin-bottom:4px}.overview-name{font-size:var(--text-lg);font-weight:600;margin:0}.overview-mbti{font-size:var(--text-xs);opacity:.8;margin:0}.overview-desc{margin:0;font-size:var(--text-sm);opacity:.9}.overview-desc strong{color:gold}.compatibility-section{margin-bottom:20px}.section-title{font-size:var(--text-base);font-weight:600;color:var(--color-neutral-800);margin-bottom:12px;letter-spacing:var(--tracking-tight)}.compatibility-grid{display:flex;flex-direction:column;gap:12px}.compatibility-item{display:flex;align-items:center;gap:12px;padding:16px;background-color:var(--color-neutral-0);border-radius:var(--radius-lg);border:1px solid var(--color-neutral-100);animation:optionAppear .3s cubic-bezier(.4,0,.2,1) forwards;opacity:0}.compatibility-icon{font-size:24px;flex-shrink:0}.compatibility-info{flex:1;display:flex;flex-direction:column;gap:6px}.compatibility-label{font-size:var(--text-sm);font-weight:500;color:var(--color-neutral-700)}.compatibility-bar-track{height:6px;border-radius:var(--radius-full);background-color:var(--color-neutral-100);overflow:hidden}.compatibility-bar-fill{height:100%;border-radius:var(--radius-full);background:linear-gradient(90deg,var(--color-primary),var(--color-primary-light));transition:width 1s cubic-bezier(.4,0,.2,1)}.compatibility-score{font-size:var(--text-xs);font-weight:600;color:var(--color-primary);align-self:flex-end}.match-list-section{margin-bottom:20px}.match-list{display:flex;flex-direction:column;gap:10px}.match-card{display:flex;align-items:center;gap:12px;padding:16px;background-color:var(--color-neutral-0);border-radius:var(--radius-lg);border:1px solid var(--color-neutral-100);cursor:pointer;transition:all var(--transition-base)}.match-card:hover{border-color:var(--color-primary);transform:scale(1.01)}.match-card.selected{border-color:var(--color-primary);background-color:var(--color-primary-lightest)}.match-card-rank{width:28px;height:28px;display:flex;align-items:center;justify-content:center}.rank-gold,.rank-silver,.rank-bronze{font-size:20px}.rank-number{width:28px;height:28px;border-radius:50%;background-color:var(--color-neutral-100);display:flex;align-items:center;justify-content:center;font-size:var(--text-xs);font-weight:600;color:var(--color-neutral-500)}.match-card-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));display:flex;align-items:center;justify-content:center;font-size:var(--text-base);font-weight:600;color:#fff}.match-card-info{flex:1;display:flex;flex-direction:column;gap:6px}.match-card-header{display:flex;align-items:center;justify-content:space-between}.match-card-name{font-size:var(--text-base);font-weight:600;color:var(--color-neutral-800)}.match-card-score{font-size:var(--text-sm);font-weight:700}.match-card-score.high{color:#2b8c7e}.match-card-score.medium{color:#06c}.match-card-score.low{color:#c94040}.match-card-dimensions{display:flex;gap:12px}.match-card-dim{font-size:var(--text-xs);color:var(--color-neutral-500)}.match-card-arrow{font-size:var(--text-xs);color:var(--color-neutral-400);transition:transform var(--transition-base)}.match-card.selected .match-card-arrow{transform:rotate(180deg)}.match-detail-card{background-color:var(--color-neutral-0);border-radius:var(--radius-xl);border:1px solid var(--color-neutral-100);padding:24px;margin-bottom:20px;animation:slideDownFade .3s ease-out}@keyframes slideDownFade{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.detail-header{display:flex;align-items:center;gap:12px;margin-bottom:20px}.detail-avatar{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,var(--color-primary),var(--color-primary-light));display:flex;align-items:center;justify-content:center;font-size:var(--text-lg);font-weight:600;color:#fff}.detail-info{flex:1}.detail-name{font-size:var(--text-lg);font-weight:600;color:var(--color-neutral-800);margin:0 0 4px}.detail-compatibility{font-size:var(--text-sm);color:var(--color-primary);font-weight:500;margin:0}.detail-section{margin-bottom:20px}.detail-section-title{font-size:var(--text-sm);font-weight:600;color:var(--color-neutral-700);margin-bottom:12px}.detail-comparison{display:flex;flex-direction:column;gap:12px}.comparison-row{display:flex;flex-direction:column;gap:8px}.comparison-label{font-size:var(--text-xs);font-weight:500;color:var(--color-neutral-500)}.comparison-values{display:flex;align-items:center;gap:8px}.comparison-value{flex:1;padding:10px 12px;border-radius:var(--radius-md);font-size:var(--text-sm);text-align:center}.comparison-value.mine{background-color:var(--color-primary-lightest);color:var(--color-primary)}.comparison-value.other{background-color:var(--color-neutral-100);color:var(--color-neutral-700)}.comparison-arrow{font-size:var(--text-xs);color:var(--color-neutral-400);flex-shrink:0}.detail-actions{display:flex;gap:12px}.detail-actions .btn{flex:1;height:40px}.match-footer{display:flex;gap:12px;padding-top:20px;border-top:1px solid var(--color-neutral-100)}.match-footer .btn{flex:1;height:44px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:500}.btn{padding:12px 24px;border-radius:var(--radius-md);font-size:var(--text-sm);font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:none}.btn-primary:hover:not(:disabled){background-color:var(--color-primary-dark)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary:hover:not(:disabled){background-color:var(--color-primary-lightest)}.btn-lg{padding:14px 32px;font-size:var(--text-base)}@media (prefers-reduced-motion: reduce){.match-overview-card,.compatibility-item,.match-detail-card,.loading-spinner,.compatibility-bar-fill{animation:none}.compatibility-item{opacity:1}}.profile-container{max-width:480px;margin:0 auto;min-height:100vh;background-color:var(--color-neutral-50);position:relative}.profile-header{background:linear-gradient(180deg,var(--color-primary-lightest) 0%,var(--color-neutral-0) 100%);border-radius:0 0 24px 24px;padding:32px 24px 24px;animation:fadeInScale .3s ease-out both}.profile-header-inner{display:flex;flex-direction:column;align-items:center;text-align:center}.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--color-primary-100);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--color-primary);font-family:var(--font-body)}.profile-name{margin-top:12px;font-size:var(--text-xl);font-weight:700;color:var(--color-neutral-800);font-family:var(--font-body);letter-spacing:var(--tracking-tight)}.profile-meta{margin-top:4px;font-size:var(--text-sm);color:var(--color-neutral-500);font-family:var(--font-body)}.profile-status{margin-top:8px;display:inline-flex;align-items:center;padding:2px 10px;border-radius:var(--radius-full);background:var(--color-neutral-100);color:var(--color-neutral-500);font-size:12px;font-weight:600;font-family:var(--font-body)}.profile-status.completed{background:var(--color-accent-lightest);color:var(--color-accent)}.stats-row{margin:16px 16px 0;background:var(--color-neutral-0);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);padding:0;display:flex;position:relative;animation:slideUp .35s ease-out .2s both}.stat-item{flex:1;text-align:center;padding:16px 8px}.stat-value{font-size:20px;font-weight:700;color:var(--color-primary);font-family:var(--font-body)}.stat-value.accent{color:var(--color-accent)}.stat-label{font-size:12px;color:var(--color-neutral-500);margin-top:2px;font-family:var(--font-body)}.stat-divider{width:1px;background:var(--color-neutral-100);align-self:stretch;margin:12px 0}.list-section{margin:16px 16px 0}.section-label{font-size:13px;font-weight:600;color:var(--color-neutral-400);text-transform:uppercase;letter-spacing:.05em;padding:16px 16px 8px 4px;font-family:var(--font-body)}.list-card{background:var(--color-neutral-0);border-radius:var(--radius-xl);box-shadow:var(--shadow-sm);overflow:hidden}.list-row{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--color-neutral-100);min-height:48px;cursor:pointer;transition:background var(--transition-fast)}.list-row:last-child{border-bottom:none}.list-row:hover{background:var(--color-neutral-50)}.list-row.danger{cursor:pointer}.list-row.danger .list-icon{color:var(--state-error)}.list-row.danger .list-label{color:var(--state-error);font-weight:500}.list-icon{color:var(--color-neutral-400);flex-shrink:0}.list-label{margin-left:12px;font-size:15px;color:var(--color-neutral-700);font-family:var(--font-body);flex:1}.list-value{margin-left:auto;font-size:14px;color:var(--color-neutral-500);font-family:var(--font-body)}.list-arrow{margin-left:8px;color:var(--color-neutral-300);flex-shrink:0}.list-row-left{flex:1;min-width:0}.list-subtext{display:block;font-size:13px;color:var(--color-neutral-500);margin-top:2px;font-family:var(--font-body)}.toggle-wrap{position:relative;width:44px;height:24px;flex-shrink:0}.toggle-input{opacity:0;width:0;height:0;position:absolute;margin:0}.toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--color-accent);border-radius:var(--radius-full);transition:var(--transition-base);cursor:pointer}.toggle-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;background:var(--color-neutral-0);border-radius:50%;transition:var(--transition-base);transform:translate(20px);box-shadow:0 1px 3px #00000026;cursor:pointer}.toggle-input:not(:checked)~.toggle-track{background:var(--color-neutral-200)}.toggle-input:not(:checked)~.toggle-thumb{transform:translate(0)}.profile-bottom-spacer{height:16px}.list-section:nth-of-type(1){animation:slideUp .35s ease-out .35s both}.list-section:nth-of-type(2){animation:slideUp .35s ease-out .5s both}.list-section:nth-of-type(3){animation:slideUp .35s ease-out .65s both}@media (prefers-reduced-motion: reduce){.profile-header,.stats-row,.list-section{animation:none!important;opacity:1!important;transform:none!important}}.user-select-card{padding:20px}.select-title{font-size:17px;font-weight:600;margin-bottom:12px;letter-spacing:-.1px}.user-chips{display:flex;flex-wrap:wrap;gap:8px}.user-chip{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px solid rgba(255,159,67,.15);border-radius:980px;background:#fff;cursor:pointer;transition:all .2s ease;font-size:14px;font-weight:400}.user-chip:hover{border-color:var(--primary)}.user-chip.selected{border-color:var(--primary);background:var(--primary);color:#fff}.chip-avatar{width:22px;height:22px;border-radius:50%;background:#ff9f431f;color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}.user-chip.selected .chip-avatar{background:#ffffff40;color:#fff}.chip-name{font-weight:500}.chip-check{color:#fff;font-weight:600}.group-result{margin-top:24px}.group-score-card{text-align:center;padding:32px;background:#ff9f430a;border:1px solid rgba(255,159,67,.1)}.group-score-label{font-size:13px;color:var(--text-secondary);margin-bottom:6px;font-weight:400}.group-score-value{font-size:56px;font-weight:700;line-height:1;margin-bottom:4px;letter-spacing:-1px}.group-score-level{font-size:17px;font-weight:600;margin-bottom:16px}.group-members{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}.group-member-chip{padding:4px 10px;background:#ff9f4314;border-radius:6px;font-size:13px;font-weight:400;color:var(--primary)}.section-title{font-size:17px;font-weight:600;margin-bottom:12px;letter-spacing:-.1px}.pair-scores{margin-top:16px}.pair-card{padding:16px}.pair-header{display:flex;justify-content:space-between;align-items:center}.pair-names{font-weight:600;font-size:15px}.pair-score{font-size:20px;font-weight:700;letter-spacing:-.3px}.pair-categories{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}.pair-cat{display:flex;justify-content:space-between;align-items:center;padding:4px 8px;background:#ff9f430a;border-radius:6px;font-size:12px}.pair-cat-name{color:var(--text-secondary);font-weight:400}.pair-cat-score{font-weight:600}.tags-row{display:flex;flex-wrap:wrap;gap:6px}.conflict-list{display:flex;flex-direction:column;gap:6px}.conflict-item{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:10px;font-size:13px}.conflict-item.high{background:#ff6b6b14;border-left:3px solid var(--danger)}.conflict-item.medium{background:#ffd93d14;border-left:3px solid var(--warning)}.conflict-label{font-weight:500}.app{min-height:100vh;display:flex;flex-direction:column}.main-content{flex:1;padding-bottom:68px}.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:100;height:56px;background-color:var(--color-neutral-0);border-top:1px solid var(--color-neutral-100);animation:nav-fade-in .4s ease-out .3s both}@keyframes nav-fade-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}.bottom-nav-inner{max-width:480px;margin:0 auto;display:flex;align-items:center;justify-content:space-around;height:100%;padding:0 12px}.bottom-nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:64px;height:100%;text-decoration:none;transition:all var(--transition-fast)}.bottom-nav-item:hover{opacity:.8}.bottom-nav-item.active .bottom-nav-label{color:var(--color-primary)}.bottom-nav-icon{font-size:22px;transition:transform var(--transition-fast)}.bottom-nav-item.active .bottom-nav-icon{transform:scale(1.1)}.bottom-nav-label{font-size:10px;font-weight:500;color:var(--color-neutral-400);letter-spacing:.3px}@media (min-width: 768px){.main-content{padding-bottom:0}.bottom-nav{display:none}}@media (prefers-reduced-motion: reduce){.bottom-nav{animation:none;opacity:1;transform:none}}:root{--color-primary: #004B97;--color-primary-light: #0066CC;--color-primary-lighter: #3D8BDB;--color-primary-lightest: #E8F1FB;--color-primary-dark: #003570;--color-primary-50: rgba(0, 75, 151, .04);--color-primary-100: rgba(0, 75, 151, .08);--color-primary-200: rgba(0, 75, 151, .12);--color-neutral-0: #FFFFFF;--color-neutral-50: #F7F8FA;--color-neutral-100: #EDF0F4;--color-neutral-200: #D8DCE3;--color-neutral-300: #B0B8C4;--color-neutral-400: #8891A0;--color-neutral-500: #6B7585;--color-neutral-600: #4A5568;--color-neutral-700: #2D3748;--color-neutral-800: #1A202C;--color-neutral-900: #0F1419;--color-accent: #2B8C7E;--color-accent-light: #3AAFA0;--color-accent-lightest: #E6F5F3;--state-success: #2B8C7E;--state-success-bg: #E6F5F3;--state-warning: #D4920B;--state-warning-bg: #FEF5E6;--state-error: #C94040;--state-error-bg: #FEE8E8;--state-info: #0066CC;--state-info-bg: #E8F1FB;--font-display: "Playfair Display", "Noto Serif SC", "Songti SC", Georgia, serif;--font-body: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, sans-serif;--text-xs: .75rem;--text-sm: .875rem;--text-base: 1rem;--text-lg: 1.125rem;--text-xl: 1.25rem;--text-2xl: 1.5rem;--text-3xl: 1.875rem;--text-4xl: 2.25rem;--text-5xl: 3rem;--leading-tight: 1.2;--leading-normal: 1.5;--leading-relaxed: 1.625;--tracking-tight: -.02em;--tracking-normal: 0;--tracking-wide: .05em;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-sm: 4px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 75, 151, .04);--shadow-sm: 0 1px 3px rgba(0, 75, 151, .04), 0 1px 2px rgba(0, 0, 0, .03);--shadow-md: 0 4px 6px rgba(0, 75, 151, .03), 0 2px 4px rgba(0, 0, 0, .03);--shadow-lg: 0 10px 15px rgba(0, 75, 151, .03), 0 4px 6px rgba(0, 0, 0, .02);--border-light: 1px solid var(--color-neutral-100);--border-default: 1px solid var(--color-neutral-200);--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .25s cubic-bezier(.4, 0, .2, 1);--transition-slow: .4s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1)}*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:var(--font-body);background-color:var(--color-neutral-50);color:var(--color-neutral-800);line-height:var(--leading-normal);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{min-height:100vh}a{color:var(--color-primary);text-decoration:none}button{cursor:pointer;border:none;outline:none;font-family:inherit}input,select,textarea{font-family:inherit;outline:none}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}.page-container{max-width:480px;margin:0 auto;padding:0;min-height:100vh;background-color:var(--color-neutral-50)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 22px;border-radius:var(--radius-md);font-size:var(--text-base);font-weight:500;transition:all var(--transition-fast);border:none;letter-spacing:var(--tracking-tight)}.btn-primary{background-color:var(--color-primary);color:var(--color-neutral-0)}.btn-primary:hover{background-color:var(--color-primary-dark)}.btn-primary:active{transform:scale(.98)}.btn-secondary{background-color:transparent;color:var(--color-primary);border:1.5px solid var(--color-primary)}.btn-secondary:hover{opacity:.92}.btn-secondary:active{transform:scale(.98)}.btn-danger{background-color:var(--state-error);color:var(--color-neutral-0)}.btn-danger:hover{opacity:.9}.btn-block{width:100%}.btn-lg{padding:14px 28px;font-size:var(--text-lg)}.btn-text{background:none;border:none;color:var(--color-neutral-500);font-size:var(--text-sm);padding:4px 8px;cursor:pointer;transition:color var(--transition-fast)}.btn-text:hover{color:var(--color-primary)}.tag{display:inline-flex;align-items:center;padding:4px 12px;border-radius:var(--radius-full);font-size:var(--text-xs);font-weight:500;gap:4px;letter-spacing:0}.tag-primary{background-color:var(--color-primary-lightest);color:var(--color-primary)}.tag-success{background-color:var(--state-success-bg);color:var(--state-success)}.tag-warning{background-color:var(--state-warning-bg);color:var(--state-warning)}.tag-danger{background-color:var(--state-error-bg);color:var(--state-error)}.tag-info{background-color:var(--state-info-bg);color:var(--state-info)}.progress-bar{width:100%;background-color:var(--color-neutral-100);border-radius:var(--radius-full);overflow:hidden}.progress-bar-fill{height:100%;border-radius:var(--radius-full);transition:width var(--transition-slow)}.empty-state{text-align:center;padding:80px 20px;color:var(--color-neutral-500)}.empty-state-icon{font-size:48px;margin-bottom:16px}.empty-state-text{font-size:var(--text-lg);margin-bottom:24px;font-weight:400}.empty-hint{font-size:var(--text-sm);color:var(--color-neutral-400);margin-top:8px}@keyframes fadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.fade-in{animation:fadeIn .35s ease forwards}@keyframes slideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.slide-up{animation:slideUp .35s ease forwards}@keyframes fadeUp{0%{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}@keyframes heroFadeIn{0%{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}@keyframes glassSlideUp{0%{opacity:0;transform:translateY(40px)}60%{transform:translateY(-6px)}80%{transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}@keyframes ctaPulse{0%,to{box-shadow:0 0 #004b9766}50%{box-shadow:0 0 0 10px #004b9700}}@keyframes navFadeIn{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes scrollDotBounce{0%,to{transform:translate(-50%) translateY(0);opacity:1}50%{transform:translate(-50%) translateY(10px);opacity:.3}}@keyframes progressFill{0%{width:0%}to{width:var(--progress-width, 100%)}}@keyframes slideUpFade{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes optionAppear{0%{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}