/* =============================================================
   Auth Page (Login / Register) — v2
   精准对齐 dashboard2/src/pages/Login 的 Tailwind 配置
   ============================================================= */

/* ---------- Overlay & Background ---------- */
.auth-overlay{
  position:fixed;inset:0;z-index:9999;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  background:#f5f5f5;
  color:#111;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
[data-theme="dark"] .auth-overlay,
body.dark-mode .auth-overlay{
  background:#0a0a0c;
  color:#fff;
}

/* 背景：WebGL canvas 会挂到这里 */
.auth-bg{
  position:absolute;inset:0;z-index:0;
  pointer-events:none;
}
.auth-bg canvas{
  width:100% !important;height:100% !important;
  display:block;
}

/* ---------- Center stack ---------- */
.auth-center{
  position:relative;z-index:2;
  width:100%;max-width:520px;padding:32px 20px;
  display:flex;flex-direction:column;align-items:center;
  animation:authFadeUp .5s ease-out both;
}
@keyframes authFadeUp{
  from{opacity:0;transform:translateY(-10px)}
  to  {opacity:1;transform:translateY(0)}
}

/* Logo */
.auth-logo-wrap{
  max-width:320px;width:100%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:24px;
  animation:authLogoIn .5s ease-out both;
}
@keyframes authLogoIn{
  from{opacity:0;transform:translateY(-10px)}
  to  {opacity:1;transform:translateY(0)}
}
.auth-logo{max-width:320px;width:100%;height:auto;object-fit:contain;display:block}
.auth-logo-dark{display:none}
.auth-logo-light{display:block}
[data-theme="dark"] .auth-logo-dark,
body.dark-mode .auth-logo-dark{display:block}
[data-theme="dark"] .auth-logo-light,
body.dark-mode .auth-logo-light{display:none}

/* ---------- Card ----------
   结构：外壳 (.auth-card) 负责外阴影；内层 (.auth-card-inner) 负责
   磨砂玻璃 + 描边 + 内阴影（对齐 dashboard2 LoginPage.tsx）。 */
.auth-card{
  position:relative;width:100%;
  border-radius:16px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.08),
    0 2px 8px rgba(0,0,0,.04),
    inset 0 .5px 0 rgba(255,255,255,.8);
  animation:authCardIn .5s ease-out both;
}
@keyframes authCardIn{from{opacity:0}to{opacity:1}}
[data-theme="dark"] .auth-card,
body.dark-mode .auth-card{
  box-shadow:
    0 8px 32px rgba(0,0,0,.25),
    0 2px 8px rgba(0,0,0,.15),
    inset 0 .5px 0 rgba(255,255,255,.08);
}
.auth-card-inner{
  position:relative;z-index:10;
  padding:32px;
  border-radius:16px;
  background:rgba(255,255,255,.45);
  backdrop-filter:blur(12px) saturate(1.3);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.03),
    0 1px 3px rgba(0,0,0,.05),
    0 8px 32px rgba(0,0,0,.06);
  transition:background .4s ease,border-color .4s ease,box-shadow .4s ease;
  /* 提升为独立合成层，避免 backdrop-filter 触发整屏重绘 */
  transform:translateZ(0);
  will-change:backdrop-filter;
  contain:layout paint;
}
[data-theme="dark"] .auth-card-inner,
body.dark-mode .auth-card-inner{
  background:rgba(24,24,28,.55);
  backdrop-filter:blur(24px) saturate(1.4);
  -webkit-backdrop-filter:blur(24px) saturate(1.4);
  border:none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 4px 24px rgba(0,0,0,.25);
}

/* ---------- Shine border（conic-gradient + mask） ---------- */
.auth-shine-border{
  pointer-events:none;position:absolute;inset:0;border-radius:inherit;
  padding:1px;z-index:20;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
}
.auth-shine-stroke{
  position:absolute;inset:-50%;
  background-image:conic-gradient(
    from 0deg,
    transparent 0deg,transparent 270deg,
    rgba(30,64,175,.32) 300deg,rgba(30,64,175,.32) 340deg,
    transparent 355deg,transparent 360deg);
  animation:authShineRotate 5s linear infinite;
}
[data-theme="dark"] .auth-shine-stroke,
body.dark-mode .auth-shine-stroke{
  background-image:conic-gradient(
    from 0deg,
    transparent 0deg,transparent 270deg,
    rgba(255,255,255,.45) 300deg,rgba(255,255,255,.45) 340deg,
    transparent 355deg,transparent 360deg);
}
@keyframes authShineRotate{
  from{transform:rotate(0deg)}
  to  {transform:rotate(360deg)}
}

