:root{--color-primary: #5b6cf2;--color-primary-hover: #4a5be0;--color-surface: #242424;--color-surface-elevated: #2d2d2d;--color-text: rgba(255, 255, 255, .87);--color-text-muted: rgba(255, 255, 255, .7);--color-border: rgba(255, 255, 255, .2);--color-border-light: rgba(255, 255, 255, .1);--color-success: #22c55e;--color-error: #e74c3c;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--font-family: system-ui, -apple-system, "Segoe UI", Avenir, Helvetica, Arial, sans-serif;--font-size-base: 16px;--font-size-sm: .9rem;--font-size-xs: .85rem;--line-height-tight: 1.25;--line-height-body: 1.5;font-family:var(--font-family);font-size:var(--font-size-base);line-height:var(--line-height-body);font-weight:400;color:var(--color-text);background-color:var(--color-surface);color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:var(--color-primary);text-decoration:inherit}a:hover{color:var(--color-primary-hover)}body{margin:0;display:flex;place-items:center;justify-content:center;min-width:320px;min-height:100vh}.app{width:100%;max-width:480px;padding:24px;box-sizing:border-box}.room-steps{display:flex;align-items:center;gap:var(--space-2);margin-bottom:var(--space-4);font-size:var(--font-size-xs);color:var(--color-text-muted)}.room-steps-wrapper{margin-bottom:var(--space-4)}.room-steps-wrapper .room-steps{margin-bottom:0}.room-steps-waiting{margin:var(--space-1) 0 0;font-size:var(--font-size-xs);color:var(--color-text-muted)}.room-step{display:flex;align-items:center;gap:var(--space-1)}.room-step-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--color-border);background:transparent;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600}.room-step{display:inline-flex;align-items:center;gap:var(--space-2)}.room-step-dot.done{border-color:var(--color-success);background:var(--color-success);color:#fff}.room-step-dot.current{border-color:var(--color-primary);background:var(--color-primary);color:#fff}.room-step-sep{width:24px;height:2px;background:var(--color-border);flex-shrink:0}.room-step-sep.done{background:var(--color-success)}.loading-room{display:flex;flex-direction:column;align-items:center;gap:var(--space-4);padding:var(--space-6) 0}.loading-room-spinner{width:40px;height:40px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:spin .8s linear infinite}@media(prefers-reduced-motion:reduce){.loading-room-spinner{animation:none;border-top-color:var(--color-primary);border-color:var(--color-primary);opacity:.6}}@keyframes spin{to{transform:rotate(360deg)}}.loading-room-text{color:var(--color-text-muted)}.home-create-btn.loading{position:relative;color:transparent}.home-create-btn.loading:after{content:"";position:absolute;inset:0;margin:auto;width:20px;height:20px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .6s linear infinite;color:var(--color-text)}@media(prefers-reduced-motion:reduce){.home-create-btn.loading:after{animation:none;border-top-color:currentColor;opacity:.7}}.waiting-dots{display:flex;gap:6px;margin:var(--space-4) 0;justify-content:center}.waiting-dot{width:8px;height:8px;border-radius:50%;background:var(--color-primary);opacity:.5;animation:waiting-bounce 1.4s ease-in-out infinite both}.waiting-dot:nth-child(1){animation-delay:0s}.waiting-dot:nth-child(2){animation-delay:.2s}.waiting-dot:nth-child(3){animation-delay:.4s}@media(prefers-reduced-motion:reduce){.waiting-dot{animation:none;opacity:.7}}@keyframes waiting-bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}.result-card{animation:result-enter .35s ease-out}@media(prefers-reduced-motion:reduce){.result-card{animation:none}}@keyframes result-enter{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.home-page,.room-page{display:flex;flex-direction:column;gap:var(--space-4)}.home-section{padding:var(--space-4) 0;border-bottom:1px solid var(--color-border-light)}.home-section:last-of-type{border-bottom:none}.home-section-title{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);margin-bottom:var(--space-2);text-transform:uppercase;letter-spacing:.04em}.home-trust,.room-trust,.band-selector-trust,.result-trust,.waiting-hint,.result-privacy{font-size:var(--font-size-sm);color:var(--color-text-muted)}.home-error,.room-error,.room-submit-error{color:var(--color-error);font-size:var(--font-size-sm)}.home-label{display:block;font-size:.95rem;font-weight:500;margin-bottom:.25rem}.home-flow-options{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:.5rem}.home-flow-option{flex:1;min-width:120px}.home-band-options{display:flex;gap:8px;flex-wrap:wrap}.home-band-option{flex:1;min-width:60px}.home-band-option-selected{border:2px solid var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 18%,transparent)}.home-band-hint{font-size:.85rem;opacity:.8;margin:-.25rem 0 0}.home-message{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);font-family:inherit;font-size:1rem;resize:vertical;box-sizing:border-box}.home-number{width:100%;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);font-family:inherit;font-size:1rem;box-sizing:border-box;margin-bottom:var(--space-2)}.home-create-btn{margin-top:var(--space-1);background-color:var(--color-primary);color:#fff;border-color:var(--color-primary);width:100%;padding:var(--space-3) var(--space-4);font-size:1rem}.home-create-btn:hover:not(:disabled){background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.home-create-btn.loading:after{color:#fff}.share-section{padding:var(--space-4) 0;border-top:1px solid var(--color-border-light);border-bottom:1px solid var(--color-border-light);margin:var(--space-2) 0}.share-title{font-weight:600;margin:0 0 var(--space-1)}.share-trust{font-size:var(--font-size-xs);color:var(--color-text-muted);margin-bottom:var(--space-3)}.share-message-block{margin-bottom:var(--space-4);padding:var(--space-4);background:color-mix(in srgb,var(--color-primary) 8%,transparent);border:1px solid var(--color-border-light);border-radius:var(--radius-md)}.share-message-text{font-size:1rem;line-height:1.55;margin:0;color:var(--color-text)}.share-message-link{color:var(--color-primary);text-decoration:underline;word-break:break-all}.share-message-link:hover{color:var(--color-primary-hover)}.share-actions{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-2)}.share-link-row{display:flex;gap:var(--space-2);margin-bottom:var(--space-2)}.share-link-input{flex:1;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:color-mix(in srgb,black 20%,transparent);color:inherit;font-size:var(--font-size-sm);min-width:0}.share-btn{flex-shrink:0}.share-btn-primary{width:100%;background-color:var(--color-primary);color:#fff;border-color:var(--color-primary)}.share-btn-primary:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover)}.share-btn-whatsapp{width:100%;margin-top:6px;text-align:center;text-decoration:none;display:inline-block;box-sizing:border-box;background-color:#25d366;color:#fff;border-color:#25d366}.share-btn-whatsapp:hover{background-color:#20bd5a;border-color:#20bd5a;color:#fff}.share-btn-copied{color:var(--color-success);border-color:var(--color-success)}@media(prefers-color-scheme:light){.home-message,.home-number,.share-link-input{border-color:var(--color-border)}.share-link-input{background:color-mix(in srgb,black 4%,transparent)}.share-section{border-color:var(--color-border-light)}}.band-selector{display:flex;flex-direction:column;gap:.75rem}.band-selector-scroll{display:flex;flex-direction:column;gap:4px;max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:var(--space-2) 0}.band-option{flex-shrink:0;padding:12px 16px;text-align:left;border-radius:var(--radius-md);transition:background .15s ease,border-color .15s ease}.band-option-selected{border:2px solid var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 18%,transparent)}.band-option-focused{outline:2px solid color-mix(in srgb,var(--color-primary) 50%,transparent);outline-offset:2px}.band-selector-more{margin-top:var(--space-2);font-size:var(--font-size-sm);color:var(--color-primary);background:none;border:1px dashed var(--color-border)}.band-selector-more:hover:not(:disabled){border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 8%,transparent)}.waiting-view{padding:var(--space-4) 0}.waiting-title{font-weight:600;margin-bottom:var(--space-2)}.waiting-role,.room-role{font-size:var(--font-size-sm);color:var(--color-text-muted)}.room-join-intro{margin:var(--space-4) 0}.room-join-intro-text{font-size:1.05rem;margin:0 0 var(--space-2);line-height:1.45}.room-join-intro .room-trust{margin-bottom:var(--space-4)}.result-card{background:var(--color-surface-elevated);border:1px solid var(--color-border-light);border-radius:var(--radius-lg);padding:var(--space-6);margin-top:var(--space-2)}.result-relation,.result-your-band,.result-match,.result-status,.result-distance,.result-expected-range,.result-match-block{margin:var(--space-2) 0}.result-match-label{font-weight:400;font-size:var(--font-size-sm);color:var(--color-text-muted)}.result-match-toggle{display:flex;gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap}.result-match-toggle-btn{padding:var(--space-1) var(--space-2);font-size:var(--font-size-xs)}.result-match-toggle-btn-active{border-color:var(--color-primary);background-color:color-mix(in srgb,var(--color-primary) 18%,transparent)}.result-your-band{font-size:1.15rem}.result-relation strong,.result-match strong,.result-status strong{color:var(--color-primary)}.waitlist-cta{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border-light)}.waitlist-cta-done{border-top-color:transparent}.waitlist-cta-title{font-weight:600;margin:0 0 var(--space-1)}.waitlist-cta-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-3)}.waitlist-cta-form{display:flex;gap:var(--space-2);flex-wrap:wrap}.waitlist-cta-input{flex:1;min-width:140px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);border:1px solid var(--color-border);background:color-mix(in srgb,black 20%,transparent);color:inherit;font-size:1rem}.waitlist-cta-btn{flex-shrink:0}.waitlist-cta-message{font-size:var(--font-size-sm);margin-top:var(--space-2);margin-bottom:0}.waitlist-cta-error{color:var(--color-error)}@media(prefers-color-scheme:light){.waitlist-cta{border-top-color:var(--color-border-light)}.waitlist-cta-input{border-color:var(--color-border);background:color-mix(in srgb,black 4%,transparent)}}.room-submit{margin-top:.5rem}.room-submit:disabled{opacity:.6;cursor:not-allowed}.room-offer-summary{font-size:.95rem;color:var(--color-text-muted);margin:var(--space-2) 0 0}.room-start-over-hint{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:var(--space-4) 0 0;max-width:36rem}.room-role-row{display:inline-flex;align-items:center;gap:var(--space-1)}.room-role-row .room-role{margin-bottom:0}.room-nickname{position:relative;display:inline-flex;align-items:center}.room-nickname-icon{padding:0;border:none;background:none;color:var(--color-text-muted);font-size:.9rem;cursor:pointer}.room-nickname-icon:hover{color:var(--color-text)}.room-nickname-bubble{position:absolute;top:calc(100% + .5rem);left:1.25rem;min-width:16rem;max-width:26rem;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);background:color-mix(in srgb,var(--color-surface) 100%,black 8%);border:1px solid var(--color-border-light);box-shadow:0 8px 24px #00000052;z-index:20}.room-nickname-bubble-text{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}.room-create-new{margin-top:var(--space-6);padding-top:var(--space-4);border-top:1px solid var(--color-border-light);font-size:var(--font-size-sm);text-align:center}.room-create-new a,.room-create-new-btn{display:inline-block;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:500;text-decoration:none;background-color:var(--color-primary);color:#fff;border:1px solid var(--color-primary);transition:background-color .2s ease,border-color .2s ease}.room-create-new a:hover,.room-create-new-btn:hover{background-color:var(--color-primary-hover);border-color:var(--color-primary-hover);color:#fff}.room-locked-badge{display:inline-block;padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);font-size:var(--font-size-xs);font-weight:600;background:color-mix(in srgb,var(--color-primary) 20%,transparent);border:1px solid var(--color-primary);color:var(--color-primary);margin:var(--space-2) 0}.room-wizard-nav{display:flex;gap:var(--space-2);margin-top:var(--space-4);flex-wrap:wrap}.room-wizard-nav .room-wizard-back{background:transparent;color:var(--color-text-muted);border-color:var(--color-border)}.room-wizard-nav .room-wizard-back:hover:not(:disabled){border-color:var(--color-primary);color:var(--color-primary)}h1{font-size:clamp(2rem,5vw,3rem);line-height:var(--line-height-tight);font-weight:700;margin:0 0 var(--space-2)}.home-tagline{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:-var(--space-1) 0 var(--space-4)}button{border-radius:var(--radius-md);border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:var(--color-surface-elevated);color:var(--color-text);cursor:pointer;transition:border-color .2s ease,background-color .2s ease,transform .1s ease}button:hover:not(:disabled){border-color:var(--color-primary)}button:active:not(:disabled){transform:scale(.98)}button:focus,button:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}@media(prefers-reduced-motion:reduce){button{transition:none}button:active:not(:disabled){transform:none}}@media(prefers-color-scheme:light){:root{--color-surface: #ffffff;--color-surface-elevated: #f5f5f5;--color-text: #1a1a1a;--color-text-muted: #555;--color-border: rgba(0, 0, 0, .15);--color-border-light: rgba(0, 0, 0, .08)}a:hover{color:var(--color-primary-hover)}button{background-color:var(--color-surface-elevated);color:var(--color-text)}.result-card{background:color-mix(in srgb,var(--color-primary) 6%,white);border-color:var(--color-border)}}