/* ==========================================================================
   网络安全实训对抗平台 · 品牌主题「深空蓝盾」 DEEP-SPACE BLUE SHIELD
   自研品牌样式定制层（仅视觉覆盖，不修改业务逻辑）
   ========================================================================== */

/* ---------- 1. 设计令牌：暗色方案重定义 ---------- */
[data-mantine-color-scheme="dark"] {
  /* 深空海军蓝底色阶梯（替换原平灰色阶） */
  --mantine-color-dark-9: #050A14 !important;
  --mantine-color-dark-8: #0A1020 !important;
  --mantine-color-dark-7: #0E1528 !important;
  --mantine-color-dark-6: #151F38 !important;
  --mantine-color-dark-5: #1C2946 !important;
  --mantine-color-dark-4: #253358 !important;
  --mantine-color-dark-3: #35446E !important;
  --mantine-color-dark-2: #5A6890 !important;
  --mantine-color-dark-1: #96A2C4 !important;
  --mantine-color-dark-0: #D4DCF0 !important;

  /* 全局正文与中性面 */
  --mantine-color-body: #0A1020 !important;
  --mantine-color-text: #E6EDFB !important;
  --mantine-color-dimmed: #8FA0C4 !important;
  --mantine-color-bright: #F2F7FF !important;
  --mantine-color-default: #131C34 !important;
  --mantine-color-default-hover: #1A2542 !important;
  --mantine-color-default-border: #26345C !important;
  --mantine-color-default-color: #DCE5F5 !important;

  /* 主色 custom 调色板 = 品牌蓝 #1E6FFF 家族（10 级阶梯） */
  --mantine-color-custom-0: #E8F0FF !important;
  --mantine-color-custom-1: #D0E1FF !important;
  --mantine-color-custom-2: #A6C8FF !important;
  --mantine-color-custom-3: #7AADFF !important;
  --mantine-color-custom-4: #4E90FF !important;
  --mantine-color-custom-5: #3378FF !important;
  --mantine-color-custom-6: #1E6FFF !important;
  --mantine-color-custom-7: #1459D6 !important;
  --mantine-color-custom-8: #0E47AD !important;
  --mantine-color-custom-9: #0A3585 !important;
  --mantine-color-custom-filled: #1E6FFF !important;
  --mantine-color-custom-filled-hover: #3D8CFF !important;
  --mantine-color-custom-light: rgba(30, 111, 255, 0.16) !important;
  --mantine-color-custom-light-hover: rgba(30, 111, 255, 0.26) !important;
  --mantine-color-custom-light-color: #7FB0FF !important;
  --mantine-color-custom-outline: rgba(78, 144, 255, 0.55) !important;
  --mantine-color-custom-outline-hover: rgba(30, 111, 255, 0.14) !important;

  /* 主色引用链（primary 指向 custom，保持既有机制） */
  --mantine-primary-color-filled: var(--mantine-color-custom-filled) !important;
  --mantine-primary-color-filled-hover: var(--mantine-color-custom-filled-hover) !important;
  --mantine-primary-color-light: var(--mantine-color-custom-light) !important;
  --mantine-primary-color-light-hover: var(--mantine-color-custom-light-hover) !important;
  --mantine-primary-color-light-color: var(--mantine-color-custom-light-color) !important;
  --mantine-primary-color-outline: var(--mantine-color-custom-outline) !important;
  --mantine-primary-color-outline-hover: var(--mantine-color-custom-outline-hover) !important;

  /* 链接色 */
  --mantine-color-anchor: #4E90FF !important;

  /* 圆角更大更柔和 */
  --mantine-radius-md: 10px !important;
  --mantine-radius-lg: 14px !important;

  /* 卡片投影（官方 Card 引用 --mantine-shadow-sm 内联变量，此处全局生效） */
  --mantine-shadow-sm: 0 10px 30px -14px rgba(2, 8, 23, 0.8), 0 2px 10px -6px rgba(2, 8, 23, 0.6) !important;
}

