html{--member-surface:#302744;--member-ink:#f6f2ff;--member-muted:#d6cde6;--member-line:#9580b0;--member-input:#211a32;--member-success:#b4f3d1;--member-warn:#ffe2a6;--member-error:#ffc7c8;color-scheme:dark}
html[data-theme=light]{--member-surface:#fff;--member-ink:#211a32;--member-muted:#51435f;--member-line:#8a739c;--member-input:#f5f0fa;--member-success:#146443;--member-warn:#7e4d10;--member-error:#922f37;color-scheme:light}
body{font-family:var(--font-body);font-size:16px;margin:0;background:var(--bg);color:var(--text)}
[hidden]{display:none!important}.members-main{max-width:1020px;margin:0 auto;padding:38px 28px 72px;position:relative}.members-heading{margin-bottom:30px}.members-heading>a{font-size:15px;color:var(--text);text-decoration:none}.members-heading h1{font:600 2.35rem/1.4 var(--font-head);margin:22px 0 10px;display:flex;gap:14px;align-items:center}.members-heading p{line-height:1.75;margin:0;color:var(--text)}
.member-pass{position:relative;background:radial-gradient(ellipse at 100% 0,rgba(185,164,247,.14),transparent 50%),linear-gradient(145deg,var(--member-surface),var(--member-surface));color:var(--member-ink);border:1.5px solid var(--member-line);border-radius:16px;padding:28px 34px;isolation:isolate}.member-pass:after{content:"";position:absolute;inset:9px;border:1px dashed var(--member-line);border-radius:10px;opacity:.5;pointer-events:none;z-index:-1}.pass-top{display:flex;align-items:center;justify-content:space-between;gap:20px}.pass-brand{font:700 20px var(--font-head);letter-spacing:.04em}.pass-brand>span{display:block;letter-spacing:.12em;font:600 12px var(--font-body);margin-top:4px;color:var(--member-muted)}.member-status{font:600 30px/1.5 var(--font-head);margin:30px 0 6px;overflow-wrap:anywhere}.member-detail{margin:0;color:var(--member-muted);line-height:1.75}.member-pass[data-state=active] .member-status{color:var(--member-success)}.member-pass[data-state=pending] .member-status{color:var(--member-warn)}.member-pass[data-state=expired] .member-status{color:var(--member-error)}
.member-trail{list-style:none;display:flex;padding:0;margin:28px 0 0;border-top:1px solid var(--member-line);border-bottom:1px solid var(--member-line)}.member-trail li{flex:1;min-width:0;position:relative}.member-trail li+li:before{content:"›";position:absolute;left:-5px;top:23px;color:var(--member-muted)}.member-trail button{display:flex;align-items:center;gap:10px;justify-content:center;border:0;background:transparent;color:var(--member-muted);font:600 16px var(--font-body);width:100%;min-height:70px;padding:10px 12px;cursor:pointer;border-bottom:3px solid transparent;transition:background .18s,color .18s}.member-trail button[aria-current=step]{color:#f6dba6;border-bottom-color:#e5c586;background:rgba(229,197,134,.08)}html[data-theme=light] .member-trail button[aria-current=step]{color:#684415;border-bottom-color:#946f27;background:#fbf3e2}.step-no{font:700 22px var(--font-head)}.member-trail img{object-fit:contain}.member-body{padding-top:26px;min-height:222px}.member-body h2{display:flex;align-items:center;gap:12px;font:600 24px/1.4 var(--font-head);margin:0 0 16px}.member-body p{line-height:1.75;margin:0 0 18px}.member-body [data-member-panel]{animation:member-panel-in .18s ease-out}.member-body [data-member-panel]>p{max-width:65ch}.member-primary,.member-quiet{display:inline-flex;justify-content:center;align-items:center;gap:10px;min-height:46px;box-sizing:border-box;font:600 16px/1.5 var(--font-body);border-radius:9px;padding:10px 18px;text-decoration:none;cursor:pointer;transition:translate .18s,background .18s,border-color .18s}.member-primary span{transition:translate .18s,rotate .18s}.member-primary:hover{translate:0 -2px}.member-primary:hover span{translate:2px -2px;rotate:6deg}.member-primary:active,.member-quiet:active{translate:0 2px}.member-primary:disabled,.member-quiet:disabled{cursor:wait;translate:none;background:var(--member-input);color:var(--member-muted);border-color:var(--member-line)}.member-form-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}.member-body label{display:block;font-weight:600;margin-bottom:8px}.member-body input{display:block;width:100%;box-sizing:border-box;padding:13px 15px;font:400 16px var(--font-body);line-height:1.5;min-height:50px;background:var(--member-input);color:var(--member-ink);border:1px solid var(--member-line);border-radius:8px;margin-bottom:16px}.member-body input::placeholder{color:var(--member-muted);opacity:1}.member-note{font-size:15px;color:var(--member-muted);margin:16px 0 0!important}.member-feedback{line-height:1.75;min-height:28px;margin:20px 0 0;overflow-wrap:anywhere}.member-help{margin-top:28px}.member-help summary{font-weight:600;cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--text);border-bottom:1px solid var(--border);padding:10px 0}.member-help p{line-height:1.8;max-width:70ch;color:var(--text);margin:16px 0}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #ab8fe3;outline-offset:4px}.member-trail button:hover{background:rgba(185,164,247,.14)}.member-trail button:hover img{rotate:-6deg}.member-trail img{transition:rotate .18s}.members-main[data-direction=ledger] .member-pass{border-radius:3px;border-width:0 0 3px;padding-left:38px;background:linear-gradient(90deg,rgba(185,164,247,.15),transparent 50%)}.members-main[data-direction=ledger] .member-pass:after{display:none}.members-main[data-direction=ledger] .member-trail{border-top:0}
@keyframes member-panel-in{from{opacity:.6;translate:0 5px}to{opacity:1;translate:0 0}}
html[data-motion=paused] .members-main *,html[data-motion=paused] .members-main *:before{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){.members-main *,.members-main *:before{animation:none!important;transition:none!important;translate:none!important}}
@media(max-width:650px){.members-main{padding:22px 16px 56px}.members-heading h1{font-size:28px;gap:10px}.member-pass{padding:24px 20px}.pass-top{gap:12px;align-items:flex-start}.pass-brand{font-size:17px}.pass-brand>span{font-size:11px}.pass-top .member-quiet{font-size:14px;padding:8px 10px}.member-status{font-size:25px;margin-top:24px}.member-trail button{flex-direction:column;gap:4px;padding:12px 4px;font-size:14px;min-height:83px}.member-trail li+li:before{top:28px}.member-body h2{font-size:22px}.member-body{min-height:285px}.member-primary{width:100%}.member-form-actions{gap:10px}.member-quiet{padding:10px 12px}.member-body input{font-size:16px}.members-heading p{font-size:16px}}

/* Shared auth supplies the Google dialog; these scoped controls keep its clear action hierarchy. */
.member-primary,.member-quiet{transition:translate .18s,background .18s,border-color .18s,color .18s,box-shadow .18s}
.member-primary{background:linear-gradient(135deg,#4f3812,#2d1f09);border:1.5px solid #e9b64b;border-bottom-width:3px;color:#fffbeb;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.member-primary:hover,.member-primary:focus-visible{background:linear-gradient(135deg,#6e4e19,#402c0d);border-color:#fbbf24;color:#fff;box-shadow:0 4px 14px rgba(180,120,25,.24),inset 0 1px 0 rgba(255,255,255,.14)}
.member-primary span,.member-primary:hover span,.member-primary:focus-visible span{color:inherit}
.member-quiet{background:linear-gradient(135deg,#3b3329,#241e18);border:1.5px solid #b09b7d;color:#fffbeb}
.member-quiet:hover,.member-quiet:focus-visible{background:linear-gradient(135deg,#544636,#332a20);border-color:#e9b64b;color:#fff}
.member-quiet span,.member-quiet:hover span,.member-quiet:focus-visible span{color:inherit}
.member-primary:disabled,.member-quiet:disabled{box-shadow:none;background:var(--member-input);color:var(--member-muted);border-color:var(--member-line)}
.member-trail button:hover,.member-trail button:focus-visible{color:var(--member-ink)}
#member-login::before,#owner-login::before{content:"";width:20px;height:20px;flex:none;background:url('/assets/brand/google-g.svg') center/contain no-repeat}
/* Contextual guide remains in normal flow; shared Slime keeps its own action plane. */
.member-guide{display:grid;grid-template-columns:80px minmax(0,1fr);align-items:center;gap:20px;margin:0 0 26px;min-width:0}
.member-guide img{display:block;width:80px;height:96px;object-fit:contain;align-self:center}
.member-guide-copy{border-left:3px solid var(--member-line);padding-left:18px;min-width:0}
.member-guide .member-guide-name{font:600 16px/1.6 var(--font-body);margin:0 0 6px;color:var(--member-ink)}
.member-guide #member-guide-tip{font:400 16px/1.75 var(--font-body);margin:0;color:var(--member-muted);overflow-wrap:anywhere}
.member-profile-optional{margin-top:20px;border-top:1px solid var(--member-line);padding-top:16px}
.member-profile-optional label{margin-top:16px}
.member-proof-row .member-quiet{white-space:normal;text-align:center}
@media(max-width:420px){.member-guide{grid-template-columns:64px minmax(0,1fr);gap:16px}.member-guide img{width:64px;height:80px}.member-guide-copy{padding-left:14px}}
.member-proof{border-top:1px solid var(--member-line);margin-top:20px;padding-top:18px;min-width:0}
.member-proof-label{font-weight:600;margin:0 0 10px!important;line-height:1.6}
.member-proof-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.member-proof code{font:500 16px/1.75 var(--font-mono,'JetBrains Mono',monospace);color:var(--member-ink);overflow-wrap:anywhere;user-select:all}
.member-proof-row code{flex:1;min-width:230px}
.member-proof-instruction{font-size:16px;line-height:1.75;margin:12px 0 0!important;color:var(--member-muted)}
@media(max-width:650px){.member-proof-row{align-items:stretch;flex-direction:column}.member-proof-row code{min-width:0}.member-proof-row .member-quiet{align-self:flex-start;max-width:100%}}

/* Member journey: an open checklist, one leading action, explicit waiting state. */
html{--member-surface:#251e39;--member-line:#8c77a6}
html[data-theme=light]{--member-surface:#fffcf6;--member-line:#9b87ab}
.member-pass{padding:32px 38px;background:radial-gradient(ellipse at 100% 0,rgba(167,123,225,.18),transparent 55%),var(--member-surface);box-shadow:0 22px 60px rgba(9,5,22,.17)}
.member-pass:after{opacity:.2}
.member-trail{gap:12px;border:0;margin-top:30px}
.member-trail li+li:before{display:none}
.member-trail button{justify-content:flex-start;align-items:center;gap:12px;min-height:80px;padding:12px 4px;border-bottom:2px solid var(--member-line);text-align:left;background:transparent!important}
.member-trail button[aria-current=step]{border-bottom-color:var(--member-warn);color:var(--member-ink)}
.member-trail button:hover:not(:disabled),.member-trail button:focus-visible{border-bottom-color:var(--member-ink);color:var(--member-ink);background:transparent!important}
.member-trail button:disabled{cursor:not-allowed;color:var(--member-muted);opacity:.7}
.member-trail .step-copy{display:block;font:600 16px/1.5 var(--font-body)}
.member-trail small{display:block;font:400 14px/1.6 var(--font-body);color:var(--member-muted);margin-top:4px}
.member-trail .step-no{font-size:18px;font-weight:500;color:var(--member-muted)}
.member-guide{grid-template-columns:100px minmax(0,1fr);gap:24px;margin-bottom:30px}
.member-guide img{width:100px;height:114px}
.member-guide-copy{border:0;padding:0}
.member-guide .member-guide-name{font-weight:600;color:var(--member-warn)}
.member-body h2{font-size:26px;margin-bottom:18px}
.member-primary{background:linear-gradient(135deg,#4c2263,#2d123b);border-color:#bc89de;box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 5px 14px rgba(19,5,31,.15);padding:13px 20px;min-height:50px}
.member-primary:hover,.member-primary:focus-visible{background:linear-gradient(135deg,#6b2f8a,#3f1854);border-color:#d9b4f2;color:#fff;box-shadow:0 6px 20px rgba(136,69,176,.25)}
.member-primary img{object-fit:contain;flex:none;transition:rotate .18s}
.member-primary:hover img{rotate:-6deg}
.member-copy{background:linear-gradient(135deg,#164e3e,#0d3126);border-color:#79cdb2}
.member-copy:hover,.member-copy:focus-visible{background:linear-gradient(135deg,#1f6e58,#124536);border-color:#a3ebce;color:#fff}
.member-text-action{display:inline-flex;gap:8px;align-items:center;justify-content:center;min-height:44px;padding:8px 2px;font:500 15px/1.6 var(--font-body);color:var(--member-muted);background:transparent;border:0;border-bottom:1px solid transparent;cursor:pointer;text-decoration:none}
.member-text-action:hover,.member-text-action:focus-visible{color:var(--member-ink);border-bottom-color:currentColor;background:transparent}
.member-text-action:disabled{cursor:not-allowed;opacity:.65}
.member-contact-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin:14px 0 4px;font:500 16px/1.6 var(--font-body);color:var(--member-ink);text-decoration:none;text-underline-offset:5px}
.member-contact-link:hover,.member-contact-link:focus-visible{color:var(--member-ink);text-decoration:underline}
.member-contact-link img{object-fit:contain;flex:none}
.member-method{margin:26px 0 0;padding:26px 0 0;border-top:1px solid var(--member-line);background:transparent}
.member-method h3{font:600 21px/1.6 var(--font-head);margin:0 0 10px}
.member-method h3>span{display:block;font:500 14px/1.6 var(--font-body);color:var(--member-muted);margin-bottom:4px}
.member-method>p{color:var(--member-muted);max-width:62ch}
.member-method label{font-weight:500}
.member-profile-optional label{margin-top:20px}
.member-profile-optional .member-quiet{background:transparent;color:var(--member-ink);border-color:var(--member-line);border-radius:8px;box-shadow:none}
.member-profile-optional .member-quiet:hover,.member-profile-optional .member-quiet:focus-visible{background:var(--member-input);color:var(--member-ink);border-color:var(--member-ink)}
.member-profile-optional .member-quiet:disabled{color:var(--member-muted);cursor:not-allowed}
.member-withdraw-row{margin-top:24px}
.member-pending-notice{display:flex;gap:14px;align-items:flex-start;border-left:3px solid var(--member-warn);padding-left:18px;margin:8px 0 26px}
.member-pending-notice>span{flex:none;margin-top:4px}
.member-pending-notice strong{font:600 20px/1.6 var(--font-head);color:var(--member-warn)}
.member-pending-notice p{margin:6px 0 0;color:var(--member-muted)}
.member-proof{margin-top:24px;padding-top:24px}
.member-proof-row{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;justify-items:start}
.member-proof code{font-size:15px;letter-spacing:.01em;padding:6px 0}
.member-proof-row code{min-width:0;max-width:100%}
.member-approved-next{margin-top:28px;border-top:1px solid var(--member-line);padding-top:24px}
.member-discord-instructions{list-style:none;counter-reset:dock;display:grid;gap:0;margin:24px 0 0;padding:0}
.member-discord-instructions>li{counter-increment:dock;position:relative;padding:24px 0 24px 44px;border-top:1px solid var(--member-line)}
.member-discord-instructions>li:before{content:'0' counter(dock);position:absolute;top:27px;left:0;font:500 16px var(--font-head);color:var(--member-muted)}
.member-discord-instructions strong{font:600 21px/1.6 var(--font-head)}
.member-discord-instructions p{margin:10px 0 14px;color:var(--member-muted)}
.member-body .member-discord-instructions .member-note{margin-top:14px}
@media(max-width:650px){.member-pass{padding:24px 20px}.member-trail{gap:10px}.member-trail button{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:10px;padding:12px 0;min-height:112px}.member-trail .step-copy{font-size:14px}.member-trail small{font-size:14px}.member-guide{grid-template-columns:72px minmax(0,1fr);gap:18px}.member-guide img{width:72px;height:94px}.member-body h2{font-size:23px}.member-primary{width:auto;max-width:100%;text-align:center}.member-proof-row .member-primary{width:100%}.member-form-actions{align-items:flex-start;gap:14px}.member-method h3{font-size:20px}.member-discord-instructions>li{padding-left:34px}.member-contact-link{flex-wrap:wrap}.pass-top .member-text-action{font-size:14px}.member-proof code{font-size:14px}.member-guide-copy{padding-left:0}}
@media(max-width:350px){.member-pass{padding:24px 16px}.member-trail{gap:8px}.member-trail .step-copy,.member-trail small{font-size:14px}.member-guide{grid-template-columns:60px minmax(0,1fr);gap:16px}.member-guide img{width:60px;height:80px}.member-discord-instructions>li{padding-left:0;padding-top:48px}.member-discord-instructions>li:before{top:20px}}
@media(max-width:650px){.member-guide{grid-template-columns:minmax(0,1fr) 72px}.member-guide img{grid-column:2;grid-row:1}.member-guide-copy{grid-column:1;grid-row:1}}
@media(max-width:350px){.member-guide{grid-template-columns:minmax(0,1fr) 60px}}
.member-primary:disabled,.member-quiet:disabled{cursor:not-allowed}
/* Keep the single floating Slime inside the narrow left gutter, clear of guide copy/faces. */
@media(max-width:650px){body:has(.members-main) #slime-mate{left:0!important;transform:none!important;width:44px;height:44px;box-sizing:border-box;padding:8px}body:has(.members-main) #slime-mate canvas{width:28px!important;height:21px!important}}
/* 2026-10-24 Audi "แก้หน้า members" → "ควรทำให้มันเด่นโชว์featureกว่านี้ไหมโชว์รูป": newcomers from the nav sign-up see what members get, with real screenshots (clickable tool cards), then the 3-step pass. Primary = the site gold. */
.member-join{margin:0 0 34px;padding:0 0 30px;border-bottom:1px solid var(--member-line)}
.mj-head{display:flex;align-items:center;justify-content:space-between;gap:16px 28px;flex-wrap:wrap;margin-bottom:20px}
.member-join h2{display:flex;align-items:center;gap:10px;font:600 1.6rem/1.4 var(--font-head);margin:0;color:var(--text)}
.mj-start{display:flex;align-items:center;gap:12px}
.mj-mascot{width:64px;height:auto;image-rendering:pixelated}
.mj-q{margin:0 0 6px;font-weight:700;font-size:1rem;color:var(--text)}
.mj-fb{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;text-decoration:none;border-radius:999px;font-weight:700;padding:10px 18px}
.mj-tools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.mj-tool{display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--text);border-radius:14px;padding:8px 8px 14px;border:1px solid var(--member-line);background:color-mix(in srgb,var(--member-surface) 70%,transparent);transition:translate .2s,border-color .2s,box-shadow .2s}
a.mj-tool:hover,a.mj-tool:focus-visible{translate:0 -3px;border-color:color-mix(in srgb,var(--aku-primary) 70%,transparent);box-shadow:0 12px 26px -14px color-mix(in srgb,var(--aku-primary) 70%,transparent)}
.mj-shot{display:block;overflow:hidden;border-radius:9px;aspect-ratio:16/11;background:var(--member-input)}
.mj-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;transition:scale .4s}
a.mj-tool:hover .mj-shot img{scale:1.04}
.mj-dock .mj-shot img{object-position:center}
.mj-shot .ts-light{display:none}
html[data-theme=light] .mj-shot .ts-light{display:block}html[data-theme=light] .mj-shot .ts-dark{display:none}
.mj-name{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-weight:700;font-size:1.02rem;padding:6px 4px 0}
.mj-line{font-size:.9rem;line-height:1.55;opacity:.82;padding:0 4px}
.mj-risk{font-style:normal;font-size:.72rem;font-weight:700;padding:2px 8px;border-radius:999px;color:var(--aku-bad-ink);background:color-mix(in srgb,var(--aku-bad) 18%,transparent)}
html:not([data-theme=light]) .mj-risk{color:var(--aku-bad)}
.mj-note{margin:16px 0 0;font-size:.9rem;opacity:.8;color:var(--text)}
.member-trail img[src*="google-g"]{flex:none}
@media(prefers-reduced-motion:reduce){.mj-tool,.mj-shot img{transition:none}}
.member-primary{background:linear-gradient(180deg,color-mix(in srgb,var(--aku-primary) 55%,white),var(--aku-primary))!important;border:1.5px solid color-mix(in srgb,var(--aku-primary) 55%,black)!important;border-bottom-width:3px!important;color:var(--aku-primary-ink)!important}
.member-primary:hover,.member-primary:focus-visible{background:linear-gradient(180deg,color-mix(in srgb,var(--aku-primary) 35%,white),color-mix(in srgb,var(--aku-primary) 90%,white))!important;color:var(--aku-primary-ink)!important;box-shadow:0 6px 18px -6px color-mix(in srgb,var(--aku-primary) 80%,transparent)!important}
.member-primary:disabled{background:var(--member-input)!important;color:var(--member-muted)!important;border-color:var(--member-line)!important}
@media(max-width:980px){.mj-tools{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.mj-tools{grid-template-columns:1fr}.mj-head{align-items:flex-start}}
/* 2026-10-24 Audi: "พื้นหลังเป็นกล่องม่วงๆแบบนี้ไม่สวยไหม ออกแบบทั้งหน้าโดยรวมให้ดีขึ้นอีก" → no purple boxes.
   Tools = the approved file folders (tab + blueprint grid + lock coin + real screenshot in a browser frame, colour per tool).
   Pass = a leather passport with a paper page (same family as the About diary); member vars switch to paper inks inside it. */
.mj-tools{gap:30px 18px;padding-top:16px}
.mj-tool{--tool-accent:rgb(96,165,250);position:relative;border-radius:0 14px 14px 14px;padding:10px 10px 16px;border:1.5px solid color-mix(in srgb,var(--tool-accent) 46%,rgb(61,85,115));border-bottom:5px solid color-mix(in srgb,var(--tool-accent) 58%,rgb(9,19,34));
 background:repeating-linear-gradient(0deg,rgba(148,184,234,.055) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(148,184,234,.055) 0 1px,transparent 1px 22px),radial-gradient(120% 90% at 88% 20%,color-mix(in srgb,var(--tool-accent) 22%,transparent),transparent 65%),linear-gradient(160deg,rgb(26,48,76),rgb(14,29,49));
 box-shadow:0 20px 38px -16px rgba(2,8,20,.78),inset 0 1px 0 rgba(255,255,255,.12);color:var(--aku-on-night)}
.mj-tool::before{content:"";position:absolute;top:-15px;left:-1.5px;width:42%;height:15px;border-radius:9px 11px 0 0;border:1.5px solid color-mix(in srgb,var(--tool-accent) 46%,rgb(61,85,115));border-bottom:0;background:linear-gradient(180deg,color-mix(in srgb,var(--tool-accent) 26%,rgb(34,59,91)),rgb(26,48,76))}
a.mj-tool::after{content:"🔒";position:absolute;top:-14px;right:14px;width:30px;height:30px;display:grid;place-items:center;font-size:14px;border-radius:50%;background:radial-gradient(circle at 32% 28%,rgb(255,243,196),rgb(234,185,87) 58%,rgb(156,114,33));border:2px solid rgb(110,78,16);box-shadow:0 3px 0 rgb(89,62,11),0 0 14px rgba(245,210,133,.4)}
.mj-tool:nth-child(1){--tool-accent:rgb(52,211,153)}.mj-tool:nth-child(2){--tool-accent:rgb(96,165,250)}.mj-tool:nth-child(3){--tool-accent:rgb(245,200,110)}.mj-dock{--tool-accent:rgb(129,140,248)}
a.mj-tool:hover,a.mj-tool:focus-visible{translate:0 -4px;border-color:color-mix(in srgb,var(--tool-accent) 80%,white);box-shadow:0 24px 46px -14px rgba(3,9,22,.68),0 0 24px color-mix(in srgb,var(--tool-accent) 26%,transparent)}
.mj-shot{position:relative;padding-top:16px;border-radius:9px;background:rgb(10,19,34);border:1px solid color-mix(in srgb,var(--tool-accent) 40%,transparent);aspect-ratio:auto}
.mj-shot::before{content:"";position:absolute;top:5px;left:8px;width:30px;height:6px;background:radial-gradient(circle,rgb(248,113,113) 0 2.6px,transparent 3px) 0 0/10px 6px,radial-gradient(circle,rgb(251,191,36) 0 2.6px,transparent 3px) 10px 0/10px 6px,radial-gradient(circle,rgb(74,222,128) 0 2.6px,transparent 3px) 20px 0/10px 6px;background-repeat:no-repeat}
.mj-shot img{aspect-ratio:16/11;height:auto;border-radius:0 0 8px 8px}
.mj-dock .mj-shot{padding-top:0;background:none}.mj-dock .mj-shot::before{display:none}.mj-dock .mj-shot img{border-radius:8px}
.mj-name{color:inherit}.mj-line{color:inherit}
html[data-theme=light] .mj-tool{color:var(--aku-ink);border-color:color-mix(in srgb,var(--tool-accent) 48%,rgb(181,197,220));border-bottom-color:color-mix(in srgb,var(--tool-accent) 62%,rgb(138,162,194));
 background:repeating-linear-gradient(0deg,rgba(37,75,135,.045) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(37,75,135,.045) 0 1px,transparent 1px 22px),radial-gradient(120% 90% at 88% 20%,color-mix(in srgb,var(--tool-accent) 18%,transparent),transparent 65%),linear-gradient(160deg,rgb(255,255,255),rgb(238,244,252));box-shadow:0 18px 34px -18px rgba(20,42,74,.24)}
html[data-theme=light] .mj-tool::before{border-color:color-mix(in srgb,var(--tool-accent) 48%,rgb(181,197,220));background:linear-gradient(180deg,color-mix(in srgb,var(--tool-accent) 22%,white),rgb(247,250,255))}
html[data-theme=light] .mj-shot{background:rgb(241,245,251)}
html[data-theme=light] .mj-risk{color:var(--aku-bad-ink)}


@media(max-width:520px){.mj-tools{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:80%;overflow-x:auto;scroll-snap-type:x mandatory;padding:18px 4px 12px;margin-inline:-4px;scrollbar-width:thin}.mj-tool{scroll-snap-align:start}.mj-head{gap:12px}}
/* 0DTE folder shows four of its rooms in turn (Audi 2026-10-24 "เอาหน้าอื่นมาโชว์รูปบ้างไหม หน้าGEXอะไรงี้"); hover or paused motion holds the current one */
.mj-shot.is-reel{display:grid}
.mj-slide{grid-area:1/1;position:relative;opacity:0;animation:mjReel 16s infinite}
.mj-slide:nth-child(1){animation-delay:0s}.mj-slide:nth-child(2){animation-delay:4s}.mj-slide:nth-child(3){animation-delay:8s}.mj-slide:nth-child(4){animation-delay:12s}
@keyframes mjReel{0%{opacity:0}3%{opacity:1}25%{opacity:1}28%{opacity:0}100%{opacity:0}}
.mj-slide-tag{position:absolute;left:6px;bottom:6px;font-style:normal;font-size:.66rem;font-weight:700;padding:2px 7px;border-radius:999px;background:rgba(8,15,30,.82);color:rgb(255,236,190);border:1px solid color-mix(in srgb,var(--tool-accent) 60%,transparent)}
html[data-theme=light] .mj-slide-tag{background:rgba(255,255,255,.92);color:var(--aku-ink)}
a.mj-tool:is(:hover,:focus-visible) .mj-slide{animation-play-state:paused}
html[data-motion=paused] .mj-slide{animation:none}html[data-motion=paused] .mj-slide:first-child{opacity:1}
@media(prefers-reduced-motion:reduce){.mj-slide{animation:none}.mj-slide:first-child{opacity:1}}

/* passport stamps: each step is a stamp slot; the current one is ringed in gold, a finished one gets a red "ผ่าน" stamp */
html[data-theme] .members-main .member-trail{border:0;gap:12px;margin:22px 0 6px}
html[data-theme] .members-main .member-trail li+li:before{content:"";left:-12px;top:36px;width:12px;border-top:2px dotted var(--member-line)}
html[data-theme] .members-main .member-trail button{position:relative;flex-direction:column!important;align-items:center!important;justify-content:flex-start!important;text-align:center!important;gap:8px!important;border:0!important;min-height:0!important;padding:6px 4px!important;color:var(--member-muted)}
html[data-theme] .members-main .member-trail button>img{box-sizing:border-box;width:62px;height:62px;padding:16px;border-radius:50%;border:2px dashed var(--member-line);background:rgba(255,255,255,.55);transition:border-color .2s,box-shadow .2s,rotate .2s}
html[data-theme] .members-main .member-trail .step-copy{display:flex;flex-direction:column;align-items:center;font-weight:700;color:var(--member-ink)}
html[data-theme] .members-main .member-trail small{display:block;font-weight:500;color:var(--member-muted)}
html[data-theme] .members-main .member-trail button[aria-current=step]>img{border:2.5px solid rgb(176,128,40);box-shadow:0 0 0 5px rgba(229,197,134,.35)}
html[data-theme] .members-main .member-trail button:hover:not(:disabled)>img{rotate:-6deg}
html[data-theme] .members-main .member-trail button[data-done]>img{border:2.5px solid rgb(146,47,55)}
html[data-theme] .members-main .member-trail button[data-done]::after{content:"ผ่าน";position:absolute;top:0;left:calc(50% + 12px);rotate:-14deg;font:800 .72rem/1 var(--font-head);letter-spacing:.06em;padding:3px 6px;border:2px solid rgb(146,47,55);border-radius:4px;color:rgb(146,47,55);background:rgba(255,250,240,.85)}
html[data-theme] .members-main .member-trail button:disabled{opacity:.6}
/* Kungki's tip = a speech bubble; the Google button sits under it */
html[data-theme] .members-main .member-guide-copy{position:relative;border:1.5px solid var(--member-line);border-radius:14px;padding:12px 16px;background:rgba(255,255,255,.6)}
html[data-theme] .members-main .member-guide-copy::before{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;translate:0 -50%;rotate:45deg;background:inherit;border-left:1.5px solid var(--member-line);border-bottom:1.5px solid var(--member-line)}
html[data-theme] .members-main [data-member-panel="account"]{padding-left:100px}
@media(max-width:650px){html[data-theme] .members-main [data-member-panel="account"]{padding-left:0}html[data-theme] .members-main .member-trail button>img{width:52px;height:52px;padding:13px}html[data-theme] .members-main .member-trail li+li:before{top:30px}}
/* waiting for Audi: the Facebook slot gets an amber "รอตรวจ" stamp (Audi 2026-10-24 "ระหว่างรอยืนยันมันจะขึ้นสถานะด้วยใช่ไหม") */
html[data-theme] .members-main .member-trail button[data-pending]>img{border:2.5px dashed rgb(176,110,20);animation:mjWait 2.4s ease-in-out infinite}
html[data-theme] .members-main .member-trail button[data-pending]::after{content:"รอตรวจ";position:absolute;top:0;left:calc(50% + 10px);rotate:-12deg;font:800 .7rem/1 var(--font-head);padding:3px 6px;border:2px solid rgb(176,110,20);border-radius:4px;color:rgb(140,84,10);background:rgba(255,250,240,.9)}
@keyframes mjWait{50%{box-shadow:0 0 0 6px rgba(251,191,36,.25)}}
html[data-motion=paused] .members-main .member-trail button[data-pending]>img{animation:none}
@media(prefers-reduced-motion:reduce){html[data-theme] .members-main .member-trail button[data-pending]>img{animation:none}}
html[data-theme] .members-main .member-guide .member-guide-name{font:700 17px/1.5 var(--font-head);color:var(--member-ink);margin:0 0 4px}
html[data-theme] .members-main .member-guide #member-guide-tip{font:500 15.5px/1.7 var(--font-body);color:var(--member-ink)}
html[data-theme] .members-main .member-guide-copy{background:rgba(255,255,255,.82)}
@media(max-width:650px){html[data-theme] .members-main .member-guide-copy::before{left:auto;right:-9px;rotate:225deg}}
/* 2026-10-24 Audi picked C ("Cอาจจะสวยสุดในนี้") and: "AUDIKUNGอ่านยาก … ทำไมการทำเว็ปยังมีการทำตัวหนังสือที่อ่านยากกลืนกับพื้นหลัง".
   Pass = one paper card: header, then the steps list (left) next to the card for the step you are on (right). Solid inks only, no gradient-filled text. */
html[data-theme] .members-main .member-pass{--member-surface:var(--aku-paper-a);--member-ink:var(--aku-lux-ink);--member-muted:var(--aku-lux-ink2);--member-line:var(--aku-paper-line);--member-input:var(--aku-paper-b);--member-success:rgb(20,100,67);--member-warn:rgb(126,77,16);--member-error:rgb(146,47,55);
 display:grid;grid-template-columns:270px minmax(0,1fr);grid-template-areas:"top top" "status status" "detail detail" "trail body" "fb fb";column-gap:30px;
 background:linear-gradient(180deg,var(--aku-paper-a),var(--aku-paper-b))!important;color:var(--aku-lux-ink);border:0!important;border-radius:20px!important;padding:30px 34px!important;
 box-shadow:0 0 0 1.5px var(--aku-paper-line),0 24px 50px -22px rgba(0,0,0,.55)!important}
html[data-theme] .members-main .member-pass:after{inset:8px;border:1.5px dashed var(--aku-paper-line);border-radius:14px;opacity:1;z-index:0}
html[data-theme] .members-main .member-pass>*{position:relative;z-index:1}
html[data-theme] .members-main .pass-top{grid-area:top}
html[data-theme] .members-main .member-pass #member-status{grid-area:status;color:var(--aku-lux-ink)}
html[data-theme] .members-main .member-pass #member-status-detail{grid-area:detail;color:var(--aku-lux-ink2)}
html[data-theme] .members-main .member-pass #member-feedback{grid-area:fb}
html[data-theme] .members-main .pass-brand{color:var(--aku-lux-ink);-webkit-text-fill-color:currentColor;background:none;letter-spacing:.05em}
html[data-theme] .members-main .pass-brand>span{color:var(--aku-lux-ink2);-webkit-text-fill-color:currentColor}
html[data-theme] .members-main .pass-brand::after{content:"";display:block;width:44px;height:3px;margin-top:6px;border-radius:2px;background:var(--aku-lux-foil)}
html[data-theme] .members-main .member-text-action{color:var(--aku-lux-ink)}
html[data-theme] .members-main .member-trail{grid-area:trail;flex-direction:column;gap:8px!important;margin:22px 0 0!important;align-self:start}
html[data-theme] .members-main .member-trail li+li:before{content:"";left:34px!important;top:-10px!important;width:0!important;height:12px;border-top:0!important;border-left:2px dotted var(--member-line)}
html[data-theme] .members-main .member-trail button{flex-direction:row!important;text-align:left!important;justify-content:flex-start!important;align-items:center!important;gap:14px!important;padding:8px 10px!important;border-radius:14px}
html[data-theme] .members-main .member-trail .step-copy{align-items:flex-start!important}
html[data-theme] .members-main .member-trail button[aria-current=step]{background:rgba(229,197,134,.28)!important}
html[data-theme] .members-main .member-trail button>img{width:52px!important;height:52px!important;padding:13px!important}
html[data-theme] .members-main .member-trail button[data-done]::after,html[data-theme] .members-main .member-trail button[data-pending]::after{top:2px;left:44px}
html[data-theme] .members-main .member-body{grid-area:body;margin-top:22px;padding:24px;border-radius:16px;background:rgb(255,255,255);border:1.5px solid var(--aku-paper-line)}
html[data-theme] .members-main [data-member-panel="account"]{padding-left:0}
html[data-theme] .members-main .member-guide-copy{border:0;background:none;padding:0}
html[data-theme] .members-main .member-guide-copy::before{display:none}
@media(max-width:650px){html[data-theme] .members-main .member-pass{grid-template-columns:1fr;grid-template-areas:"top" "status" "detail" "trail" "body" "fb";padding:22px 18px!important}html[data-theme] .members-main .member-body{padding:18px}}
/* Google button: slim (button floor ≤ 40px), the real G on its own white badge, shine at rest, lift on hover */
html[data-theme] .members-main #member-login{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;min-height:40px!important;padding:4px 20px 4px 4px!important;border-radius:999px!important;font:600 .95rem/1 var(--font-head)}
html[data-theme] .members-main #member-login::before{width:32px!important;height:32px!important;border-radius:50%;background:white url('/assets/brand/google-g.svg') center/18px no-repeat!important;box-shadow:0 1px 3px rgba(0,0,0,.25)}
html[data-theme] .members-main #member-login::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);translate:-120% 0;animation:mjShine 3.4s ease-in-out 1s infinite;pointer-events:none}
@keyframes mjShine{0%{translate:-120% 0}45%,100%{translate:120% 0}}
html[data-theme] .members-main #member-login:hover{translate:0 -2px}
html[data-motion=paused] .members-main #member-login::after{animation:none;display:none}
@media(prefers-reduced-motion:reduce){html[data-theme] .members-main #member-login::after{animation:none;display:none}}
/* risk chip: solid fill, white ink (was 3.9–4.2:1) */
.mj-risk,html[data-theme=light] .mj-risk,html:not([data-theme=light]) .mj-risk{background:var(--aku-bad-ink);color:white}
/* cold read 2026-10-24: Facebook sign-up takes Facebook blue (colour = destination), so the gold Google button is the one primary; locked step stays readable */
.member-primary.mj-fb{background:linear-gradient(180deg,rgb(54,120,242),rgb(24,88,214))!important;border-color:rgb(14,62,160)!important;color:white!important}
.member-primary.mj-fb:hover,.member-primary.mj-fb:focus-visible{background:linear-gradient(180deg,rgb(80,140,250),rgb(36,100,226))!important;color:white!important}
.member-primary.mj-fb img{background:white;border-radius:50%;padding:2px}
.mj-jump{font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:4px}
html[data-theme] .members-main .member-trail button:disabled{opacity:.78}
html{scroll-padding-top:calc(var(--ak-shell-height,70px) + 16px)}