/* =========================================================================
   LLM 全栈控制台 — 视觉优化
   风格：深空控制台 / 深色玻璃拟态 + 极光渐变 + 电光青点缀
   -------------------------------------------------------------------------
   1. 字体与基础变量
   2. 极光背景与噪点质感
   3. 信息组件区（标题 / 搜索 / 时间）
   4. 服务卡片（玻璃拟态 + 悬浮抬升）
   5. 分组标题（等宽小标签）
   6. 状态灯 / 标签
   7. 搜索对话框
   8. 登录页（弹窗化浮层）
   9. 响应式与动效降级
   ========================================================================= */

/* ── 1. 字体与基础变量 ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

:root {
  /* 电光青主色 */
  --hp-cyan: 94 234 212;
  --hp-cyan-strong: 45 212 191;
  --hp-violet: 167 139 250;
  --hp-amber: 251 191 36;
  --hp-rose: 251 113 133;

  /* 玻璃层 */
  --hp-glass: 255 255 255;
  --hp-glass-a: 0.04;
  --hp-glass-b: 0.07;
  --hp-stroke: 255 255 255;

  --hp-font-display: 'Chakra Petch', 'Noto Sans SC', sans-serif;
  --hp-font-body: 'Noto Sans SC', 'Chakra Petch', sans-serif;
  --hp-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* 背景层 */
  --hp-bg-deep: 9 12 20;
  --hp-bg-mid: 15 20 32;
}

/* ── 2. 极光背景与噪点质感 ──────────────────────────────────────────── */
html {
  background-color: rgb(var(--hp-bg-deep)) !important;
}

body {
  font-family: var(--hp-font-body) !important;
  font-weight: 300;
  letter-spacing: 0.01em;
  position: relative;
}

/* 极光光斑：三层不同色相的弥散渐变，营造深空感 */
body::before {
  content: '';
  position: fixed;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgb(45 212 191 / 0.16) 0%, transparent 62%),
    radial-gradient(42% 36% at 88% 4%, rgb(167 139 250 / 0.15) 0%, transparent 64%),
    radial-gradient(50% 42% at 50% 100%, rgb(59 130 246 / 0.12) 0%, transparent 70%);
  filter: blur(28px);
  animation: hp-drift 26s ease-in-out infinite alternate;
}

/* 网格纹理：给大面积留白一点工程感 */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image:
    linear-gradient(rgb(148 163 184 / 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(148 163 184 / 0.055) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 30%, transparent 78%);
}

@keyframes hp-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
  100% { transform: translate3d(2%, -1%, 0) scale(1.02); }
}

#page_wrapper {
  position: relative;
  z-index: 1;
}

/* ── 3. 信息组件区 ──────────────────────────────────────────────────── */
#information-widgets {
  border-bottom: 1px solid rgb(148 163 184 / 0.16) !important;
  padding-bottom: 1.1rem !important;
  margin-bottom: 0.25rem !important;
  align-items: center !important;
}

/* 标题（greeting）：显示字体 + 渐变 */
.information-widget-greeting span,
.widget-container.information-widget-greeting {
  font-family: var(--hp-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  background: linear-gradient(135deg, rgb(226 232 240) 0%, rgb(94 234 212) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 1.35rem !important;
}

/* 时间：等宽数字 */
.information-widget-datetime span,
.widget-container.information-widget-datetime {
  font-family: var(--hp-font-mono) !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em !important;
  color: rgb(148 163 184 / 0.9) !important;
  font-size: 0.9rem !important;
}

/* 搜索框 */
.information-widget-search input[type='text'] {
  background: rgb(var(--hp-glass) / 0.05) !important;
  border: 1px solid rgb(var(--hp-stroke) / 0.12) !important;
  border-radius: 12px !important;
  color: rgb(226 232 240) !important;
  font-family: var(--hp-font-body) !important;
  font-size: 0.82rem !important;
  height: 2.2rem !important;
  padding-left: 2rem !important;
  padding-right: 2.4rem !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.information-widget-search input[type='text']:focus {
  outline: none !important;
  border-color: rgb(var(--hp-cyan) / 0.5) !important;
  background: rgb(var(--hp-glass) / 0.08) !important;
  box-shadow: 0 0 0 3px rgb(var(--hp-cyan) / 0.12);
}

.information-widget-search input::placeholder {
  color: rgb(148 163 184 / 0.65) !important;
}

/* 搜索下拉按钮 */
.information-widget-search button {
  background: rgb(var(--hp-cyan) / 0.12) !important;
  border-radius: 0 10px 10px 0 !important;
  color: rgb(var(--hp-cyan)) !important;
  transition: background 0.25s ease;
}

.information-widget-search button:hover {
  background: rgb(var(--hp-cyan) / 0.22) !important;
}

/* 搜索框容器：限制宽度，避免顶栏被撑开 */
.information-widget-search {
  flex: 0 0 auto !important;
}

.information-widget-search > div {
  min-width: 0 !important;
  width: 14rem !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.information-widget-search input[type='text'] {
  width: 100% !important;
}

/* ── 4. 服务卡片 ────────────────────────────────────────────────────── */
.service-card {
  background: rgb(var(--hp-glass) / var(--hp-glass-a)) !important;
  border: 1px solid rgb(var(--hp-stroke) / 0.09) !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.2), 0 8px 24px -12px rgb(0 0 0 / 0.5) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.3s ease,
              box-shadow 0.3s ease,
              background 0.3s ease !important;
  position: relative;
  overflow: hidden;
}

/* 顶部微光描边：悬浮时从左向右点亮 */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--hp-cyan) / 0.85), transparent);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.service:hover .service-card,
.service-card:hover {
  transform: translateY(-3px) !important;
  background: rgb(var(--hp-glass) / var(--hp-glass-b)) !important;
  border-color: rgb(var(--hp-cyan) / 0.28) !important;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.25),
              0 18px 40px -18px rgb(0 0 0 / 0.7),
              0 0 0 1px rgb(var(--hp-cyan) / 0.08) !important;
}