/* ---------- 2. 全局氛围：底色渐变 + 网格光纹 ---------- */
html {
  background:
    radial-gradient(1200px 800px at 84% -12%, rgba(30, 111, 255, 0.20), transparent 62%),
    radial-gradient(1000px 720px at -10% 110%, rgba(24, 203, 158, 0.10), transparent 58%),
    linear-gradient(180deg, #070D1C 0%, #0B1226 52%, #06090F 100%);
  background-attachment: fixed;
}

[data-mantine-color-scheme="dark"] body {
  background: transparent !important;
}

/* 细网格 + 中心光晕 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(110, 140, 210, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 140, 210, 0.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(1250px 900px at 58% 26%, #000 0%, transparent 80%);
  mask-image: radial-gradient(1250px 900px at 58% 26%, #000 0%, transparent 80%);
}

/* 选区与滚动条 */
::selection { background: rgba(43, 124, 255, 0.35); color: #FFFFFF; }
* { scrollbar-width: thin; scrollbar-color: #223055 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #223055; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #31477C; background-clip: padding-box; }

/* ---------- 3. 排版 ---------- */
[data-mantine-color-scheme="dark"] .mantine-Title-root { letter-spacing: 0.02em; }
[data-mantine-color-scheme="dark"] h1.mantine-Title-root { text-shadow: 0 2px 26px rgba(64, 130, 255, 0.30); }

/* ---------- 4. 应用框架：侧边栏 / 顶栏 / 主区 ---------- */
[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar {
  background: linear-gradient(180deg, rgba(13, 20, 40, 0.92) 0%, rgba(8, 13, 28, 0.94) 100%) !important;
  border-right: 1px solid rgba(64, 100, 185, 0.22) !important;
  backdrop-filter: blur(14px) saturate(1.2);
}

[data-mantine-color-scheme="dark"] .mantine-AppShell-header {
  background: linear-gradient(180deg, rgba(10, 16, 32, 0.90), rgba(10, 16, 32, 0.70)) !important;
  border-bottom: 1px solid rgba(64, 100, 185, 0.22) !important;
  backdrop-filter: blur(14px) saturate(1.2);
}

[data-mantine-color-scheme="dark"] .mantine-AppShell-main {
  background: transparent !important;
}

/* 侧边栏图标：静默灰 → 悬浮蓝光 */
[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar .mantine-ActionIcon-root {
  --ai-color: #93A5CC !important;
  --ai-hover: rgba(43, 124, 255, 0.16) !important;
  --ai-hover-color: #CFE0FF !important;
  transition: transform 0.15s ease;
}
[data-mantine-color-scheme="dark"] .mantine-AppShell-navbar .mantine-ActionIcon-root:hover { transform: scale(1.06); }

/* ---------- 5. 卡片：玻璃拟态 ---------- */
[data-mantine-color-scheme="dark"] .mantine-Card-root {
  background: linear-gradient(172deg, rgba(23, 33, 62, 0.66) 0%, rgba(12, 18, 38, 0.88) 100%) !important;
  border: 1px solid rgba(70, 105, 190, 0.20) !important;
  backdrop-filter: blur(10px);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
[data-mantine-color-scheme="dark"] .mantine-Card-root:hover {
  transform: translateY(-2px);
  border-color: rgba(70, 130, 255, 0.45) !important;
  box-shadow: 0 18px 46px -18px rgba(20, 70, 180, 0.50), 0 0 0 1px rgba(43, 124, 255, 0.12) !important;
}

/* ---------- 6. 按钮 ---------- */
/* 主按钮（默认实心变体） */
[data-mantine-color-scheme="dark"] .mantine-Button-root:not([data-variant]) {
  --button-bg: linear-gradient(135deg, #2F80FF 0%, #1D5BE0 100%) !important;
  --button-hover: linear-gradient(135deg, #3E8DFF 0%, #2266F2 100%) !important;
  --button-color: #FFFFFF !important;
  box-shadow: 0 8px 24px -10px rgba(36, 110, 255, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  font-weight: 600;
  letter-spacing: 0.03em;
}
[data-mantine-color-scheme="dark"] .mantine-Button-root:not([data-variant]):hover {
  box-shadow: 0 10px 30px -10px rgba(36, 110, 255, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

/* 次要 / 描边按钮 */
[data-mantine-color-scheme="dark"] .mantine-Button-root[data-variant="default"],
[data-mantine-color-scheme="dark"] .mantine-Button-root[data-variant="outline"] {
  background: rgba(19, 28, 52, 0.50) !important;
  border-color: rgba(80, 115, 190, 0.42) !important;
  color: #C9D6F2 !important;
}
[data-mantine-color-scheme="dark"] .mantine-Button-root[data-variant="default"]:hover,
[data-mantine-color-scheme="dark"] .mantine-Button-root[data-variant="outline"]:hover {
  background: rgba(30, 45, 80, 0.62) !important;
  border-color: rgba(100, 140, 230, 0.55) !important;
  color: #E6EDFB !important;
}

/* ---------- 7. 输入框 ---------- */
[data-mantine-color-scheme="dark"] .mantine-Input-input {
  background: rgba(9, 14, 28, 0.62) !important;
  border-color: rgba(80, 115, 190, 0.32) !important;
  color: #E6EDFB !important;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
[data-mantine-color-scheme="dark"] .mantine-Input-input:focus {
  border-color: rgba(64, 138, 255, 0.80) !important;
  box-shadow: 0 0 0 3px rgba(36, 110, 255, 0.16), 0 0 22px -6px rgba(36, 110, 255, 0.50) !important;
}
/* PasswordInput：边框在 wrapper 上 */
[data-mantine-color-scheme="dark"] .mantine-Input-wrapper:has(.mantine-PasswordInput-innerInput) {
  background: rgba(9, 14, 28, 0.62) !important;
  border-color: rgba(80, 115, 190, 0.32) !important;
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}
[data-mantine-color-scheme="dark"] .mantine-Input-wrapper:has(.mantine-PasswordInput-innerInput):focus-within {
  border-color: rgba(64, 138, 255, 0.80) !important;
  box-shadow: 0 0 0 3px rgba(36, 110, 255, 0.16), 0 0 22px -6px rgba(36, 110, 255, 0.50) !important;
}
[data-mantine-color-scheme="dark"] .mantine-PasswordInput-innerInput { background: transparent !important; }

/* ---------- 8. 徽标 / 表格 / 弹层 ---------- */
[data-mantine-color-scheme="dark"] .mantine-Badge-root {
  letter-spacing: 0.06em;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.10);
}

[data-mantine-color-scheme="dark"] .mantine-Table-root thead th,
[data-mantine-color-scheme="dark"] .mantine-Table-th {
  background: rgba(20, 30, 56, 0.60) !important;
  color: #AFC0E4 !important;
}

[data-mantine-color-scheme="dark"] .mantine-Modal-content,
[data-mantine-color-scheme="dark"] .mantine-Popover-dropdown,
[data-mantine-color-scheme="dark"] .mantine-Menu-dropdown {
  background: linear-gradient(172deg, rgba(23, 33, 62, 0.96) 0%, rgba(12, 18, 38, 0.98) 100%) !important;
  border: 1px solid rgba(70, 105, 190, 0.28) !important;
  box-shadow: 0 24px 60px -20px rgba(0, 8, 30, 0.9) !important;
}

/* ---------- 9. 登录 / 注册：玻璃卡片 + 品牌区重排 ---------- */
[data-mantine-color-scheme="dark"] .mantine-Center-root { background: transparent !important; }

[data-mantine-color-scheme="dark"] .mantine-Center-root > .mantine-Stack-root:has(form) {
  position: relative;
  width: min(27rem, 92vw);
  padding: 46px 46px 40px !important;
  background: linear-gradient(168deg, rgba(25, 36, 68, 0.82) 0%, rgba(10, 16, 34, 0.92) 100%) !important;
  border: 1px solid rgba(80, 120, 210, 0.26) !important;
  border-radius: 20px !important;
  box-shadow:
    0 30px 80px -28px rgba(0, 8, 30, 0.90),
    0 0 60px -30px rgba(43, 124, 255, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px) saturate(1.25);
}
/* 卡片顶部光带 */
[data-mantine-color-scheme="dark"] .mantine-Center-root > .mantine-Stack-root:has(form)::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 148, 255, 0.9), transparent);
}

/* 品牌区：logo 与标题纵向居中 */
[data-mantine-color-scheme="dark"] .mantine-Center-root > .mantine-Stack-root:has(form) > .mantine-Group-root {
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
/* 大 Logo */
[data-mantine-color-scheme="dark"] .mantine-Center-root > .mantine-Stack-root:has(form) img.mantine-Image-root {
  height: 78px !important;
  width: 78px !important;
  filter: drop-shadow(0 10px 32px rgba(43, 124, 255, 0.55));
}
/* 标题：居中等宽大字 */
[data-mantine-color-scheme="dark"] .mantine-Center-root > .mantine-Stack-root:has(form) .mantine-Title-root {
  text-align: center;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-shadow: 0 2px 30px rgba(64, 130, 255, 0.45);
}
/* 英文眉标（标题上方） */
[data-mantine-color-scheme="dark"] .mantine-Center-root > .mantine-Stack-root:has(form) .mantine-Title-root::before {
  content: "CYBER SECURITY TRAINING & COMPETITION PLATFORM";
  display: block;
  margin-bottom: 10px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: #6C81A8;
  text-shadow: none;
}
/* 中文标语（标题下方） */
[data-mantine-color-scheme="dark"] .mantine-Center-root > .mantine-Stack-root:has(form) .mantine-Title-root::after {
  content: "以攻促防 · 实战砺兵";
  display: block;
  margin-top: 12px;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  color: #7E93BE;
  text-shadow: none;
}

/* ---------- 10. 品牌启动屏（首屏加载动画） ---------- */
#gz-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(1200px 800px at 82% -10%, rgba(30, 111, 255, 0.20), transparent 60%),
    radial-gradient(900px 640px at -8% 108%, rgba(24, 203, 158, 0.10), transparent 55%),
    linear-gradient(180deg, #070D1C 0%, #0A1122 55%, #070911 100%);
  transition: opacity 0.55s ease, visibility 0.55s ease;
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", -apple-system, sans-serif;
}
body:has(#root > div) #gz-splash,
#gz-splash.gz-hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.gz-splash-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: gzRise 0.7s ease both;
}
.gz-splash-logo-wrap {
  width: 96px;
  height: 96px;
  animation: gzPulse 2.4s ease-in-out infinite;
}
.gz-splash-logo-wrap img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 34px rgba(43, 124, 255, 0.55));
}
.gz-splash-title {
  margin-top: 26px;
  font-size: 26px;
  font-weight: 700;
  color: #EAF1FF;
  letter-spacing: 0.12em;
  text-shadow: 0 2px 30px rgba(64, 130, 255, 0.35);
}
.gz-splash-sub {
  margin-top: 12px;
  font-size: 13px;
  color: #7E93BE;
  letter-spacing: 0.5em;
  padding-left: 0.5em;
}
.gz-splash-bar {
  margin-top: 34px;
  width: 220px;
  height: 4px;
  border-radius: 4px;
  background: rgba(70, 100, 170, 0.22);
  overflow: hidden;
}
.gz-splash-bar i {
  display: block;
  height: 100%;
  width: 42%;
  border-radius: 4px;
  background: linear-gradient(90deg, #2F80FF, #18CB9E);
  animation: gzSweep 1.35s ease-in-out infinite;
}
@keyframes gzSweep { 0% { transform: translateX(-110%); } 100% { transform: translateX(360%); } }
@keyframes gzPulse { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } }
@keyframes gzRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* ---------- 11. 品牌清洁与免邮箱 ---------- */
a[href="/about"] {
  display: none !important;
}
/* 无邮件服务：隐藏「忘记密码」入口 */
a[href="/account/recovery"] {
  display: none !important;
}
/* 注册/资料页：隐藏邮箱输入项（由脚本自动填充 用户名@dgctf.local） */
.mantine-InputWrapper-root:has(input[type="email"]) {
  display: none !important;
}

/* ---------- 12. 应用顶栏品牌行 ---------- */
[data-mantine-color-scheme="dark"] .mantine-AppShell-header img.mantine-Image-root {
  height: 44px !important;
  width: 44px !important;
  filter: drop-shadow(0 6px 18px rgba(43, 124, 255, 0.45));
}
[data-mantine-color-scheme="dark"] .mantine-AppShell-header .mantine-Title-root {
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  text-shadow: 0 2px 24px rgba(64, 130, 255, 0.35);
}

/* ---------- 初赛理论 · 选择题前端层 ---------- */
.mcq-native-flag-form { display: none !important; }
.mcq-box {
  margin: 14px 0 4px;
  padding: 16px;
  border: 1px solid rgba(78, 144, 255, 0.30);
  border-radius: 14px;
  background: linear-gradient(172deg, rgba(23, 33, 62, 0.76) 0%, rgba(12, 18, 38, 0.92) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}
.mcq-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mcq-badge {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: #CFE0FF; background: rgba(30, 111, 255, .18);
  border: 1px solid rgba(78, 144, 255, .42);
}
.mcq-meta { color: #8FA0C4; font-size: 12px; }
.mcq-options { display: grid; gap: 9px; }
.mcq-option {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; border-radius: 11px; cursor: pointer;
  border: 1px solid rgba(80, 115, 190, .28);
  background: rgba(9, 14, 28, .46);
  color: #DCE5F5; transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.mcq-option:hover { border-color: rgba(78, 144, 255, .62); background: rgba(30, 45, 80, .56); transform: translateY(-1px); }
.mcq-option.is-selected { border-color: rgba(78, 144, 255, .90); background: rgba(30, 111, 255, .16); box-shadow: 0 0 0 1px rgba(78,144,255,.25); }
.mcq-option input { position: absolute; opacity: 0; pointer-events: none; }
.mcq-letter {
  flex: 0 0 26px; width: 26px; height: 26px; line-height: 26px; text-align: center;
  border-radius: 8px; font-weight: 700; font-size: 13px;
  color: #BFD2F5; background: rgba(48, 70, 120, .55); border: 1px solid rgba(100, 140, 220, .30);
}
.mcq-option.is-selected .mcq-letter { color: #fff; background: #1E6FFF; border-color: #4E90FF; }
.mcq-text { padding-top: 2px; line-height: 1.55; font-size: 14px; }
.mcq-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 13px; }
.mcq-submit {
  border: 0; border-radius: 9px; padding: 9px 20px; cursor: pointer;
  color: #fff; font-weight: 700; font-size: 14px;
  background: linear-gradient(135deg, #2F80FF 0%, #1D5BE0 100%);
  box-shadow: 0 8px 24px -10px rgba(36,110,255,.65);
}
.mcq-submit:disabled { opacity: .48; cursor: not-allowed; box-shadow: none; }
.mcq-status { font-size: 13px; color: #8FA0C4; }
.mcq-status.is-pending { color: #A6C8FF; }
.mcq-status.is-ok { color: #4fe0b0; }
.mcq-status.is-wrong { color: #ff8a98; }
.mcq-box.is-accepted { border-color: rgba(47, 210, 160, .45); }