/* Storava 前端登录/注册/扫码 样式 —— 抽离自 front/auth/_style.html、scan_login.html、_scan_pane.html */
/* ===== 会员登录 / 注册 页面样式（作用域限定在 .auth-* ，不影响其它页面） ===== */
  .auth-wrap { position: relative; padding: .5rem 0 2rem; }
  .auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .auth-bg::before,
  .auth-bg::after { content: ""; position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; }
  .auth-bg::before { width: 420px; height: 420px; top: -150px; left: -130px;
    background: radial-gradient(circle at 30% 30%, #9dc6ff, transparent 70%); }
  .auth-bg::after { width: 380px; height: 380px; bottom: -170px; right: -110px;
    background: radial-gradient(circle at 70% 70%, #b9e0ff, transparent 70%); }

  .auth-card {
    position: relative; z-index: 1; display: grid; grid-template-columns: 1.02fr 1.18fr;
    overflow: hidden; background: #fff; border: 1px solid var(--card-border);
    border-radius: 18px; box-shadow: 0 20px 55px rgba(15, 35, 95, .12);
  }

  /* 左侧品牌区 */
  .auth-side {
    position: relative; display: flex; flex-direction: column; justify-content: center;
    gap: 1.15rem; padding: 2.75rem 2.25rem; color: #fff;
    background: linear-gradient(150deg, #1677ff 0%, #3f8cff 48%, #74b0ff 100%);
  }
  .auth-side::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 85% 12%, rgba(255, 255, 255, .38), transparent 45%),
                radial-gradient(circle at 8% 92%, rgba(255, 255, 255, .22), transparent 50%);
  }
  .auth-side > * { position: relative; z-index: 1; }
  .auth-brand { display: flex; align-items: center; gap: .65rem; font-size: 1.3rem; font-weight: 700; }
  .auth-brand img { width: 40px; height: 40px; object-fit: contain; border-radius: 11px;
    background: rgba(255, 255, 255, .92); padding: 4px; }
  .auth-brand i { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 11px; background: rgba(255, 255, 255, .22); font-size: 1.05rem; }
  .auth-side-title { font-size: 1.55rem; font-weight: 700; line-height: 1.4; margin: 0; }
  .auth-side-desc { font-size: .9rem; color: rgba(255, 255, 255, .88); margin: .5rem 0 0; }
  .auth-side-list { list-style: none; margin: .35rem 0 0; padding: 0; display: grid; gap: .7rem; }
  .auth-side-list li { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: rgba(255, 255, 255, .96); }
  .auth-side-list i { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center;
    justify-content: center; border-radius: 8px; background: rgba(255, 255, 255, .2); font-size: .78rem; }

  /* 右侧表单区 */
  .auth-form { padding: 2.75rem 2.5rem; }
  .auth-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0 0 .35rem; }
  .auth-sub { font-size: .875rem; color: var(--text-muted); margin: 0 0 1.5rem; }
  .auth-form .form-label { font-size: .85rem; font-weight: 600; color: #4e5969; margin-bottom: .4rem; }

  /* 登录方式标签页（密码 / 短信 / 微信 / 扫码；方式较多时自动换行，避免移动端挤压） */
  .auth-tabs { display: flex; flex-wrap: wrap; gap: .35rem; padding: .3rem; margin-bottom: 1.4rem;
    background: #f2f5f9; border-radius: 12px; }
  .auth-tab { flex: 1 1 auto; min-width: 88px; height: 40px; border: 0; background: transparent; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    white-space: nowrap; font-size: .9rem; font-weight: 600; color: #6b7280; transition: .2s; }
  .auth-tab:hover { color: var(--primary); }
  .auth-tab.is-active { background: #fff; color: var(--primary); box-shadow: 0 2px 8px rgba(15, 35, 95, .1); }
  .auth-pane { display: none; }
  .auth-pane.is-active { display: block; animation: authPaneIn .24s ease; }
  @keyframes authPaneIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
  .auth-hint { font-size: .78rem; color: var(--text-muted); margin: -.35rem 0 .9rem; }

  .auth-field { position: relative; }
  .auth-field .auth-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: #a8b1bd; font-size: .95rem; pointer-events: none; }
  .auth-field .auth-input { height: 48px; padding-left: 42px; border-radius: 12px;
    border-color: #e5e6eb; font-size: .95rem; background: #fff; }
  .auth-field .auth-input::placeholder { color: #b7bec9; }
  .auth-field .auth-input:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem rgba(22, 119, 255, .15); }
  .auth-field.has-eye .auth-input { padding-right: 46px; }
  .auth-eye { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); border: 0;
    background: transparent; color: #a8b1bd; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center; }
  .auth-eye:hover { color: var(--primary); background: var(--primary-soft); }

  .auth-captcha-img { height: 54px; width: 150px; flex: none; object-fit: contain; cursor: pointer;
    border: 1px solid #e5e6eb; border-radius: 12px; background: #fff; }

  .auth-btn { height: 48px; border-radius: 12px; font-weight: 600; font-size: 1rem; color: #fff;
    background: linear-gradient(135deg, var(--primary), var(--primary-hover)); border: 0;
    box-shadow: 0 8px 20px rgba(22, 119, 255, .28); transition: .2s; }
  .auth-btn:hover { color: #fff; box-shadow: 0 12px 26px rgba(22, 119, 255, .36); transform: translateY(-1px); }
  .auth-btn:active { transform: translateY(0); }

  .auth-msg .alert { border-radius: 11px; font-size: .875rem; border: 0; }
  .auth-msg .alert-danger { background: #fff1f0; color: #cf1322; }
  .auth-msg .alert-success { background: #f0f9eb; color: #389e0d; }
  .auth-msg .alert-info { background: var(--primary-soft); color: var(--primary); }
  .auth-msg .alert-warning { background: #fffbe6; color: #d48806; }

  .auth-foot { text-align: center; margin-top: 1.35rem; font-size: .875rem; color: var(--text-muted); }
  .auth-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
  .auth-foot a:hover { color: var(--primary-hover); text-decoration: underline; }
  .auth-foot .sep { margin: 0 .5rem; color: #d5d8dd; }

  @media (max-width: 991.98px) {
    .auth-card { grid-template-columns: 1fr; }
    .auth-side { padding: 1.55rem 1.35rem; gap: .55rem; }
    .auth-side-list { display: none; }
    .auth-side-title { font-size: 1.2rem; }
    .auth-side-desc { display: none; }
    .auth-form { padding: 1.9rem 1.35rem; }
  }

/* ===== 扫码登录页（scan_login.html） ===== */
.scan-wrap { max-width: 400px; margin: 0 auto; }
  .scan-card { background: #fff; border: 1px solid var(--card-border); border-radius: 16px; box-shadow: 0 14px 40px rgba(15,35,95,.09); }
  .scan-head { display: flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 700; font-size: 1.05rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid #f1f3f7; }
  .scan-head i { color: #22b573; }
  .scan-body { padding: 1.4rem 1.5rem 1.6rem; text-align: center; }
  .scan-foot { text-align: center; font-size: .875rem; color: var(--text-muted); padding: 0 0 1.4rem; }
  .scan-foot a { color: var(--primary); font-weight: 600; text-decoration: none; }
  .scan-foot a:hover { text-decoration: underline; }
  .scan-foot .sep { margin: 0 .5rem; color: #d5d8dd; }

/* ===== 扫码面板片段（_scan_pane.html） ===== */
.scan-step { font-size: .82rem; color: var(--text-muted); }
  .scan-qr { width: 190px; height: 190px; margin: 0 auto; padding: 8px; border: 1px solid #e5e6eb; border-radius: 14px; background: #fff; display: flex; align-items: center; justify-content: center; }
  .scan-qr img { width: 100%; height: 100%; object-fit: contain; display: block; }
  .scan-qr-ph { color: #b7bec9; font-size: .8rem; text-align: center; }
  .scan-qr-ph i { display: block; font-size: 2.2rem; margin-bottom: .4rem; }
  .scan-code { margin: .5rem auto .25rem; width: 168px; padding: .4rem 0;
    font-size: 1.6rem; font-weight: 700; letter-spacing: .3rem; text-indent: .3rem;
    text-align: center; color: #1f2937; background: #f2f5f9;
    border: 1px dashed #c9d3e0; border-radius: 12px; cursor: pointer; user-select: all; transition: .2s; }
  .scan-code:hover { background: #e9eef6; border-color: var(--primary); color: var(--primary); }
  .scan-code:active { transform: translateY(1px); }
  .scan-tip { min-height: 1.2rem; font-size: .8rem; }
  .scan-status { font-size: .85rem; color: var(--text-muted); margin-top: .7rem; }
  .scan-status.is-error { color: #dc3545; }