/* HT · ht-mailerbot-v2 · editable login tokens */
:root { --ink:#111111; --navy:#111111; --cream:#fffefc; --paper:#ffffff; --muted:#555555; --line:#111111; --selected:#e9ffa3; --type:16px; --small:14px; --space:16px; --radius:4px; --display-font:"Avenir Next","PingFang SC","Microsoft YaHei",sans-serif; --body-font:"PingFang SC","Microsoft YaHei",system-ui,sans-serif; --shadow:4px 4px 0 #111111; }
body { font:var(--type)/1.6 var(--body-font); background:var(--cream); color:var(--ink); }
.login-shell { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); max-width:1280px; gap:64px; padding:64px 48px; }
.login-story { min-height:0; }
.brand { font:800 48px/1 var(--display-font); color:var(--ink); margin-bottom:48px; letter-spacing:-2px; }
.brand span,.eyebrow,.story-foot,.login-tag { font-size:12px; color:var(--muted); }
.login-story > .eyebrow { display:inline-flex; padding:8px 12px; border:1px solid var(--line); background:var(--selected); color:var(--ink); }
.login-story h1 { font:650 clamp(32px,4vw,48px)/1.35 var(--display-font); letter-spacing:-1px; margin-block:24px; }
.login-story h1 span { background:var(--selected); box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.login-story > p { font-size:var(--type); color:var(--muted); line-height:1.7; }
.login-orbit { display:none; }
.login-process { display:grid; gap:24px; margin:32px 0; padding:24px; border:1px solid var(--line); border-radius:0; background:var(--ink); box-shadow:4px 4px 0 #11111124; }
.login-process strong,.login-process span { display:block; }
.login-process strong { font:600 20px/1.5 var(--display-font); color:var(--selected); }
.login-process span { font-size:var(--type); color:var(--cream); }
.login-process > div + div { border-top:1px solid #ffffff40; padding-top:16px; }
.story-foot { margin-left:0; }
.login-card { padding:40px 32px; border:1px solid var(--line); background:var(--paper); border-radius:0; box-shadow:var(--shadow); }
.login-card > .eyebrow { display:block; padding-bottom:16px; border-bottom:1px solid var(--line); }
.login-card h2 { font:650 28px/1.4 var(--display-font); margin-block:24px 8px; }
.login-note,.login-card label,.login-help,#login-message { font-size:var(--type); color:var(--muted); }
.login-card label { display:block; color:var(--ink); margin:24px 0 8px; }
.login-card input { display:block; font-size:var(--type); min-height:48px; padding:12px 16px; background:var(--cream); color:var(--ink); border:1px solid var(--line); border-radius:var(--radius); }
.password-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.password-field input { padding-right:16px; }
.password-field button { position:static; display:block; font-size:var(--type); min-height:48px; padding:8px 12px; border:1px solid var(--line); border-radius:var(--radius); color:var(--ink); background:var(--selected); }
.primary { display:block; width:100%; border:1px solid var(--line); border-radius:0; padding:12px 16px; font-size:var(--type); min-height:48px; color:var(--cream); background:var(--ink); box-shadow:4px 4px 0 #11111124; }
#login-message { color:#982c32; min-height:32px; }
.login-card input:focus { border-color:var(--ink); outline:2px solid var(--ink); outline-offset:2px; box-shadow:0 0 0 6px var(--selected); }
button:focus-visible,a:focus-visible { outline:3px solid var(--ink); outline-offset:4px; }
.login-back { display:block; text-align:center; min-height:44px; color:var(--ink); padding:8px; margin-top:16px; text-underline-offset:4px; }
@media (hover:hover) { .primary:hover { color:var(--selected); } .login-back:hover { text-decoration-thickness:2px; } }
@media (min-width:1440px) { .login-shell { gap:96px; } }
@media (max-width:1024px) { .login-shell { padding:48px 32px; gap:32px; } .login-card { padding:32px 24px; } }
@media (max-width:768px) { .login-shell { grid-template-columns:minmax(0,1fr); max-width:560px; padding:32px 16px; gap:24px; } .login-story { min-height:0; } .login-story .brand { margin:0; font-size:32px; } .login-story > .eyebrow,.login-story h1,.login-story > p,.login-process,.story-foot { display:none; } .login-card { padding:32px 24px; } }
@media (max-width:375px) { .login-card { padding:24px 16px; } .login-card h2 { font-size:24px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; } }