/* Adapted from licensed React Bits Pro Authentication 1 (2026-09-10).
   Neutral fields, focus treatment, primary button and reveal control ported to standalone CSS. */
:root{color-scheme:light;--ink:#242424;--muted:#727272;--border:#dededb;--paper:#fafaf9;--rb-accent:#262626;--rb-r-md:8px;--rb-r-lg:10px;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;color:var(--ink);background:var(--paper)}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column}button,input{font:inherit}button,a,input{-webkit-tap-highlight-color:transparent}a{color:inherit}button{cursor:pointer}button:disabled{cursor:wait}button,a{touch-action:manipulation}[hidden]{display:none!important}main{flex:1;display:grid;place-items:center;padding:80px 24px}.auth{width:100%;max-width:400px;animation:arrive .4s ease-out both}h1{font-size:26px;line-height:1.5;letter-spacing:.025em;font-weight:600;margin:0 0 12px}.intro{font-size:13px;line-height:1.9;color:var(--muted);margin:0 auto;max-width:340px}fieldset{border:0;padding:0;margin:0;min-width:0}.field{margin-bottom:23px}label{display:block;font-size:12px;font-weight:600;margin-bottom:9px;letter-spacing:.025em}input{height:52px;width:100%;border:1px solid var(--border);border-radius:var(--rb-r-md);background:#fff;padding:0 15px;font-size:16px;color:var(--ink);transition:border-color .15s,box-shadow .15s}input::placeholder{font-size:13px;color:#94948f}input:hover{border-color:#b6b6b2}input:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px #2626260b}input[aria-invalid="true"]{border-color:#b34336}input:disabled{opacity:.6}.password-wrap{position:relative}.password-wrap input{padding-right:56px}.reveal{position:absolute;right:5px;top:5px;width:42px;height:42px;display:grid;place-items:center;background:transparent;border:0;border-radius:6px;color:#777}.reveal:hover{background:#f4f4f3;color:#222}.reveal svg{width:20px;height:20px}.eye-slash{display:none}.reveal[aria-pressed="true"] .eye-slash{display:block}.primary{height:52px;width:100%;border:0;border-radius:var(--rb-r-lg);background:var(--rb-accent);color:#fff;display:flex;align-items:center;justify-content:center;position:relative;font-size:13px;letter-spacing:.09em;font-weight:500;margin-top:7px;transition:background-color .15s,transform .15s}.primary:hover{background:#414141}.primary:active{transform:scale(.99)}.primary:disabled{opacity:.65}.button-arrow{position:absolute;right:19px;font-size:20px;font-weight:400;transition:transform .15s}.primary:hover .button-arrow{transform:translateX(3px)}a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:4px}.forgot,.back{display:flex;align-items:center;justify-content:center;gap:10px;font-size:12px;line-height:1.6;text-decoration:none;min-height:44px;margin-top:17px;color:#62625f}.forgot:hover,.back:hover{color:#171717;text-decoration:underline;text-underline-offset:5px}.back span{font-size:18px}.field-error,.caps{margin:8px 0 0;font-size:12px;line-height:1.7}.field-error{color:#a4372d}.caps{color:var(--muted)}.notice{padding:15px 16px;border:1px solid var(--border);border-radius:8px;background:#f0f0ed;font-size:12px;line-height:1.8;margin-top:20px}.spinner{width:16px;height:16px;border:1.5px solid #ffffff60;border-top-color:#fff;border-radius:50%;margin-left:12px;animation:spin .7s linear infinite}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes arrive{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:1400px){main{padding-top:90px;padding-bottom:100px}}@media(max-width:600px){main{padding:56px 28px}h1{font-size:25px}.intro{font-size:12px}.auth{max-width:400px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

.auth-heading{text-align:center;margin-bottom:36px}.forgot{text-decoration:underline;text-decoration-color:#c9c9c5;text-underline-offset:5px}.forgot:hover{text-decoration-color:#262626}@media(max-width:600px){.auth-heading{margin-bottom:32px}h1{font-size:24px}}

/* Standalone panel + Libraries.dev border-beam. */
:root{--paper:#f2f2f0}
main{padding:64px 24px}
.beam-host{width:100%;max-width:480px;min-width:0}
.auth-beam{display:block!important;width:100%;border-radius:24px}
.auth{max-width:480px;padding:42px 39px 28px;background:#fff;border:1px solid #e2e2de;border-radius:24px;box-shadow:0 18px 55px -25px #24242426,0 3px 12px -7px #24242416;animation:none}
.auth-heading{margin-bottom:30px}
.auth-symbol{width:48px;height:48px;margin:0 auto 20px;display:grid;place-items:center;border:1px solid #e6e6e2;border-radius:14px;background:#f6f6f4;color:#454542;box-shadow:0 2px 3px #24242404}
.auth-symbol svg{width:23px;height:23px}
h1{font-size:24px;margin-bottom:9px}
input{background:#f8f8f6;transition:background-color .15s,border-color .15s,box-shadow .15s}
input:focus{background:#fff}
@media(max-width:600px){main{padding:36px 20px}.auth{padding:32px 23px 22px;max-width:480px}.auth-heading{margin-bottom:27px}h1{font-size:22px}.intro{font-size:12px}.auth-symbol{margin-bottom:18px}}
@media(prefers-reduced-motion:reduce){.auth-beam::before,.auth-beam::after,.auth-beam [data-beam-bloom]{animation:none!important;opacity:0!important}}

/* Shadow belongs to the outer wrapper: BorderBeam clips its child. */
.beam-host{border-radius:24px;box-shadow:0 18px 55px -25px #24242426,0 3px 12px -7px #24242416}


/* MetalForge: the supplied shader forms the panel surface. */
:root{color-scheme:light;--paper:#f3f3f1;--ink:#262626;--muted:#62666c;--border:#d8dadd;--rb-accent:#262626}
.auth{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;padding:0;width:100%;max-width:480px;border:1px solid #d5d8dc;background:#f6f7f8;box-shadow:0 18px 55px -28px #28323f38}
.metal-glow{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none;opacity:0}
.auth[data-glow="ready"] .metal-glow{opacity:1}
.auth-content{position:relative;z-index:1;padding:42px 39px 28px}
input{background:rgba(255,255,255,.94);color:#262626;border-color:#d1d4d8}input:focus{background:#fff}
.auth-symbol{background:rgba(255,255,255,.85);border-color:#d8dbdf;color:#4e555d}
.forgot,.back{color:#363c44}.intro{color:#555d66}.notice{background:#f5f6f7;color:#30363d}
@media(max-width:600px){.auth{padding:0;max-width:480px}.auth-content{padding:32px 23px 22px}}

.member-badge-title{margin:-15px 0 0;display:flex;justify-content:center;font:600 20px/1.3 "Helvetica Neue",sans-serif}.member-badge-title #member-badge{display:inline-flex;align-items:center;justify-content:center;min-height:36px;white-space:nowrap}body:is([data-page="login"],[data-page="reset"]) .auth-heading{padding:8px 0 12px;margin-bottom:28px}
/* One shared width for the actual metal surface and its label, at all viewport sizes. */
#member-badge{--member-badge-width:132px;--member-badge-font:13.17px;--member-badge-height:33.25px}
#member-badge .metal-fx-content > div{width:var(--member-badge-width)!important;height:var(--member-badge-height)!important}
#member-badge span[aria-label]{width:var(--member-badge-width)!important;height:var(--member-badge-height)!important;min-width:0;padding-inline:11px!important;font-size:var(--member-badge-font)!important;line-height:1.4!important}

body[data-page="reset"] .reset-description{font-size:12px;line-height:1.9;margin:18px auto 0;max-width:340px}

.back:hover{text-decoration:none}.back .back-label{font-size:inherit}.back:hover .back-label{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}

.login-id-hint{margin:8px 0 0;font-size:11px;line-height:1.7;color:#62666c}

/* Secondary support action, aligned to the login panel content edge. */
.support-row{display:flex;justify-content:flex-end;margin-top:6px;padding-top:15px;border-top:1px solid #cbd2da80}.support-link{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:0 11px;border:1px solid #c9d0d8;border-radius:9px;background:rgba(255,255,255,.55);color:#4c5662;font-size:11px;line-height:1.5;text-decoration:none;transition:background-color .15s,border-color .15s,color .15s}.support-link svg{width:16px;height:16px;flex:none}.support-arrow{font-size:15px}.support-link:hover{background:#fff;border-color:#929eab;color:#262626}

@media(min-width:601px){body[data-page="login"] .auth-content{padding-top:37px;padding-right:40px;padding-left:40px}}
