/* =============================================================
 * MK 登录页 UI 重构 v1  ·  海外版(LL) 专属
 * -------------------------------------------------------------
 * 只覆盖「视觉与布局」，不动任何交互逻辑：
 *   DOM（React 打包产物里，无源码可改）：
 *     .login-page > .login-wrap > [header.login-header] + [form.login-card]
 *     form.login-card > [.corner ×4] [.welcome] [label×2] [button] [footer]
 *   桌面：左「品牌/安全说明」+ 右「登录卡」两栏
 *   窄屏：上下堆叠（品牌居中）
 *   同时关掉面板自带的旧装饰层（orb / grid-overlay / #particles-canvas），
 *   避免与新的 MK 粒子背景打架。
 * ============================================================= */

/* ---------- 0. 旧装饰层下线 ---------- */
.login-page .orb,
.login-page .grid-overlay,
.login-page #particles-canvas { display: none !important; }
.login-page:before { display: none !important; }

/* ---------- 1. 外层容器 & 两栏网格 ---------- */
.login-page {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 44px 26px !important;
  overflow: visible !important;
}
/* 桌面：整块靠右，让开背景中央的 MK 徽记 */
@media (min-width: 941px) {
  .login-page {
    justify-content: flex-end !important;
    padding: 40px clamp(26px, 5.5vw, 104px) 40px 0 !important;
  }
}
.login-wrap {
  position: relative !important;
  z-index: 2 !important;
  width: min(452px, calc(100vw - 52px)) !important;
  max-width: 452px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 20px !important;
  align-items: start !important;
  animation: mkLoginIn .7s cubic-bezier(.16, 1, .3, 1) both !important;
}
@keyframes mkLoginIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 2. 左栏：品牌 / 安全说明（磨砂玻璃底板，压住背景徽记保证可读） ---------- */
.login-header {
  margin: 0 !important; text-align: left !important;
  padding: 30px 30px 26px !important;
  border-radius: 20px !important;
  border: 1px solid #ffffff12 !important;
  background: linear-gradient(155deg, #071427f5, #04101ef7) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  box-shadow: 0 30px 74px #0000008f, inset 0 1px #ffffff12, inset 0 0 0 1px #38bdf817 !important;
}
.login-header .login-logo-img {
  display: block !important;
  width: 76px !important; height: 76px !important;
  margin: 0 0 20px !important; border-radius: 22px !important;
  box-shadow: 0 20px 46px #0ea5e94d, 0 0 0 1px #7dd3fc2e !important;
}
.login-header h1 {
  margin: 0 0 10px !important;
  font-size: 31px !important; font-weight: 800 !important;
  line-height: 1.24 !important; letter-spacing: .6px !important;
  background: linear-gradient(118deg, #ffffff, #d8f0ff 46%, #7dd3fc) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: none !important;
}
.login-header p {
  margin: 0 !important;
  color: #8fb6d8 !important; font-size: 12px !important;
  letter-spacing: 2.6px !important; text-transform: uppercase !important;
}
.login-header:after {
  content: "设备管理 · 应用构建 · 全局注入\A 节点状态 · 隧道管理 · 短信中心\A AES-256 加密通道 · 全程操作留痕";
  display: block; white-space: pre-line;
  margin-top: 24px; padding-left: 16px;
  border-left: 2px solid #38bdf840;
  color: #93b8d8; font-size: 13px; line-height: 2.05; letter-spacing: .3px;
}

/* ---------- 3. 右栏：登录卡 ---------- */
.login-card {
  position: relative !important;
  width: 100% !important; margin: 0 !important;
  padding: 28px 28px 20px !important;
  display: grid !important; gap: 15px !important;
  border-radius: 20px !important;
  border: 1px solid #ffffff17 !important;
  background: linear-gradient(158deg, #0c1c31e0, #08132af5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%) !important;
  backdrop-filter: blur(24px) saturate(150%) !important;
  box-shadow: 0 34px 80px #0000009e, 0 0 0 1px #38bdf812, inset 0 1px #ffffff12 !important;
  overflow: hidden !important;
}
.login-card:before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 62% at 8% 0%, #38bdf81c, transparent 62%),
              radial-gradient(90% 60% at 100% 100%, #6366f11a, transparent 66%);
}
.login-card > * { position: relative; z-index: 1; }
.login-card .corner { display: none !important; }

/* 顶部「安全接入认证」条 */
.login-card .welcome {
  display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important;
  margin: 0 0 4px !important; padding: 9px 14px !important;
  text-align: center !important;
  border: 1px solid #38bdf826 !important; border-radius: 11px !important;
  background: #0ea5e912 !important;
  color: #bfe6ff !important; font-size: 12px !important; letter-spacing: 1.6px !important;
}
.login-card .welcome b { color: #38bdf8 !important; font-size: 9px !important; }

/* 表单字段 */
.login-card label {
  display: block !important; margin: 0 !important;
  color: #9ec3e2 !important; font-size: 12.5px !important; letter-spacing: .5px !important;
}
.login-card label:nth-of-type(1):before,
.login-card label:nth-of-type(2):before {
  float: right; color: #5b7d9c; font-size: 10px; letter-spacing: 1.8px; line-height: 20px;
}
.login-card label:nth-of-type(1):before { content: "ADMIN ID"; }
.login-card label:nth-of-type(2):before { content: "PASSWORD"; }
.login-card label input {
  margin-top: 8px !important; width: 100% !important; height: 50px !important;
  padding: 0 15px !important; border-radius: 12px !important;
  background: #ffffff0a !important; border: 1px solid #ffffff1c !important;
  color: #eaf6ff !important; font-size: 14px !important; letter-spacing: .3px;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.login-card label input::placeholder { color: #6d8ba8 !important; }
.login-card label input:focus {
  border-color: #38bdf86b !important; background: #38bdf810 !important;
  box-shadow: 0 0 0 4px #38bdf81c !important;
}

/* 主按钮 */
.login-card button {
  width: 100% !important; height: 52px !important; margin: 6px 0 0 !important;
  border: 0 !important; border-radius: 13px !important;
  background: linear-gradient(118deg, #0ea5e9, #2563eb 52%, #6366f1) !important;
  color: #fff !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 2.4px !important;
  box-shadow: 0 16px 36px #1d4ed866, inset 0 1px #ffffff4d !important;
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.login-card button:hover:not(:disabled) {
  transform: translateY(-1px); filter: saturate(1.12);
  box-shadow: 0 20px 44px #1d4ed880, inset 0 1px #ffffff66 !important;
}
.login-card button:disabled { opacity: .58 !important; cursor: not-allowed !important; }

/* 底部说明 */
.login-card footer {
  margin: 10px 0 0 !important; padding: 14px 0 0 !important;
  border-top: 1px solid #ffffff0f !important; border-bottom: 0 !important;
  text-align: center !important;
  color: #5f7ea3 !important; font-size: 11px !important; letter-spacing: 1.5px !important;
}

/* ---------- 4. Telegram 二次验证块配色对齐 ---------- */
.login-card .telegram-verify-icon {
  color: #38bdf8 !important;
  background: linear-gradient(135deg, #38bdf829, #6366f124) !important;
  border-color: #38bdf833 !important; box-shadow: 0 0 24px #38bdf829 !important;
}
.login-card .telegram-verify h2 { color: #eaf6ff !important; }
.login-card .telegram-verify-tip { color: #8fb6d8 !important; }
.login-card .telegram-code-inputs input {
  color: #eaf6ff !important; background: #ffffff0a !important; border: 1px solid #ffffff1c !important;
}
.login-card .telegram-code-inputs input:focus {
  border-color: #38bdf880 !important; background: #38bdf814 !important; box-shadow: 0 0 0 3px #38bdf81f !important;
}
.login-card .telegram-countdown { color: #8fb6d8 !important; }
.login-card .telegram-countdown.warning { color: #fea97a !important; }
.login-card .telegram-back-btn {
  height: 36px !important; margin: 2px 0 0 !important;
  background: transparent !important; color: #8fb6d8 !important;
  font-size: 12.5px !important; font-weight: 500 !important; letter-spacing: .6px !important;
  box-shadow: none !important;
}
.login-card .telegram-back-btn:hover { color: #d8ecff !important; transform: none !important; }

/* ---------- 5. 窄屏堆叠 ---------- */
@media (min-width: 941px) {
  .login-header { text-align: left !important; padding: 24px 26px 22px !important; }
  .login-header .login-logo-img { width: 64px !important; height: 64px !important; border-radius: 19px !important; margin: 0 0 14px !important; }
  .login-header h1 { font-size: 27px !important; }
  .login-header:after { margin-top: 16px; font-size: 12.5px; line-height: 1.95; }
  .login-card { padding: 24px 26px 18px !important; }
}
@media (max-width: 940px) {
  .login-wrap { gap: 26px !important; max-width: 430px !important; }
  .login-header { text-align: center !important; padding: 24px 20px !important; }
  .login-header .login-logo-img { width: 66px !important; height: 66px !important; border-radius: 20px !important; margin: 0 auto 16px !important; }
  .login-header h1 { font-size: 25px !important; }
  .login-header:after { display: none !important; }
}
@media (max-width: 480px) {
  .login-page { padding: 26px 14px !important; }
  .login-card { padding: 22px 18px 16px !important; border-radius: 17px !important; }
  .login-card label input, .login-card button { height: 48px !important; }
}

/* ---------- 6. 错误提示条（原来的酒红块换成蓝底红字玻璃） ---------- */
.login-card .login-error {
  margin: 0 !important; padding: 10px 13px !important;
  border-radius: 11px !important;
  border: 1px solid #f43f5e52 !important;
  background: linear-gradient(120deg, #f43f5e26, #f43f5e14) !important;
  color: #ffc2cd !important; font-size: 12.5px !important; letter-spacing: .3px !important;
  display: flex !important; align-items: center; gap: 8px !important;
}
.login-card .login-error:before { content: "!"; display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: #f43f5e; color: #fff; font-size: 11px; font-weight: 800; flex: 0 0 auto; }