/* ===== 星轨库 Stellar · 二次元少女风皮肤 ===== */
/* 注入方式：OpenList 设置 customize_head。
   核心思路：用 CSS :has(input[name="username"]) 精确命中登录页容器，
   避免样式泄漏到文件管理器、后台设置等其它页面。 */

@font-face {
  font-family: "ZCOOLKuaiLe";
  src: url("/_skin/fonts/title.ttf") format("truetype");
  font-display: swap;
}

:root {
  --stellar-pink: #ff8fc7;
  --stellar-purple: #b69cff;
  --stellar-deep: #6a4ea3;
}

/* ---------- 全站轻量统一底色（文件管理页等） ---------- */
body.hope-ui-light {
  background: linear-gradient(135deg, #fff5fb 0%, #f6f1ff 60%, #eef6ff 100%) fixed !important;
}

h1.hope-heading,
h2.hope-heading,
h3.hope-heading {
  font-family: "ZCOOLKuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif !important;
}

::selection { background: rgba(255, 143, 199, 0.3) !important; }

/* ---------- 登录页整体容器（:has 精确限定，不影响其它路由） ---------- */
#root > div:has(input[name="username"]) {
  min-height: 100vh !important;
  background:
    /* 右下角水印柔化遮罩 */
    radial-gradient(ellipse 70% 60% at 100% 100%, rgba(250, 238, 248, 0.6), transparent 55%),
    /* 粉紫氛围光 */
    radial-gradient(1200px 600px at 12% 8%, rgba(255, 160, 220, 0.28), transparent 60%),
    radial-gradient(900px 500px at 88% 92%, rgba(150, 140, 255, 0.24), transparent 60%),
    /* 半透浅色罩，让星轨图若隐若现 */
    linear-gradient(160deg, rgba(251, 233, 246, 0.55) 0%, rgba(239, 230, 255, 0.55) 55%, rgba(230, 240, 255, 0.55) 100%),
    url("/_skin/bg-stellar.png") center / cover no-repeat !important;
  background-attachment: fixed !important;
  overflow: hidden !important;
  position: relative !important;
}

/* 隐藏 OpenList 默认蓝色 blob 装饰（只限登录页） */
#root > div:has(input[name="username"]) div[class*="ieMfKuk"],
#root > div:has(input[name="username"]) div[class*="igjRXTJ"] {
  display: none !important;
}

/* ---------- 登录卡片（毛玻璃） ---------- */
#root > div:has(input[name="username"]) > div {
  position: relative !important;
  z-index: 2 !important;
  width: min(420px, 92vw) !important;
  margin: 0 auto !important;
  padding: 40px 38px 34px !important;
  background: rgba(255, 255, 255, 0.78) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.65) !important;
  border-radius: 28px !important;
  box-shadow:
    0 24px 70px rgba(196, 120, 180, 0.32),
    0 2px 10px rgba(150, 120, 220, 0.18) !important;
  animation: stellar-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}

@keyframes stellar-in {
  from { opacity: 0; transform: translateY(22px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* 隐藏默认小 logo（标题已承载品牌） */
#root > div:has(input[name="username"]) img.hope-image {
  display: none !important;
}

/* ---------- 标题 ---------- */
#root > div:has(input[name="username"]) h2.hope-heading {
  font-family: "ZCOOLKuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 30px !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-align: center !important;
  background: linear-gradient(120deg, var(--stellar-pink), var(--stellar-purple), var(--stellar-deep)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: var(--stellar-pink) !important;
  margin: 4px 0 26px !important;
  text-shadow: none !important;
}

/* ---------- 输入框 ---------- */
#root > div:has(input[name="username"]) input.hope-input {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  font-size: 15px !important;
  color: #5a4a6a !important;
  background: rgba(255, 255, 255, 0.9) !important;
  border: 1.6px solid #f3c9e4 !important;
  border-radius: 14px !important;
  padding: 12px 16px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-shadow: 0 1px 4px rgba(214, 160, 200, 0.12) !important;
}
#root > div:has(input[name="username"]) input.hope-input::placeholder {
  color: #c3a9c4 !important;
}
#root > div:has(input[name="username"]) input.hope-input:focus,
#root > div:has(input[name="username"]) input.hope-input:focus-visible {
  outline: none !important;
  border-color: var(--stellar-pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 143, 199, 0.18) !important;
}

