/* 短线工作台 · 登录页 */
:root{
  --bg:#0b1020;--panel:#121a2e;--line:#232e4a;--text:#d7dde5;--dim:#7d8896;
  --up:#f0454b;--down:#1fbf75;--acc:#e8b339;--blue:#4c9aff;
  --acc-hi:#f8da7a;--acc-lo:#c48a1f;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;min-height:100vh;min-height:100dvh;overflow-x:hidden;
  color:var(--text);font:14px/1.55 var(--font);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(1100px 700px at 8% -12%,#18213f 0,rgba(11,16,32,0) 62%),
    radial-gradient(900px 640px at 105% 112%,#131b37 0,rgba(11,16,32,0) 58%),
    var(--bg);
}
::selection{background:rgba(232,179,57,.35);color:#fff}
:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic,.fi svg,.eye svg,.caps svg,.box svg,.submit svg{
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round
}

/* background */
.market{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.veil{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    radial-gradient(ellipse 85% 75% at 50% 48%,rgba(11,16,32,0) 45%,rgba(11,16,32,.78) 100%),
    linear-gradient(180deg,rgba(11,16,32,.6) 0,rgba(11,16,32,0) 20%,rgba(11,16,32,0) 80%,rgba(11,16,32,.72) 100%),
    linear-gradient(90deg,rgba(11,16,32,.55) 0,rgba(11,16,32,.12) 48%,rgba(11,16,32,.2) 100%);
}

/* layout */
.shell{
  position:relative;z-index:2;
  min-height:100vh;min-height:100dvh;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,432px);
  align-items:center;gap:clamp(40px,7vw,112px);
  padding:48px clamp(32px,5vw,64px);
}

/* brand */
.brand{max-width:620px}
.brand>*{animation:rise .8s var(--ease) backwards}
.brand>:nth-child(2){animation-delay:.06s}
.brand>:nth-child(3){animation-delay:.14s}
.brand>:nth-child(4){animation-delay:.22s}
.brand>:nth-child(5){animation-delay:.3s}
.eyebrow{
  display:flex;align-items:center;gap:12px;margin:0 0 22px;
  font:600 11px/1 var(--mono);letter-spacing:.3em;text-transform:uppercase;color:rgba(232,179,57,.82)
}
.eyebrow::before{content:"";width:32px;height:1px;background:linear-gradient(90deg,rgba(232,179,57,0),var(--acc))}
.lockup{display:flex;align-items:center;gap:20px}
.logo{width:68px;height:68px;flex:none;filter:drop-shadow(0 10px 26px rgba(232,179,57,.38));animation:float 6s ease-in-out infinite}
.lockup-text{min-width:0}
.title{
  margin:0;font-size:clamp(40px,4.4vw,56px);line-height:1.08;font-weight:800;letter-spacing:.06em;
  color:#f4e6c2;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .title{
    background:linear-gradient(100deg,#fff 0%,#f6e7bf 30%,#e8b339 52%,#fff 68%,#f8da7a 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
    animation:sheen 9s ease-in-out infinite;
  }
}
.sub{margin:10px 0 0;color:#a9b3c1;font-size:16px;letter-spacing:.06em}
.sub i{font-style:normal;color:var(--acc);margin:0 .45em;opacity:.9}
.lead{margin:24px 0 0;max-width:540px;color:#8f99a7;font-size:14.5px;line-height:1.85}

.feats{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.feat{
  display:flex;gap:12px;align-items:flex-start;padding:14px 14px 13px;border-radius:14px;
  background:linear-gradient(180deg,rgba(20,29,52,.72),rgba(14,21,40,.5));
  border:1px solid rgba(46,59,94,.6);
}
.fi{
  flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;color:var(--acc);
  background:radial-gradient(circle at 30% 25%,rgba(232,179,57,.22),rgba(232,179,57,.06));
  border:1px solid rgba(232,179,57,.26);box-shadow:0 0 18px -6px rgba(232,179,57,.45)
}
.fi svg{width:19px;height:19px}
.ft{min-width:0;display:flex;flex-direction:column;gap:3px}
.ft b{font-size:14.5px;font-weight:600;color:#e6eaf0;letter-spacing:.02em}
.ft small{font-size:12.5px;color:#8a95a4;line-height:1.5}

.mstrip{
  margin-top:16px;padding:13px 14px 14px;border-radius:16px;
  background:linear-gradient(180deg,rgba(12,18,34,.82),rgba(12,18,34,.58));
  border:1px solid rgba(46,59,94,.6)
}
.ms-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px;font-size:12px;color:#7d8896}
.live{display:inline-flex;align-items:center;gap:8px;color:#c4ccd7;letter-spacing:.08em}
.live i{width:7px;height:7px;border-radius:50%;background:var(--up);animation:ping 1.9s ease-out infinite}
.ms-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,1.35fr);gap:9px}
.mchip{
  position:relative;padding:9px 11px 10px;border-radius:11px;overflow:hidden;
  background:rgba(255,255,255,.025);border:1px solid rgba(255,255,255,.045)
}
.mchip::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--c,var(--acc));box-shadow:0 0 10px var(--c,var(--acc))}
.c-up{--c:var(--up)}.c-down{--c:var(--down)}.c-acc{--c:var(--acc)}
.mchip .k{display:block;font-size:11.5px;color:#8a95a4;white-space:nowrap;margin-bottom:4px}
.vv{display:flex;align-items:baseline;gap:4px}
.vv em{font-style:normal;font-size:11px;color:#6f7a8a}
.v{font:700 17px/1.2 var(--mono);letter-spacing:.06em;color:#7f8a9a}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .v{
    color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(90deg,#4f5b74 0%,#4f5b74 30%,#dfe5ee 50%,#4f5b74 70%,#4f5b74 100%);
    background-size:250% 100%;animation:shimmer 2.6s linear infinite
  }
  .c-acc .v{animation-delay:.35s}.c-down .v{animation-delay:.7s}
}
.spark{padding-bottom:6px}
.spark svg{display:block;width:100%;height:26px;overflow:visible}
.sp-line{fill:none;stroke:var(--acc);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:100;animation:draw 4.8s var(--ease) infinite;filter:drop-shadow(0 0 3px rgba(232,179,57,.6))}
.sp-area{animation:areaIn 4.8s ease infinite}

/* auth column */
.auth{position:relative;width:100%;animation:cardIn .9s var(--ease) .12s backwards}
.auth::before{
  content:"";position:absolute;z-index:-1;left:-7%;right:-7%;top:-6%;bottom:18%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(232,179,57,.16),rgba(232,179,57,0));
}
.card{
  position:relative;isolation:isolate;border-radius:22px;padding:34px 32px 28px;
  background:linear-gradient(160deg,rgba(28,38,66,.7) 0%,rgba(15,22,41,.62) 55%,rgba(12,17,33,.72) 100%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);backdrop-filter:blur(22px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 40px 90px -30px rgba(0,0,0,.8),
    0 0 90px -24px rgba(232,179,57,.22);
  transition:box-shadow .35s;
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .card{background:linear-gradient(160deg,#18213a,#10172b)}
}
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--ang),
    rgba(255,255,255,.07) 0deg,rgba(255,255,255,.07) 70deg,
    rgba(232,179,57,.35) 95deg,rgba(251,227,154,.95) 118deg,rgba(232,179,57,.3) 140deg,
    rgba(255,255,255,.07) 170deg,rgba(255,255,255,.07) 250deg,
    rgba(76,154,255,.45) 285deg,rgba(255,255,255,.07) 320deg,rgba(255,255,255,.07) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:spin 10s linear infinite;
}
.card::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:radial-gradient(120% 55% at 50% -12%,rgba(232,179,57,.13),rgba(232,179,57,0) 62%);
}
.card.flash{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 40px 90px -30px rgba(0,0,0,.8),0 0 0 1px rgba(240,69,75,.45),0 0 70px -16px rgba(240,69,75,.4)}
.card.shake{animation:shake .52s cubic-bezier(.36,.07,.19,.97) both}

.card-head{margin-bottom:22px}
.card-head h2{margin:0;font-size:24px;font-weight:700;letter-spacing:.12em;color:#f1f4f8}
.card-head p{margin:6px 0 0;font-size:12.5px;color:var(--dim)}

/* message area */
.msg{display:grid;grid-template-rows:0fr;opacity:0;margin:0;transition:grid-template-rows .32s var(--ease),opacity .25s,margin .32s var(--ease)}
.msg.show{grid-template-rows:1fr;opacity:1;margin:0 0 18px}
.mi{overflow:hidden;min-height:0}
.mb{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:10px 13px;border-radius:11px;
  border:1px solid transparent;font-size:13px;line-height:1.5
}
.mdot{flex:none;width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 10px currentColor}
.mt{flex:1;min-width:0}
.k-err{background:rgba(240,69,75,.1);border-color:rgba(240,69,75,.34);color:#ffbdc0}
.k-err .mdot{color:var(--up)}
.k-warn{background:rgba(232,179,57,.09);border-color:rgba(232,179,57,.34);color:#f6dc9a}
.k-warn .mdot{color:var(--acc)}
.k-info{background:rgba(76,154,255,.09);border-color:rgba(76,154,255,.32);color:#b9d6ff}
.k-info .mdot{color:var(--blue)}
.k-ok{background:rgba(31,191,117,.09);border-color:rgba(31,191,117,.32);color:#a7efc9}
.k-ok .mdot{color:var(--down)}
.mb .cd{font:700 14px/1 var(--mono);color:var(--acc);font-variant-numeric:tabular-nums}
.mb .rem{color:#fff;font-weight:600}
.lbar{flex-basis:100%;height:2px;border-radius:2px;background:rgba(232,179,57,.16);overflow:hidden}
.lbar i{display:block;height:100%;background:linear-gradient(90deg,var(--acc-lo),var(--acc-hi));transform-origin:left center;transition:transform .3s linear}

/* fields */
.field{margin-bottom:16px}
.lb{display:block;margin:0 0 7px;font-size:12.5px;color:#a9b3c1;letter-spacing:.04em}
.ctl{position:relative}
.ctl .ic{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);color:#6b7686;pointer-events:none;transition:color .2s}
.ctl input{
  width:100%;height:48px;padding:0 14px 0 44px;margin:0;
  border-radius:12px;border:1px solid #2a3656;background:rgba(7,11,22,.58);
  color:#eef1f5;font:inherit;font-size:15px;letter-spacing:.02em;caret-color:var(--acc);
  outline:0;-webkit-appearance:none;appearance:none;
  transition:border-color .2s,box-shadow .25s,background-color .2s;
}
.ctl input::placeholder{color:#6b7686;opacity:1}
.ctl input:hover{border-color:#3a4870}
.ctl input:focus{
  border-color:rgba(232,179,57,.75);background-color:rgba(7,11,22,.78);
  box-shadow:0 0 0 4px rgba(232,179,57,.14),0 0 26px -6px rgba(232,179,57,.45)
}
.ctl:focus-within .ic{color:var(--acc)}
.ctl input:-webkit-autofill{-webkit-text-fill-color:#eef1f5;box-shadow:inset 0 0 0 100px #0c1324;caret-color:var(--acc);transition:background-color 99999s}
.ctl input:-webkit-autofill:focus{box-shadow:inset 0 0 0 100px #0c1324,0 0 0 4px rgba(232,179,57,.14)}
.ctl input::-ms-reveal,.ctl input::-ms-clear{display:none}
.pw input{padding-right:50px}
.field.invalid input{border-color:rgba(240,69,75,.8);box-shadow:0 0 0 4px rgba(240,69,75,.13)}
.field.invalid .ic{color:var(--up)}
.ferr{margin:0;font-size:12px;color:#ff9a9e}
.ferr:not(:empty){margin-top:7px;animation:drop .22s var(--ease)}
.ferr:not(:empty)::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--up);margin-right:7px;vertical-align:middle;position:relative;top:-1px}

.eye{
  position:absolute;right:5px;top:50%;transform:translateY(-50%);width:40px;height:38px;
  display:grid;place-items:center;padding:0;border:0;border-radius:9px;background:transparent;
  color:#7d8896;cursor:pointer;transition:color .2s,background-color .2s
}
.eye:hover{color:#e6eaf0;background:rgba(255,255,255,.05)}
.eye:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.eye svg{width:19px;height:19px}
.eye .e-off,.eye[aria-pressed="true"] .e-on{display:none}
.eye[aria-pressed="true"] .e-off{display:block}
.eye[aria-pressed="true"]{color:var(--acc)}

.caps{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;color:var(--acc);max-height:0;opacity:0;overflow:hidden;transition:max-height .22s var(--ease),opacity .2s,margin .22s}
.caps.on{max-height:22px;opacity:1;margin-top:8px}
.caps svg{width:14px;height:14px;flex:none}

.row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:6px 0 22px;font-size:13px}
.chk{position:relative;display:inline-flex;align-items:center;gap:9px;color:#b8c1cd;cursor:pointer;user-select:none;-webkit-user-select:none}
.chk input{position:absolute;left:0;top:50%;width:18px;height:18px;margin:-9px 0 0;opacity:0;cursor:pointer}
.box{
  flex:none;width:18px;height:18px;border-radius:5px;display:grid;place-items:center;
  border:1px solid #3a4768;background:rgba(7,11,22,.6);transition:background .2s,border-color .2s,box-shadow .25s
}
.box svg{width:13px;height:13px;stroke:#1d1503;stroke-width:3.2;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .28s var(--ease)}
.chk:hover .box{border-color:#55658f}
.chk input:checked+.box{background:linear-gradient(135deg,var(--acc-hi),var(--acc));border-color:transparent;box-shadow:0 0 14px -3px rgba(232,179,57,.75)}
.chk input:checked+.box svg{stroke-dashoffset:0}
.chk input:focus-visible+.box{outline:2px solid var(--acc);outline-offset:2px}
.hint{color:#7d8896;font-size:12px;text-align:right}

/* submit */
.submit{
  position:relative;overflow:hidden;width:100%;height:50px;border:0;border-radius:13px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  font:inherit;font-size:16px;font-weight:700;letter-spacing:.24em;color:#1f1604;
  background:linear-gradient(135deg,var(--acc-hi) 0%,var(--acc) 48%,var(--acc-lo) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.14),0 14px 30px -12px rgba(232,179,57,.7);
  transition:transform .22s var(--ease),box-shadow .28s,filter .2s,background .3s,color .3s;
  -webkit-tap-highlight-color:transparent;
}
.submit::after{
  content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.55),rgba(255,255,255,0));
  transform:skewX(-20deg);transition:left .8s var(--ease)
}
.submit:hover:not(:disabled){transform:translateY(-2px);filter:saturate(1.08) brightness(1.04);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -2px 0 rgba(0,0,0,.14),0 20px 38px -12px rgba(232,179,57,.85)}
.submit:hover:not(:disabled)::after{left:125%}
.submit:active:not(:disabled){transform:translateY(0) scale(.99);transition-duration:.08s}
.submit:focus-visible{outline:2px solid #fff1c2;outline-offset:3px}
.submit:disabled{cursor:not-allowed}
.b-txt{text-indent:.24em}
.submit .spin,.submit .b-lock,.submit .b-ok{display:none;flex:none}
.spin{width:18px;height:18px;border-radius:50%;border:2px solid rgba(31,22,4,.25);border-top-color:#1f1604;animation:rot .7s linear infinite}
.submit svg{width:18px;height:18px;stroke-width:2.2}
.submit[data-state="pending"]{filter:saturate(.85);letter-spacing:.12em}
.submit[data-state="pending"] .spin{display:block}
.submit[data-state="locked"]{
  background:linear-gradient(135deg,#2c2a22,#1f1d16);color:#d7bd7c;letter-spacing:.06em;
  box-shadow:inset 0 0 0 1px rgba(232,179,57,.28)
}
.submit[data-state="locked"] .b-lock{display:block}
.submit[data-state="locked"] .b-txt{font-variant-numeric:tabular-nums;font-weight:600;text-indent:0}
.submit[data-state="ok"]{background:linear-gradient(135deg,#5fe0a3,var(--down) 55%,#139a5c);color:#04170d;letter-spacing:.12em;box-shadow:0 14px 30px -12px rgba(31,191,117,.7)}
.submit[data-state="ok"] .b-ok{display:block}
.submit[data-state="pending"] .b-txt,.submit[data-state="ok"] .b-txt{text-indent:.12em}

.nojs{margin:16px 0 0;padding:10px 12px;border-radius:10px;background:rgba(240,69,75,.1);border:1px solid rgba(240,69,75,.34);color:#ffbdc0;font-size:13px}

.foot{margin-top:20px;text-align:center;font-size:12px;color:#8a95a4;letter-spacing:.04em}
.foot p{margin:0}
.foot .ver{margin-top:5px;font-size:11px;color:#75808f;font-family:var(--mono);letter-spacing:.06em}

/* responsive */
@media (min-width:960px) and (max-width:1120px){
  .feats{grid-template-columns:minmax(0,1fr)}
  .ms-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spark{display:none}
}
@media (min-width:960px) and (max-height:780px){
  .lead{display:none}
  .eyebrow{margin-bottom:16px}
  .feats{margin-top:22px}
}
@media (min-width:960px) and (max-height:660px){
  .mstrip{display:none}
}
@media (max-width:959.98px){
  .shell{
    grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;gap:22px;
    padding:max(28px,env(safe-area-inset-top)) 16px max(24px,env(safe-area-inset-bottom));
  }
  .brand,.auth{width:100%;max-width:480px}
  .auth::before{left:-3%;right:-3%}
  .eyebrow,.lead,.feats,.mstrip{display:none}
  .lockup{gap:13px}
  .logo{width:46px;height:46px;animation:none}
  .title{font-size:27px;letter-spacing:.05em}
  .sub{margin-top:4px;font-size:12.5px;letter-spacing:.02em}
  .sub i{margin:0 .3em}
  .card{padding:26px 20px 22px;border-radius:18px}
  .card-head{margin-bottom:18px}
  .card-head h2{font-size:22px}
}
@media (max-width:360px){
  .row{flex-direction:column;align-items:flex-start;gap:8px}
  .hint{text-align:left}
}

/* keyframes */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.975)}to{opacity:1;transform:none}}
@keyframes spin{to{--ang:360deg}}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes sheen{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-120% 0}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(240,69,75,.6)}70%{box-shadow:0 0 0 8px rgba(240,69,75,0)}100%{box-shadow:0 0 0 0 rgba(240,69,75,0)}}
@keyframes draw{0%{stroke-dashoffset:100;opacity:1}55%{stroke-dashoffset:0;opacity:1}85%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}
@keyframes areaIn{0%,15%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
@keyframes drop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@keyframes shake{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-8px)}
  40%,60%{transform:translateX(8px)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .sp-line{stroke-dashoffset:0}
  .card.shake{animation:none}
}
@media (forced-colors:active){
  .card::before,.card::after,.auth::before{display:none}
  .card{border:1px solid CanvasText}
}