:root { --member-accent:#6b4198; --member-soft:#f1e8fb; --member-bg:#fffaf3; --member-ink:#272035; --member-line:#e3dbe9; }
:root[data-happy-theme="purple"] { --member-accent:#6936ad; --member-soft:#ece1ff; --member-bg:#f8f4ff; --bg:#f8f4ff; --yellow:#d6baff; --surface:#fff; --ink:#272035; }
:root[data-happy-theme="sky"] { --member-accent:#086a98; --member-soft:#d9f1ff; --member-bg:#f1faff; --bg:#f1faff; --yellow:#9cddf7; --surface:#fff; --ink:#19384b; }
html[data-happy-theme="purple"] body, html[data-happy-theme="sky"] body { background:var(--member-bg); }
html[data-happy-theme="purple"] :is(#happyNavigationBar,.site-header), html[data-happy-theme="sky"] :is(#happyNavigationBar,.site-header) { background:var(--member-bg); }
html[data-happy-theme="purple"] :is(.nav-btn.active,.site-nav-login), html[data-happy-theme="sky"] :is(.nav-btn.active,.site-nav-login) { background:var(--member-soft); color:var(--member-accent); }
html.happy-large-text { font-size:18px; }
html.happy-large-text :is(main p,main li,main label,.member-menu-group a,.member-menu-hq) { font-size:1.08rem; line-height:1.75; }
html.happy-reduce-motion, html.happy-reduce-motion *, html.happy-reduce-motion *::before, html.happy-reduce-motion *::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
.member-menu-group { display:grid; gap:5px; border-top:1px solid currentColor; margin-top:14px; padding-top:12px; }
.member-menu-group h2 { font-size:12px; letter-spacing:.08em; opacity:.75; margin:2px 12px 7px; }
.member-menu-group a, .member-menu-hq { display:block; padding:12px; border-radius:12px; color:inherit; text-decoration:none; font-size:14px; min-height:44px; box-sizing:border-box; }
.member-menu-group a:hover, .member-menu-hq:hover { background:#9984b326; }
.member-menu-hq:focus-visible { outline:3px solid #d28a14; outline-offset:3px; }
body.member-has-bottom-nav { padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
body .member-bottom-nav { box-sizing:border-box; position:fixed; inset:auto 0 0; transform:none; margin:auto; width:100%; max-width:960px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px; padding:8px 6px calc(8px + env(safe-area-inset-bottom)); background:#ffffffed; backdrop-filter:blur(16px); border:1px solid var(--member-line); border-bottom:0; border-radius:20px 20px 0 0; z-index:60; }
body .member-bottom-nav .nav-btn { min-width:0; min-height:52px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:6px 2px; border:0; border-radius:13px; background:transparent; color:#625d6c; text-decoration:none; font:inherit; cursor:pointer; }
body .member-bottom-nav .nav-btn span { font-size:24px; height:25px; line-height:25px; }
body .member-bottom-nav .nav-btn b { font-size:11px; line-height:1.3; overflow-wrap:anywhere; }
body .member-bottom-nav .nav-btn.active { color:var(--member-accent); background:var(--member-soft); }
.member-page { width:min(100%,900px); box-sizing:border-box; margin:0 auto; padding:28px 20px 36px; color:var(--member-ink); font:16px/1.65 system-ui,sans-serif; }
.member-page [hidden] { display:none!important; }
.member-eyebrow { color:var(--member-accent); font-size:12px; letter-spacing:.14em; font-weight:800; }
.member-page h1 { font-size:clamp(28px,6vw,42px); line-height:1.25; letter-spacing:-.04em; margin:8px 0 16px; }
.member-page h2 { font-size:20px; line-height:1.4; margin:0 0 10px; }
.member-page p { margin:8px 0 16px; color:#625d6c; }
.member-card { background:#fff; border:1px solid var(--member-line); border-radius:22px; padding:24px; margin:16px 0; box-shadow:0 8px 32px #31244608; }
.member-card-accent { background:linear-gradient(135deg,var(--member-soft),#fff); }
.member-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; }
.member-button, .member-page button { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; box-sizing:border-box; padding:11px 18px; border:1px solid var(--member-line); border-radius:13px; font:700 14px/1.4 system-ui,sans-serif; color:var(--member-accent); background:#fff; text-decoration:none; cursor:pointer; }
.member-button.primary, .member-page button[type="submit"] { background:var(--member-accent); color:white; border-color:var(--member-accent); width:auto; box-shadow:none; }
.member-page button:disabled { opacity:.6; cursor:wait; }
.member-page :is(a,button,input,textarea,summary):focus-visible, .member-bottom-nav a:focus-visible { outline:3px solid #d28a14; outline-offset:3px; }
.member-page label { display:block; font-weight:650; margin:14px 0 8px; }
.member-page :is(input[type="text"],textarea) { box-sizing:border-box; width:100%; min-width:0; min-height:46px; border:1px solid #cfc6d7; border-radius:11px; padding:12px; font:16px/1.6 system-ui,sans-serif; color:#272035; background:#fff; }
.member-page input[readonly] { background:#f7f5fa; }
.member-copy-row { display:flex; align-items:stretch; gap:8px; }
.member-copy-row input { flex:1; }
.member-page .member-code { font:800 22px/1.3 ui-monospace,monospace; letter-spacing:.06em; }
.member-page .member-help { font-size:13px; }
.member-status { min-height:24px; font-weight:650; color:var(--member-accent)!important; }
.member-status:empty { display:none; }
.member-steps { list-style:none; padding:0; counter-reset:steps; display:grid; gap:14px; }
.member-steps>li { counter-increment:steps; border:1px solid var(--member-line); border-radius:20px; background:#fff; padding:22px; }
.member-steps>li::before { content:"0" counter(steps); display:inline-grid; place-items:center; width:36px; height:36px; border-radius:11px; color:var(--member-accent); background:var(--member-soft); font-weight:800; margin-bottom:12px; }
.member-themes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding:0; border:0; margin:18px 0; }
.member-themes legend { font-weight:700; margin-bottom:8px; }
.member-themes label { border:1px solid var(--member-line); border-radius:15px; padding:14px 8px; margin:0; text-align:center; font-size:14px; cursor:pointer; }
.member-themes label:has(:checked) { outline:2px solid var(--member-accent); background:var(--member-soft); }
.member-swatch { display:block; width:38px; height:38px; border-radius:50%; margin:0 auto 8px; background:#ffdd78; }
.member-swatch.purple { background:#b493e4; }.member-swatch.sky { background:#86d2f1; }
.member-setting { display:flex!important; justify-content:space-between; align-items:center; gap:18px; padding:14px 0; border-bottom:1px solid var(--member-line); }
.member-setting input { width:22px; height:22px; accent-color:var(--member-accent); flex:none; }
.member-page details { border-bottom:1px solid var(--member-line); padding:18px 0; }
.member-page summary { font-weight:700; cursor:pointer; }
.member-launch-banner { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; padding:16px; background:var(--member-soft); border-radius:18px; margin:12px; font:600 14px/1.5 system-ui,sans-serif; }
.member-launch-icon { width:72px; height:72px; border-radius:22px; }
@media(min-width:720px) { .member-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .member-page { padding-top:40px; } }
@media(max-width:360px) { .member-page { padding:24px 12px; } .member-card,.member-steps>li { padding:18px; } .member-button { padding:10px 12px; } }