/**
 * GoEdge 登录 / 注册页（管理员端与用户端共用同一份样式）
 * ============================================================================
 * 2026-10-11 改版：左侧深色品牌区 + 节点网络示意，右侧表单。
 * 管理员端：EdgeAdmin/web/views/@default/index/index.css（TeaGo 自动加载）
 * 用户端：  EdgeUserCommunity/internal/web/static/design-login.css（go:embed）
 * 两份文件内容保持一致，改一处必须同步另一处。
 *
 * 不可改动的契约（slider_login_check.js 与滑块脚本依赖）：
 *   .slider-captcha / .slider-progress / .slider-label / .slider-handle，
 *   handle 绝对定位在左侧，宽 40px；进度条宽度由脚本按 offset + handle + 4 计算。
 */

:root {
  --auth-primary: #2563eb;
  --auth-primary-hover: #1d4ed8;
  --auth-primary-soft: rgb(37 99 235 / 12%);
  --auth-ring: 0 0 0 3px rgb(37 99 235 / 18%);
  --auth-success: #12b76a;
  --auth-success-soft: rgb(18 183 106 / 14%);
  --auth-error: #d92d20;
  --auth-error-soft: rgb(217 45 32 / 10%);
  --auth-ink: #0e1525;
  --auth-ink-2: #9aa6bd;
  --auth-ink-3: #64718a;
  --auth-bg: #ffffff;
  --auth-text: #0f172a;
  --auth-text-2: #5b6474;
  --auth-text-3: #7a8394;
  --auth-border: #d4dae3;
  --auth-field: #ffffff;
  --auth-sunken: #f1f4f8;
  --auth-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', sans-serif;
}

html.dark {
  --auth-primary: #4f8cff;
  --auth-primary-hover: #74a3ff;
  --auth-primary-soft: rgb(79 140 255 / 16%);
  --auth-ring: 0 0 0 3px rgb(79 140 255 / 26%);
  --auth-bg: #111722;
  --auth-text: #e6e9ef;
  --auth-text-2: #a3acbb;
  --auth-text-3: #7d8697;
  --auth-border: #2a3344;
  --auth-field: #0c121c;
  --auth-sunken: #182030;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--auth-bg);
  color: var(--auth-text);
  font-family: var(--auth-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--auth-primary);
  text-decoration: none;
}

a:hover {
  color: var(--auth-primary-hover);
}

/* ---------------------------------------------------------------------------
 * 布局
 * ------------------------------------------------------------------------- */
.auth-shell {
  display: grid;
  grid-template-columns: minmax(420px, 44%) minmax(0, 1fr);
  min-height: 100vh;
}

.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 44px 56px 36px;
  overflow: hidden;
  /* 2026-10-12 蓝白主题：品牌区由深色改为蓝色渐变 */
  background:
    radial-gradient(520px 360px at 78% 18%, rgb(255 255 255 / 20%), transparent 70%),
    radial-gradient(420px 320px at 10% 95%, rgb(6 182 212 / 35%), transparent 70%),
    linear-gradient(140deg, #1d4ed8 0%, #2563eb 40%, #3b82f6 72%, #0ea5e9 100%);
  color: rgb(255 255 255 / 82%);
}

/* 细网格底纹：只做质感，不抢内容 */
.auth-brand::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 75%);
  content: '';
  pointer-events: none;
}

.auth-brand > * {
  position: relative;
}

/* 2026-10-12 时间天幕：ge-sky-scene.js 在品牌区首位插入 canvas.ge-sky 并加 .has-sky。
 * 配色随本地时间连续变化（深夜→黎明→白天→黄昏），粒子地球、数据包弧线、透视光栅与实时时钟。
 * 脚本未加载或浏览器不支持 canvas 时，仍显示上面的渐变 + 静态网络图。 */
.auth-brand > canvas.ge-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  pointer-events: none;
}

.auth-brand > :not(canvas) {
  z-index: 1;
}

.auth-brand.has-sky::before {
  display: none;
}

/* 静态网络图让位给地球，但保留占位，正文位置不变 */
.auth-brand.has-sky .auth-network {
  visibility: hidden;
}

.auth-brand.has-sky .auth-brand__headline,
.auth-brand.has-sky .auth-brand__sub {
  text-shadow: 0 2px 16px rgb(8 21 54 / 40%);
}

