/* =====================================================================
   研行 · 学业跟踪 —— 账号（登录 / 注册 / 邮箱验证）样式
   在 vip.css 之后加载：仅新增 .auth-* 与账号区补充类，不覆盖既有布局；
   全部取值复用 tokens.css / style.css 的设计令牌，深色主题由文末覆盖负责。

   设计语言：沿用蓝色品牌，精修升级——
   ① 左侧品牌区：深蓝渐变 + 多层径向光晕 + 极淡颗粒，叠加抽象「轨迹」曲线；
   ② 右侧表单区：分段式标签（滑动指示块）、更高更稳的输入框、渐变主按钮；
   ③ 动效：入场分层浮现 + 面板切换过渡，并尊重 prefers-reduced-motion。
   ===================================================================== */

/* ---------- 未登录：隐藏工作台，仅显示登录门 ---------- */
body.auth-locked > :not(#authGate) { display: none !important; }
body.auth-locked { background: var(--color-bg-4); }

/* =====================================================================
   全屏登录门
   ===================================================================== */
.auth-gate { position: fixed; inset: 0; z-index: 1000; overflow: auto; background: var(--color-bg-4); }
.auth-shell { display: flex; min-height: 100%; }

/* ---- 左侧品牌区 ---- */
.auth-aside { position: relative; flex: 1 1 47%; max-width: 660px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 40px; padding: 60px 60px 44px; overflow: hidden; color: #fff;
  isolation: isolate;
  background: linear-gradient(150deg, var(--primary-8) 0%, var(--primary-7) 44%, var(--primary-5) 100%); }
.auth-aside::before { content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 82% at 8% -6%, rgba(255,255,255,.30), rgba(255,255,255,0) 55%),
    radial-gradient(95% 72% at 104% 110%, rgba(6,20,60,.55), rgba(6,20,60,0) 62%),
    radial-gradient(62% 52% at 80% 4%, rgba(150,188,255,.34), rgba(150,188,255,0) 60%); }
.auth-aside::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .45; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.auth-aside > * { position: relative; z-index: 1; }

