*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{--primary: #6C5CE7;--primary-light: #EDE9FF;--bg: #F7F7FA;--bg-card: #FFFFFF;--text: #1A1A2E;--text-secondary: #6B7280;--text-tertiary: #9CA3AF;--radius: 16px;--shadow: 0 4px 16px rgba(0,0,0,.03);--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}@media(prefers-color-scheme:dark){:root{--bg: #0F0F1A;--bg-card: #1A1A2E;--text: #F0F0F5;--text-secondary: #9CA3AF;--text-tertiary: #6B7280;--shadow: 0 4px 16px rgba(0,0,0,.2)}.badge{background:#2a2a3e;color:#a78bfa}.section-label{color:#9ca3af}.bottom-cta{border-color:#2a2a3e}.picker-footer a{color:#9ca3af}}body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-text-size-adjust:100%}.picker-page{max-width:960px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}.picker-header{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;position:sticky;top:0;background:var(--bg);z-index:10}.picker-brand{font-size:1.25rem;font-weight:800;color:var(--primary);text-decoration:none}.btn-sm{padding:.45rem .85rem;border-radius:10px;font-size:.82rem;font-weight:600;text-decoration:none;display:inline-block;cursor:pointer;border:none;transition:opacity .15s}.btn-sm:active{opacity:.7}.btn-primary{background:var(--primary);color:#fff}.btn-outline{background:transparent;color:var(--primary);border:1.5px solid var(--primary)}.picker-main{padding:0 1rem 1.5rem;flex:1}.hero{text-align:center;padding:1rem 0 1.25rem}.hero-title{font-size:1.4rem;font-weight:800;line-height:1.2;margin-bottom:.5rem;background:linear-gradient(135deg,var(--primary),#A78BFA);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-desc{font-size:.88rem;color:var(--text-secondary);line-height:1.45;margin-bottom:.75rem}.hero-badges{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem}.badge{background:var(--primary-light);color:var(--primary);padding:.22rem .65rem;border-radius:50px;font-size:.72rem;font-weight:600;white-space:nowrap}.section-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text-tertiary);margin-bottom:.6rem}.char-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.65rem}@media(min-width:480px){.char-grid{grid-template-columns:repeat(3,1fr)}}@media(min-width:768px){.char-grid{grid-template-columns:repeat(4,1fr)}.hero-title{font-size:1.8rem}.picker-main{padding:0 2rem 2rem}}.char-card{background:var(--bg-card);border-radius:var(--radius);padding:.85rem .65rem;text-align:center;box-shadow:var(--shadow);cursor:pointer;transition:transform .15s;text-decoration:none;color:inherit;display:block;-webkit-tap-highlight-color:transparent;touch-action:manipulation}.char-card:active{transform:scale(.97)}.char-avatar{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0 auto .4rem;display:block;background:var(--primary-light)}.char-name{font-size:.88rem;font-weight:600;margin-bottom:.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.char-desc{font-size:.72rem;color:var(--text-secondary);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.3;margin-bottom:.3rem}.char-meta{font-size:.68rem;color:var(--text-tertiary);font-weight:500}.skeleton{pointer-events:none}.skel-avatar{width:64px;height:64px;border-radius:50%;background:var(--primary-light);margin:0 auto .4rem;animation:shimmer 1.2s infinite}.skel-text{height:10px;border-radius:5px;background:var(--primary-light);margin:.3rem auto;width:80%;animation:shimmer 1.2s infinite}.skel-text.short{width:50%}@keyframes shimmer{0%,to{opacity:.4}50%{opacity:1}}.error-state{text-align:center;padding:3rem 1rem;color:var(--text-secondary)}.error-state p{margin-bottom:1rem}.bottom-cta{text-align:center;margin-top:1.5rem;padding:1.25rem 1rem;border-top:1px solid #F2F2F7}.bottom-text{font-size:.85rem;color:var(--text-secondary);margin-bottom:.75rem;line-height:1.4}.picker-footer{display:flex;justify-content:center;gap:1rem;padding:1rem;flex-wrap:wrap}.picker-footer a{font-size:.75rem;color:var(--text-tertiary);text-decoration:none;font-weight:500}.picker-footer a:hover{color:var(--primary)}