/* =============================================================================
 * kankan-login.css — Kankan Label 登录 / 注册页视觉重塑
 * -----------------------------------------------------------------------------
 * 作用域：.login_page_new_ui（Label Studio 1.24 的 users/new-ui 模板）
 * 目标：把上游「米白 + 橙粉渐变 + HumanSignal 品牌」换成 Kankan 自有的
 *       深空科技风 —— 网格背景 / 光晕 / 扫描光带 / 玻璃拟态表单卡 / 青色霓虹。
 * 覆盖方式：统一用 `html body .login_page_new_ui ...` 提高特异性 + !important，
 *           以压过上游 login.css（后加载且选择器更具体时才需 !important）。
 * 品牌色沿用 KANKAN 工作台色板（nb-theme.css）：--brand #4d7cff，追加青 #22d3ee。
 * ========================================================================== */

html body .login_page_new_ui {
  --kk-bg: #070b14;
  --kk-bg-2: #0b1120;
  --kk-ink: #e9eefb;
  --kk-ink-2: #c3d0e8;
  --kk-muted: #8496b5;
  --kk-faint: #5b6b88;
  --kk-line: rgba(126, 166, 232, .16);
  --kk-line-2: rgba(126, 166, 232, .30);
  --kk-cyan: #22d3ee;
  --kk-blue: #4d7cff;
  --kk-violet: #8b5cf6;
  --kk-glass: rgba(17, 25, 42, .62);

  position: relative;
  display: flex;
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif !important;
  color: var(--kk-ink);
  background:
    radial-gradient(1100px 680px at 16% 18%, rgba(34, 211, 238, .16), transparent 62%),
    radial-gradient(980px 620px at 84% 82%, rgba(139, 92, 246, .15), transparent 64%),
    radial-gradient(760px 520px at 74% 6%, rgba(77, 124, 255, .13), transparent 60%),
    linear-gradient(158deg, #070b14 0%, #0a1120 46%, #060a12 100%) !important;
  overflow: hidden;
}

/* ---- 背景层 1：细网格 + 径向遮罩 ---------------------------------------- */
html body .login_page_new_ui::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(126, 170, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 170, 255, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(115% 88% at 30% 42%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 78%);
  mask-image: radial-gradient(115% 88% at 30% 42%, #000 0%, rgba(0, 0, 0, .35) 55%, transparent 78%);
  z-index: 0;
}

/* ---- 背景层 2：缓慢下移的扫描光带 -------------------------------------- */
html body .login_page_new_ui::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, rgba(34, 211, 238, .07) 46%, transparent 92%);
  animation: kk-login-scan 11s linear infinite;
  z-index: 0;
}

@keyframes kk-login-scan {
  0%   { transform: translateY(-70%); }
  100% { transform: translateY(280%); }
}

/* =============================================================================
 * 左侧品牌区
 * ========================================================================== */
html body .login_page_new_ui .left {
  flex: 1 1 58% !important;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start !important;
  height: 100%;
  padding: 56px 4vw 104px 4vw;
  background: transparent !important;
  overflow: hidden;
}

/* 干掉上游的橙粉渐变底与右下角装饰 */
html body .login_page_new_ui .left:after { display: none !important; }

/* 隐藏上游 Label Studio 文字 logo（改用 Kankan manta glyph） */
html body .login_page_new_ui .left .ls-logo { display: none !important; }

.kk-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 640px;
  width: 100%;
}

.kk-brand-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
}

.kk-brand-glyph {
  width: 62px;
  height: 62px;
  flex: none;
  object-fit: contain;
  filter: drop-shadow(0 0 22px rgba(34, 211, 238, .55));
  animation: kk-glyph-float 6.5s ease-in-out infinite;
}

@keyframes kk-glyph-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.kk-brand-name {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--kk-cyan);
  margin: 0 0 4px;
  text-shadow: 0 0 18px rgba(34, 211, 238, .45);
}