/* 输入框/元素之间间距 */
#root > div:has(input[name="username"]) > div > * + * {
  margin-top: 16px !important;
}

/* ---------- 按钮 ---------- */
#root > div:has(input[name="username"]) .hope-button {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.5px !important;
  color: #fff !important;
  background: linear-gradient(135deg, #ff9ed2 0%, #c9a0ff 100%) !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 22px !important;
  box-shadow: 0 8px 22px rgba(201, 160, 255, 0.4) !important;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease !important;
}
#root > div:has(input[name="username"]) .hope-button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 12px 28px rgba(201, 160, 255, 0.5) !important;
}
#root > div:has(input[name="username"]) .hope-button:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 链接文字（忘记密码等） */
#root > div:has(input[name="username"]) a {
  color: var(--stellar-deep) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
}
#root > div:has(input[name="username"]) a:hover {
  color: var(--stellar-pink) !important;
}

/* 复选框标签 */
#root > div:has(input[name="username"]) label {
  color: #7a6a8a !important;
  font-size: 13px !important;
}

/* ---------- 滚动条 ---------- */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffb3da, #c9a0ff) !important;
  border-radius: 10px !important;
  border: 2px solid transparent !important;
  background-clip: content-box !important;
}
*::-webkit-scrollbar-track { background: transparent !important; }

/* ===== 星轨库 · 文件管理器内部美化 ===== */
/* 作用范围：登录后的文件管理页 / 后台设置 / 空状态页。
   不影响登录页：登录页使用更具体的 :has(input[name="username"]) 限定，
   优先级更高，会覆盖这里的通用组件样式。 */

/* ---------- 通用组件 ---------- */

/* 按钮：粉紫渐变，圆角柔和 */
.hope-button {
  font-family: "PingFang SC", "Microsoft YaHei", system-ui, sans-serif !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important;
}
#root > div:not(:has(input[name="username"])) .hope-button {
  background: linear-gradient(135deg, #ff9ed2 0%, #c9a0ff 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(201, 160, 255, .35) !important;
}
#root > div:not(:has(input[name="username"])) .hope-button:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.05) !important;
  box-shadow: 0 10px 26px rgba(201, 160, 255, .48) !important;
}
#root > div:not(:has(input[name="username"])) .hope-button:active {
  transform: translateY(0) scale(.98) !important;
}
/* 图标按钮用透明背景，避免强渐变 */
#root > div:not(:has(input[name="username"])) .hope-icon-button {
  background: transparent !important;
  color: var(--stellar-deep) !important;
  box-shadow: none !important;
}
#root > div:not(:has(input[name="username"])) .hope-icon-button:hover {
  background: rgba(255, 143, 199, .12) !important;
  color: var(--stellar-pink) !important;
}

/* 输入框：圆角粉紫光晕 */
.hope-input {
  border-radius: 12px !important;
  border: 1.5px solid #f3c9e4 !important;
  background: rgba(255, 255, 255, .88) !important;
  color: #5a4a6a !important;
  transition: all .2s ease !important;
}
.hope-input:focus,
.hope-input:focus-visible {
  border-color: var(--stellar-pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 143, 199, .18) !important;
  outline: none !important;
}
.hope-input::placeholder { color: #c3a9c4 !important; }

/* 链接 */
#root > div:not(:has(input[name="username"])) a,
.hope-link {
  color: var(--stellar-deep) !important;
  text-decoration: none !important;
  transition: color .15s !important;
}
#root > div:not(:has(input[name="username"])) a:hover,
.hope-link:hover { color: var(--stellar-pink) !important; }

/* ---------- 文件管理器整体背景 ---------- */
#root > div:not(:has(input[name="username"])) {
  background: linear-gradient(135deg, #fff5fb 0%, #f6f1ff 60%, #eef6ff 100%) fixed !important;
}

/* ---------- 顶栏 / 导航栏 ---------- */
#root > div:not(:has(input[name="username"])) header,
#root > div:not(:has(input[name="username"])) nav,
#root > div:not(:has(input[name="username"])) .hope-flex:first-of-type {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .65) !important;
  box-shadow: 0 4px 20px rgba(180, 140, 200, .12) !important;
}