.auth-brand__top {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.auth-brand__mark {
  display: inline-grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: rgb(255 255 255 / 20%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 35%);
  color: #fff;
  font-size: 0;
}

.auth-brand__mark svg {
  display: block;
}

.auth-network {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 56px 0 0;
}

.auth-network .pulse {
  animation: auth-pulse 2.8s ease-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes auth-pulse {
  0% {
    opacity: 0.5;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.8);
  }
}

.auth-network .flow {
  animation: auth-flow 1.6s linear infinite;
}

@keyframes auth-flow {
  to {
    stroke-dashoffset: -16;
  }
}

.auth-brand__body {
  margin-top: auto;
}

.auth-brand__headline {
  margin: 0;
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.auth-brand__sub {
  max-width: 460px;
  margin: 14px 0 0;
  color: rgb(255 255 255 / 80%);
  font-size: 14px;
  line-height: 1.75;
}

.auth-features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.auth-feature {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid rgb(255 255 255 / 28%);
  border-radius: 15px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font-size: 12.5px;
}

.auth-feature__icon {
  display: inline-flex;
  color: #fff;
}

.auth-feature strong {
  font-weight: 500;
}

/* 旧模板里 feature 的第二行说明不再展示，靠标签本身表达 */
.auth-feature div > span {
  display: none;
}

.auth-brand__foot {
  margin-top: 36px;
  color: rgb(255 255 255 / 60%);
  font-size: 12px;
}

/* ---------------------------------------------------------------------------
 * 表单侧
 * ------------------------------------------------------------------------- */
.auth-form-side {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 48px 24px;
  background:
    radial-gradient(520px 320px at 100% 0%, rgb(59 130 246 / 8%), transparent 70%),
    var(--auth-bg);
}

@keyframes auth-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.auth-card {
  width: 100%;
  max-width: 380px;
  animation: auth-rise 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-brand__body {
  animation: auth-rise 0.6s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.auth-card--register {
  max-width: 420px;
}

.auth-card__eyebrow {
  color: var(--auth-primary);
  font-size: 13px;
  font-weight: 500;
}

.auth-card h1 {
  margin: 8px 0 0;
  color: var(--auth-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.auth-card__sub {
  margin: 8px 0 28px;
  color: var(--auth-text-2);
  font-size: 14px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.auth-field > span {
  color: var(--auth-text);
  font-size: 13px;
  font-weight: 500;
}

.auth-field input {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  outline: none;
  background: var(--auth-field);
  color: var(--auth-text);
  font: inherit;
  font-size: 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

.auth-field input::placeholder {
  color: var(--auth-text-3);
}

.auth-field input:hover {
  border-color: color-mix(in srgb, var(--auth-primary) 40%, var(--auth-border));
}

.auth-field input:focus {
  border-color: var(--auth-primary);
  box-shadow: var(--auth-ring);
}

.auth-options {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -4px 0 18px;
  color: var(--auth-text-2);
  font-size: 13px;
}

.auth-options input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--auth-primary);
}

/* ---------------------------------------------------------------------------
 * 滑块验证（类名与几何为契约，见文件头）
 * ------------------------------------------------------------------------- */
.slider-captcha {
  position: relative;
  height: 44px;
  margin: 4px 0 20px;
  overflow: hidden;
  border: 1px solid var(--auth-border);
  border-radius: 8px;
  background: var(--auth-sunken);
  user-select: none;
  touch-action: none;
}

.slider-progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--auth-primary-soft);
}

.slider-label {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding-left: 44px;
  color: var(--auth-text-3);
  font-size: 13px;
  pointer-events: none;
}

.slider-handle {
  position: absolute;
  z-index: 2;
  top: 2px;
  left: 2px;
  display: grid;
  width: 40px;
  height: 38px;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 6px;
  background: var(--auth-field);
  box-shadow:
    0 1px 3px rgb(15 23 42 / 16%),
    0 0 0 1px rgb(15 23 42 / 6%);
  color: var(--auth-primary);
  cursor: grab;
  font-size: 15px;
  font-weight: 600;
}

.slider-handle span {
  letter-spacing: -2px;
}

.slider-handle:active {
  cursor: grabbing;
}

.slider-handle:focus-visible {
  outline: none;
  box-shadow: var(--auth-ring);
}

.slider-captcha.verified {
  border-color: var(--auth-success);
}

.slider-captcha.verified .slider-progress {
  background: var(--auth-success-soft);
}

.slider-captcha.verified .slider-label {
  padding-left: 0;
  color: var(--auth-success);
  font-weight: 600;
}

.slider-captcha.verified .slider-handle {
  color: var(--auth-success);
}

.slider-captcha.invalid {
  border-color: var(--auth-error);
}

.slider-captcha.invalid .slider-label {
  color: var(--auth-error);
}

/* ---------------------------------------------------------------------------
 * 按钮与提示
 * ------------------------------------------------------------------------- */
.auth-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: linear-gradient(135deg, #2563eb 0%, #3b82f6 60%, #0ea5e9 100%);
  box-shadow: 0 6px 16px rgb(37 99 235 / 28%);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  transition: background 0.15s ease;
}

.auth-submit:hover {
  filter: brightness(1.05);
  box-shadow: 0 8px 22px rgb(37 99 235 / 34%);
}

.auth-submit:active {
  transform: scale(0.99);
}

/* 提交中：按钮内小圈旋转，替代"点了没反应"的空等 */
.auth-submit.is-loading::before {
  width: 14px;
  height: 14px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: #fff;
  border-radius: 50%;
  content: '';
  animation: auth-spin 0.8s linear infinite;
}

@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth-submit:focus-visible {
  outline: none;
  box-shadow: var(--auth-ring);
}

.auth-submit:disabled,
.auth-submit.is-loading {
  cursor: progress;
  opacity: 0.7;
}

.auth-message,
.auth-error {
  margin: -8px 0 18px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.auth-message {
  background: var(--auth-success-soft);
  color: var(--auth-success);
}

.auth-error {
  background: var(--auth-error-soft);
  color: var(--auth-error);
}

.auth-switch {
  margin: 20px 0 0;
  color: var(--auth-text-2);
  font-size: 13px;
  text-align: center;
}

.auth-switch a {
  font-weight: 500;
}

.auth-legal {
  margin: 28px 0 0;
  color: var(--auth-text-3);
  font-size: 12px;
  text-align: center;
}

.auth-card--register .auth-field {
  margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
 * 响应式：窄屏收起品牌区为顶部横条
 * ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .auth-shell {
    grid-template-columns: 1fr;
    /* 单列时品牌条只占内容高度，剩余高度给表单（否则两行平分 100vh） */
    grid-template-rows: auto 1fr;
  }

  .auth-brand {
    min-height: auto;
    padding: 20px 24px;
  }

  .auth-network,
  .auth-brand__body,
  .auth-brand__foot {
    display: none;
  }

  .auth-form-side {
    min-height: auto;
    align-items: flex-start;
    padding: 40px 20px 56px;
  }
}