.service:hover .service-card::before,
.service-card:hover::before {
  opacity: 1;
}

.service-name {
  font-family: var(--hp-font-body) !important;
  font-weight: 500 !important;
  color: rgb(226 232 240) !important;
  letter-spacing: 0.01em !important;
}

.service-description {
  font-family: var(--hp-font-body) !important;
  font-weight: 300 !important;
  color: rgb(148 163 184 / 0.85) !important;
  line-height: 1.45 !important;
}

/* 图标：加一层微弱辉光，避免扁平 */
.service-icon img {
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.45));
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), filter 0.3s ease;
}

.service:hover .service-icon img {
  transform: scale(1.08);
  filter: drop-shadow(0 4px 12px rgb(var(--hp-cyan) / 0.35));
}

/* ── 5. 分组标题 ────────────────────────────────────────────────────── */
.service-group-name {
  font-family: var(--hp-font-display) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  color: rgb(148 163 184 / 0.75) !important;
  position: relative;
  padding-left: 0.75rem;
  line-height: 1.35 !important;
  transition: color 0.25s ease;
  /* 长标题单行省略，避免顶高分组行 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 悬停时展开完整标题 */
.services-group:hover .service-group-name {
  overflow: visible;
  text-overflow: clip;
}

.service-group-name::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 1.05em;
  border-radius: 2px;
  background: linear-gradient(180deg, rgb(var(--hp-cyan)), rgb(var(--hp-violet)));
  box-shadow: 0 0 10px rgb(var(--hp-cyan) / 0.5);
}

.services-group:hover .service-group-name {
  color: rgb(226 232 240) !important;
}

/* ── 6. 状态灯与标签 ────────────────────────────────────────────────── */

/* 隐藏书签栏：无论 config/bookmarks.yaml 里配了什么都不显示 */
#bookmarks {
  display: none !important;
}

.ping-status {
  border-radius: 999px !important;
  font-family: var(--hp-font-mono) !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem !important;
  border: 1px solid transparent;
}

/* 在线：青色 */
.ping-up {
  color: rgb(var(--hp-cyan)) !important;
  background: rgb(var(--hp-cyan) / 0.1) !important;
  border-color: rgb(var(--hp-cyan) / 0.25) !important;
}

/* 离线：玫红 */
.ping-down {
  color: rgb(var(--hp-rose)) !important;
  background: rgb(var(--hp-rose) / 0.1) !important;
  border-color: rgb(var(--hp-rose) / 0.25) !important;
}