/* ---------- 侧边栏 ---------- */
#root > div:not(:has(input[name="username"])) aside {
  background: rgba(255, 255, 255, .55) !important;
  backdrop-filter: blur(14px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(130%) !important;
  border-right: 1px solid rgba(255, 255, 255, .6) !important;
}

/* ---------- 卡片 / 内容区 / 空状态容器 ---------- */
#root > div:not(:has(input[name="username"])) .hope-card,
#root > div:not(:has(input[name="username"])) .hope-box,
#root > div:not(:has(input[name="username"])) .hope-center {
  background: rgba(255, 255, 255, .78) !important;
  backdrop-filter: blur(12px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(120%) !important;
  border: 1px solid rgba(255, 255, 255, .65) !important;
  border-radius: 22px !important;
  box-shadow: 0 12px 34px rgba(180, 140, 210, .14) !important;
}

/* ---------- 表格 ---------- */
#root > div:not(:has(input[name="username"])) .hope-table {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, .72) !important;
  box-shadow: 0 8px 28px rgba(180, 140, 210, .12) !important;
}
#root > div:not(:has(input[name="username"])) .hope-table th {
  background: linear-gradient(135deg, rgba(255, 158, 210, .18), rgba(201, 160, 255, .18)) !important;
  color: #5a4a6a !important;
  font-weight: 600 !important;
}
#root > div:not(:has(input[name="username"])) .hope-table tr:hover td {
  background: rgba(255, 143, 199, .08) !important;
}

/* ---------- 空状态页（无存储时） ---------- */
#root > div:not(:has(input[name="username"])) img[src*="/_skin/logo.svg"],
#root > div:not(:has(input[name="username"])) .hope-center img.hope-image {
  width: 120px !important;
  height: 120px !important;
  filter: drop-shadow(0 8px 20px rgba(201, 160, 255, .45)) !important;
  animation: stellar-float 3.2s ease-in-out infinite !important;
}
@keyframes stellar-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
#root > div:not(:has(input[name="username"])) .hope-center h2.hope-heading,
#root > div:not(:has(input[name="username"])) .hope-center .hope-heading {
  font-family: "ZCOOLKuaiLe", "PingFang SC", "Microsoft YaHei", sans-serif !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  background: linear-gradient(120deg, var(--stellar-pink), var(--stellar-purple), var(--stellar-deep)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
#root > div:not(:has(input[name="username"])) .hope-center .hope-text,
#root > div:not(:has(input[name="username"])) .hope-center p {
  color: #7a6a8a !important;
  font-size: 14px !important;
}

/* ---------- 菜单 / 下拉 / 模态 ---------- */
#root > div:not(:has(input[name="username"])) [role="menu"],
#root > div:not(:has(input[name="username"])) [role="dialog"],
#root > div:not(:has(input[name="username"])) .hope-modal__content,
#root > div:not(:has(input[name="username"])) .hope-menu__content {
  background: rgba(255, 255, 255, .88) !important;
  backdrop-filter: blur(16px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(180, 140, 210, .22) !important;
}

/* ---------- 加载 / Spin ---------- */
#root > div:not(:has(input[name="username"])) .hope-spinner,
#root > div:not(:has(input[name="username"])) svg[class*="spinner"] {
  color: var(--stellar-pink) !important;
}

/* ---------- 选中 / 焦点 / 高亮 ---------- */
#root > div:not(:has(input[name="username"])) [data-selected="true"],
#root > div:not(:has(input[name="username"])) [aria-selected="true"] {
  background: rgba(255, 143, 199, .12) !important;
  color: var(--stellar-deep) !important;
  border-radius: 10px !important;
}

/* ---------- 提示 / Toast / Alert ---------- */
#root > div:not(:has(input[name="username"])) [role="alert"] {
  border-radius: 14px !important;
  box-shadow: 0 8px 24px rgba(180, 140, 210, .2) !important;
}

/* ---------- 顶栏搜索框 ---------- */
#root > div:not(:has(input[name="username"])) input[type="search"].hope-input,
#root > div:not(:has(input[name="username"])) input.hope-input[placeholder*="搜索"] {
  background: rgba(255, 255, 255, .92) !important;
  border-radius: 999px !important;
  padding-left: 18px !important;
  border: 1.5px solid #f3c9e4 !important;
}