/* TrimsPackaging pages/login.css (from static login.html, infra sections removed) */

:root{
  --brand:#1890FF; --brand-600:#0E7AE6; --brand-700:#0A5FB8; --brand-50:#E8F4FF;
  --brand-grad:linear-gradient(180deg,#3AA0FF 0%,var(--brand) 55%,var(--brand-600) 100%);
  --brand-glow:rgba(24,144,255,.22); --brand-glow-soft:rgba(24,144,255,.10);
  --ink:#1D2129; --ink-2:#2A2F38; --body:#4E5969; --muted:#86909C;
  --line:#E5E6EB; --bg:#F5F7FA; --card:#FFFFFF; --surface-2:#FAFCFF;
  --orange:#FF7D00; --red:#F53F3F; --green:#00B42A;
  --radius:8px;
  --shadow:0 12px 32px -8px rgba(29,33,41,.08);
  --shadow-lg:0 24px 56px -16px rgba(29,33,41,.16);
  --hairline:linear-gradient(90deg,transparent,rgba(229,230,235,0) 6%,#E5E6EB 22%,#E5E6EB 78%,rgba(229,230,235,0) 94%,transparent);
  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:#F5F7FA;background-image:linear-gradient(180deg,#EDF4FC 0%,#F5F7FA 340px,#F5F7FA 100%);background-repeat:no-repeat;font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.wrap{max-width:none;margin:0;padding:0 clamp(24px,3.5vw,72px)}
h1,h2,h3,.display{font-family:var(--font-display)}

/* ---------- Auth（登录/注册/忘记密码 三件套共用外壳） ---------- */
.auth-main{padding:44px 0 80px}
.auth-shell{margin:0;display:grid;grid-template-columns:1.05fr 1fr;background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:var(--shadow-lg)}
.auth-aside{position:relative;background:linear-gradient(165deg,var(--brand-700) 0%,var(--brand) 58%,#3AA0FF 100%);color:#fff;padding:44px 42px;display:flex;flex-direction:column;overflow:hidden}
.auth-aside::before{content:"";position:absolute;top:-120px;right:-100px;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 65%)}
.auth-aside::after{content:"";position:absolute;bottom:-140px;left:-110px;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.10),transparent 60%)}
.as-logo{position:relative;z-index:1;display:flex;align-items:center;gap:9px}
.as-logo .logo-mark{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35)}
.as-logo b{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.2px}
.as-body{position:relative;z-index:1;margin-top:52px}
.as-body h2{font-size:clamp(26px,2.4vw,31px);font-weight:800;letter-spacing:-.02em;line-height:1.16}
.as-body>p{margin-top:12px;font-size:14px;line-height:1.7;color:rgba(255,255,255,.82);max-width:400px}
.ab-list{margin-top:30px;display:flex;flex-direction:column;gap:16px}
.ab-item{display:flex;gap:13px;align-items:center}
.ab-ic{position:relative;flex:none;width:34px;height:34px;border-radius:var(--radius);background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.ab-ic svg{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:17px;height:17px;stroke:#fff;fill:none;stroke-width:2}
.ab-item b{display:block;font-size:14px;font-weight:700}
.ab-item span{display:block;font-size:12.5px;color:rgba(255,255,255,.75);margin-top:2px;line-height:1.55}
.as-stats{position:relative;z-index:1;margin-top:auto;padding-top:34px;border-top:1px solid rgba(255,255,255,.18);display:flex}
.as-stat{flex:1;text-align:center}
.as-stat+.as-stat{border-left:1px solid rgba(255,255,255,.18)}
.as-stat b{font-family:var(--font-display);font-size:22px;font-weight:800;display:block;letter-spacing:-.4px}
.as-stat span{font-size:11.5px;color:rgba(255,255,255,.72)}
.auth-panel{padding:clamp(34px,4.2vw,56px) clamp(28px,4vw,54px);display:flex;flex-direction:column;justify-content:center;align-items:center}
.auth-panel>*{width:100%;max-width:600px}
.auth-mobile-logo{display:none;margin-bottom:22px}
.auth-head{margin-bottom:26px}
h1.auth-title{font-size:clamp(25px,2.4vw,29px);font-weight:800;letter-spacing:-.02em;line-height:1.15}
.auth-sub{margin-top:9px;font-size:14px;color:var(--body)}
.auth-sub a{color:var(--brand);font-weight:700}
.auth-sub a:hover{text-decoration:underline}
.f-label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:7px}
.f-label .opt{color:var(--muted);font-weight:500;font-size:12px}
.f-group{margin-bottom:18px}
.f-input{width:100%;height:46px;border:1.5px solid var(--line);border-radius:var(--radius);padding:0 14px;font-size:14px;font-family:var(--font-body);color:var(--ink);outline:none;background:#fff;transition:border-color .15s,box-shadow .15s}
.f-input::placeholder{color:var(--muted)}
.f-input:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px var(--brand-glow-soft)}
.f-group.err .f-input{border-color:var(--red)}
.f-msg{display:none;font-size:12px;color:var(--red);margin-top:6px}
.f-group.err .f-msg{display:block}
.pw{position:relative}
.pw .f-input{padding-right:46px}
.pw-eye{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:grid;place-items:center;border-radius:6px;color:var(--muted)}
.pw-eye:hover{color:var(--brand);background:var(--brand-50)}
.pw-eye svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}
.f-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px}
.f-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--body);cursor:pointer}
.f-check input{width:15px;height:15px;accent-color:var(--brand);cursor:pointer;flex:none}
.f-link{font-size:13px;font-weight:600;color:var(--brand)}
.f-link:hover{text-decoration:underline}
.btn-grad{width:100%;height:48px;border-radius:var(--radius);background:var(--brand-grad);color:#fff;font-family:var(--font-display);font-size:15px;font-weight:700;letter-spacing:.01em;box-shadow:0 2px 6px rgba(24,144,255,.28);transition:all .16s;display:inline-flex;align-items:center;justify-content:center;gap:9px}
.btn-grad:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(24,144,255,.34)}
.btn-grad:active{transform:translateY(0)}
.btn-grad:disabled{opacity:.75;cursor:default;transform:none}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:rot .7s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
.or-sep{display:flex;align-items:center;gap:12px;margin:22px 0;color:var(--muted);font-size:12px}
.or-sep::before,.or-sep::after{content:"";flex:1;height:1px;background:var(--line)}
.sso{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.sso a{height:44px;border:1.5px solid var(--line);border-radius:var(--radius);background:#fff;display:flex;align-items:center;justify-content:center;gap:9px;font-size:13.5px;font-weight:600;color:var(--ink);transition:all .15s}
.sso a:hover{border-color:var(--brand);background:var(--brand-50);transform:translateY(-1px)}
.sso svg{width:17px;height:17px;flex:none}
.auth-alt{margin-top:24px;text-align:center;font-size:13px;color:var(--muted)}
.auth-alt a{color:var(--brand);font-weight:700}
.auth-alt a:hover{text-decoration:underline}
.auth-alt .lnk{color:var(--muted);font-weight:500}
.auth-alt .lnk:hover{color:var(--brand);text-decoration:underline}
.perks{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.perks span{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--body)}
.perks svg{width:13px;height:13px;color:var(--green)}
.hint-bar{display:flex;gap:9px;align-items:flex-start;background:#F0F7FF;border:1px solid #D6E8FF;border-radius:var(--radius);padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--body);margin-bottom:22px}
.hint-bar svg{flex:none;width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:2;margin-top:2px}
.hint-bar b{color:var(--brand)}
.meter{display:flex;gap:6px;margin-top:8px;align-items:center}
.meter i{height:4px;flex:1;border-radius:2px;background:var(--line);transition:background .2s}
.meter.s1 i:nth-child(1){background:var(--red)}
.meter.s2 i:nth-child(-n+2){background:var(--orange)}
.meter.s3 i{background:var(--green)}
.meter-label{font-size:11.5px;color:var(--muted);margin-left:2px;min-width:48px}
.back-link{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--body);margin-bottom:18px}
.back-link:hover{color:var(--brand)}
.sent-ic{width:56px;height:56px;border-radius:50%;background:#E8FFEA;color:var(--green);display:grid;place-items:center;margin-bottom:18px}
.sent-ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:2.2}
.sent-box h2{font-size:22px;font-weight:800;letter-spacing:-.01em}
.sent-box p{margin-top:9px;font-size:14px;color:var(--body);line-height:1.65}
.sent-box p b{color:var(--ink)}
.sent-note{display:flex;align-items:flex-start;gap:7px;margin-top:14px;font-size:12.5px;color:var(--muted);line-height:1.6}
.sent-note svg{flex:none;width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.8;margin-top:2px}
.resend-row{margin-top:22px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-ghost-sm{height:40px;padding:0 18px;border-radius:var(--radius);border:1px solid var(--line);background:#fff;color:var(--body);font-size:13px;font-weight:600;transition:all .15s}
.btn-ghost-sm:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
.btn-ghost-sm:disabled{opacity:.55;cursor:default}
.resend-hint{font-size:12.5px;color:var(--muted)}
@media(max-width:960px){
  .auth-shell{grid-template-columns:1fr}
  .auth-aside{display:none}
  .auth-mobile-logo{display:flex;align-items:center;gap:9px}
  .auth-main{padding:28px 0 56px}
}
@media(max-width:560px){.sso{grid-template-columns:1fr}.f-row{flex-direction:column;align-items:flex-start;gap:10px}}



/* ########## forgot-password page extensions (auth family shared) ########## */
/* Step indicator */
.fp-steps{display:flex;gap:6px;margin-bottom:16px}
.fp-step{flex:1;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font-size:12px;font-weight:600;color:var(--muted);background:#fff}
.fp-step i{font-style:normal;width:20px;height:20px;flex:none;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg);font-size:11px}
.fp-step.on{border-color:var(--brand);color:var(--brand)}
.fp-step.on i{background:var(--brand);color:#fff}
.fp-step.done{border-color:var(--green,#00B42A);color:var(--green,#00B42A)}
.fp-step.done i{background:var(--green,#00B42A);color:#fff}
/* Code input + resend */
.fp-code{letter-spacing:.42em;font-weight:700;text-align:center}
.fp-resend{margin:8px 0 0;font-size:12px;color:var(--muted)}
.fp-resend a{color:var(--brand);font-weight:600;text-decoration:none}
.fp-resend a:hover{text-decoration:underline}
.fp-back{display:block;width:100%;margin-top:10px;background:none;border:none;cursor:pointer;font-size:12.5px;color:var(--muted);font-family:inherit;padding:6px}
.fp-back:hover{color:var(--brand)}
/* Done view */
.fp-done{text-align:center;padding:10px 0 4px}
.fp-done-ic{width:64px;height:64px;margin:0 auto 14px;border-radius:50%;background:rgba(0,180,42,.10);display:flex;align-items:center;justify-content:center}
.fp-done-ic svg{width:34px;height:34px;fill:none;stroke:var(--green,#00B42A);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fp-done h2{margin:0 0 6px;font-size:19px;color:var(--ink,#165DFF)}
.fp-done p{margin:0 0 18px;font-size:13px;color:var(--muted)}