.kk-brand-title {
  font-size: clamp(40px, 4.4vw, 60px);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -.022em;
  margin: 0;
  background: linear-gradient(104deg, #ffffff 0%, #cfe4ff 42%, #6ee7f5 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kk-brand-title em {
  font-style: normal;
  background: linear-gradient(104deg, #6ee7f5 0%, #7aa2ff 55%, #b18cff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.kk-brand-sub {
  margin: 18px 0 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--kk-muted);
  max-width: 480px;
}

.kk-brand-sub b { color: var(--kk-ink-2); font-weight: 600; }

/* ---- 能力卡片 ---------------------------------------------------------- */
.kk-caps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 36px;
  width: 100%;
  max-width: 640px;
}

.kk-cap {
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: flex-start;
  padding: 16px 15px 17px;
  border-radius: 14px;
  background: var(--kk-glass);
  border: 1px solid var(--kk-line);
  backdrop-filter: blur(12px) saturate(1.15);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  transition: transform .22s cubic-bezier(.2, .7, .3, 1), border-color .22s, background .22s, box-shadow .22s;
}

.kk-cap:hover {
  transform: translateY(-3px);
  border-color: rgba(34, 211, 238, .40);
  background: rgba(24, 35, 58, .74);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .38);
}

.kk-cap-ico {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, rgba(34, 211, 238, .18), rgba(139, 92, 246, .18));
  border: 1px solid rgba(34, 211, 238, .26);
  color: var(--kk-cyan);
}

.kk-cap-ico svg { width: 19px; height: 19px; }

.kk-cap-txt { min-width: 0; }

.kk-cap-txt strong {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--kk-ink);
  margin-bottom: 4px;
  letter-spacing: .01em;
}

.kk-cap-txt span {
  display: block;
  font-size: 12px;
  line-height: 1.6;
  color: var(--kk-faint);
}

/* ---- 左下角署名（正常流内，跟随品牌块） -------------------------------- */
.kk-foot {
  margin-top: 34px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--kk-faint);
  letter-spacing: .02em;
}

.kk-foot .sep { opacity: .5; }

/* ---- 左下角装饰：等高线波纹（科技感填充留白） ---------------------------- */
.kk-waves {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 46%;
  pointer-events: none;
  z-index: 0;
  opacity: .55;
  background:
    radial-gradient(58% 96% at 6% 118%, rgba(34, 211, 238, .16), transparent 62%),
    radial-gradient(46% 82% at 34% 126%, rgba(77, 124, 255, .15), transparent 64%),
    radial-gradient(40% 70% at 74% 132%, rgba(139, 92, 246, .12), transparent 66%);
}

/* 波纹线条 */
.kk-waves:before {
  content: '';
  position: absolute;
  left: -6%;
  bottom: -14%;
  width: 112%;
  height: 100%;
  background-image:
    repeating-radial-gradient(circle at 12% 100%,
      transparent 0 26px,
      rgba(126, 190, 255, .085) 26px 27.5px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 46%, #000 100%);
}

/* 品牌块下的细分隔线 */
.kk-brand:after {
  content: '';
  display: block;
  width: 100%;
  max-width: 640px;
  height: 1px;
  margin-top: 30px;
  background: linear-gradient(90deg, rgba(34, 211, 238, .38), rgba(126, 170, 255, .14) 46%, transparent 84%);
}

.kk-foot .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--kk-cyan);
  box-shadow: 0 0 10px rgba(34, 211, 238, .9);
  animation: kk-pulse 2.4s ease-in-out infinite;
}

@keyframes kk-pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.7); }
}

.kk-foot b { color: var(--kk-muted); font-weight: 500; }

/* =============================================================================
 * 右侧表单区
 * ========================================================================== */
html body .login_page_new_ui .right {
  flex: 1 1 42% !important;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  height: 100%;
  padding: 40px 3vw;
}

/* 右侧表单上方的连接指示条（科技感） */
html body .login_page_new_ui .right:after {
  content: '';
  position: absolute;
  top: 7%;
  left: 50%;
  transform: translateX(-50%);
  width: 210px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .45), transparent);
  z-index: 0;
}

/* 右侧竖向分隔光带 */
html body .login_page_new_ui .right:before {
  content: '';
  position: absolute;
  left: 0;
  top: 8%;
  bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(126, 170, 255, .28) 26%, rgba(34, 211, 238, .40) 50%, rgba(126, 170, 255, .28) 74%, transparent);
  z-index: 0;
}