/* ---------- Tabs（底部横线样式） ---------- */
.auth-tabs{
  display:flex;width:100%;margin-bottom:32px;
  border-bottom:1px solid rgba(0,0,0,.08);
}
[data-theme="dark"] .auth-tabs,
body.dark-mode .auth-tabs{border-bottom-color:rgba(255,255,255,.12)}

.auth-tab{
  flex:1;padding:12px 0;
  font-size:14px;font-weight:500;letter-spacing:.4px;
  text-align:center;cursor:pointer;user-select:none;
  background:transparent;border:none;border-bottom:2px solid transparent;
  color:rgba(0,0,0,.4);
  margin-bottom:-1px;
  transition:color .2s ease,border-color .2s ease;
}
.auth-tab:hover{color:rgba(0,0,0,.6)}
.auth-tab.active{
  color:#111827;border-bottom-color:#111827;
}
[data-theme="dark"] .auth-tab,
body.dark-mode .auth-tab{color:rgba(255,255,255,.4)}
[data-theme="dark"] .auth-tab:hover,
body.dark-mode .auth-tab:hover{color:rgba(255,255,255,.7)}
[data-theme="dark"] .auth-tab.active,
body.dark-mode .auth-tab.active{color:#fff;border-bottom-color:#fff}

/* 单 Tab (prod 模式隐藏注册)：占满整行 */
.auth-tabs.single-tab .auth-tab{flex:none;width:100%}

/* ---------- Forms ---------- */
.auth-form{display:none;animation:authTabIn .3s ease both}
.auth-form.active{display:flex;flex-direction:column;gap:20px;width:100%}
@keyframes authTabIn{
  from{opacity:0;transform:translateY(8px)}
  to  {opacity:1;transform:translateY(0)}
}

.auth-field{display:flex;flex-direction:column;gap:8px;width:100%}
.auth-field-terms{gap:0}
.auth-label{
  display:block;font-size:12px;font-weight:500;letter-spacing:.4px;
  color:#374151;padding-left:4px;
}
[data-theme="dark"] .auth-label,
body.dark-mode .auth-label{color:rgba(255,255,255,.9)}

.auth-input{
  width:100%;height:44px;padding:0 16px;
  background:rgba(255,255,255,.6);
  border:1px solid #e5e7eb;
  border-radius:12px;
  font-size:14px;color:#111827;
  outline:none;box-sizing:border-box;
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;
}
.auth-input::placeholder{color:#9ca3af}
.auth-input:hover{border-color:#d1d5db}
.auth-input:focus{
  border-color:#7a95d6;
  background:rgba(255,255,255,.85);
  box-shadow:0 0 0 3px rgba(30,64,175,.18);
}
[data-theme="dark"] .auth-input,
body.dark-mode .auth-input{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.14);
  color:#fff;
}
[data-theme="dark"] .auth-input::placeholder,
body.dark-mode .auth-input::placeholder{color:rgba(255,255,255,.4)}
[data-theme="dark"] .auth-input:hover,
body.dark-mode .auth-input:hover{border-color:rgba(255,255,255,.22)}
[data-theme="dark"] .auth-input:focus,
body.dark-mode .auth-input:focus{
  border-color:rgba(255,255,255,.3);
  background:rgba(255,255,255,.14);
  box-shadow:0 0 0 1px rgba(255,255,255,.12);
}

.auth-input-group{position:relative}
.auth-input-group .auth-input{padding-right:40px}
.auth-eye-btn{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border:none;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:#9ca3af;
  transition:color .2s ease;padding:0;
}
.auth-eye-btn:hover{color:#6b7280}
.auth-eye-btn .material-symbols-outlined{font-size:16px;font-variation-settings:'wght' 400}
[data-theme="dark"] .auth-eye-btn,
body.dark-mode .auth-eye-btn{color:rgba(255,255,255,.4)}
[data-theme="dark"] .auth-eye-btn:hover,
body.dark-mode .auth-eye-btn:hover{color:rgba(255,255,255,.7)}

/* 记住我 + 忘记密码 */
.auth-row{
  display:flex;align-items:center;justify-content:space-between;
}
.auth-checkbox{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;color:#6b7280;
  cursor:pointer;user-select:none;
}
.auth-checkbox input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}
.auth-check-box{
  position:relative;
  width:16px;height:16px;border-radius:4px;
  border:1px solid #d1d5db;
  background:transparent;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .2s ease,border-color .2s ease;
  flex-shrink:0;
}
.auth-check-tick{
  width:10px;height:8px;opacity:0;transform:scale(.6);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'><path d='M1 4L3.5 6.5L9 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;background-position:center;background-size:contain;
  transition:opacity .2s ease,transform .2s ease;
}
.auth-checkbox input:checked ~ .auth-check-box{background:#111827;border-color:#111827}
.auth-checkbox input:checked ~ .auth-check-box .auth-check-tick{opacity:1;transform:scale(1)}
.auth-checkbox:hover .auth-check-box{border-color:#9ca3af}
[data-theme="dark"] .auth-checkbox,
body.dark-mode .auth-checkbox{color:rgba(255,255,255,.6)}
[data-theme="dark"] .auth-check-box,
body.dark-mode .auth-check-box{border-color:rgba(255,255,255,.4)}
[data-theme="dark"] .auth-checkbox:hover .auth-check-box,
body.dark-mode .auth-checkbox:hover .auth-check-box{border-color:rgba(255,255,255,.6)}
[data-theme="dark"] .auth-checkbox input:checked ~ .auth-check-box,
body.dark-mode .auth-checkbox input:checked ~ .auth-check-box{background:#fff;border-color:#fff}
[data-theme="dark"] .auth-check-tick,
body.dark-mode .auth-check-tick{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8' fill='none'><path d='M1 4L3.5 6.5L9 1' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}

.auth-link{
  font-size:12px;color:#6b7280;text-decoration:none;
  background:transparent;border:none;cursor:pointer;padding:0;
  transition:color .2s ease;
}
.auth-link:hover{color:#1e40af;text-decoration:none}
[data-theme="dark"] .auth-link,
body.dark-mode .auth-link{color:rgba(255,255,255,.6)}
[data-theme="dark"] .auth-link:hover,
body.dark-mode .auth-link:hover{color:rgba(255,255,255,.9)}

.auth-terms-checkbox{align-items:flex-start;gap:8px}
.auth-terms-checkbox .auth-check-box{margin-top:1px}
.auth-terms{line-height:1.5;color:#6b7280}
.auth-terms a{color:#374151;text-decoration:none}
.auth-terms a:hover{text-decoration:underline}
[data-theme="dark"] .auth-terms,
body.dark-mode .auth-terms{color:rgba(255,255,255,.6)}
[data-theme="dark"] .auth-terms a,
body.dark-mode .auth-terms a{color:rgba(255,255,255,.85)}

/* ---------- Submit button ---------- */
.auth-btn{
  width:100%;height:44px;margin-top:4px;
  background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);
  color:#fff;
  border:none;border-radius:9999px;
  font-size:14px;font-weight:500;letter-spacing:.3px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:opacity .2s ease,box-shadow .2s ease;
  box-shadow:0 2px 8px rgba(30,64,175,.28);
}
.auth-btn:hover{opacity:.9}
.auth-btn:active{opacity:.8}
.auth-btn:disabled{opacity:.5;cursor:not-allowed}
.auth-btn .material-symbols-outlined{font-size:16px;font-variation-settings:'wght' 500}
[data-theme="dark"] .auth-btn,
body.dark-mode .auth-btn{
  background:#fff;color:#111;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
}
[data-theme="dark"] .auth-btn:hover,
body.dark-mode .auth-btn:hover{background:rgba(255,255,255,.92);opacity:1}
[data-theme="dark"] .auth-btn:active,
body.dark-mode .auth-btn:active{background:rgba(255,255,255,.82);opacity:1}

/* ---------- Register success ---------- */
.auth-success{text-align:center;padding:8px 0 6px;display:flex;flex-direction:column;align-items:center;gap:8px}
.auth-success-icon{
  width:56px;height:56px;margin-bottom:8px;border-radius:50%;
  background:linear-gradient(135deg,#1e3a8a 0%,#3b82f6 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(30,64,175,.28);
  animation:authSuccessPop .5s cubic-bezier(.22,1.2,.36,1) both;
}
.auth-success-icon .material-symbols-outlined{font-size:30px;color:#fff}
.auth-success h3{margin:0 0 4px;font-size:18px;font-weight:600;color:#111827}
.auth-success p{margin:0 0 16px;font-size:13px;color:#6b7280;line-height:1.6}
[data-theme="dark"] .auth-success-icon,
body.dark-mode .auth-success-icon{background:#fff}
[data-theme="dark"] .auth-success-icon .material-symbols-outlined,
body.dark-mode .auth-success-icon .material-symbols-outlined{color:#111}
[data-theme="dark"] .auth-success h3,
body.dark-mode .auth-success h3{color:#fff}
[data-theme="dark"] .auth-success p,
body.dark-mode .auth-success p{color:rgba(255,255,255,.6)}
@keyframes authSuccessPop{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}

/* ---------- Footnote（绝对定位底部居中） ---------- */
.auth-footnote{
  position:absolute;left:0;right:0;bottom:24px;text-align:center;
  font-size:10px;color:#6b7280;letter-spacing:.3px;z-index:2;
  animation:authFootIn .5s ease .4s both;
}
[data-theme="dark"] .auth-footnote,
body.dark-mode .auth-footnote{color:rgba(255,255,255,.6)}
@keyframes authFootIn{from{opacity:0}to{opacity:1}}
.auth-footnote p{margin:0}

/* ---------- Theme toggle（左下角，无背景，Tailwind 风格） ---------- */
.auth-theme-toggle{
  position:fixed;bottom:20px;left:16px;z-index:50;
  width:36px;height:36px;border-radius:12px;
  border:none;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  color:#9ca3af;
  transition:background .2s ease,color .2s ease,transform .15s ease;
}
.auth-theme-toggle:hover{background:rgba(0,0,0,.05);color:#374151}
.auth-theme-toggle:active{transform:scale(.95)}
.auth-theme-toggle .material-symbols-outlined{font-size:18px;font-variation-settings:'wght' 400}
.auth-theme-toggle .theme-icon-dark{display:none}
.auth-theme-toggle .theme-icon-light{display:block}
[data-theme="dark"] .auth-theme-toggle,
body.dark-mode .auth-theme-toggle{color:rgba(255,255,255,.6)}
[data-theme="dark"] .auth-theme-toggle:hover,
body.dark-mode .auth-theme-toggle:hover{background:rgba(255,255,255,.1);color:#fff}
[data-theme="dark"] .auth-theme-toggle .theme-icon-dark,
body.dark-mode .auth-theme-toggle .theme-icon-dark{display:block}
[data-theme="dark"] .auth-theme-toggle .theme-icon-light,
body.dark-mode .auth-theme-toggle .theme-icon-light{display:none}

/* ---------- Onboarding toolbar — legacy 兼容 ---------- */
.ob-toolbar{position:absolute;top:20px;right:20px;z-index:10;display:flex;align-items:center;gap:8px}
.ob-toolbar .auth-theme-toggle{position:static;width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.08);background:rgba(255,255,255,.7);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ob-toolbar .auth-theme-toggle:hover{background:rgba(255,255,255,.9);transform:scale(1.06)}
.ob-logout-btn{
  width:40px;height:40px;border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  transition:background .25s ease,border-color .25s ease,transform .2s ease;
}
.ob-logout-btn:hover{background:rgba(255,255,255,.9);transform:scale(1.06);border-color:rgba(220,53,69,.3)}
.ob-logout-btn .material-symbols-outlined{font-size:20px;color:#374151;transition:color .2s}
.ob-logout-btn:hover .material-symbols-outlined{color:#dc3545}
[data-theme="dark"] .ob-toolbar .auth-theme-toggle,
body.dark-mode .ob-toolbar .auth-theme-toggle{background:rgba(30,30,32,.7);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .ob-logout-btn,
body.dark-mode .ob-logout-btn{background:rgba(30,30,32,.7);border-color:rgba(255,255,255,.1)}
[data-theme="dark"] .ob-logout-btn:hover,
body.dark-mode .ob-logout-btn:hover{background:rgba(30,30,32,.9);border-color:rgba(255,100,100,.4)}
[data-theme="dark"] .ob-logout-btn .material-symbols-outlined,
body.dark-mode .ob-logout-btn .material-symbols-outlined{color:#e5e7eb}
[data-theme="dark"] .ob-logout-btn:hover .material-symbols-outlined,
body.dark-mode .ob-logout-btn:hover .material-symbols-outlined{color:#ff6b6b}

/* ---------- Hidden + transitions ---------- */
.auth-overlay.hidden{display:none !important}
.auth-overlay.auth-transitioning{pointer-events:none}

/* ---------- Responsive ---------- */
@media (max-width:480px){
  .auth-center{padding:24px 16px;max-width:100%}
  .auth-logo-wrap{max-width:240px;margin-bottom:20px}
  .auth-card-inner{padding:24px 20px}
  .auth-theme-toggle{bottom:12px;left:10px}
  .auth-footnote{bottom:16px;font-size:10px}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .auth-center,.auth-logo-wrap,.auth-card,.auth-form,.auth-footnote,.auth-success-icon,.auth-shine-stroke{
    animation:none !important;
  }
  .auth-theme-toggle:active{transform:none}
}