/* === 登录弹窗样式（可嵌入任何页面） === */

/* 触发按钮 */
.login-trigger{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.1);
  color:#94a3b8;
  padding:.375rem .75rem;
  border-radius:.375rem;
  font-size:.75rem;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:.25rem;
}
.login-trigger:hover{border-color:rgba(59,130,246,.3);color:#e2e8f0}
.login-trigger.logged-in{color:#34d399;border-color:rgba(52,211,153,.2)}

/* 遮罩 */
.login-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,.7);
  z-index:9999;display:none;align-items:center;justify-content:center;
  animation:fadeIn .2s;
}
.login-overlay.show{display:flex}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* 弹窗主体 */
.login-modal{
  background:#1e293b;border:1px solid rgba(255,255,255,.08);
  border-radius:1rem;width:22rem;max-width:92vw;
  padding:0;overflow:hidden;animation:slideUp .25s ease;
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}

/* 头部 */
.login-header{
  display:flex;align-items:center;justify-content:space-between;
  padding:1rem 1.25rem 0;margin-bottom:.5rem;
}
.login-header h3{font-size:1rem;font-weight:700;color:#f1f5f9}
.login-close{
  width:1.75rem;height:1.75rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:transparent;color:#64748b;font-size:1rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
}

/* Tab 栏 */
.login-tabs{
  display:flex;padding:0 1.25rem;margin-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.login-tab{
  padding:.5rem .75rem;font-size:.75rem;color:#64748b;
  cursor:pointer;border-bottom:2px solid transparent;
  transition:all .2s;margin-bottom:-1px;
}
.login-tab.active{color:#60a5fa;border-bottom-color:#3b82f6}
.login-tab:active{color:#e2e8f0}

/* 内容 */
.login-body{padding:0 1.25rem 1.25rem}
.login-tab-content{display:none}
.login-tab-content.show{display:block;animation:fadeIn .3s}

.lf{margin-bottom:.75rem}
.lf label{display:block;font-size:.6875rem;color:#94a3b8;margin-bottom:.25rem}
.lf input{
  width:100%;height:2.5rem;border:1px solid rgba(255,255,255,.1);
  border-radius:.375rem;padding:0 .75rem;font-size:.8125rem;
  background:rgba(255,255,255,.05);color:#e2e8f0;outline:none;
}
.lf input:focus{border-color:#3b82f6}

.lf-row{display:flex;gap:.375rem}
.lf-row input{flex:1}
.lf-row button{
  flex-shrink:0;padding:.5rem .625rem;font-size:.6875rem;
  background:rgba(59,130,246,.12);border:1px solid rgba(59,130,246,.2);
  color:#60a5fa;border-radius:.375rem;cursor:pointer;white-space:nowrap;
}
.lf-row button:active{background:rgba(59,130,246,.25)}

.login-btn{
  width:100%;height:2.5rem;border:none;border-radius:.5rem;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;font-size:.8125rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.login-btn:active{opacity:.85}
.login-btn:disabled{opacity:.5;cursor:not-allowed}

.login-switch{text-align:center;margin-top:.5rem}
.login-switch span{font-size:.6875rem;color:#94a3b8}
.login-switch a{font-size:.6875rem;color:#60a5fa;cursor:pointer;text-decoration:none}
.login-switch a:active{color:#93c5fd}

.login-error{font-size:.6875rem;color:#ef4444;text-align:center;margin-bottom:.5rem;display:none}
.login-error.show{display:block}

/* 微信扫码区 */
.wechat-qr-area{
  text-align:center;padding:1rem 0;
}
.wechat-qr-box{
  width:10rem;height:10rem;margin:0 auto .75rem;
  background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);
  border-radius:.5rem;display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
}
.wechat-qr-tip{font-size:.6875rem;color:#64748b}
.wechat-qr-box img{width:100%;height:100%;object-fit:contain}