/* ---- 玻璃拟态表单卡 --------------------------------------------------- */
html body .login_page_new_ui .form-wrapper {
  position: relative;
  width: 25rem !important;
  max-width: 100%;
  margin-top: 0 !important;
  padding: 2.4rem 2.2rem !important;
  border-radius: 20px !important;
  background: linear-gradient(180deg, rgba(21, 30, 50, .78), rgba(10, 16, 28, .84)) !important;
  border: 1px solid rgba(126, 166, 232, .18) !important;
  box-shadow:
    0 34px 90px rgba(0, 0, 0, .58),
    0 2px 0 rgba(255, 255, 255, .03) inset,
    0 0 0 1px rgba(255, 255, 255, .02) inset !important;
  backdrop-filter: blur(26px) saturate(1.25);
  -webkit-backdrop-filter: blur(26px) saturate(1.25);
  overflow: hidden;
}

/* 卡片顶部渐变高光线 */
html body .login_page_new_ui .form-wrapper:before {
  content: '';
  position: absolute;
  left: 26px;
  right: 26px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34, 211, 238, .85), rgba(139, 92, 246, .55), transparent);
  z-index: 2;
}

/* 卡片右上角光斑 */
html body .login_page_new_ui .form-wrapper:after {
  content: '';
  position: absolute;
  right: -90px;
  top: -110px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 211, 238, .20), transparent 68%);
  pointer-events: none;
  z-index: 0;
}

.kk-form-head {
  position: relative;
  z-index: 1;
  margin-bottom: 26px;
  text-align: center;
}

.kk-form-head .kk-eyebrow {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .3em;
  color: var(--kk-cyan);
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid rgba(34, 211, 238, .30);
  background: rgba(34, 211, 238, .08);
  margin-bottom: 14px;
}

html body .login_page_new_ui .form-wrapper h2 {
  position: relative;
  z-index: 1;
  width: 100% !important;
  text-align: center;
  font-size: 1.85rem !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  color: var(--kk-ink) !important;
  margin: 0 0 6px !important;
}

.kk-form-head .kk-form-sub {
  font-size: 12.5px;
  color: var(--kk-faint);
  letter-spacing: .02em;
}

/* ---- 表单元素 --------------------------------------------------------- */
html body .login_page_new_ui form {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-flow: rows;
  gap: 16px !important;
}

html body .login_page_new_ui .input-wrapper label {
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--kk-muted) !important;
  margin-bottom: 7px !important;
  letter-spacing: .03em;
}

html body .login_page_new_ui form input[type="text"],
html body .login_page_new_ui form input[type="password"],
html body .login_page_new_ui form input[type="email"],
html body .login_page_new_ui form input:not([type]),
html body .login_page_new_ui form select {
  width: 100%;
  height: 44px !important;
  padding: 0 13px !important;
  border-radius: 10px !important;
  background: rgba(6, 11, 20, .72) !important;
  border: 1px solid rgba(126, 166, 232, .18) !important;
  color: var(--kk-ink) !important;
  font-family: inherit !important;
  font-size: 14px !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .30) !important;
  transition: border-color .18s, box-shadow .18s, background .18s;
}

html body .login_page_new_ui form input::placeholder { color: var(--kk-faint) !important; }

html body .login_page_new_ui form input:focus,
html body .login_page_new_ui form select:focus {
  outline: none !important;
  border-color: rgba(34, 211, 238, .70) !important;
  background: rgba(8, 14, 25, .85) !important;
  box-shadow:
    0 0 0 3px rgba(34, 211, 238, .12),
    0 0 24px rgba(34, 211, 238, .20) !important;
}

html body .login_page_new_ui form select option {
  background: #0d1424;
  color: var(--kk-ink);
}

/* 复选框 */
html body .login_page_new_ui .form-group label {
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 400 !important;
  color: var(--kk-muted) !important;
  cursor: pointer;
}

html body .login_page_new_ui .form-group label:before {
  background: rgba(6, 11, 20, .8) !important;
  border-color: rgba(126, 166, 232, .30) !important;
  transition: background .18s, border-color .18s, box-shadow .18s;
}

