:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #111114;--surface2: #1a1a1f;--border: rgba(255, 255, 255, .08);--border-hl: rgba(255, 255, 255, .15);--text: #fafafa;--text-dim: rgba(255, 255, 255, .55);--primary: #6366f1;--primary-hover: #818cf8;--accent-green: #22c55e;--accent-pink: #ec4899;--accent-amber: #f59e0b;--radius: .75rem;--radius-sm: .5rem}*{box-sizing:border-box;margin:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.app{max-width:900px;margin:0 auto;padding:2rem 1.25rem 3rem}.header{text-align:center;margin-bottom:2.5rem}.logo{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:.5rem}.logo-icon{font-size:2rem}.logo h1{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,var(--primary),var(--accent-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.subtitle{color:var(--text-dim);font-size:.95rem;max-width:26rem;margin:0 auto}.btn{display:inline-flex;align-items:center;gap:.4rem;font:inherit;font-size:.9rem;font-weight:600;padding:.6rem 1.25rem;border-radius:var(--radius-sm);border:none;cursor:pointer;transition:background .15s,transform .1s}.btn:active{transform:scale(.97)}.btn--primary{background:var(--primary);color:#fff}.btn--primary:hover{background:var(--primary-hover)}.btn--ghost{background:transparent;color:var(--text-dim);border:1px solid var(--border)}.btn--ghost:hover{color:var(--text);border-color:var(--border-hl)}.btn--lg{font-size:1.05rem;padding:.75rem 1.75rem}.hero{text-align:center}.hero-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2.5rem 2rem;margin-bottom:2rem}.hero-card h2{font-size:1.5rem;margin-bottom:.5rem}.hero-card p{color:var(--text-dim);margin-bottom:1.5rem;max-width:24rem;margin-left:auto;margin-right:auto}.pool-preview,.pool-section{margin-top:2rem}.pool-preview h3,.pool-section h3{font-size:1rem;color:var(--text-dim);margin-bottom:1rem;text-align:center}.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.75rem}.profile-card{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.85rem 1rem;transition:border-color .15s}.profile-card:hover{border-color:var(--border-hl)}.profile-card--highlight{border-color:var(--primary);background:#6366f10f}.profile-avatar{font-size:2rem;width:3rem;height:3rem;display:grid;place-items:center;background:var(--surface2);border-radius:.5rem;flex-shrink:0}.profile-info{flex:1;min-width:0}.profile-info h3{font-size:.95rem;font-weight:600;margin-bottom:.3rem}.skill-row{display:flex;align-items:center;gap:.4rem;margin-top:.2rem}.skill-badge{font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.15rem .4rem;border-radius:.25rem;flex-shrink:0}.skill-badge--teach{background:#22c55e26;color:var(--accent-green)}.skill-badge--learn{background:#f59e0b26;color:var(--accent-amber)}.skill-text{font-size:.82rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.add-form{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:2rem;max-width:28rem;margin:0 auto}.add-form h2{font-size:1.25rem;margin-bottom:1.25rem;text-align:center}.form-row{margin-bottom:1rem}.form-row label{display:block;font-size:.8rem;font-weight:600;color:var(--text-dim);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.04em}.form-row input{width:100%;padding:.6rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font:inherit;font-size:.9rem;outline:none;transition:border-color .15s}.form-row input:focus{border-color:var(--primary)}.form-row input::placeholder{color:#ffffff40}.avatar-picker{display:flex;flex-wrap:wrap;gap:.35rem}.avatar-btn{width:2.25rem;height:2.25rem;font-size:1.2rem;background:var(--bg);border:1px solid var(--border);border-radius:.4rem;cursor:pointer;display:grid;place-items:center;transition:border-color .15s,background .15s}.avatar-btn:hover{border-color:var(--border-hl)}.avatar-btn--selected{border-color:var(--primary);background:#6366f126}.form-actions{display:flex;gap:.75rem;margin-top:1.25rem}.dashboard{text-align:center}.dashboard h2{font-size:1.15rem;margin-bottom:.75rem}.your-profile{margin-bottom:2rem}.your-profile .profile-card{max-width:22rem;margin:0 auto}.spin-section{margin-bottom:2rem}.spin-desc{color:var(--text-dim);font-size:.9rem;margin-bottom:1.5rem}.spin-btn{margin-top:1.5rem}.wheel-container{position:relative;width:280px;height:280px;margin:0 auto}.wheel{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;border:3px solid var(--border-hl);transition:none}.wheel-seg{position:absolute;width:100%;height:100%;top:0;left:0;transform-origin:50% 50%}.wheel-label{position:absolute;top:0;left:50%;font-size:1.1rem;transform-origin:0 0}.wheel-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;background:var(--bg);border-radius:50%;display:grid;place-items:center;font-size:1.2rem;border:2px solid var(--border-hl);z-index:2}.wheel-pointer{position:absolute;top:-8px;left:50%;transform:translate(-50%);font-size:1.4rem;color:var(--accent-pink);z-index:3;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}.spinning-section{text-align:center;padding:2rem 0}.spinning-section h2{font-size:1.25rem;margin-bottom:1.5rem;animation:pulse 1.5s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.result-section{animation:fadeUp .4s ease-out}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.match-result{background:var(--surface);border:2px solid var(--primary);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}.match-header{text-align:center;margin-bottom:1.25rem}.match-badge{display:inline-block;font-size:1.1rem;font-weight:700;background:linear-gradient(135deg,var(--primary),var(--accent-pink));-webkit-background-clip:text;-webkit-text-fill-color:transparent;padding:.25rem .75rem;border:2px solid var(--primary);border-radius:2rem}.match-body{display:flex;align-items:center;gap:1rem;justify-content:center;flex-wrap:wrap}.match-arrow{display:flex;flex-direction:column;align-items:center;gap:.25rem}.arrow-line{width:2px;height:1.5rem;background:var(--primary);border-radius:1px}.arrow-label{font-size:.7rem;font-weight:700;color:var(--primary);background:#6366f11a;padding:.2rem .5rem;border-radius:1rem;white-space:nowrap}.match-detail{text-align:center;margin-top:1.25rem;font-size:.88rem;color:var(--text-dim);line-height:1.6}.match-detail em{color:var(--text);font-style:normal;font-weight:600}.match-detail strong{color:var(--primary)}.result-compatibility{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;margin-bottom:1.5rem}.result-compatibility h3{font-size:1rem;margin-bottom:1rem;text-align:center}.compat-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;padding:.6rem 0;border-bottom:1px solid var(--border);font-size:.85rem}.compat-row:last-of-type{border-bottom:none}.compat-label{color:var(--text-dim)}.compat-skill{font-weight:600}.compat-arrow,.compat-target{color:var(--text-dim)}.compat-match{margin-left:auto;font-size:.75rem;font-weight:700;padding:.2rem .5rem;border-radius:1rem}.compat-match--yes{background:#22c55e26;color:var(--accent-green)}.compat-match--no{background:#f59e0b1a;color:var(--accent-amber)}.compat-note{text-align:center;font-size:.82rem;color:var(--text-dim);margin-top:1rem;font-style:italic}.result-actions{text-align:center;margin-top:1rem}.history{margin-top:2.5rem}.history h2{font-size:1rem;color:var(--text-dim);margin-bottom:.75rem}.history-list{display:flex;flex-direction:column;gap:.5rem}.history-item{display:flex;align-items:center;gap:.75rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:.6rem .85rem;font-size:.85rem}.history-avatars{font-size:1.1rem}.history-names{color:var(--text-dim)}.footer{margin-top:3rem;text-align:center;color:var(--text-dim);font-size:.8rem;padding-top:1.5rem;border-top:1px solid var(--border)}@media(max-width:600px){.app{padding:1.25rem 1rem 2rem}.logo h1{font-size:1.35rem}.pool-grid{grid-template-columns:1fr}.match-body{flex-direction:column}.match-arrow{flex-direction:row}.arrow-line{width:1.5rem;height:2px}.compat-row{font-size:.78rem}}