:root { font-family:-apple-system,BlinkMacSystemFont,"PingFang TC","Microsoft JhengHei",sans-serif; color:#f7f7f7; background:#191919; color-scheme:dark; font-synthesis:none; -webkit-font-smoothing:antialiased; --auth-orange:#ff921e; }
* { box-sizing:border-box; }
body { margin:0; min-width:280px; }
button,input { font:inherit; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:focus-visible,a:focus-visible { outline:2px solid #ffbf6e; outline-offset:4px; }
input:focus { outline:none; box-shadow:none; }
button:disabled { cursor:not-allowed; opacity:.4; }
svg { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; width:24px; height:24px; }
[hidden] { display:none !important; }
h1,h2,p { margin:0; }
.preview-bar { width:100%; max-width:440px; margin:0 auto; padding:10px 16px; min-height:44px; display:flex; gap:8px; justify-content:space-between; align-items:center; flex-wrap:wrap; background:#1b1b1b; color:#bcb6ae; font-size:11px; line-height:1.5; }
.preview-bar a,.preview-bar button { background:none; border:0; color:#ffc078; font-size:12px; padding:4px 0; text-decoration:underline; text-underline-offset:3px; }
.auth-app { width:100%; max-width:440px; min-height:calc(100svh - 44px); margin:0 auto; background:#292929; overflow:hidden; display:flex; flex-direction:column; }
.auth-hero { height:226px; flex-shrink:0; position:relative; overflow:hidden; background:#c6a886; }
.auth-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,#4c332b88,#4c332b26 70%); }
.warehouse-scene { position:absolute; inset:0; opacity:.9; }
.scene-sun { position:absolute; width:130px; height:130px; border-radius:50%; background:#efd5aa; top:16px; left:76px; opacity:.35; }
.scene-ground { position:absolute; bottom:0; height:39px; left:0; right:0; background:#e5c5a0; }
.scene-building { position:absolute; bottom:39px; width:48px; height:91px; background:repeating-linear-gradient(0deg,transparent 0 21px,#c98c4b 22px 25px),repeating-linear-gradient(90deg,#b98243 0 15px,#d4a563 16px 20px); left:12px; }
.scene-building.tall { left:67px; height:117px; width:44px; }
.warehouse { position:absolute; bottom:39px; right:-12px; width:156px; height:139px; background:#a76b31; border-left:7px solid #d69c55; }
.warehouse::before { content:""; position:absolute; height:58px; top:-55px; left:-22px; width:183px; background:#bb823a; clip-path:polygon(0 100%,85% 0,100% 0,100% 100%); }
.shelf { position:absolute; height:6px; background:#d5a568; left:7px; right:0; top:51px; }
.shelf.lower { top:107px; }
.parcel { position:absolute; background:#deb164; width:27px; height:31px; bottom:6px; border-left:1px solid #ecc383; }
.parcel::after { content:""; width:5px; height:12px; position:absolute; background:#f0d29b; left:calc(50% - 2px); top:0; opacity:.55; }
.parcel.one { left:2px; }
.parcel.two { left:33px; width:36px; height:39px; background:#c9954c; }
.parcel.three { left:73px; width:30px; height:23px; background:#e3bd72; }
.parcel.four { left:107px; height:34px; }
.hero-copy { position:relative; z-index:1; padding:34px 27px; }
.brand { font-size:12px; line-height:1.5; letter-spacing:1px; color:#ffedd5; }
.auth-hero h1 { font-size:29px; font-weight:600; line-height:1.4; color:#fff; margin:35px 0 4px; }
.hero-caption { font-size:13px; line-height:1.6; color:#fff2df; }
.auth-panel { position:relative; z-index:2; margin-top:-21px; border-radius:27px 27px 0 0; background:#292929; padding:36px 27px calc(26px + env(safe-area-inset-bottom,0px)); min-height:485px; flex:1; display:flex; flex-direction:column; }
.auth-panel h2 { font-size:23px; line-height:1.5; font-weight:500; margin-bottom:10px; }
.intro { color:#b6b6b6; font-size:14px; line-height:1.8; }
.login-action { margin-top:62px; }
.line-button { width:100%; min-height:52px; display:flex; gap:14px; align-items:center; justify-content:center; border:0; border-radius:8px; padding:13px 12px; font-size:16px; line-height:1.5; font-weight:500; background:#06c755; color:#fff; }
.line-button:hover { background:#06b34d; }
.line-button:active { background:#048b3c; }
.line-word { font-family:Arial,sans-serif; font-weight:700; padding-right:14px; border-right:1px solid #00000014; letter-spacing:-.3px; }
.login-hint { color:#b7b7b7; text-align:center; font-size:12px; line-height:1.8; margin-top:15px; }
.demo-note { color:#b0a294; font-size:11px; line-height:1.8; text-align:center; margin-top:8px; }
.invitation-note { margin-top:auto; padding-top:46px; color:#e5ab6f; display:flex; align-items:center; justify-content:center; gap:7px; font-size:12px; line-height:1.6; }
.invitation-note svg { width:15px; height:15px; }
.brand-footer { font-size:11px; line-height:1.6; text-align:center; color:#999; margin-top:18px; }
.register-hero h1 { margin-top:25px; }
.back-button { color:#fff; width:44px; height:30px; display:flex; align-items:center; text-decoration:none; }
.register-panel { padding-top:28px; }
.identity { display:flex; align-items:center; gap:10px; padding-bottom:25px; color:#a4d3b6; font-size:13px; line-height:1.5; }
.identity svg { width:19px; height:19px; flex-shrink:0; }
.field-label { display:block; font-size:15px; line-height:1.5; margin-bottom:10px; }
.invitation-input { display:block; width:100%; background:transparent; color:#fff; border:0; border-radius:0; padding:9px 0 13px; font-size:18px; line-height:1.5; letter-spacing:1px; }
.invitation-input::placeholder { color:#a0a0a0; font-size:16px; letter-spacing:0; }
.invitation-input:focus { outline:none; box-shadow:none; }

.field-help { font-size:12px; line-height:1.7; color:#aaa; margin-top:10px; }
.demo-code { margin-top:9px; color:#b6a594; font-size:12px; line-height:1.8; }
.demo-code button { color:#ffc078; background:none; border:0; padding:4px 0; font-weight:500; }
.demo-code button span { margin-left:4px; color:#b6a594; font-size:11px; font-weight:400; }
.field-error { font-size:13px; line-height:1.7; color:#ffb5a3; margin-top:10px; }
.terms-row { display:flex; gap:10px; align-items:flex-start; margin:28px 0 24px; color:#d9d9d9; font-size:13px; line-height:1.8; }
.terms-row input { width:18px; height:18px; flex:0 0 18px; margin:3px 0 0; accent-color:var(--auth-orange); cursor:pointer; }
.terms-row label { cursor:pointer; }
.text-link { background:none; border:0; color:#ffb454; padding:0 2px; text-decoration:underline; text-underline-offset:3px; }
.orange-button { display:block; width:100%; min-height:52px; border:0; background:var(--auth-orange); color:#241709; border-radius:28px; font-size:16px; font-weight:500; padding:13px 16px; margin-top:20px; }
.orange-button:hover { background:#ffa642; }
.orange-button:active { background:#e78013; }
.register-bottom { margin-top:auto; padding-top:26px; font-size:12px; line-height:1.7; color:#aaa; text-align:center; }
.policy-dialog { width:min(360px,calc(100% - 36px)); padding:26px 24px; background:#292929; color:#eee; border:1px solid #544b41; border-radius:20px; box-shadow:0 12px 60px #0008; }
.policy-dialog::backdrop { background:#000a; }
.policy-kicker { color:#ffbc6b; font-size:12px; }
.policy-dialog h2 { font-size:22px; font-weight:500; margin:12px 0; }
.policy-dialog p:not(.policy-kicker) { color:#ccc; font-size:14px; line-height:1.8; }
.toast { position:fixed; z-index:10; left:50%; bottom:30px; transform:translateX(-50%); color:#ffe8ca; background:#463726; padding:12px 20px; border-radius:24px; max-width:calc(100% - 32px); width:max-content; font-size:14px; opacity:0; pointer-events:none; }
.toast.visible { opacity:1; }
/* The two login choices share the same membership; new users start with LINE. */
body[data-auth-page="login"] .auth-hero { height:170px; }
body[data-auth-page="login"] .auth-app { overflow:visible; }
body[data-auth-page="login"] .hero-copy { padding-top:24px; }
body[data-auth-page="login"] .auth-hero h1 { margin-top:18px; }
body[data-auth-page="login"] .auth-panel { padding-top:22px; min-height:0; }
body[data-auth-page="login"] .auth-panel h2 { font-size:21px; margin-bottom:3px; }
body[data-auth-page="login"] .login-action { margin-top:0; }
body[data-auth-page="login"] .login-hint { margin-top:10px; }
body[data-auth-page="login"] .invitation-note { padding-top:20px; }
.login-divider { display:flex; align-items:center; gap:10px; margin:22px 0 16px; color:#aaa; font-size:12px; }
.login-divider::before,.login-divider::after { content:""; height:1px; background:#4a4a4a; flex:1; }
.credential-label { display:block; margin-top:12px; font-size:13px; color:#c7c7c7; }
.credential-input { display:block; width:100%; min-width:0; height:40px; padding:8px 0; border:0; border-radius:0; background:transparent; color:#eee; font-size:16px; }
body[data-auth-page="login"] #password-login-form .credential-input { border-bottom:1px solid #f2f2f2; }
.credential-input::placeholder { color:#969696; }
.password-field { position:relative; }
.password-field input { padding-right:44px; }
.password-toggle { display:grid; place-items:center; position:absolute; right:-6px; top:-2px; width:44px; height:44px; padding:0; border:0; background:none; color:#bcbcbc; }
.password-toggle svg { width:20px; height:20px; }
#password-login-form .orange-button { min-height:48px; margin-top:20px; }
body[data-auth-page="login"] .line-button,
body[data-auth-page="login"] #password-login-form .orange-button { width:calc(100% - 32px); max-width:320px; min-height:44px; margin-left:auto; margin-right:auto; padding:10px 14px; font-size:15px; line-height:1.5; }
body[data-auth-page="login"] .line-button { gap:10px; }
body[data-auth-page="login"] .line-word { padding-right:10px; }
@media(min-width:441px) { .auth-app { box-shadow:0 0 50px #0004; } }
@media(max-width:350px) { .auth-panel,.hero-copy { padding-left:22px; padding-right:22px; } .auth-hero h1 { font-size:27px; } .preview-bar { padding-left:12px; padding-right:12px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; } }