:root{
  --bg:#f4f2ec;--card:#fff;--ink:#26231d;--mut:#8b857a;--line:#ebe6da;--soft:#faf8f2;
  --gold:#b8892b;--gold2:#8f6a1a;--goldbg:#f7ecd2;--red:#b3392f;--redbg:#fbeae8;--grn:#2f7d4f;--grnbg:#e4f2ea;
  --side:#1f1d19;--side2:#2b2822;--sideink:#c9c3b3;
  --shadow:0 1px 2px rgba(60,45,10,.05),0 6px 20px -8px rgba(60,45,10,.12);--r:12px}
@media (prefers-color-scheme:dark){:root{
  --bg:#171613;--card:#232119;--ink:#efeadc;--mut:#9a9485;--line:#34312a;--soft:#2a2720;
  --gold:#d6a844;--gold2:#e6c068;--goldbg:#3b3219;--redbg:#3a2321;--grnbg:#1f3328;--red:#e0675c;--grn:#5fbf86;
  --side:#0f0e0c;--side2:#1c1a16;--shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -10px rgba(0,0,0,.5)}}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}
a{color:var(--gold2);text-decoration:none}a:hover{text-decoration:underline}
.ico{width:18px;height:18px;flex:none}

/* ---- layout ---- */
body.app{display:flex;min-height:100vh}
.side{width:232px;background:linear-gradient(180deg,var(--side),var(--side2));color:var(--sideink);display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;flex:none}
.logo{display:flex;gap:12px;align-items:center;padding:4px 10px 22px;border-bottom:1px solid rgba(255,255,255,.07);margin-bottom:14px}
.logo b{display:block;color:#fff;font-size:17px;letter-spacing:2px}
.logo small{display:block;font-size:10px;color:#8f897a;letter-spacing:.5px}
.gem{width:34px;height:34px;border-radius:10px;background:conic-gradient(from 210deg,#f6e1a0,#c8962f,#8f6a1a,#e9c46a,#f6e1a0);box-shadow:inset 0 0 0 2px rgba(255,255,255,.25),0 4px 12px rgba(200,150,47,.35);position:relative}
.gem:after{content:"";position:absolute;inset:9px;border-radius:50%;background:rgba(255,255,255,.35)}
.side nav{display:flex;flex-direction:column;gap:3px}
.side nav a{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;color:var(--sideink);transition:.15s}
.side nav a:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.side nav a.on{background:linear-gradient(90deg,rgba(214,168,68,.28),rgba(214,168,68,.08));color:#f3d58a;box-shadow:inset 3px 0 0 #d6a844}
.sec-note{margin-top:auto;font-size:12px;color:#8f897a;background:rgba(255,255,255,.04);border-radius:10px;padding:12px;display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;line-height:1.4}
.sec-note .ico{color:#d6a844;grid-row:span 2}
.wrap{flex:1;min-width:0;display:flex;flex-direction:column}
.top{display:flex;align-items:center;padding:14px 32px;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5;border-bottom:1px solid var(--line)}
.date{color:var(--mut)}.sp{flex:1}
.me{display:flex;align-items:center;gap:10px}.me form{margin:0}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#e9c46a,#b8892b);color:#fff;display:grid;place-items:center;font-weight:700}
.who{line-height:1.2;margin-right:6px}.who small{display:block;color:var(--mut);font-size:12px}
main{padding:26px 32px 48px;max-width:1280px;width:100%}

/* ---- type ---- */
h1{font-size:22px;margin:0 0 18px;letter-spacing:.5px}
h3{font-size:15px;margin:26px 0 10px}
.card h3{margin-top:0}
.muted{color:var(--mut)}small{font-size:12px}

/* ---- cards / stat ---- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:18px;box-shadow:var(--shadow)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin-bottom:18px}
.grid .card{margin:0}
.stat{position:relative;overflow:hidden}
.stat:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(var(--gold),#e9c46a)}
.stat span{color:var(--mut);display:block;font-size:13px}
.stat b{font-size:28px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.3px}
.stat.au:before{background:linear-gradient(#e9c46a,#b8892b)}.stat.ag:before{background:linear-gradient(#d9dde2,#8d96a2)}
.stat.pt:before{background:linear-gradient(#b9c6d6,#6f86a3)}.stat.pd:before{background:linear-gradient(#cfc7d6,#8a7a99)}
.hello{background:linear-gradient(120deg,#2b2822,#4a3d1d 60%,#8f6a1a);color:#fff;border:0}
.hello h2{margin:0 0 4px;font-size:20px}.hello p{margin:0;color:#e8dcc0}

/* ---- tables ---- */
table{border-collapse:collapse;width:100%}
table.card{padding:0;overflow:hidden;display:table}
th,td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font-weight:600;color:var(--mut);font-size:12px;background:var(--soft);white-space:nowrap}
tr:last-child td{border-bottom:0}
table.card tr:hover td{background:var(--soft)}
.card table td,.card table th{padding:9px 6px}
.num{text-align:right;font-variant-numeric:tabular-nums}
.kv th{width:90px;background:none}.kv td{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* ---- bars / forms ---- */
.bar{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}.bar h1{margin:0}
.inline{display:flex;gap:8px;align-items:center;margin:0}
.inline-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
input,select{padding:9px 12px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--ink);font:inherit;transition:.15s}
input:focus,select:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 25%,transparent)}
.form{max-width:560px}.form label{display:block;margin-bottom:16px;font-weight:600}
.form input,.form select{display:block;width:100%;margin-top:6px;font-weight:400}
.form small{font-weight:400}
.calc{background:var(--goldbg);color:var(--gold2);padding:14px 16px;border-radius:10px;margin-bottom:16px;font-size:15px}
.calc b{font-size:18px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(180deg,#c99a37,#a97c20);color:#fff;border:0;border-radius:9px;padding:9px 18px;cursor:pointer;font:inherit;font-weight:600;box-shadow:0 2px 6px -2px rgba(150,110,20,.5);transition:.15s}
.btn:hover{filter:brightness(1.08);text-decoration:none;transform:translateY(-1px)}
.btn:disabled{opacity:.5;transform:none}
.btn.ghost{background:transparent;color:var(--gold2);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--gold);background:var(--goldbg)}
.btn.warn{background:linear-gradient(180deg,#c9493e,#a3302a)}
.btn.sm{padding:4px 12px;font-size:12px}

/* ---- misc ---- */
.flash{padding:12px 16px;border-radius:10px;margin-bottom:16px;border:1px solid transparent}
.flash.ok{background:var(--grnbg);color:var(--grn)}.flash.err{background:var(--redbg);color:var(--red)}
.flash.float{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:20;box-shadow:var(--shadow)}
.pill{padding:2px 10px;border-radius:99px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.wait{background:var(--goldbg);color:var(--gold2)}.pill.done{background:var(--grnbg);color:var(--grn)}
tr.hl td{background:var(--redbg)}
.barfill{height:10px;background:linear-gradient(90deg,#e9c46a,#b8892b);border-radius:5px}
.acts{display:flex;gap:10px;flex-wrap:wrap}.acts form{display:flex;gap:6px;margin:0}

/* ---- login ---- */
body.plain{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(900px 500px at 15% 10%,rgba(214,168,68,.25),transparent),radial-gradient(700px 500px at 90% 90%,rgba(143,106,26,.3),transparent),linear-gradient(135deg,#1f1d19,#2e2a20)}
body.plain{position:relative;overflow:hidden}
.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fx i{position:absolute;display:block}
.fx .o1,.fx .o2,.fx .o3{border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.fx .o1{width:46vmax;height:46vmax;left:-12vmax;top:-14vmax;background:radial-gradient(circle,#e9c46a,transparent 65%);animation:drift1 18s ease-in-out infinite alternate}
.fx .o2{width:40vmax;height:40vmax;right:-14vmax;bottom:-16vmax;background:radial-gradient(circle,#b9831f,transparent 65%);animation:drift2 22s ease-in-out infinite alternate}
.fx .o3{width:26vmax;height:26vmax;left:40%;top:55%;background:radial-gradient(circle,rgba(255,236,180,.8),transparent 65%);opacity:.3;animation:drift3 26s ease-in-out infinite alternate}
.fx .beam{left:-30%;top:-20%;width:60%;height:140%;transform:rotate(18deg);background:linear-gradient(90deg,transparent,rgba(255,235,170,.10),transparent);animation:beam 9s ease-in-out infinite}
.fx .spot{left:0;top:0;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(246,225,160,.20),transparent 62%);will-change:transform}
.fx{--mx:50%;--my:35%}
.fx .grid{inset:-48px;background-image:linear-gradient(rgba(233,196,106,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(233,196,106,.10) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 75% 70% at 50% 50%,#000 25%,transparent 100%);animation:gridmove 14s linear infinite}
.fx .grid.hot{background-image:linear-gradient(rgba(255,226,140,.55) 1px,transparent 1px),linear-gradient(90deg,rgba(255,226,140,.55) 1px,transparent 1px);
  -webkit-mask-image:radial-gradient(circle 220px at var(--mx) var(--my),#000,transparent);mask-image:radial-gradient(circle 220px at var(--mx) var(--my),#000,transparent)}
@keyframes gridmove{to{transform:translate(48px,48px)}}
@keyframes drift1{to{transform:translate(18vmax,12vmax) scale(1.2)}}
@keyframes drift2{to{transform:translate(-16vmax,-10vmax) scale(1.15)}}
@keyframes drift3{to{transform:translate(-20vmax,-14vmax) scale(.8)}}
@keyframes beam{0%{transform:translateX(0) rotate(18deg);opacity:0}20%{opacity:1}60%{opacity:1}100%{transform:translateX(220%) rotate(18deg);opacity:0}}
.login{position:relative;z-index:1;overflow:hidden;animation:cardin .7s cubic-bezier(.2,.8,.2,1) both}
.login:before{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:sheen 6s ease-in-out 1s infinite;pointer-events:none}
.login .gem{animation:gem 6s linear infinite}
@keyframes cardin{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:none}}
@keyframes sheen{0%{left:-60%}35%,100%{left:140%}}
@keyframes gem{to{filter:hue-rotate(0deg) brightness(1.15)}50%{filter:brightness(1.3)}}
@media(prefers-reduced-motion:reduce){.fx .grid.hot{display:none}.fx i,.login,.login:before,.login .gem{animation:none!important}.fx .spot{display:none}}
.login{width:100%;max-width:400px;padding:36px 34px 28px;border:0;border-radius:18px;box-shadow:0 24px 60px -12px rgba(0,0,0,.55)}
.login .brand{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.login .brand b{font-size:21px;letter-spacing:2px}
.login .sub{color:var(--mut);margin:0 0 24px}
.login label{display:block;margin-bottom:16px;font-weight:600}
.login input{width:100%;margin-top:6px;padding:11px 14px;font-weight:400}
.login .btn{width:100%;justify-content:center;padding:12px;font-size:15px}
.login .muted{font-size:12px;margin:18px 0 0;text-align:center}
.err-card{max-width:420px;text-align:center}

@media(max-width:860px){
  body.app{display:block}
  .side{width:auto;height:auto;position:static;flex-direction:row;overflow-x:auto;padding:8px}
  .side .logo,.sec-note{display:none}.side nav{flex-direction:row}.side nav a{white-space:nowrap;padding:8px 12px}
  .top,main{padding-left:16px;padding-right:16px}.who{display:none}
  table{display:block;overflow-x:auto}
}

/* ---- images ---- */
.gallery{display:flex;flex-wrap:wrap;gap:14px}.gallery figure{margin:0}
.gallery figcaption{font-size:12px;margin-top:4px}
img.thumb{width:150px;height:150px;object-fit:cover;border-radius:10px;border:1px solid var(--line);cursor:zoom-in;background:var(--soft);transition:.15s}
img.thumb:hover{transform:scale(1.03);box-shadow:var(--shadow)}
img.thumb.mini{width:44px;height:44px;border-radius:6px;margin-right:4px}
.gallery img.thumb{width:170px;height:170px}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.82);display:grid;place-items:center;z-index:50;cursor:zoom-out}
.lb[hidden]{display:none}.lb img{max-width:92vw;max-height:92vh;border-radius:8px}
.link-btn{background:none;border:0;color:var(--red);cursor:pointer;font:inherit;font-size:12px;padding:0 0 0 6px}
input[type=file]{padding:7px}

.nw{white-space:nowrap}.btn.sm{white-space:nowrap}
table.dense th,table.dense td{padding:12px 8px}table.dense th:first-child,table.dense td:first-child{padding-left:16px}

/* ---- 二级分类 ---- */
tr.subrow td{background:var(--soft);padding-top:8px;padding-bottom:12px}
table.card tr.subrow:hover td{background:var(--soft)}
.subhead{font-weight:600;margin-bottom:6px;font-size:13px}
.subitem{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 8px}
.subitem input{padding:6px 10px}
.subitem.off input{opacity:.5;text-decoration:line-through}
.subitem.add{padding-top:6px;border-top:1px dashed var(--line)}

/* ---- 多明细 / 付款 / 作废 ---- */
.blk{display:block;font-weight:600;margin-bottom:14px}.blk select,.blk input{display:block;margin-top:6px;font-weight:400}
table.lines{width:100%}table.lines th,table.lines td{padding:6px 6px;border-bottom:1px solid var(--line)}
table.lines input,table.lines select{padding:6px 8px;max-width:200px}
table.lines tfoot td{border-bottom:0;padding-top:10px}
.pill.part{background:#e6eefb;color:#2c5aa0}.pill.void{background:var(--redbg);color:var(--red)}
tr.void td{color:var(--mut)}tr.void td:first-child{text-decoration:line-through}
.pager{margin:-6px 0 16px;color:var(--mut)}.pager a{margin:0 8px}
.cols2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px}
details.void-box summary{cursor:pointer;color:var(--red);font-weight:600}
.diff-ok{color:var(--grn);font-weight:700}.diff-bad{color:var(--red);font-weight:700}

/* ================= 手机端 (<=700px) ================= */
@media(max-width:700px){
  main{padding:14px 12px 40px}
  h1{font-size:19px}h3{margin:20px 0 8px}
  input,select,textarea{font-size:16px}              /* 避免 iOS 聚焦时自动放大 */
  .btn{padding:10px 16px}.btn.sm{padding:7px 12px;font-size:13px}
  .top{padding:10px 12px}.date{display:none}.sp{display:none}.me{width:100%;justify-content:flex-end}
  .side{padding:6px}.side nav a{padding:10px 12px;font-size:14px}
  .bar{gap:8px}.bar h1{width:100%}
  .bar form.inline{flex-wrap:wrap;width:100%}.bar form.inline input,.bar form.inline select{flex:1 1 120px;min-width:0}
  .bar .btn{flex:none}
  .grid{grid-template-columns:1fr 1fr;gap:10px}.stat{padding:14px}.stat b{font-size:19px}
  .card{padding:14px}
  .form,.login{max-width:none}.login{margin:6vh auto}
  .inline-form{align-items:stretch}.inline-form>*{flex:1 1 140px;min-width:0}.inline-form .btn{flex:none}
  .cols2{grid-template-columns:1fr}
  /* 普通表格:卡片内横向滑动,页面本身不再被撑宽 */
  table.card{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  /* 堆叠表格:每行一张卡片 */
  table.stack{display:block;overflow:visible;background:none;border:0;box-shadow:none;padding:0}
  table.stack tbody{display:block}
  table.stack tr.hd{display:none}
  table.stack tr{display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:8px 14px;margin-bottom:12px;box-shadow:var(--shadow)}
  table.stack td{display:flex;justify-content:space-between;gap:14px;border:0;padding:5px 0 !important;text-align:right;white-space:normal}
  table.stack td:before{content:attr(data-label);color:var(--mut);font-size:12px;text-align:left;flex:none;padding-top:2px}
  table.stack td.nolabel:before{content:none}
  table.stack td.nolabel{justify-content:flex-start;gap:14px;padding-top:10px !important;border-top:1px dashed var(--line)}
  table.stack tr:hover td{background:none}
  table.stack tr.void{opacity:.7}
  /* 开单明细:每件一张卡片 */
  table.lines{display:block}
  table.lines thead{display:none}
  table.lines tbody{display:block}
  table.lines tbody tr{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--soft)}
  table.lines td{display:block;border:0;padding:0}
  table.lines td:before{content:attr(data-label);display:block;font-size:12px;color:var(--mut);margin-bottom:2px}
  table.lines td:nth-child(3){grid-column:1/-1}
  table.lines td.del-cell{grid-column:1/-1}table.lines td.del-cell:before{content:none}
  table.lines td.num{text-align:left;font-weight:600}
  table.lines td select,table.lines td input{width:100% !important;max-width:none}
  table.lines tfoot{display:block}table.lines tfoot tr{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
  table.lines tfoot td{display:inline-block;padding:0}table.lines tfoot td:first-child{flex:1 1 100%}
  .blk select,.blk input{width:100%}
  img.thumb{width:calc(50% - 8px);height:auto;aspect-ratio:1}.gallery{gap:10px}.gallery figure{width:calc(50% - 6px)}.gallery img.thumb{width:100%;height:auto}
  .subitem input{flex:1 1 90px}
  .pager{text-align:center}
}
@media(max-width:700px){table.lines tfoot td[data-label]:before{display:inline;margin:0 6px 0 0}}

/* 手机卡片:补充 */
@media(max-width:700px){
  table.stack td[data-label=""]:before{content:none}
  table.stack td[data-label=""]{justify-content:flex-start;flex-wrap:wrap}
  table.stack td:empty{display:none}
  .card table.stack{margin:0}
  .card table.stack tr{background:var(--soft);box-shadow:none}
  table.stack td.num{white-space:nowrap}
  /* 品类管理:主行 + 二级分类行拼成一张卡片 */
  table.joined tr{margin-bottom:0;border-radius:12px 12px 0 0;border-bottom:0;box-shadow:none}
  table.joined tr.subrow{margin-bottom:14px;border-radius:0 0 12px 12px;border:1px solid var(--line);border-top:1px dashed var(--line);box-shadow:var(--shadow);background:var(--soft)}
  table.joined tr.subrow td{display:block;padding:4px 0 !important}
  table.joined tr.subrow td:before{content:none}
  table.joined td .inline{flex-wrap:wrap;width:100%;justify-content:flex-end}
  table.joined .acts{justify-content:flex-start}
  table.stack .barfill{max-width:100%}
  .acts form{flex-wrap:wrap}
}

.demo-bar{background:#fff4d6;color:#7a5a00;border-bottom:1px solid #ecd48a;padding:7px 16px;font-size:13px;text-align:center}
.demo-hint{background:#fff7e0;border:1px dashed #d9b45a;border-radius:10px;padding:9px 12px;margin:0 0 14px;font-size:13.5px;color:#6b4e00;text-align:center}

/* ---- login v2:统一为"深色金棕背景 + 磨砂卡片" ---- */
body.plain .flash.float{display:none}
.login-wrap{position:relative;z-index:1;width:100%;max-width:410px}
.login{max-width:none;padding:38px 36px 26px;border-radius:20px;background:rgba(255,255,255,.93);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 0 0 1px rgba(233,196,106,.38),0 30px 70px -18px rgba(0,0,0,.65),0 0 60px -10px rgba(214,168,68,.25)}
.login:after{content:"";position:absolute;left:12%;right:12%;top:0;height:2px;background:linear-gradient(90deg,transparent,#e9c46a,transparent);pointer-events:none}
.login .brand{flex-direction:column;align-items:center;text-align:center;gap:0;margin:0 0 26px}
.login .gem{width:54px;height:54px;border-radius:16px;margin-bottom:14px}
.login .gem:after{inset:15px}
.login .brand b{font-size:24px;letter-spacing:5px;text-indent:5px;color:#26231d}
.login .sub{margin:6px 0 0;font-size:12.5px;letter-spacing:3px;color:#8b857a;text-indent:3px}
.login .fld{display:block;margin-bottom:16px;font-weight:600;font-size:13px;color:#4a453a}
.login .fld>span{display:block;margin-bottom:6px}
.login .ipt{position:relative}
.login .ipt>svg{position:absolute;left:13px;top:50%;width:18px;height:18px;margin-top:-9px;fill:none;stroke:#a89d83;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:.15s}
.login .ipt:focus-within>svg{stroke:#b8892b}
.login .ipt input{margin:0;padding:12px 42px 12px 40px;background:#fbfaf6;border-color:#e6e0cf;color:#26231d;font-weight:400}
.login .ipt input::placeholder{color:#b3ac9a}
.login .eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:none;border-radius:8px;cursor:pointer;display:grid;place-items:center;color:#a89d83}
.login .eye svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login .eye:hover,.login .eye.on{color:#b8892b;background:#f7ecd2}
.login .caps{display:block;margin-top:5px;color:#b3392f;font-weight:500}
.login .demo-hint{margin:2px 0 14px}
.login .btn{margin-top:4px;height:46px;letter-spacing:6px;text-indent:6px;position:relative;overflow:hidden}
.login .btn:before{content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);animation:sheen 5s ease-in-out 2s infinite}
.login .btn.busy{letter-spacing:2px;text-indent:2px;opacity:.85;cursor:progress}
.login .btn:disabled{pointer-events:none}
.lf-msg{padding:10px 14px;border-radius:10px;margin:-6px 0 18px;font-size:13.5px;text-align:center;animation:shake .4s}
.lf-msg.err{background:#fbeae8;color:#b3392f;border:1px solid #f1cdc8}.lf-msg.ok{background:#e4f2ea;color:#2f7d4f;border:1px solid #c5e3d1}
@keyframes shake{20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.trust{list-style:none;display:flex;justify-content:center;gap:6px;margin:22px 0 0;padding:16px 0 0;border-top:1px solid #efe9d8}
.trust li{display:flex;align-items:center;gap:5px;font-size:12px;color:#8b857a;padding:3px 10px}
.trust li+li{border-left:1px solid #e9e2cf}
.trust svg{width:14px;height:14px;fill:none;stroke:#b8892b;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.login-foot{margin:18px 0 0;text-align:center;font-size:12px;color:rgba(235,225,195,.55);letter-spacing:.5px}
/* 背景收敛一点,避免和卡片抢视线 */
.fx .o3{opacity:.2}.fx .beam{opacity:.8}
@media(max-width:700px){.login{padding:30px 22px 22px;margin:0}.login-wrap{margin:4vh auto}.trust li{padding:3px 7px;font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.login .btn:before,.lf-msg{animation:none}}
.login .caps[hidden]{display:none}
.login{background:rgba(255,255,255,.96)}