/* ==========================================================================
   观山湖惠到家便利店云商城 · 统一登录页设计系统  auth.css
   适用：static/portal/{merchant,terminal,distributor,agent,partner}.html
   说明：五端登录页共用同一套视觉与交互，端差异仅由 HTML 里的 data-* 决定。
   设计基调：深空蓝 #0b1020 底 + 紫青渐变 #6d5efc → #22d3ee 主色（沿用原风格，
             但重做主色为可配置的 CSS 变量，便于后续换肤）。

   v0.19.0-splitview（本次改造，对标超赢云 POS 登录页做法）：
     1) 桌面端改为双栏：左侧品牌区（标语 + 五端能力可视化 + 动效），
        右侧登录卡（账号 / 扫码 双 Tab）。
     2) 移动端（<=900px）左栏收起，只保留登录卡，避免小屏被挤压。
     3) 原有全部类名与规则保持不变，向后兼容，可随时回退。
   ========================================================================== */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
html{-webkit-text-size-adjust:100%}

:root{
  --lp-bg:#0b1020;
  --lp-ink:#eef1f8;
  --lp-muted:#9aa6c2;
  --lp-muted-2:#6b779a;
  --lp-line:rgba(255,255,255,.10);
  --lp-line-strong:rgba(255,255,255,.18);
  --lp-glass:rgba(255,255,255,.06);
  --lp-glass-2:rgba(255,255,255,.04);
  --lp-c1:#6d5efc;
  --lp-c2:#22d3ee;
  --lp-grad:linear-gradient(135deg,var(--lp-c1),var(--lp-c2));
  --lp-err:#fb7185;
  --lp-ok:#34d399;
  --lp-radius:22px;
  --lp-radius-sm:12px;
  --lp-shadow:0 30px 80px rgba(2,6,23,.55), inset 0 1px 0 rgba(255,255,255,.06);
  --lp-focus:0 0 0 4px rgba(109,94,252,.18);
  /* 端主题色（JS 会按 data-accent 覆写） */
  --lp-accent:var(--lp-c1);
  /* 本次新增：品牌区渐变（更深、更沉稳） */
  --lp-brand-1:#0a1230;
  --lp-brand-2:#111c46;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:
    radial-gradient(1200px 620px at 84% -12%, rgba(109,94,252,.30), transparent 60%),
    radial-gradient(900px 520px at 8% 112%, rgba(34,211,238,.16), transparent 55%),
    var(--lp-bg);
  color:var(--lp-ink);
  min-height:100vh;
  display:flex;flex-direction:column;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{border:0}

/* ------------------------------ 顶部导航 ------------------------------ */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:20px 28px}
.logo{font-weight:800;font-size:18px;letter-spacing:.5px;display:flex;align-items:center;gap:10px;min-width:0}
.logo img{height:30px;border-radius:7px;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.logo span{background:var(--lp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.nav .chip{border:1px solid var(--lp-line);color:var(--lp-muted);padding:7px 14px;border-radius:99px;font-size:12.5px;transition:.2s;white-space:nowrap;flex:0 0 auto}
.nav .chip:hover{color:var(--lp-ink);border-color:var(--lp-accent);transform:translateY(-1px)}

/* ==========================================================================
   v0.19.0-splitview：双栏外壳
   结构：<div class="main"><div class="stage">
           <section class="brand">…左栏品牌…</section>
           <section class="panel">…右栏登录卡…</section>
         </div></div>
   ========================================================================== */
.main{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}

.stage{
  width:100%;max-width:1120px;
  display:grid;grid-template-columns:1.08fr .92fr;
  gap:0;
  border:1px solid var(--lp-line);
  border-radius:26px;
  overflow:hidden;
  background:var(--lp-glass-2);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:var(--lp-shadow);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.stage{animation:none}}

/* ------------------------------ 左栏：品牌区 ------------------------------ */
.brand{
  position:relative;
  padding:44px 40px 38px;
  background:
    radial-gradient(560px 340px at 12% 0%, rgba(109,94,252,.42), transparent 62%),
    radial-gradient(460px 320px at 92% 104%, rgba(34,211,238,.22), transparent 60%),
    linear-gradient(160deg,var(--lp-brand-1),var(--lp-brand-2));
  border-right:1px solid var(--lp-line);
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* 品牌区点缀：网格纹理 + 浮动光斑 */
.brand::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(620px 420px at 30% 22%, #000 20%, transparent 78%);
  -webkit-mask-image:radial-gradient(620px 420px at 30% 22%, #000 20%, transparent 78%);
  pointer-events:none;
}
.brand::after{
  content:"";position:absolute;width:340px;height:340px;right:-120px;top:-90px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(34,211,238,.20), transparent 66%);
  animation:float 11s ease-in-out infinite;
  pointer-events:none;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(24px)}}
@media (prefers-reduced-motion:reduce){.brand::after{animation:none}}

.brand > *{position:relative;z-index:1}

.brand-head{display:flex;align-items:center;gap:11px;margin-bottom:34px}
.brand-head img{height:34px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.brand-head b{
  font-size:19px;font-weight:800;letter-spacing:.6px;
  background:var(--lp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-head .tag{
  margin-left:auto;font-size:11px;color:var(--lp-muted);
  border:1px solid var(--lp-line);padding:4px 10px;border-radius:99px;white-space:nowrap;
}

/* 主标语 */
.brand-h{
  font-size:33px;line-height:1.34;font-weight:800;letter-spacing:.4px;
  margin-bottom:14px;
}
.brand-h em{
  font-style:normal;
  background:var(--lp-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
}
.brand-p{color:var(--lp-muted);font-size:13.5px;line-height:1.85;margin-bottom:30px;max-width:30em}

/* 五端能力可视化（卡片岛） */
.isles{display:flex;flex-direction:column;gap:9px;margin-bottom:auto}
.isle{
  display:flex;align-items:center;gap:11px;
  padding:11px 14px;border-radius:13px;
  background:rgba(255,255,255,.045);
  border:1px solid var(--lp-line);
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s;
}
.isle:hover{transform:translateX(4px);background:rgba(255,255,255,.075);border-color:var(--lp-line-strong)}
.isle .ii{
  flex:0 0 auto;width:32px;height:32px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  background:linear-gradient(140deg, rgba(109,94,252,.30), rgba(34,211,238,.22));
  border:1px solid var(--lp-line);
}
.isle .it{min-width:0}
.isle .it b{display:block;font-size:13px;font-weight:700;letter-spacing:.2px}
.isle .it span{display:block;font-size:11.5px;color:var(--lp-muted);margin-top:2px;line-height:1.5}
.isle .im{
  margin-left:auto;flex:0 0 auto;font-size:10.5px;color:var(--lp-muted);
  border:1px solid var(--lp-line);border-radius:99px;padding:2px 8px;white-space:nowrap;
}
.isle.live{border-color:rgba(52,211,153,.34)}
.isle.live .im{color:var(--lp-ok);border-color:rgba(52,211,153,.34)}

/* 底部信任行 */
.trust{
  display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--lp-line);
  font-size:11.5px;color:var(--lp-muted);
}
.trust span{display:inline-flex;align-items:center;gap:5px}
.trust i{font-style:normal;color:var(--lp-ok);font-size:12px}

/* ------------------------------ 右栏：登录卡 ------------------------------ */
.panel{
  padding:40px 38px;
  background:rgba(255,255,255,.028);
  display:flex;flex-direction:column;justify-content:center;
}

.login{width:100%;max-width:410px;margin:0 auto}

.badge{
  width:62px;height:62px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:30px;
  background:var(--lp-grad);
  box-shadow:0 12px 30px rgba(109,94,252,.45);
  margin-bottom:18px;
  transition:transform .25s ease;
}
.login:hover .badge{transform:translateY(-2px) rotate(-2deg)}

.login h1{font-size:24px;letter-spacing:.5px;margin-bottom:5px}
.login .sub{color:var(--lp-muted);font-size:13.5px;margin-bottom:8px}
.login .desc{
  color:var(--lp-muted);font-size:12.5px;line-height:1.7;
  margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--lp-line);
}

/* ---- 登录方式 Tab（账号 / 扫码）---- */
.tabs{
  display:flex;gap:4px;padding:4px;margin-bottom:20px;
  background:rgba(255,255,255,.045);border:1px solid var(--lp-line);
  border-radius:12px;
}
.tab{
  flex:1;text-align:center;padding:9px 10px;border-radius:9px;
  font-size:13px;font-weight:600;color:var(--lp-muted);
  cursor:pointer;transition:.2s;border:none;background:none;
  font-family:inherit;letter-spacing:.3px;
  display:flex;align-items:center;justify-content:center;gap:6px;
}
.tab:hover{color:var(--lp-ink)}
.tab.on{background:var(--lp-grad);color:#fff;box-shadow:0 6px 16px rgba(109,94,252,.35)}
.tabpane{display:none}
.tabpane.on{display:block;animation:fade .25s ease both}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tabpane.on{animation:none}}

/* ---- 扫码登录占位 ---- */
.qr{
  text-align:center;padding:6px 0 4px;
}
.qr-box{
  width:180px;height:180px;margin:0 auto 16px;
  border-radius:18px;border:1px solid var(--lp-line);
  background:
    radial-gradient(140px 140px at 50% 50%, rgba(109,94,252,.14), transparent 70%),
    rgba(255,255,255,.035);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
  position:relative;overflow:hidden;
}
.qr-box .qi{font-size:38px;filter:grayscale(.15)}
.qr-box .qt{font-size:12px;color:var(--lp-muted);letter-spacing:.4px}
.qr-box .soon{
  position:absolute;top:9px;right:9px;
  font-size:10px;color:var(--lp-c2);
  border:1px solid rgba(34,211,238,.4);border-radius:99px;padding:2px 8px;
  background:rgba(34,211,238,.08);
}
/* 扫描线动效 */
.qr-box::after{
  content:"";position:absolute;left:8%;right:8%;height:2px;
  background:linear-gradient(90deg,transparent,var(--lp-c2),transparent);
  box-shadow:0 0 12px rgba(34,211,238,.7);
  animation:scan 2.6s ease-in-out infinite;
}
@keyframes scan{0%,100%{top:16%}50%{top:82%}}
@media (prefers-reduced-motion:reduce){.qr-box::after{animation:none;top:50%}}
.qr-p{font-size:12.5px;color:var(--lp-muted);line-height:1.8}
.qr-p b{color:var(--lp-ink);font-weight:600}

/* ------------------------------ 表单 ------------------------------ */
.field{margin-bottom:15px;position:relative}
.field label{display:block;font-size:12.5px;color:var(--lp-muted);margin-bottom:8px;letter-spacing:.3px}
.field input{
  width:100%;padding:13px 15px;border-radius:var(--lp-radius-sm);
  border:1px solid var(--lp-line);background:var(--lp-glass-2);
  color:var(--lp-ink);font-size:15px;outline:none;transition:.2s;
  font-family:inherit;
}
.field input::placeholder{color:var(--lp-muted-2)}
.field input:hover{border-color:var(--lp-line-strong)}
.field input:focus{border-color:var(--lp-accent);background:rgba(109,94,252,.08);box-shadow:var(--lp-focus)}
.field input:disabled{opacity:.6;cursor:not-allowed}
/* 密码框给右侧眼睛按钮留位 */
.field.has-toggle input{padding-right:48px}

.toggle{
  position:absolute;right:8px;top:33px;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--lp-muted);
  cursor:pointer;font-size:16px;transition:.2s;border-radius:8px;
}
.toggle:hover{color:var(--lp-ink);background:rgba(255,255,255,.06)}

/* 记住我 / 忘记密码 一行 */
.row-between{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-2px 0 16px}
.check{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--lp-muted);cursor:pointer;user-select:none}
.check input{
  width:15px;height:15px;margin:0;accent-color:var(--lp-accent);cursor:pointer;flex:0 0 auto;
}
.check:hover{color:var(--lp-ink)}
.link-quiet{font-size:12.5px;color:var(--lp-muted);transition:.2s;cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.link-quiet:hover{color:var(--lp-ink);text-decoration:underline}

/* 主按钮（含 loading 态） */
.btn{
  width:100%;padding:13.5px;border:none;border-radius:var(--lp-radius-sm);
  font-size:15px;font-weight:700;letter-spacing:1px;cursor:pointer;
  background:var(--lp-grad);color:#fff;transition:.2s;
  box-shadow:0 12px 28px rgba(109,94,252,.35);
  font-family:inherit;
  display:flex;align-items:center;justify-content:center;gap:8px;
  position:relative;overflow:hidden;
}
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 16px 36px rgba(109,94,252,.5)}
.btn:active:not(:disabled){transform:translateY(0)}
.btn:disabled{cursor:progress;opacity:.85;transform:none!important}
.btn .spin{
  width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;
  animation:spin .7s linear infinite;display:none;
}
.btn.loading .spin{display:inline-block}
.btn.loading .btn-txt{opacity:.85}
@keyframes spin{to{transform:rotate(360deg)}}

/* 错误/成功提示 */
.err{color:var(--lp-err);font-size:12.5px;min-height:16px;margin-top:10px;text-align:center;font-weight:600;transition:.2s}
.err:empty{min-height:16px}
.err.ok{color:var(--lp-ok)}

.hint{
  font-size:12px;color:var(--lp-muted);margin-top:16px;line-height:1.7;
  background:rgba(255,255,255,.03);padding:10px 12px;border-radius:10px;
  border:1px solid var(--lp-line);
}
/* 演示账号：可折叠块（生产环境默认收起，减少打扰） */
.demo{margin-top:16px;border:1px dashed var(--lp-line);border-radius:10px;background:rgba(255,255,255,.02);overflow:hidden}
.demo > summary{
  cursor:pointer;list-style:none;padding:9px 12px;font-size:12px;color:var(--lp-muted);
  display:flex;align-items:center;justify-content:space-between;gap:8px;user-select:none;transition:.2s;
}
.demo > summary::-webkit-details-marker{display:none}
.demo > summary:hover{color:var(--lp-ink);background:rgba(255,255,255,.04)}
.demo > summary .caret{transition:transform .2s}
.demo[open] > summary .caret{transform:rotate(180deg)}
.demo-body{padding:0 12px 11px;font-size:12px;color:var(--lp-muted);line-height:1.8;border-top:1px solid var(--lp-line)}
.demo-body kbd{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(255,255,255,.07);border:1px solid var(--lp-line);
  padding:1px 6px;border-radius:6px;font-size:11.5px;color:var(--lp-ink);
}
.demo-body .fill{
  margin-top:9px;font-size:11.5px;color:var(--lp-accent);
  background:none;border:none;cursor:pointer;padding:0;font-family:inherit;
}
.demo-body .fill:hover{text-decoration:underline}

/* panel 内的小返回链接（替代原 nav 的「返回门户」） */
.panel-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12.5px;color:var(--lp-muted);transition:.2s;
  margin-bottom:22px;align-self:flex-start;
}
.panel-back:hover{color:var(--lp-ink)}

/* ------------------------------ 端切换 ------------------------------ */
.switcher{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;padding:18px 16px}
.chip{
  font-size:12.5px;padding:6px 13px;border-radius:99px;
  border:1px solid var(--lp-line);color:var(--lp-muted);transition:.2s;
  display:inline-flex;align-items:center;gap:6px;
}
.chip.on{background:var(--lp-grad);color:#fff;border-color:transparent;box-shadow:0 6px 16px rgba(109,94,252,.35);font-weight:600}
.chip:hover{border-color:var(--lp-accent);color:var(--lp-ink);transform:translateY(-1px)}
.chip.on:hover{color:#fff}
.chip .ic{font-size:13px;line-height:1}

/* ------------------------------ 页脚 ------------------------------ */
.foot{text-align:center;color:var(--lp-muted);font-size:11.5px;padding:18px;line-height:1.6}
.foot a{color:var(--lp-muted)}
.foot a:hover{color:var(--lp-ink)}
/* v0.18.1-icpfooter：ICP 备案号（工信部链接） */
.foot .icp{margin-top:6px;font-size:11px;opacity:.85}
.foot .icp a{color:var(--lp-muted);border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.foot .icp a:hover{color:var(--lp-ink);border-bottom-color:var(--lp-ink)}

/* 联网状态提示条（断网时出现，告诉用户为什么不能登录） */
.netbar{
  display:none;margin-bottom:14px;padding:9px 12px;border-radius:10px;
  font-size:12px;line-height:1.6;
  background:rgba(251,113,133,.10);border:1px solid rgba(251,113,133,.35);color:#ffc9d2;
}
.netbar.on{display:block}

/* ==========================================================================
   响应式
   ========================================================================== */
/* 中等屏：双栏比例收紧 */
@media (max-width:1080px){
  .stage{max-width:960px;grid-template-columns:1fr 1fr}
  .brand{padding:38px 32px 34px}
  .brand-h{font-size:28px}
  .panel{padding:36px 30px}
}

/* 平板及以下：左栏收起，回归单列登录卡（避免小屏挤压） */
@media (max-width:900px){
  .stage{grid-template-columns:1fr;max-width:460px}
  .brand{display:none}
  .panel{padding:36px 32px}
  .panel-back{margin-bottom:16px}
}

@media (max-width:768px){
  .nav{padding:17px 20px}
  .main{padding:20px 18px}
}
/* 手机 */
@media (max-width:480px){
  .nav{padding:14px 16px}
  .logo{font-size:16px}
  .logo img{height:26px}
  .main{padding:16px 14px}
  .stage{border-radius:20px}
  .panel{padding:28px 22px}
  .badge{width:54px;height:54px;font-size:26px;border-radius:14px;margin-bottom:15px}
  .login h1{font-size:21px}
  .login .desc{margin-bottom:18px;padding-bottom:14px}
  .btn{padding:13px;letter-spacing:.5px}
  .switcher{padding:14px 12px;gap:7px}
  .chip{font-size:12px;padding:6px 11px}
  .foot{padding:14px;font-size:11px}
  .qr-box{width:158px;height:158px}
}
/* 矮屏（横屏手机 / 小笔记本）缩短纵向节奏，避免要滚动 */
@media (max-height:760px) and (min-width:901px){
  .brand{padding:30px 34px 26px}
  .brand-head{margin-bottom:24px}
  .brand-h{font-size:27px;margin-bottom:11px}
  .brand-p{margin-bottom:22px;font-size:13px}
  .isle{padding:9px 12px}
  .trust{margin-top:20px;padding-top:15px}
  .panel{padding:30px 34px}
  .panel-back{margin-bottom:14px}
  .login .desc{margin-bottom:16px;padding-bottom:13px}
}
@media (max-height:680px) and (min-width:901px){
  .brand-head{margin-bottom:18px}
  .brand-h{font-size:24px}
  .brand-p{display:none}
  .isle .it span{display:none}
  .trust{margin-top:16px;padding-top:12px}
}
/* 超宽屏：登录卡略微放大 */
@media (min-width:1600px){
  .stage{max-width:1200px}
}

/* 键盘可达性：统一可见焦点环 */
:focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}
.btn:focus-visible,.chip:focus-visible,.tab:focus-visible{outline-offset:3px}