.service-tag {
  font-family: var(--hp-font-mono) !important;
  font-size: 0.66rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* ── 7. 搜索对话框 ──────────────────────────────────────────────────── */
dialog {
  background: rgb(15 20 32 / 0.92) !important;
  border: 1px solid rgb(var(--hp-stroke) / 0.12) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: 0 24px 80px -20px rgb(0 0 0 / 0.8) !important;
}

dialog::backdrop {
  background: rgb(4 6 12 / 0.72) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* ── 8. 登录页：改造成居中浮层卡片（观感即弹窗） ───────────────────── */
#__next > main {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem 1.25rem !important;
}

/* 登录页背后的极光氛围 */
body:has(#__next > main) {
  background:
    radial-gradient(45% 38% at 50% 12%, rgb(45 212 191 / 0.14) 0%, transparent 62%),
    radial-gradient(50% 42% at 50% 92%, rgb(167 139 250 / 0.13) 0%, transparent 68%),
    rgb(var(--hp-bg-deep)) !important;
}

#__next > main > div {
  max-width: 26rem !important;
  border-radius: 24px !important;
  border: 1px solid rgb(var(--hp-stroke) / 0.12) !important;
  background: rgb(15 20 32 / 0.78) !important;
  backdrop-filter: blur(26px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(150%) !important;
  box-shadow: 0 30px 90px -28px rgb(0 0 0 / 0.85),
              0 0 0 1px rgb(var(--hp-cyan) / 0.06) !important;
  padding: 2.25rem 2rem !important;
  text-align: center;
  animation: hp-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 登录页内部改成单列堆叠 */
#__next > main > div > div.grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 1.75rem !important;
  padding: 0 !important;
}

#__next > main > div > div.grid > section {
  gap: 1rem !important;
}

/* 徽章「Login Required」：改成青色胶囊，带锁形图标 */
#__next > main > div > div.grid > section:first-child > div > div {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  background: rgb(var(--hp-cyan) / 0.1) !important;
  border: 1px solid rgb(var(--hp-cyan) / 0.28) !important;
  color: rgb(var(--hp-cyan)) !important;
  border-radius: 999px !important;
  padding: 0.35rem 0.85rem !important;
  font-family: var(--hp-font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* 前置锁图标：登录页不加载 custom.js，用 Unicode 锁字符最可靠 */
#__next > main > div > div.grid > section:first-child > div > div::before {
  content: '\1F512';
  font-size: 0.8rem;
  line-height: 1;
  flex: none;
  opacity: 0.9;
}

#__next > main > div > div.grid > section:first-child > div {
  align-items: center !important;
}

#__next > main > div > div.grid > section:first-child h1 {
  font-family: var(--hp-font-display) !important;
  font-weight: 600 !important;
  font-size: 1.6rem !important;
  letter-spacing: 0.01em !important;
  background: linear-gradient(135deg, rgb(226 232 240) 0%, rgb(94 234 212) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#__next > main > div > div.grid > section:first-child p {
  color: rgb(148 163 184 / 0.9) !important;
  font-family: var(--hp-font-body) !important;
}

#__next > main > div > div.grid > section:last-child > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  text-align: left;
}

#__next > main > div > div.grid > section:last-child h2 {
  display: none;
}

#__next > main > div > div.grid > section:last-child label {
  font-family: var(--hp-font-mono) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
  color: rgb(148 163 184 / 0.8) !important;
  margin-bottom: 0.5rem !important;
}

#__next > main > div > div.grid > section:last-child input[type='password'] {
  background: rgb(var(--hp-glass) / 0.05) !important;
  border: 1px solid rgb(var(--hp-stroke) / 0.14) !important;
  border-radius: 12px !important;
  color: rgb(226 232 240) !important;
  font-family: var(--hp-font-body) !important;
  padding: 0.8rem 1rem !important;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

#__next > main > div > div.grid > section:last-child input[type='password']:focus {
  outline: none !important;
  border-color: rgb(var(--hp-cyan) / 0.55) !important;
  background: rgb(var(--hp-glass) / 0.08) !important;
  box-shadow: 0 0 0 3px rgb(var(--hp-cyan) / 0.14);
}

#__next > main > div > div.grid > section:last-child button[type='submit'] {
  background: linear-gradient(135deg, rgb(45 212 191), rgb(20 184 166)) !important;
  border-radius: 12px !important;
  font-family: var(--hp-font-display) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 10px 30px -12px rgb(45 212 191 / 0.7) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

#__next > main > div > div.grid > section:last-child button[type='submit']:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 16px 40px -14px rgb(45 212 191 / 0.85) !important;
  filter: brightness(1.08);
}

@keyframes hp-rise {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── 9. 响应式与动效降级 ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .service-group-name { font-size: 1rem !important; }
  body > main > div > div.grid > section:first-child h1 { font-size: 1.35rem !important; }
  body::before { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 滚动条：深色细条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: rgb(15 20 32); }
::-webkit-scrollbar-thumb {
  background: rgb(148 163 184 / 0.25);
  border-radius: 999px;
  border: 2px solid rgb(15 20 32);
}
::-webkit-scrollbar-thumb:hover { background: rgb(var(--hp-cyan) / 0.45); }