/* 抽象「轨迹」：一条向右上拾升的曲线，呼应「看得见的轨迹」 */
.auth-trace { position: absolute; right: -6%; bottom: -12%; width: 80%; height: auto; z-index: 0;
  opacity: .6; pointer-events: none;
  -webkit-mask-image: linear-gradient(205deg, rgba(0,0,0,0) 6%, #000 58%);
  mask-image: linear-gradient(205deg, rgba(0,0,0,0) 6%, #000 58%); }

.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand-logo { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(160deg, rgba(255,255,255,.30), rgba(255,255,255,.10));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 8px 18px -8px rgba(6,20,60,.7); }
.auth-brand-name { display: flex; flex-direction: column; line-height: 1.12;
  font: 600 19px/1.12 var(--font-body); letter-spacing: .02em; }
.auth-brand-name small { font: 500 10px/1.4 var(--font-body); letter-spacing: .24em; margin-top: 2px;
  color: rgba(255,255,255,.68); }

.auth-hero { max-width: 452px; }
.auth-eyebrow { display: flex; align-items: center; gap: 13px; margin: 0 0 20px;
  font: 500 12px/1 var(--font-body); letter-spacing: .2em; color: rgba(255,255,255,.76); }
.auth-eyebrow::before { content: ""; flex: none; width: 30px; height: 1px;
  background: linear-gradient(90deg, #dbe7ff, rgba(219,231,255,.16));
  animation: auth-rule .7s cubic-bezier(.22,.68,.28,1) .3s both; }
.auth-hero-title { font: 600 34px/1.4 var(--font-body); letter-spacing: -.02em; margin: 0 0 14px;
  text-shadow: 0 1px 24px rgba(6,20,60,.28); }
.auth-hl { background: linear-gradient(96deg, #ffffff 0%, #d3e2ff 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
.auth-hero-sub { font: 400 14px/22px var(--font-body); color: rgba(255,255,255,.82); margin: 0; }

.auth-points { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.auth-points li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
  font: 400 13px/20px var(--font-body); color: rgba(255,255,255,.9); }
.auth-points b { font-weight: 600; color: #fff; }
.auth-ico { width: 22px; height: 22px; flex: none; margin-top: 1px; border-radius: 7px;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 1px rgba(255,255,255,.24); }
.auth-pt-txt { min-width: 0; }
.auth-aside-foot { margin: 0; font: 400 12px/20px var(--font-body); color: rgba(255,255,255,.6);
  letter-spacing: .02em; }

/* ---- 右侧表单区 ---- */
.auth-main { position: relative; flex: 1 1 53%; display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  background: radial-gradient(125% 90% at 50% -22%, rgba(22,100,255,.07), rgba(22,100,255,0) 60%); }
.auth-card { position: relative; width: 100%; max-width: 412px; padding: 36px 36px 34px;
  background: var(--color-bg-1); border: 1px solid var(--color-border-2); border-radius: 20px;
  box-shadow: 0 30px 60px -28px rgba(12,13,14,.28), 0 12px 28px -18px rgba(12,13,14,.16),
    inset 0 1px 0 rgba(255,255,255,.8);
  animation: auth-card-in .5s cubic-bezier(.22,.68,.28,1) both; }

/* 卡片内品牌头：仅窄屏（隐藏左侧品牌区时）出现 */
.auth-card-brand { display: none; align-items: center; gap: 10px; margin-bottom: 22px; }
.auth-card-logo { width: 34px; height: 34px; flex: none; border-radius: 10px; display: grid; place-items: center;
  color: #fff; background: linear-gradient(160deg, var(--primary-5), var(--primary-7));
  box-shadow: var(--shadow-2); }
.auth-card-name { display: flex; flex-direction: column; line-height: 1.12;
  font: 600 16px/1.12 var(--font-body); color: var(--color-text-1); }
.auth-card-name small { font: 500 10px/1.4 var(--font-body); letter-spacing: .2em; margin-top: 2px;
  color: var(--color-text-3); }

/* 分段式标签：底色容器 + 滑动指示块 */
.auth-tabs { position: relative; display: flex; gap: 4px; padding: 4px; border-radius: 12px;
  background: var(--color-bg-5); border: 1px solid var(--color-border-2); }
.auth-tabs.is-hidden { display: none; }
.auth-tabs-thumb { position: absolute; top: 4px; left: 4px; bottom: 4px; width: calc(50% - 6px);
  border-radius: 9px; background: var(--color-bg-1); box-shadow: var(--shadow-2);
  transition: transform .28s cubic-bezier(.4,.05,.2,1); }
.auth-tabs:has([data-auth-tab="register"].is-active) .auth-tabs-thumb { transform: translateX(calc(100% + 4px)); }
.auth-tab { position: relative; z-index: 1; flex: 1; height: 36px; border-radius: 9px; background: transparent;
  color: var(--color-text-3); font: 500 13.5px/1 var(--font-body); transition: color .18s; }
.auth-tab:hover { color: var(--color-text-1); }
.auth-tab.is-active { color: var(--primary-6); font-weight: 600; }

.auth-lead { margin: 22px 2px 2px; font: 400 13px/21px var(--font-body); color: var(--color-text-3); }
.auth-hint { margin: 22px 2px 2px; font: 400 13px/21px var(--font-body); color: var(--color-text-2); }
.auth-hint strong { color: var(--color-text-1); font-weight: 600; }

.auth-form { display: none; }
.auth-form.is-active { display: block; animation: auth-panel-in .3s ease both; }
.auth-form .field { margin-top: 16px; }
.auth-form .field:first-child { margin-top: 16px; }
.auth-form .field-label { font: 500 12px/20px var(--font-body); color: var(--color-text-2); margin-bottom: 7px; }
.auth-form input { min-height: 44px; padding: 0 14px; border-radius: 10px; font: 400 14px/22px var(--font-body);
  border: 1px solid var(--color-border-3); background: var(--color-bg-1);
  box-shadow: inset 0 1px 1px rgba(12,13,14,.02);
  transition: border-color .16s, box-shadow .16s, background .16s; }
.auth-form input:hover { border-color: #c9cdd4; }
.auth-form input:focus { border-color: var(--primary-6); box-shadow: 0 0 0 4px rgba(22,100,255,.12); }
.auth-form .field-help { font: 400 12px/19px var(--font-body); color: var(--color-text-3); margin-top: 8px; }

/* 渐变主按钮（需覆盖 .btn.primary 的实心主色） */
.auth-card .auth-submit { width: 100%; height: 46px; margin-top: 24px; justify-content: center;
  border-radius: 11px; font: 600 14px/1 var(--font-body); letter-spacing: .01em;
  background: linear-gradient(180deg, var(--primary-5), var(--primary-6));
  box-shadow: 0 10px 22px -10px rgba(22,100,255,.7), inset 0 1px 0 rgba(255,255,255,.28);
  transition: transform .16s, box-shadow .2s, background .2s; }
.auth-card .auth-submit:hover { background: linear-gradient(180deg, var(--primary-4), var(--primary-5));
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(22,100,255,.78), inset 0 1px 0 rgba(255,255,255,.3); }
.auth-card .auth-submit:active { transform: translateY(0);
  box-shadow: 0 6px 14px -8px rgba(22,100,255,.7), inset 0 1px 0 rgba(255,255,255,.24); }
.auth-card .auth-submit:disabled { background: #b9ccf5; color: #fff; transform: none;
  box-shadow: none; cursor: not-allowed; }

.auth-error { margin: 14px 0 0; font: 400 12px/18px var(--font-body); color: var(--color-danger);
  display: flex; align-items: flex-start; gap: 7px; }
.auth-error:empty { display: none; }
.auth-error::before { content: ""; flex: none; width: 14px; height: 14px; margin-top: 2px; border-radius: 50%;
  background: var(--color-tag-danger-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d7312a' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M12 8v5M12 16.5h.01'/%3E%3C/svg%3E") center/11px no-repeat; }

.auth-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.auth-note { margin: 18px 0 0; font: 400 12px/18px var(--font-body); color: var(--color-text-3);
  padding: 11px 13px; border-radius: 10px; background: var(--color-bg-4); }
.auth-note:empty { display: none; }
.auth-note.is-error { color: var(--color-danger); background: var(--color-tag-danger-bg); }
.auth-note.is-ok { color: var(--color-success); background: var(--color-tag-success-bg); }

/* ---- 入场动效（分层浮现） ---- */
@keyframes auth-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes auth-rule { from { width: 0; opacity: 0; } to { width: 30px; opacity: 1; } }
@keyframes auth-fade { from { opacity: 0; } to { opacity: .6; } }
@keyframes auth-card-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes auth-panel-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.auth-aside > .auth-trace { animation: auth-fade .9s ease .22s both; }
.auth-aside > .auth-brand { animation: auth-rise .55s cubic-bezier(.22,.68,.28,1) .06s both; }
.auth-aside > .auth-hero { animation: auth-rise .6s cubic-bezier(.22,.68,.28,1) .14s both; }
.auth-aside > .auth-aside-foot { animation: auth-rise .6s cubic-bezier(.22,.68,.28,1) .3s both; }

@media (prefers-reduced-motion: reduce) {
  .auth-aside > *, .auth-card, .auth-form.is-active, .auth-tabs-thumb, .auth-eyebrow::before {
    animation: none !important; transition: none !important; }
}

/* =====================================================================
   设置 · 账号与隐私 补充
   ===================================================================== */
.account-info { flex: 1; min-width: 0; }
.account-info .account-name,
.account-info .account-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-card .pill { flex: none; }
.account-actions { justify-content: flex-start; }

/* =====================================================================
   新手引导弹窗
   ===================================================================== */
.sheet.is-onboard { width: min(520px, calc(100vw - 32px)); height: auto; max-height: 88vh;
  border-radius: var(--radius-lg); margin: auto; }
.onboarding-dialog[open] { justify-content: center; align-items: center; }
.onboarding-dialog .sheet { animation: confirm-in .2s ease both; }
.onboarding-dialog.is-closing .sheet { animation: confirm-out .16s ease both; }
.onboard-body .field { margin-top: 16px; }
.onboard-body .form-grid { margin-top: 4px; }
.onboard-intro { margin: 0; font: 400 13px/21px var(--font-body); color: var(--color-text-2); }
.onboard-list { margin: 14px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 10px;
  font: 400 14px/22px var(--font-body); color: var(--color-text-2); }
.onboard-list li::marker { color: var(--primary-6); font-weight: 600; }

/* =====================================================================
   响应式：窄屏隐藏品牌区，居中表单
   ===================================================================== */
@media (max-width: 900px) {
  .auth-aside { display: none; }
  .auth-main { padding: 32px 16px;
    background: radial-gradient(130% 80% at 50% -12%, rgba(22,100,255,.08), rgba(22,100,255,0) 62%), var(--color-bg-4); }
  .auth-card-brand { display: flex; }
  .auth-card { padding: 32px 28px 30px; }
}
@media (max-width: 480px) {
  .auth-card { padding: 26px 20px 24px; border-radius: 16px;
    box-shadow: 0 18px 40px -22px rgba(12,13,14,.3), 0 6px 16px -12px rgba(12,13,14,.16); }
}

/* ---------- 一键体验（示例账号） ---------- */
.auth-demo { margin-top: 20px; }
.auth-demo-or { display: flex; align-items: center; gap: 12px; margin: 0 0 14px;
  font: 400 12px/1 var(--font-body); color: var(--color-text-3); }
.auth-demo-or::before, .auth-demo-or::after { content: ""; flex: 1; height: 1px; background: var(--color-border-light); }
.auth-demo-btn { width: 100%; height: 38px; border-radius: 9px; font-weight: 600;
  background: rgba(22,100,255,.07); color: var(--primary-6); border: .5px solid rgba(22,100,255,.28); }
.auth-demo-btn:hover { background: rgba(22,100,255,.12); color: var(--primary-6); }
.auth-demo-btn:active { background: rgba(22,100,255,.16); }
.auth-demo-btn:disabled { background: rgba(22,100,255,.05); color: var(--primary-6); }
.auth-demo-hint { margin: 10px 2px 0; font: 400 12px/19px var(--font-body); color: var(--color-text-3); }

/* =====================================================================
   深色主题覆盖
   ===================================================================== */
[data-theme="dark"] .auth-aside {
  background: linear-gradient(150deg, #0e1a44 0%, #1b2552 46%, #33409a 100%);
}
[data-theme="dark"] .auth-card { background: var(--color-bg-1); border-color: var(--color-border-3);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.7), 0 12px 28px -18px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04); }
[data-theme="dark"] .auth-tabs { background: #1b1e24; border-color: var(--color-border-3); }
[data-theme="dark"] .auth-tabs-thumb { background: #2b2f39; box-shadow: 0 2px 6px rgba(0,0,0,.5); }
[data-theme="dark"] .auth-tab.is-active { color: var(--primary-7); }
[data-theme="dark"] .auth-form input { background: #1b1e24; border-color: var(--color-border-3); color: var(--color-text-1); }
[data-theme="dark"] .auth-form input:hover { border-color: #3a404c; }
[data-theme="dark"] .auth-form input:focus { border-color: var(--primary-6); box-shadow: 0 0 0 4px rgba(127,147,255,.18); }
[data-theme="dark"] .auth-card .auth-submit { background: linear-gradient(180deg, var(--primary-5), var(--primary-6)); color: #0f1115; }
[data-theme="dark"] .auth-card .auth-submit:hover { background: linear-gradient(180deg, var(--primary-7), var(--primary-5)); color: #0f1115; }
[data-theme="dark"] .auth-card .auth-submit:disabled { background: #3a404c; color: var(--color-text-4); }
[data-theme="dark"] .auth-note { background: #1b1e24; }
[data-theme="dark"] .auth-note.is-error { background: var(--color-tag-danger-bg); }
[data-theme="dark"] .auth-note.is-ok { background: var(--color-tag-success-bg); }
[data-theme="dark"] .auth-demo-btn { background: rgba(127,147,255,.12); color: var(--primary-7); border-color: rgba(127,147,255,.34); }
[data-theme="dark"] .auth-demo-btn:hover { background: rgba(127,147,255,.2); color: var(--primary-7); }
[data-theme="dark"] .auth-demo-btn:disabled { background: rgba(127,147,255,.08); color: var(--primary-7); }
[data-theme="dark"] .auth-demo-or::before, [data-theme="dark"] .auth-demo-or::after { background: var(--color-border-3); }