/* 竹蜻蜓 面板外壳覆盖样式
   只作用于登录 / 注册 / 找回密码三屏（html 上有 zqt-auth 时才生效，见 dashboard.blade.php）。
   主题包是编译好的 Naive UI + CSS-in-JS，样式在运行期注入，所以这里全部走
   高特异性选择器 + !important，并优先改组件自己的 --n-* 变量。 */

html.zqt-auth body {
  min-height: 100vh !important;
  background-color: #0a1630 !important;
  background-image:
    radial-gradient(880px 460px at 12% -8%, rgba(31, 95, 208, .40), rgba(31, 95, 208, 0) 62%),
    radial-gradient(760px 420px at 92% 6%, rgba(15, 143, 107, .26), rgba(15, 143, 107, 0) 60%),
    linear-gradient(158deg, #13264c 0%, #0a1630 62%, #081226 100%) !important;
  background-attachment: fixed !important;
}

/* 网格底纹 + 竹蜻蜓转叶，都在 #app 底下 */
html.zqt-auth body::before,
html.zqt-auth body::after {
  content: "";
  position: fixed;
  pointer-events: none;
  z-index: 0;
}

html.zqt-auth body::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(190, 214, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(190, 214, 255, .07) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(760px 520px at 50% 24%, #000 0%, transparent 76%);
  mask-image: radial-gradient(760px 520px at 50% 24%, #000 0%, transparent 76%);
}

html.zqt-auth body::after {
  right: 6vw;
  top: 12vh;
  width: 260px;
  height: 260px;
  opacity: .32;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120' fill='none'%3E%3Ccircle cx='60' cy='60' r='52' stroke='%237fb0ff' stroke-width='1.2' opacity='.5'/%3E%3Ccircle cx='60' cy='60' r='34' stroke='%2395f0d2' stroke-width='1' opacity='.4'/%3E%3Cpath d='M8 60h104' stroke='%237fb0ff' stroke-width='3' stroke-linecap='round' opacity='.8'/%3E%3Cpath d='M60 8v104' stroke='%237fb0ff' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3Cpath d='M23 23l74 74M97 23L23 97' stroke='%2395f0d2' stroke-width='2' stroke-linecap='round' opacity='.4'/%3E%3Ccircle cx='60' cy='60' r='7' fill='%237fb0ff'/%3E%3C/svg%3E");
  animation: zqt-spin 11s linear infinite;
}

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

html.zqt-auth #app {
  position: relative;
  z-index: 1;
}

/* 卡片本体 */
html.zqt-auth .n-card {
  width: min(430px, 92vw) !important;
  max-width: none !important;
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  border: 1px solid rgba(190, 214, 255, .16) !important;
  box-shadow: 0 34px 80px rgba(4, 12, 32, .55), 0 2px 6px rgba(4, 12, 32, .3) !important;
  --n-color: #ffffff !important;
  --n-color-embedded: #f2f6fd !important;
  color: #0f1522 !important;
}

html.zqt-auth .n-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(90deg, #1f5fd0 0%, #2f8fd6 40%, #0f8f6b 72%, #b8600c 100%);
}

html.zqt-auth .n-card .p-6 {
  padding: 30px 26px 24px !important;
}

html.zqt-auth .n-card h1 {
  font-size: 27px !important;
  font-weight: 700 !important;
  letter-spacing: -.4px !important;
  color: #0f1522 !important;
  margin: 0 0 6px !important;
}

html.zqt-auth .n-card h5 {
  font-size: 13px !important;
  color: #6a7488 !important;
  margin: 0 0 22px !important;
}

/* 字段间距收紧，别一上来就撑满一屏 */
html.zqt-auth .n-card .mt-5 {
  margin-top: 14px !important;
}

/* 输入框：加高、圆角、蓝色聚焦环 */
html.zqt-auth .n-card .n-input {
  --n-height: 46px !important;
  --n-font-size: 15px !important;
  --n-border-radius: 12px !important;
  --n-padding-left: 14px !important;
  --n-color: #f5f8fd !important;
  --n-color-focus: #ffffff !important;
  --n-color-disabled: #eef2f9 !important;
  --n-border: 1px solid #dbe3f1 !important;
  --n-border-focus: 1px solid #1f5fd0 !important;
  --n-border-hover: 1px solid #b9c8e4 !important;
  --n-box-shadow-focus: 0 0 0 3px rgba(31, 95, 208, .16) !important;
  --n-text-color: #0f1522 !important;
  --n-placeholder-color: #8b96ab !important;
  --n-icon-color: #8b96ab !important;
  --n-icon-color-hover: #1f5fd0 !important;
  --n-icon-color-active: #1f5fd0 !important;
}

html.zqt-auth .n-card .n-input__input-el {
  color: #0f1522 !important;
}

html.zqt-auth .n-card .n-input__placeholder {
  color: #8b96ab !important;
}

/* 验证码那一行的「发送」挂在输入框右边 */
html.zqt-auth .n-card .n-input-group {
  gap: 8px;
  align-items: stretch !important;
}

/* 组件被拼成一组时 Naive 会削掉相接一侧的圆角，这里已经留了间距，要恢复完整圆角 */
html.zqt-auth .n-card .n-input-group > .n-input,
html.zqt-auth .n-card .n-input-group > .n-button {
  border-radius: 12px !important;
}

html.zqt-auth .n-card .n-input-group > .n-button {
  flex: none !important;
  margin-left: 8px !important;
  height: 46px !important;
  align-self: center !important;
  --n-height: 46px !important;
  --n-font-size: 14px !important;
  --n-padding-medium: 0 16px !important;
}

/* 主按钮 */
html.zqt-auth .n-card .n-button--primary-type {
  --n-height: 46px !important;
  --n-font-size: 15px !important;
  --n-border: none !important;
  --n-border-hover: none !important;
  --n-border-focus: none !important;
  --n-border-pressed: none !important;
  --n-text-color: #ffffff !important;
  --n-text-color-hover: #ffffff !important;
  --n-text-color-pressed: #ffffff !important;
  --n-text-color-focus: #ffffff !important;
  background-color: #1f5fd0 !important;
  background-image: linear-gradient(120deg, #1f5fd0 0%, #2f8fd6 100%) !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 20px rgba(31, 95, 208, .28) !important;
  letter-spacing: .5px !important;
}

html.zqt-auth .n-card .n-button--primary-type:hover {
  background-image: linear-gradient(120deg, #1a53bb 0%, #2680c2 100%) !important;
  box-shadow: 0 10px 24px rgba(31, 95, 208, .34) !important;
}

html.zqt-auth .n-card .n-button.h-9 {
  height: 46px !important;
}

/* 服务条款勾选 */
html.zqt-auth .n-card .n-checkbox {
  --n-box-size: 18px !important;
  --n-color-checked: #1f5fd0 !important;
  --n-border-checked: 1px solid #1f5fd0 !important;
  --n-border: 1px solid #c3cfe6 !important;
  --n-box-shadow-focus: 0 0 0 3px rgba(31, 95, 208, .16) !important;
}

html.zqt-auth .n-card .n-checkbox__label {
  color: #5a677f !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

html.zqt-auth .n-card .n-checkbox__label a {
  color: #1f5fd0 !important;
}

/* 底部那条：注册 / 忘记密码 / 语言 */
html.zqt-auth .n-card__content > .flex.justify-between {
  padding: 14px 26px !important;
  border-top: 1px solid #e4e8f1 !important;
  font-size: 13px !important;
}

html.zqt-auth .n-card a.text-gray-500 {
  color: #5a677f !important;
  text-decoration: none !important;
  transition: color .15s;
}

html.zqt-auth .n-card a.text-gray-500:hover {
  color: #1f5fd0 !important;
}

html.zqt-auth .n-card .n-divider--vertical {
  --n-color: #cdd7e8 !important;
  margin: 0 10px !important;
}

html.zqt-auth .n-card__content > .flex.justify-between .n-button--default-type {
  --n-height: 28px !important;
  --n-font-size: 13px !important;
  --n-padding-medium: 0 10px !important;
  --n-text-color: #5a677f !important;
  --n-text-color-hover: #1f5fd0 !important;
  --n-color-hover: rgba(31, 95, 208, .08) !important;
  border-radius: 9px !important;
}

/* 手机屏 */
@media (max-width: 520px) {
  html.zqt-auth body::after {
    width: 170px;
    height: 170px;
    right: -26px;
    top: 4vh;
    opacity: .22;
  }

  html.zqt-auth .n-card {
    border-radius: 16px !important;
  }

  html.zqt-auth .n-card .p-6 {
    padding: 24px 18px 20px !important;
  }

  html.zqt-auth .n-card h1 {
    font-size: 23px !important;
  }

  html.zqt-auth .n-card__content > .flex.justify-between {
    padding: 13px 18px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.zqt-auth body::after {
    animation: none;
  }
}