:root{--entry-ink:#173b5d;--entry-blue:#1d5fc7;--entry-soft:#e6f1fb;--entry-canvas:#f3f7fb;--entry-line:#cbdbea}
html body.account-page{background:var(--entry-canvas);color:var(--entry-ink)}
html body.account-page main#account-main{max-width:1060px;display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.9fr);gap:0 34px;padding:34px 22px 64px;align-items:start}
html body.account-page main#account-main header.workbench-header{grid-column:1;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:0;margin:0;padding:48px 46px;min-height:570px;background:var(--entry-soft);border-radius:22px;position:relative;overflow:hidden}
html body.account-page main#account-main header.workbench-header:after{content:"";position:absolute;bottom:0;left:46px;right:46px;height:5px;background:var(--entry-blue);border-radius:5px 5px 0 0}
html body.account-page main#account-main .brand{display:flex;align-items:center;gap:12px;margin-bottom:54px}
html body.account-page main#account-main .brand strong{font-size:20px;letter-spacing:.02em}
html body.account-page main#account-main header.workbench-header .mark{width:46px;height:46px;flex:0 0 46px;border-radius:11px;background:var(--entry-blue);box-shadow:none;font-size:27px;line-height:1}
html body.account-page main#account-main header.workbench-header h1{font-size:clamp(34px,3.4vw,48px)!important;line-height:1.24;letter-spacing:-.035em;color:#123857;max-width:12em;margin:0 0 22px}
html body.account-page main#account-main header.workbench-header .welcome-line{font-size:18px!important;line-height:1.65;color:#47647d;max-width:25em;margin:0 0 42px}
html body.account-page main#account-main .entry-steps{display:flex;flex-wrap:wrap;gap:8px;list-style:none;counter-reset:step;margin:0;padding:0}
html body.account-page main#account-main .entry-steps li{counter-increment:step;background:#fff;border:1px solid #c5daee;border-radius:9px;padding:8px 11px;color:#214c73;font-size:14px;font-weight:650;white-space:nowrap}
html body.account-page main#account-main .entry-steps li:before{content:counter(step) " ";color:var(--entry-blue);font-weight:800}
html body.account-page main#account-main .entry-panel{grid-column:2;align-self:center;width:100%}
html body.account-page main#account-main .entry-panel .card{margin:0;background:#fff;border:1px solid var(--entry-line);border-radius:20px;padding:32px;box-shadow:0 12px 30px #173b5d0d}
html body.account-page main#account-main #login-panel h2{font-size:25px!important;margin:0 0 20px;line-height:1.3}
html body.account-page main#account-main #login-panel label{font-size:16px!important;font-weight:700;margin:14px 0 0;line-height:1.5}
html body.account-page main#account-main #login-panel :is(input,button){font-size:17px!important;line-height:1.4;min-height:52px}
html body.account-page main#account-main #login-panel input{padding:10px 13px;border:1px solid #aabed1;border-radius:9px;background:#fff}
html body.account-page main#account-main #login-panel input:focus{border-color:var(--entry-blue)}
html body.account-page main#account-main #login-panel input[name="username"]{font-size:17px!important;font-weight:600}
html body.account-page main#account-main #login-panel .password-field{gap:7px}
html body.account-page main#account-main #login-panel .password-field button{font-size:15px!important;min-width:60px;background:#edf4fb;color:#235b9e}
html body.account-page main#account-main #login-panel form>button{margin:24px 0 0;background:var(--entry-blue);border-radius:9px;font-size:18px!important}
html body.account-page main#account-main #login-panel .page-help-button{min-height:32px;width:32px;padding:0;background:#edf4fb;color:#235b9e;font-size:17px!important}
html body.account-page main#account-main #login-panel .message{font-size:15px!important;min-height:0;margin:10px 0 0}
html body.account-page main#account-main .entry-panel #status-message{font-size:15px!important;margin:0 0 8px;min-height:0}
html body.account-page main#account-main .entry-panel #status-message:empty{display:none}
html body.account-page main#account-main .entry-panel .session-card .links{gap:10px}
html body.account-page main#account-main .entry-panel .session-card .links>*{font-size:16px!important;min-height:42px}
html body.account-page main#account-main #admin-panel,html body.account-page main#account-main #account-panel{grid-column:1/-1;margin-top:24px}
html body.account-page main#account-main .status-retry{font-size:15px!important;min-height:44px}
@media(max-width:740px){
 html body.account-page main#account-main{display:block;max-width:500px;padding:0 14px 44px}
 html body.account-page main#account-main header.workbench-header{min-height:0;display:block;padding:19px 20px 16px;margin:0 -14px 16px;border-radius:0 0 20px 20px}
 html body.account-page main#account-main header.workbench-header:after{left:20px;right:20px;height:3px}
 html body.account-page main#account-main .brand{margin-bottom:12px;gap:9px}
 html body.account-page main#account-main .brand strong{font-size:17px}
 html body.account-page main#account-main header.workbench-header .mark{width:36px;height:36px;flex-basis:36px;font-size:21px;border-radius:8px}
 html body.account-page main#account-main header.workbench-header h1{font-size:28px!important;line-height:1.28;margin-bottom:6px}
 html body.account-page main#account-main header.workbench-header .welcome-line{font-size:14px!important;line-height:1.5;margin:0 0 12px}
 html body.account-page main#account-main .entry-steps{gap:5px}
 html body.account-page main#account-main .entry-steps li{font-size:11px;padding:5px 6px;border-radius:6px}
 html body.account-page main#account-main .entry-panel .card{padding:22px 19px;border-radius:16px}
 html body.account-page main#account-main #login-panel h2{font-size:22px!important;margin-bottom:12px}
 html body.account-page main#account-main #login-panel label{margin-top:10px;font-size:16px!important}
 html body.account-page main#account-main #login-panel :is(input,button){min-height:52px;font-size:17px!important}
 html body.account-page main#account-main #login-panel input[name="username"]{font-size:17px!important}
 html body.account-page main#account-main .entry-panel .session-card .links>*{font-size:16px!important;min-height:42px}
}
@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}}
html body.account-page main#account-main{display:block;max-width:520px;padding:42px 18px 56px}
html body.account-page main#account-main header.workbench-header{display:block;min-height:0;background:none;border-radius:0;padding:0;margin:0 0 18px;overflow:visible}
html body.account-page main#account-main header.workbench-header:after{display:none}
html body.account-page main#account-main .brand{margin:0}
html body.account-page main#account-main .entry-panel{width:100%}
@media(max-width:740px){html body.account-page main#account-main{padding:20px 14px 44px}html body.account-page main#account-main header.workbench-header{margin:0 0 14px}html body.account-page main#account-main .brand strong{font-size:18px}}

.preview-exit-bar{margin:8px 12px;padding:11px 13px;background:#fff3d7;color:#5c3900;border:1px solid #e5c877;border-radius:10px;font-size:15px;line-height:1.5}.preview-exit-bar a{color:#164f9e;font-weight:700;text-decoration:underline}

/* 独立超市入口品牌，仅用于演示账套 */
:root{--entry-ink:#163e35;--entry-blue:#17624e;--entry-soft:#eaf4ef;--entry-canvas:#f5f8f4;--entry-line:#c9ded3}
html body.account-page main#account-main header.workbench-header h1{color:#123d32}
html body.account-page main#account-main header.workbench-header .mark{background:transparent;border-radius:12px;overflow:hidden}
html body.account-page main#account-main header.workbench-header .mark img{display:block;width:100%;height:100%}
html body.account-page main#account-main #login-panel .password-field button{background:#eaf4ef;color:#17624e}
html body.account-page main#account-main .preview-exit-bar{grid-column:1/-1;margin:0 0 18px;background:#f4f8f4;border-color:#c9ded3;color:#245346}
html body.account-page main#account-main .preview-exit-bar a{color:#17624e}
html body.account-page main#account-main #login-panel form>button[type=submit]{background:#17624e!important;color:#fff!important}
html body.account-page main#account-main #login-panel form>button[type=submit]:hover{background:#0f4c3b!important}
html body.account-page main#account-main header.workbench-header .mark{display:grid;place-items:center;background:#17624e;color:#fff;font-size:27px;font-weight:800;line-height:1;letter-spacing:0}
@media(max-width:740px){html body.account-page main#account-main header.workbench-header .mark{font-size:22px}}
html body.corporate-clean.account-page main#account-main header.workbench-header .brand .mark{width:72px!important;height:72px!important;min-width:72px!important;flex:0 0 72px;border-radius:20px!important;font-size:42px!important;line-height:72px!important}
@media(max-width:740px){html body.corporate-clean.account-page main#account-main header.workbench-header .brand .mark{width:64px!important;height:64px!important;min-width:64px!important;flex-basis:64px;border-radius:18px!important;font-size:38px!important;line-height:64px!important}}

/* 商超登录：用门店绿、暖黄和操作蓝区分身份、辅助和主操作。 */
html body.account-page{background:#edf5ef;color:#173047}
html body.account-page main#account-main{max-width:620px;padding:30px 18px 54px}
html body.account-page main#account-main header.workbench-header{padding:26px 30px 25px;margin:0 0 18px;background:#17624e;border-radius:24px;box-shadow:0 10px 28px #11503d18}
html body.account-page main#account-main header.workbench-header .brand{gap:16px;margin:0}
html body.account-page main#account-main header.workbench-header .brand strong{font-size:27px;color:#fff;letter-spacing:.02em}
html body.corporate-clean.account-page main#account-main header.workbench-header .brand .mark{background:#e6f0c9!important;color:#145642!important;border:1px solid #f6d586!important;box-shadow:none!important}
html body.account-page main#account-main .supermarket-login-intro{margin:15px 0 0;color:#e8f5eb;font-size:16px;line-height:1.5}
html body.account-page main#account-main .entry-panel .card{border:1px solid #d3e3da;border-top:5px solid #eda847;border-radius:18px;box-shadow:0 8px 24px #1743320d;padding:28px 30px}
html body.account-page main#account-main #login-panel h2{color:#174f40;font-size:26px!important}
html body.account-page main#account-main #login-panel label{color:#284536}
html body.account-page main#account-main #login-panel input{border-color:#b8cbc0;background:#fbfdfa}
html body.account-page main#account-main #login-panel input:focus{border-color:#2b63c8;outline:3px solid #d4e5ff;outline-offset:1px}
html body.account-page main#account-main #login-panel form>button[type=submit]{background:#17624e!important;border-radius:12px;min-height:56px}
html body.account-page main#account-main #login-panel form>button[type=submit]:hover{background:#11513f!important}
html body.account-page main#account-main #login-panel .password-field button{background:#eaf2ff;color:#2456a5}
@media(max-width:740px){
 html body.account-page main#account-main{padding:14px 13px 40px}
 html body.account-page main#account-main header.workbench-header{padding:20px 20px 19px;margin-bottom:14px;border-radius:0 0 22px 22px}
 html body.account-page main#account-main header.workbench-header .brand strong{font-size:23px}
 html body.account-page main#account-main .supermarket-login-intro{font-size:14px;margin-top:11px}
 html body.account-page main#account-main .entry-panel .card{padding:22px 20px}
}

@layer corporate-clean {
 html:has(body.corporate-clean.account-page),body.corporate-clean.account-page{background:#edf5ef!important}
 body.corporate-clean.account-page main#account-main header.workbench-header .brand strong{font-size:27px!important;color:#fff!important}
 body.corporate-clean.account-page main#account-main header.workbench-header .brand .mark{width:72px!important;height:72px!important;min-width:72px!important;flex:0 0 72px!important;line-height:72px!important;font-size:42px!important;border:1px solid #f6d586!important;border-radius:20px!important;background:#e6f0c9!important;color:#145642!important}
 body.corporate-clean.account-page main#account-main .entry-panel #login-panel.card{border:1px solid #d3e3da!important;border-top:5px solid #eda847!important;border-radius:18px!important;padding:28px 30px!important}
 body.corporate-clean.account-page main#account-main #login-panel h2{font-size:26px!important;color:#174f40!important}
 @media(max-width:740px){
  body.corporate-clean.account-page main#account-main header.workbench-header .brand strong{font-size:23px!important}
  body.corporate-clean.account-page main#account-main header.workbench-header .brand .mark{width:64px!important;height:64px!important;min-width:64px!important;flex-basis:64px!important;line-height:64px!important;font-size:38px!important;border-radius:18px!important}
  body.corporate-clean.account-page main#account-main .entry-panel #login-panel.card{padding:22px 20px!important}
 }
}