:root{--bg-primary: #fbfbfe;--bg-surface: #ffffff;--bg-surface-elevated: #f6f4fa;--bg-surface-hover: #f0ecf7;--text-main: #20133e;--text-body: #483e63;--text-muted: #7c7296;--text-subtle: #a59cb8;--color-purple-deep: #251646;--color-berry: #b82467;--color-berry-hover: #a11c56;--color-orange: #ff5533;--color-orange-hover: #f04420;--color-orange-soft: #fff2ee;--color-orange-border: #ffd5cc;--neutral-warm: #f7f6fa;--neutral-border: #ece7f4;--accent-emerald: #10b981;--accent-emerald-soft: #ecfdf5;--border-card: 1.5px solid #ece7f4;--border-subtle: rgba(37, 22, 70, .08);--shadow-sm: 0 2px 8px rgba(32, 19, 62, .04);--shadow-md: 0 8px 24px rgba(32, 19, 62, .06);--shadow-lg: 0 16px 36px rgba(32, 19, 62, .1);--shadow-berry-btn: 0 6px 18px rgba(184, 36, 103, .28);--shadow-orange-btn: 0 6px 18px rgba(255, 85, 51, .28);--font-heading: "Bricolage Grotesque", "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--radius-sm: 10px;--radius-md: 16px;--radius-lg: 22px;--radius-pill: 9999px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-body);background-color:var(--bg-primary);color:var(--text-main);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;min-height:100vh}#root{display:flex;flex-direction:column;min-height:100vh;position:relative}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);font-weight:700;color:var(--text-main);letter-spacing:-.015em}.text-orange{color:var(--color-orange);font-weight:800}.text-purple{color:var(--color-purple-deep)}.text-berry{color:var(--color-berry)}.serif-italic{color:var(--color-orange);font-weight:800}.font-mono{font-family:var(--font-body);font-weight:600}.app-container{max-width:1020px;margin:0 auto;padding:2.25rem 1.25rem 5rem;width:100%}.mobile-frame-wrapper{max-width:580px;margin:0 auto;width:100%}.glass-card{background:var(--bg-surface);border:var(--border-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2rem;transition:all .25s cubic-bezier(.16,1,.3,1);position:relative}.glass-card.interactive:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--color-orange-border)}.club-rule-strip{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;margin-bottom:1.5rem}.club-rule-item{display:inline-flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--neutral-border);padding:.35rem .9rem;border-radius:var(--radius-pill);font-size:.825rem;font-weight:600;color:var(--text-main);box-shadow:var(--shadow-sm)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:var(--font-body);font-weight:700;font-size:.95rem;letter-spacing:.01em;padding:.8rem 1.6rem;border-radius:var(--radius-pill);border:none;cursor:pointer;transition:all .2s cubic-bezier(.16,1,.3,1);text-decoration:none;outline:none;-webkit-user-select:none;user-select:none}.btn:active{transform:scale(.97)}.btn-primary{background:var(--color-orange);color:#fff;box-shadow:var(--shadow-orange-btn)}.btn-primary:hover{background:var(--color-orange-hover);transform:translateY(-2px);box-shadow:0 8px 24px #ff553361}.btn-orange{background:var(--color-orange);color:#fff;box-shadow:var(--shadow-orange-btn)}.btn-orange:hover{background:var(--color-orange-hover);transform:translateY(-2px);box-shadow:0 8px 24px #ff553361}.btn-secondary{background:var(--color-orange-soft);color:var(--color-orange);border:1px solid var(--color-orange-border)}.btn-secondary:hover{background:#ffe6e0;transform:translateY(-1px)}.btn-emerald{background:var(--color-berry);color:#fff;box-shadow:var(--shadow-berry-btn)}.btn-outline{background:transparent;color:var(--text-main);border:1.5px solid var(--neutral-border)}.btn-outline:hover{background:var(--neutral-warm)}.btn-sm{padding:.45rem 1rem;font-size:.825rem}.btn-lg{padding:1rem 2rem;font-size:1.05rem}.btn-full{width:100%}.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .85rem;font-size:.78rem;font-weight:700;border-radius:var(--radius-pill);letter-spacing:.01em}.badge-black{background:var(--color-purple-deep);color:#fff}.badge-cream{background:var(--color-orange-soft);color:var(--color-orange);border:1px solid var(--color-orange-border)}.badge-emerald{background:var(--accent-emerald-soft);color:#065f46;border:1px solid #a7f3d0}.badge-berry{background:#fdf2f8;color:var(--color-berry);border:1px solid #fbcfe8}.header-nav{position:sticky;top:0;z-index:50;background:#fffffff2;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--neutral-border);padding:.9rem 1.5rem}.nav-content{max-width:1020px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:1rem}.logo-wrap{display:flex;align-items:center;gap:.75rem;cursor:pointer;text-decoration:none}.logo-badge{width:38px;height:38px;border-radius:12px;background:var(--color-purple-deep);display:flex;align-items:center;justify-content:center;font-family:var(--font-heading);font-weight:800;font-size:1.25rem;color:#fff}.logo-text{font-family:var(--font-heading);font-weight:800;font-size:1.35rem;color:var(--text-main);letter-spacing:-.02em}.nav-tabs{display:flex;align-items:center;background:var(--neutral-warm);border:1px solid var(--neutral-border);padding:.25rem;border-radius:var(--radius-pill)}.nav-tab-btn{padding:.5rem 1.1rem;border-radius:var(--radius-pill);background:transparent;border:none;color:var(--text-muted);font-family:var(--font-body);font-weight:600;font-size:.85rem;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;gap:.4rem}.nav-tab-btn:hover{color:var(--color-purple-deep)}.nav-tab-btn.active{background:var(--color-purple-deep);color:#fff;box-shadow:0 2px 8px #25164633}.form-group{margin-bottom:1.35rem}.form-label{display:block;font-size:.875rem;font-weight:700;margin-bottom:.5rem;color:var(--text-main)}.form-input,.form-textarea,.form-select{width:100%;background:#fff;border:1.5px solid var(--neutral-border);border-radius:var(--radius-md);padding:.85rem 1.1rem;font-family:var(--font-body);font-size:.95rem;color:var(--text-main);transition:all .2s ease;outline:none;box-shadow:var(--shadow-sm)}.form-input:focus,.form-textarea:focus,.form-select:focus{border-color:var(--color-orange);box-shadow:0 0 0 3px #ff553326}.form-textarea{min-height:95px;resize:vertical}.pill-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:.65rem}.pill-card{background:#fff;border:1.5px solid var(--neutral-border);padding:.85rem .9rem;border-radius:var(--radius-md);cursor:pointer;transition:all .2s ease;text-align:center;font-size:.875rem;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem;color:var(--text-main);box-shadow:var(--shadow-sm)}.pill-card:hover{background:var(--color-orange-soft);border-color:var(--color-orange-border);transform:translateY(-2px)}.pill-card.selected{background:var(--color-orange-soft);border-color:var(--color-orange);color:var(--color-orange);box-shadow:0 0 0 2px var(--color-orange);font-weight:700}.persona-card-container{background:linear-gradient(145deg,#241442,#170d2c);color:#fff;border-radius:var(--radius-lg);padding:2.25rem 2rem;box-shadow:var(--shadow-lg);position:relative;overflow:hidden}.persona-card-container h2{color:#fff;font-family:var(--font-heading)}.dna-matrix-bar{height:10px;border-radius:var(--radius-pill);background:#ffffff26;overflow:hidden;margin:.75rem 0 1.25rem;display:flex}.dna-segment-1{background:var(--color-orange);height:100%}.dna-segment-2{background:#fff;height:100%}.icebreaker-card{background:var(--color-orange-soft);border:1.5px dashed var(--color-orange-border);border-radius:var(--radius-md);padding:1.25rem;margin-top:1.25rem}@keyframes slide-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.slide-up-in{animation:slide-up .25s cubic-bezier(.16,1,.3,1) forwards}@media (max-width: 768px){.app-container{padding:1.25rem .85rem 5rem}.header-nav{padding:.75rem 1rem}.nav-tabs{position:fixed;bottom:1rem;left:50%;transform:translate(-50%);z-index:100;background:#fff;box-shadow:0 10px 30px #20133e33;border:1px solid var(--neutral-border);width:calc(100% - 1.5rem);max-width:460px;justify-content:space-around;padding:.35rem}.nav-tab-btn{font-size:.75rem;padding:.45rem .6rem;flex-direction:column;gap:.2rem}.glass-card{padding:1.35rem 1.15rem}}