html body .login_page_new_ui .form-group input:checked + label:before {
  background: var(--kk-cyan) !important;
  border-color: var(--kk-cyan) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, .55);
}

/* 提交按钮 */
html body .login_page_new_ui .login-button,
html body .login_page_new_ui form button.lsf-button-ls,
html body .login_page_new_ui form button[type="submit"] {
  width: 100%;
  height: 46px !important;
  margin-top: 4px;
  border: 0 !important;
  border-radius: 11px !important;
  font-family: inherit !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  color: #04121f !important;
  background: linear-gradient(135deg, #2ee0f2 0%, #4d8bff 58%, #7b6cff 100%) !important;
  box-shadow: 0 12px 30px rgba(45, 130, 255, .26) !important;
  cursor: pointer;
  transition: transform .16s cubic-bezier(.2, .7, .3, 1), box-shadow .18s, filter .18s;
}

html body .login_page_new_ui .login-button:hover,
html body .login_page_new_ui form button.lsf-button-ls:hover,
html body .login_page_new_ui form button[type="submit"]:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow: 0 18px 42px rgba(45, 130, 255, .40) !important;
}

html body .login_page_new_ui .login-button:active,
html body .login_page_new_ui form button[type="submit"]:active {
  transform: translateY(0);
}

/* 错误提示 */
html body .login_page_new_ui form .error {
  margin: 0 !important;
  padding: 10px 13px !important;
  border-radius: 10px !important;
  font-size: 12.5px !important;
  line-height: 1.6 !important;
  color: #ffb4b4 !important;
  background: rgba(255, 92, 92, .10) !important;
  border: 1px solid rgba(255, 120, 120, .28) !important;
}

html body .login_page_new_ui .field_errors {
  margin: 8px 0 0 !important;
  padding: 0 0 0 16px !important;
  list-style: disc;
}

html body .login_page_new_ui .field_errors li {
  font-size: 12px !important;
  color: #ffb4b4 !important;
}

/* 底部链接 */
html body .login_page_new_ui .text-wrapper {
  position: relative;
  z-index: 1;
  margin-top: 22px !important;
  font-size: 13px !important;
  color: var(--kk-muted) !important;
}

html body .login_page_new_ui .text-wrapper a {
  color: #6ee7f9 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: color .16s, text-shadow .16s;
}

html body .login_page_new_ui .text-wrapper a:hover {
  color: #a5f3fc !important;
  text-shadow: 0 0 14px rgba(34, 211, 238, .6);
}

/* =============================================================================
 * 响应式
 * ========================================================================== */
@media (max-width: 1320px) {
  .kk-caps { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 520px; }
  .kk-cap:last-child { grid-column: span 2; }
}

@media (max-width: 1080px) {
  html body .login_page_new_ui .left { flex: 1 1 50% !important; padding-left: 3vw; padding-right: 3vw; }
  html body .login_page_new_ui .right { flex: 1 1 50% !important; }
  .kk-caps { grid-template-columns: 1fr; max-width: 420px; }
  .kk-cap:last-child { grid-column: auto; }
}

@media (max-width: 860px) {
  html body .login_page_new_ui { flex-direction: column; overflow-y: auto; }
  html body .login_page_new_ui .left {
    flex: 0 0 auto !important;
    height: auto;
    padding: 48px 24px 26px;
    align-items: center !important;
    text-align: center;
  }
  .kk-brand { align-items: center; }
  .kk-brand-head { flex-direction: column; gap: 10px; text-align: center; }
  .kk-brand-sub { max-width: 100%; }
  .kk-caps { display: none; }
  .kk-foot { position: static; margin-top: 24px; justify-content: center; }
  html body .login_page_new_ui .right {
    flex: 1 0 auto !important;
    height: auto;
    padding: 12px 20px 48px;
  }
  html body .login_page_new_ui .right:before { display: none; }
  html body .login_page_new_ui .form-wrapper { width: 100% !important; max-width: 25rem; }
}

@media (prefers-reduced-motion: reduce) {
  html body .login_page_new_ui::after,
  .kk-brand-glyph,
  .kk-foot .dot { animation: none !important; }
}