*{margin:0;padding:0;box-sizing:border-box}:root{--primary-purple: #667eea;--secondary-purple: #764ba2;--dark-bg: #1a1a2e;--card-bg: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--border-color: rgba(255, 255, 255, .2);--success-green: #4ade80;--warning-yellow: #fbbf24;--danger-red: #ef4444;--phone-width: 390px;--phone-height: 844px}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,var(--primary-purple) 0%,var(--secondary-purple) 100%);min-height:100vh;display:flex;align-items:center;justify-content:center;color:var(--text-primary);overflow:hidden}#root{width:100%;height:100vh;display:flex;align-items:center;justify-content:center}.mobile-container{width:var(--phone-width);height:var(--phone-height);max-width:100vw;max-height:100vh;background:var(--dark-bg);border-radius:40px;box-shadow:0 20px 60px #00000080;overflow:hidden;position:relative;display:flex;flex-direction:column}.scrollable{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}.scrollable::-webkit-scrollbar{width:4px}.scrollable::-webkit-scrollbar-track{background:#ffffff0d}.scrollable::-webkit-scrollbar-thumb{background:var(--primary-purple);border-radius:2px}button{border:none;outline:none;cursor:pointer;font-family:inherit;transition:all .2s ease}button:active{transform:scale(.95)}.btn-primary{background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));color:#fff;padding:16px 32px;border-radius:12px;font-size:16px;font-weight:600;box-shadow:0 4px 12px #667eea66}.btn-secondary{background:transparent;color:var(--text-secondary);padding:12px 24px;border-radius:12px;font-size:14px;border:1px solid var(--border-color)}input,textarea{font-family:inherit;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;color:var(--text-primary);font-size:16px;outline:none;transition:border-color .2s ease}input:focus,textarea:focus{border-color:var(--primary-purple)}input::placeholder,textarea::placeholder{color:var(--text-secondary)}.fade-enter{opacity:0}.fade-enter-active{opacity:1;transition:opacity .2s}.fade-exit{opacity:1}.fade-exit-active{opacity:0;transition:opacity .2s}.mobile-content{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.intro-flow{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:60px 32px 40px;background:linear-gradient(180deg,#667eea1a,#764ba21a)}.intro-content{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:20px}.slide-emoji{font-size:80px;margin-bottom:20px;animation:fadeInScale .5s ease}.slide-title{font-size:32px;font-weight:700;color:var(--text-primary);margin:0;animation:fadeInUp .5s ease .1s both}.slide-subtitle{font-size:18px;font-weight:500;color:var(--primary-purple);margin:0;animation:fadeInUp .5s ease .2s both}.slide-content{font-size:16px;line-height:1.6;color:var(--text-secondary);max-width:300px;margin:20px 0;animation:fadeInUp .5s ease .3s both}.slide-indicators{display:flex;gap:8px;margin-top:40px}.indicator{width:8px;height:8px;border-radius:50%;background:var(--border-color);cursor:pointer;transition:all .3s ease}.indicator.active{width:24px;border-radius:4px;background:var(--primary-purple)}.intro-actions{display:flex;flex-direction:column;gap:16px}.name-input-section{width:100%}.name-input{width:100%;padding:16px;font-size:16px;border-radius:12px;background:#ffffff1a;border:2px solid var(--border-color);color:var(--text-primary);text-align:center;transition:all .3s ease}.name-input:focus{border-color:var(--primary-purple);background:#ffffff26}.name-input::placeholder{color:var(--text-secondary);font-style:italic}.navigation-arrows{display:flex;justify-content:space-between;margin-bottom:8px}.arrow-btn{background:transparent;color:var(--text-primary);font-size:14px;padding:8px 16px;border-radius:8px;transition:all .2s ease}.arrow-btn:hover{background:var(--card-bg)}.spacer{flex:1}.start-btn{width:100%}.start-btn:disabled,.login-btn:disabled{opacity:.5;cursor:not-allowed}.login-btn{width:100%}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.bottom-nav{display:flex;justify-content:space-around;align-items:center;background:#0000004d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--border-color);padding:8px 0;position:relative;z-index:100}.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;background:transparent;color:var(--text-secondary);padding:8px;transition:all .2s ease;position:relative}.nav-tab:not(.locked):hover{color:var(--text-primary)}.nav-tab.active{color:var(--primary-purple)}.nav-tab.active .nav-icon{transform:scale(1.1)}.nav-tab.locked{opacity:.4;cursor:not-allowed}.nav-icon{font-size:24px;transition:transform .2s ease}.nav-label{font-size:11px;font-weight:500}.lock-icon{position:absolute;top:4px;right:8px;font-size:10px}.module-node{display:flex;align-items:center;gap:16px;width:100%;background:var(--card-bg);border:2px solid var(--border-color);border-radius:16px;padding:20px;text-align:left;transition:all .3s ease;cursor:pointer}.module-node:not(.locked):hover{background:#ffffff26;border-color:var(--primary-purple);transform:translateY(-2px)}.module-node.completed{border-color:var(--success-green);background:#4ade801a}.module-node.completed .module-icon{background:var(--success-green);color:#fff}.module-node.locked{opacity:.5;cursor:not-allowed}.module-icon{width:48px;height:48px;border-radius:50%;background:var(--primary-purple);display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:#fff;flex-shrink:0}.module-info{flex:1;display:flex;flex-direction:column;gap:8px}.module-title{font-size:18px;font-weight:600;color:var(--text-primary);margin:0}.module-description{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.4}.module-systems{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}.system-tag{font-size:11px;padding:4px 8px;background:#667eea4d;border-radius:6px;color:var(--text-primary);font-weight:500}.module-progress{width:100%;height:4px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-top:8px}.progress-bar{height:100%;background:var(--primary-purple);transition:width .3s ease}.profiling-track{flex:1;display:flex;flex-direction:column;overflow:hidden}.track-header{padding:24px 20px 16px;text-align:center;background:#0003;border-bottom:1px solid var(--border-color)}.track-header h1{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 8px}.track-header p{font-size:14px;color:var(--text-secondary);margin:0}.logout-button{margin-top:12px;padding:8px 16px;font-size:12px;font-weight:600;color:var(--text-primary);background:#ff000026;border:1px solid rgba(255,0,0,.3);border-radius:8px;cursor:pointer;transition:all .2s ease}.logout-button:hover{background:#ff000040;border-color:#ff000080}.logout-button:active{transform:scale(.98)}.modules-container{flex:1;padding:24px 20px 80px}.modules-path{display:flex;flex-direction:column;gap:0}.module-wrapper{position:relative}.path-connector{display:flex;justify-content:center;padding:12px 0}.connector-line{width:2px;height:24px;background:linear-gradient(180deg,var(--primary-purple) 0%,var(--border-color) 100%)}.chat-bubble{display:flex;flex-direction:column;gap:4px;max-width:75%;animation:slideIn .3s ease}.chat-bubble.user{align-self:flex-end;align-items:flex-end;position:relative}.chat-bubble.m8{align-self:flex-start;align-items:flex-start}.sender-label{font-size:11px;color:var(--text-secondary);padding:0 12px;font-weight:500}.bubble-content{padding:12px 16px;border-radius:16px;font-size:15px;line-height:1.5}.chat-bubble.user .bubble-content{background:var(--primary-purple);color:#fff;border-bottom-right-radius:4px}.chat-bubble.m8 .bubble-content{background:var(--card-bg);color:var(--text-primary);border-bottom-left-radius:4px;border:1px solid var(--border-color)}@keyframes slideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.reasoning-tooltip-container{position:absolute;bottom:105%;right:0;z-index:1000;animation:tooltipFadeIn .2s ease;pointer-events:none}.reasoning-tooltip{background:#14141efa;border:1px solid var(--border-color);border-radius:12px;padding:12px;min-width:280px;max-width:350px;box-shadow:0 8px 24px #0006;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.reasoning-header{font-size:11px;font-weight:700;color:var(--primary-purple);text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(139,92,246,.3)}.reasoning-step{margin-bottom:12px;padding:8px;background:#8b5cf61a;border-radius:8px;border-left:3px solid var(--primary-purple)}.reasoning-step:last-child{margin-bottom:0}.reasoning-step-header{display:flex;align-items:center;gap:6px;margin-bottom:6px;font-size:11px;font-weight:600}.step-emoji{font-size:14px}.step-type{color:var(--primary-purple);text-transform:uppercase;letter-spacing:.3px}.step-tag{color:var(--text-secondary);font-style:italic}.reasoning-text{font-size:13px;line-height:1.4;color:var(--text-primary);margin-bottom:6px}.reasoning-systems{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}.system-badge{font-size:10px;padding:3px 8px;background:#8b5cf633;border:1px solid rgba(139,92,246,.4);border-radius:12px;color:var(--text-primary);font-weight:600}.reasoning-signals{margin-top:10px;padding-top:10px;border-top:1px solid rgba(139,92,246,.2)}.signals-header{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;margin-bottom:6px}.activity-group{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid rgba(139,92,246,.1)}.activity-group:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none}.activity-name{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:4px}.activity-details{margin-bottom:6px;font-size:10px}.tag-combined-details{display:inline-block;padding:4px 8px;border-radius:8px;font-size:10px;border:1px solid}.tag-category-line{font-weight:600;margin-bottom:2px}.tag-modes-line{font-weight:400;font-size:9px;opacity:.9}.activity-systems{display:flex;flex-direction:column;gap:2px;font-size:11px}.system-entry{display:flex;align-items:center;gap:4px;color:var(--text-primary);font-weight:500}.systems-arrow{color:var(--primary-purple);font-weight:600}.reasoning-tooltip-loading,.reasoning-tooltip-empty{font-size:12px;color:var(--text-secondary);padding:8px 12px;background:#14141efa;border:1px solid var(--border-color);border-radius:8px;white-space:nowrap}@keyframes tooltipFadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}.reasoning-meta-deltas{margin-top:10px;padding-top:10px;border-top:1px solid rgba(139,92,246,.2)}.meta-deltas-header{font-size:10px;font-weight:700;color:var(--text-secondary);text-transform:uppercase;margin-bottom:6px}.meta-delta-item{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:11px}.meta-delta-emoji{font-size:14px}.meta-delta-label{flex:1;color:var(--text-primary)}.meta-delta-value{font-weight:600;padding:2px 6px;border-radius:4px}.meta-delta-value.positive{color:#4ade80;background:#4ade801a}.meta-delta-value.negative{color:#f87171;background:#f871711a}.typing-indicator{animation:slideIn .3s ease}.typing-dots{display:flex;gap:4px;align-items:center;height:20px}.typing-dots .dot{width:8px;height:8px;border-radius:50%;background-color:var(--text-secondary);opacity:.6;animation:typingAnimation 1.4s infinite}.typing-dots .dot:nth-child(1){animation-delay:0s}.typing-dots .dot:nth-child(2){animation-delay:.2s}.typing-dots .dot:nth-child(3){animation-delay:.4s}@keyframes typingAnimation{0%,60%,to{transform:translateY(0);opacity:.6}30%{transform:translateY(-10px);opacity:1}}.chat-module{flex:1;display:flex;flex-direction:column;height:100%;transition:opacity .3s ease-out}.chat-module.completing{opacity:.95}.module-header{display:flex;align-items:center;gap:12px;padding:16px;background:#0000004d;border-bottom:1px solid var(--border-color)}.back-btn,.end-btn{background:transparent;color:var(--text-primary);font-size:14px;padding:8px;font-weight:500}.module-title-area{flex:1;text-align:center}.module-title-area h2{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 6px}.progress-indicator{height:3px;background:#ffffff1a;border-radius:2px;overflow:hidden}.progress-fill{height:100%;background:var(--primary-purple);transition:width .3s ease}.chat-area{flex:1;padding:16px;display:flex;flex-direction:column;overflow-y:auto}.messages{display:flex;flex-direction:column;gap:16px;margin-top:16px}.input-area{display:flex;gap:8px;padding:16px;background:#0000004d;border-top:1px solid var(--border-color)}.input-area input{flex:1;margin:0}.send-btn{background:var(--primary-purple);color:#fff;padding:12px 24px;border-radius:12px;font-weight:600;font-size:14px}.send-btn:hover{background:var(--secondary-purple)}.error-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;padding:40px;text-align:center}.error-screen h2{color:var(--text-primary);font-size:24px}.message-wrapper{display:flex;flex-direction:column;gap:4px}.system-reactions{display:flex;gap:6px;align-self:flex-end;padding:0 8px;animation:fadeIn .3s ease-in}.reaction-emoji{font-size:18px;display:inline-block;animation:bounceIn .4s ease-out;cursor:help}.completion-prompt{margin:24px 0;padding:24px;background:linear-gradient(135deg,#8b5cf61a,#a855f71a);border:2px solid var(--primary-purple);border-radius:16px;text-align:center;animation:fadeInUp .5s ease-out}.completion-icon{font-size:48px;margin-bottom:12px;animation:bounceIn .6s ease-out}.completion-prompt h3{color:var(--text-primary);font-size:20px;font-weight:600;margin:0 0 8px}.completion-prompt p{color:var(--text-secondary);font-size:14px;margin:0 0 20px;line-height:1.5}.btn-complete-module{background:var(--primary-purple);color:#fff;padding:14px 28px;border-radius:12px;font-weight:600;font-size:15px;box-shadow:0 4px 12px #8b5cf64d;transition:all .3s ease}.btn-complete-module:hover{background:var(--secondary-purple);transform:translateY(-2px);box-shadow:0 6px 16px #8b5cf666}.btn-complete-module:active{transform:translateY(0)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.meta-indicators{display:flex;flex-direction:column;gap:8px;padding:12px;background:#0000004d;border-bottom:1px solid var(--border-color)}.meta-row{display:flex;gap:8px}.meta-row:first-child{display:grid;grid-template-columns:1fr 1fr;gap:8px}.meta-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:center;gap:4px}.meta-header{display:flex;align-items:center;gap:6px;width:100%;justify-content:center}.meta-emoji{font-size:20px}.meta-info-button{background:none;border:none;font-size:14px;cursor:pointer;opacity:.5;transition:opacity .2s,transform .2s;padding:2px;line-height:1}.meta-info-button:hover{opacity:1;transform:scale(1.1)}.meta-label{font-size:9px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;text-align:center}.meta-number{font-size:16px;font-weight:700;color:var(--text-primary)}.morality-card{flex:1;background:var(--card-bg);border:1px solid var(--border-color);border-radius:8px;padding:8px 12px;display:flex;flex-direction:column;gap:6px}.morality-header{display:flex;align-items:center;justify-content:center;gap:8px}.morality-label{font-size:9px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.3px;text-align:center}.morality-spectrum{display:flex;align-items:center;gap:8px}.spectrum-emoji{font-size:18px;flex-shrink:0}.morality-bar{flex:1;height:6px;background:linear-gradient(90deg,#93c5fd4d,#ffffff1a,#ef44444d);border-radius:3px;position:relative}.morality-marker{position:absolute;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;background:var(--primary-purple);border:2px solid white;border-radius:50%;box-shadow:0 2px 6px #0000004d;transition:left .5s ease}.meta-info-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000d9;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeIn .2s ease-in}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.meta-info-modal{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:24px;max-width:500px;width:100%;max-height:80vh;overflow-y:auto;position:relative;animation:slideUp .3s ease-out}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.meta-info-close{position:absolute;top:12px;right:12px;background:none;border:none;font-size:28px;color:var(--text-secondary);cursor:pointer;line-height:1;padding:4px 8px;transition:color .2s}.meta-info-close:hover{color:var(--text-primary)}.meta-info-title{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 16px;padding-right:32px}.meta-info-content{color:var(--text-primary);line-height:1.6}.loading-text{color:var(--text-secondary);font-style:italic;margin:0}.reasoning-text{margin:0;white-space:pre-wrap}.system-panel{background:var(--card-bg);border:1px solid var(--border-color);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}.system-header{display:flex;justify-content:space-between;align-items:center}.system-name{font-size:13px;font-weight:700;color:var(--primary-purple);margin:0;text-transform:uppercase;letter-spacing:.3px}.info-btn{background:transparent;font-size:16px;padding:2px;opacity:.7;transition:opacity .2s ease}.info-btn:hover{opacity:1}.directions-container{display:flex;flex-direction:column;gap:8px;position:relative}.direction{display:flex;flex-direction:column;gap:4px}.direction-header{display:flex;justify-content:space-between;align-items:center;gap:6px}.direction-label{font-size:10px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.3px}.completion-badge{font-size:8px;padding:2px 6px;border-radius:6px;font-weight:600;text-transform:lowercase}.completion-badge.high{background:#4ade8033;color:var(--success-green);border:1px solid var(--success-green)}.completion-badge.medium{background:#fbbf2433;color:var(--warning-yellow);border:1px solid var(--warning-yellow)}.completion-badge.low{background:#ef444433;color:var(--danger-red);border:1px solid var(--danger-red)}.activation-bar{height:16px;background:#ffffff1a;border-radius:8px;position:relative;overflow:hidden}.activation-fill{height:100%;background:linear-gradient(90deg,var(--primary-purple),var(--secondary-purple));border-radius:8px;transition:width .5s ease}.activation-value{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5)}.fulfillment-tags{display:flex;flex-wrap:wrap;gap:4px}.tag{font-size:9px;padding:3px 6px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:8px;color:var(--text-primary);transition:all .2s ease;cursor:help}.tag-green{background:#4caf5033;border-color:#4caf5066}.tag-blue{background:#2196f333;border-color:#2196f366}.tag-orange{background:#ff980033;border-color:#ff980066}.tag-red{background:#f4433633;border-color:#f4433666}.tag:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0003}.tag-tooltip{position:fixed;padding:8px 12px;background:var(--dark-bg);border:1px solid var(--border-color);border-radius:8px;font-size:11px;color:var(--text-primary);text-align:left;z-index:1000;box-shadow:0 4px 12px #0000004d;pointer-events:none;max-width:370px}.tag-tooltip>div{line-height:1.6;white-space:nowrap}.balance-indicator{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px;border-radius:8px;background:#ffffff0d;align-self:center}.balance-indicator.balanced{background:#4ade8033;border:1px solid var(--success-green)}.balance-indicator.moderate{background:#fbbf2433;border:1px solid var(--warning-yellow)}.balance-indicator.imbalanced{background:#ef444433;border:1px solid var(--danger-red)}.balance-icon{font-size:16px}.balance-value{font-size:12px;font-weight:700;color:var(--text-primary)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal-content{background:var(--dark-bg);border:1px solid var(--border-color);border-radius:20px;padding:24px;max-width:320px;width:100%;display:flex;flex-direction:column;gap:16px}.modal-content h3{color:var(--primary-purple);font-size:20px;margin:0}.modal-content h4{color:var(--text-primary);font-size:16px;margin:0;font-weight:600}.modal-content p{color:var(--text-secondary);font-size:14px;line-height:1.6;margin:0}.modal-description{font-style:italic;color:var(--text-primary);opacity:.9}.modal-divider{height:1px;background:var(--border-color);margin:8px 0}.reasoning-prose{line-height:1.7;color:var(--text-primary);font-size:.95rem;white-space:pre-line;padding:1rem 0}.loading-text{color:#888;font-style:italic;padding:1rem 0}.profile-view{flex:1;display:flex;flex-direction:column;overflow:hidden}.profile-header{padding:12px 16px 8px;text-align:center;background:#0003;border-bottom:1px solid var(--border-color)}.profile-header h1{font-size:16px;font-weight:700;color:var(--text-primary);margin:0 0 4px}.profile-header p{font-size:10px;color:var(--text-secondary);margin:0}.systems-container{flex:1;padding:12px 12px 80px;overflow-y:auto}.systems-list{display:flex;flex-direction:column;gap:8px}.ai-companion{flex:1;display:flex;flex-direction:column;height:100%}.companion-header{display:flex;flex-direction:column;gap:4px;padding:20px;background:#0000004d;border-bottom:1px solid var(--border-color)}.companion-header h2{font-size:20px;font-weight:700;color:var(--text-primary);margin:0}.companion-subtitle{font-size:12px;color:var(--text-secondary);margin:0;font-weight:500}.toggle-profile-btn{background:var(--card-bg);border:1px solid var(--border-color);padding:8px 12px;border-radius:8px;font-size:20px}.companion-meta{border-bottom:1px solid var(--border-color)}.companion-chat{flex:1;padding:16px 16px 80px;display:flex;flex-direction:column;overflow-y:auto}.companion-chat .messages{display:flex;flex-direction:column;gap:16px}.companion-chat .message-wrapper{display:flex;flex-direction:column;gap:4px}.companion-chat .system-reactions{display:flex;gap:6px;align-self:flex-end;padding:0 8px;animation:fadeIn .3s ease-in}.companion-chat .reaction-emoji{font-size:18px;display:inline-block;animation:bounceIn .4s ease-out;cursor:help}@keyframes fadeIn{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes bounceIn{0%{transform:scale(0);opacity:0}50%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.connection-card{background:var(--card-bg);border:2px solid var(--border-color);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;gap:12px;cursor:pointer;transition:all .2s ease;position:relative}.connection-card:hover{transform:translateY(-4px);border-color:var(--primary-purple);box-shadow:0 8px 20px #667eea4d;background:#ffffff26}.connection-card:active{transform:translateY(-2px)}.connection-avatar{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));color:#fff;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:700;flex-shrink:0;box-shadow:0 4px 12px #667eea66}.connection-info{text-align:center;flex:1}.connection-info h3{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}.connection-date{font-size:12px;color:var(--text-secondary);margin:0}.connection-arrow{font-size:20px;color:var(--primary-purple);opacity:.6;transition:opacity .2s,transform .2s}.connection-card:hover .connection-arrow{opacity:1;transform:translate(4px)}@media(max-width:600px){.connection-card{padding:16px 12px}.connection-avatar{width:56px;height:56px;font-size:24px}.connection-info h3{font-size:15px}}.match-list{flex:1;overflow-y:auto;padding-bottom:80px;background:var(--dark-bg)}.match-content{max-width:600px;margin:0 auto}.loading-state{padding:40px 20px;text-align:center;color:var(--text-secondary)}.referral-section{padding:24px 20px;background:#0003;border-bottom:1px solid var(--border-color);margin-bottom:16px}.referral-section h2{font-size:18px;font-weight:700;color:var(--primary-purple);margin:0 0 16px}.referral-box{display:flex;gap:8px;align-items:stretch;margin-bottom:12px}.referral-input{flex:1;padding:12px 14px;border:1px solid var(--border-color);border-radius:10px;background:var(--card-bg);color:var(--text-primary);font-size:13px;font-family:monospace;transition:border-color .2s}.referral-input:focus{outline:none;border-color:var(--primary-purple);background:#ffffff26}.copy-btn{padding:12px 20px;background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));color:#fff;border:none;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;transition:all .2s;white-space:nowrap;box-shadow:0 4px 12px #667eea4d}.copy-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 16px #667eea66}.copy-btn:active:not(:disabled){transform:translateY(0)}.copy-btn:disabled{opacity:.5;cursor:not-allowed}.referral-hint{font-size:13px;color:var(--text-secondary);margin:0;line-height:1.5}.add-connection-card{background:#667eea1a;border:2px dashed var(--primary-purple);border-radius:16px;padding:20px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:all .2s ease;min-height:140px}.add-connection-card:hover{transform:translateY(-4px);background:#667eea33;border-color:var(--secondary-purple);box-shadow:0 8px 20px #667eea4d}.add-connection-card:active{transform:translateY(-2px)}.add-icon{width:64px;height:64px;border-radius:50%;background:#667eea4d;color:var(--primary-purple);display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:300;margin-bottom:4px}.add-text{font-size:14px;font-weight:600;color:var(--primary-purple);text-align:center}.add-connection-form-card{background:var(--card-bg);border:2px solid var(--primary-purple);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:140px}.input-profile-name{width:100%;background:#ffffff0d;border:1px solid var(--border-color);border-radius:8px;padding:12px;color:var(--text-primary);font-size:14px;margin-bottom:12px}.input-profile-name:focus{outline:none;border-color:var(--primary-purple)}.input-profile-name::placeholder{color:var(--text-secondary)}.add-connection-actions{display:flex;gap:12px}.btn-add,.btn-cancel{flex:1;padding:10px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-add{background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));color:#fff;border:none}.btn-add:hover{transform:translateY(-1px);box-shadow:0 4px 12px #667eea66}.btn-cancel{background:#ffffff0d;color:var(--text-secondary);border:1px solid var(--border-color)}.btn-cancel:hover{background:#ffffff1a}.add-error{padding:8px;background:#ef444433;border:1px solid rgba(239,68,68,.5);border-radius:6px;color:#ef4444;font-size:11px;text-align:center}.add-success-message{margin-top:16px;padding:12px;background:#4ade8033;border:1px solid rgba(74,222,128,.5);border-radius:8px;color:#4ade80;font-size:13px;text-align:center;animation:slideDown .3s ease}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.connections-section{padding:24px 20px;background:#0000001a}.connections-section h2{font-size:18px;font-weight:700;color:var(--text-primary);margin:0 0 16px}.empty-hint{font-size:14px;color:var(--text-secondary);margin:0 0 20px;line-height:1.5}.connection-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}@media(max-width:600px){.referral-box{flex-direction:column}.copy-btn{width:100%}.connection-grid{grid-template-columns:repeat(2,1fr);gap:12px}}@media(max-width:400px){.connection-grid{grid-template-columns:1fr}}.match-detail{flex:1;padding-bottom:80px;background:var(--dark-bg)}.match-content{padding:20px;display:flex;flex-direction:column;gap:24px;max-width:600px;margin:0 auto}.loading-state,.error-state{padding:60px 20px;text-align:center;color:var(--text-secondary)}.error-state h2{color:var(--text-primary);margin:0 0 12px}.error-state p{margin:0 0 24px}.match-header{text-align:center;padding:20px;background:#0003;border:1px solid var(--border-color);border-radius:16px;position:relative}.back-btn{position:absolute;top:20px;left:20px;background:none;border:none;color:var(--primary-purple);font-size:16px;font-weight:600;cursor:pointer;padding:8px;transition:transform .2s}.back-btn:hover{transform:translate(-4px)}.match-avatar{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));color:#fff;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:700;margin:0 auto 16px;box-shadow:0 4px 16px #667eea80}.match-header h1{font-size:24px;font-weight:700;color:var(--text-primary);margin:0 0 8px;padding:0 60px}.snapshot-notice{font-size:12px;color:var(--primary-purple);margin:8px 0 0;font-weight:600}.match-header .overall-summary{margin-top:20px;padding-top:20px;border-top:1px solid rgba(102,126,234,.3)}.match-header .overall-summary p{font-size:14px;line-height:1.7;color:var(--text-secondary);margin:0;text-align:left;padding:0}.compatibility-section{background:#0003;border:1px solid var(--border-color);border-radius:16px;padding:24px 20px}.compatibility-section h2{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 20px}.compatibility-cards{display:flex;flex-direction:column;gap:16px}.compat-card{background:var(--card-bg);border:2px solid var(--border-color);border-radius:16px;padding:20px;display:flex;flex-direction:column;gap:12px}.compat-card.spark{border-color:#fbbf2480;background:#fbbf241a}.compat-card.harmony{border-color:#4ade8080;background:#4ade801a}.compat-card.growth{border-color:#667eea80;background:#667eea1a}.compat-icon{font-size:40px;text-align:center}.compat-card h3{font-size:16px;font-weight:700;color:var(--text-primary);margin:0;text-align:center}.compat-score{font-size:32px;font-weight:700;color:var(--primary-purple);text-align:center}.compat-description{display:flex;flex-direction:column;gap:12px}.compat-description p{font-size:13px;line-height:1.6;color:var(--text-secondary);margin:0;text-align:left}.compat-description p:first-child{color:var(--text-primary);font-weight:500}.compat-card p{font-size:13px;line-height:1.5;color:var(--text-secondary);margin:0;text-align:center}.compat-systems{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:8px}.sys-badge{font-size:11px;padding:4px 10px;background:#667eea4d;border:1px solid rgba(102,126,234,.5);border-radius:12px;color:var(--text-primary);font-weight:600}.history-section{background:#0003;border:1px solid var(--border-color);border-radius:16px;padding:24px 20px}.history-section h2{font-size:20px;font-weight:700;color:var(--text-primary);margin:0 0 20px}.history-list{display:flex;flex-direction:column;gap:12px}.history-item{border:1px solid var(--border-color);background:var(--card-bg);border-radius:12px;padding:16px;display:flex;justify-content:space-between;align-items:center;transition:all .2s}.history-item:hover{background:#ffffff26;border-color:var(--primary-purple)}.history-date{font-size:13px;font-weight:600;color:var(--text-secondary)}.history-scores{display:flex;gap:16px}.history-score span{font-size:13px;font-weight:600;color:var(--text-primary)}.btn-primary{background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));color:#fff;border:none;border-radius:12px;padding:14px 32px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #667eea66}@media(max-width:600px){.match-header h1{font-size:20px;padding:0 50px}.history-scores{flex-direction:column;gap:8px}}.referral-join{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--primary-purple) 0%,var(--secondary-purple) 100%);padding:20px}.referral-content{max-width:500px;background:var(--dark-bg);border:1px solid var(--border-color);border-radius:24px;padding:40px 32px;box-shadow:0 20px 60px #00000080;text-align:center}.referral-content h1{font-size:32px;font-weight:700;color:var(--text-primary);margin:0 0 24px}.referral-message{margin-bottom:32px}.referral-message p{font-size:16px;line-height:1.6;color:var(--text-secondary);margin:0 0 16px}.referral-message p.highlight{font-size:18px;font-weight:600;color:var(--primary-purple);margin-bottom:16px}.features{display:flex;flex-direction:column;gap:20px;margin-bottom:32px;text-align:left}.feature-item{display:flex;align-items:flex-start;gap:16px;padding:16px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;transition:all .2s}.feature-item:hover{background:#ffffff26;border-color:var(--primary-purple)}.feature-icon{font-size:32px;flex-shrink:0}.feature-text h3{font-size:16px;font-weight:600;color:var(--text-primary);margin:0 0 4px}.feature-text p{font-size:14px;color:var(--text-secondary);margin:0;line-height:1.4}.btn-primary{background:linear-gradient(135deg,var(--primary-purple),var(--secondary-purple));color:#fff;border:none;border-radius:12px;padding:14px 32px;font-size:16px;font-weight:600;cursor:pointer;transition:all .2s;width:100%;box-shadow:0 4px 12px #667eea66}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px #667eea80}.btn-primary:active{transform:translateY(0)}.btn-primary.btn-large{padding:16px 40px;font-size:18px}.referral-note{font-size:13px;color:var(--text-secondary);margin:16px 0 0}@media(max-width:600px){.referral-content{padding:32px 24px}.referral-content h1{font-size:28px}.referral-message p.highlight{font-size:16px}}