/* 用户后台（console.shenhuazz.com）的神话皮肤。
   后台用的是 new-api 自带界面，这里不改它的结构，只覆盖它的主题变量（颜色、字体、圆角），再给背景、卡片、主按钮和标题补几条样式，
   让它和前台 relay.html 的“暗夜星图”一个调子。由 nginx 注入到页面里，new-api 升级不受影响；升级后个别新组件没被照顾到时在这里补。
   配色取自 relay.html 的 :root（深色）和 :root[data-theme="light"]（浅色）。 */
@import url("/_skin/fonts/fonts.css");

/* ---------- 深色：深空底、星白正文、淡金主色 ---------- */
html.dark, html.dark [data-theme-preset] {
  color-scheme: dark;
  --background: #0b1020 !important;
  --foreground: #d5dbe9 !important;
  --card: #121a2f !important;
  --card-foreground: #d5dbe9 !important;
  --popover: #162038 !important;
  --popover-foreground: #d5dbe9 !important;
  --primary: #d9b25e !important;
  --primary-foreground: #0a0e1a !important;
  --secondary: #1a2440 !important;
  --secondary-foreground: #f0d08a !important;
  --muted: #151d34 !important;
  --muted-foreground: #9ea8c0 !important;
  --accent: #1d2746 !important;
  --accent-foreground: #ece3cc !important;
  --destructive: #ff7b72 !important;
  --destructive-foreground: #0a0e1a !important;
  --success: #5fd39a !important;
  --success-foreground: #0a0e1a !important;
  --warning: #f2b552 !important;
  --warning-foreground: #0a0e1a !important;
  --info: #6fcbff !important;
  --info-foreground: #0a0e1a !important;
  --neutral: #7f8aa6 !important;
  --neutral-foreground: #0a0e1a !important;
  --border: rgba(150,175,235,.16) !important;
  --input: rgba(150,175,235,.24) !important;
  --ring: #e6bd62 !important;
  --chart-1: #e6bd62 !important;
  --chart-2: #5ee7ff !important;
  --chart-3: #a78bfa !important;
  --chart-4: #ff8fb0 !important;
  --chart-5: #5fd39a !important;
  --overview-accent-1: #e6bd62 !important;
  --overview-accent-2: #5ee7ff !important;
  --overview-accent-3: #a78bfa !important;
  --sidebar: #0d1324 !important;
  --sidebar-foreground: #c3cbdd !important;
  --sidebar-primary: #e6bd62 !important;
  --sidebar-primary-foreground: #0a0e1a !important;
  --sidebar-accent: #172040 !important;
  --sidebar-accent-foreground: #f0d08a !important;
  --sidebar-border: rgba(150,175,235,.14) !important;
  --sidebar-ring: #e6bd62 !important;
  --skeleton-base: #131b31 !important;
  --skeleton-highlight: #1d2848 !important;
  --mx-title: #e6dcc2;
  --mx-glass: linear-gradient(180deg, rgba(24,33,58,.9), rgba(18,25,45,.92));
  --mx-line: rgba(150,175,235,.14);
  --mx-sky: radial-gradient(120% 80% at 50% -10%, #16213f 0%, #0d1326 50%, #0b1020 100%);
  --mx-stars: radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,.55) 50%, transparent 51%), radial-gradient(1px 1px at 70% 15%, rgba(255,255,255,.4) 50%, transparent 51%), radial-gradient(1.5px 1.5px at 45% 70%, rgba(246,223,164,.5) 50%, transparent 51%), radial-gradient(1px 1px at 85% 60%, rgba(94,231,255,.45) 50%, transparent 51%), radial-gradient(1px 1px at 10% 85%, rgba(255,255,255,.35) 50%, transparent 51%);
  --mx-btn: linear-gradient(180deg, #e3c57c, #cfa650);
  --mx-btn-glow: 0 0 0 1px rgba(217,178,94,.4), 0 6px 18px -12px rgba(217,178,94,.5);
}

/* ---------- 浅色：象牙纸底、深褐墨色正文、古金点缀。底色比卡片深一档，卡片才浮得起来 ---------- */
html:not(.dark), html:not(.dark) [data-theme-preset] {
  color-scheme: light;
  --background: #eee6d5 !important;
  --foreground: #2e2219 !important;
  --card: #fdfaf3 !important;
  --card-foreground: #2e2219 !important;
  --popover: #fdfaf4 !important;
  --popover-foreground: #2e2219 !important;
  --primary: #8a6a2c !important;
  --primary-foreground: #fffdf8 !important;
  --secondary: #efe8da !important;
  --secondary-foreground: #22365a !important;
  --muted: #efe8da !important;
  --muted-foreground: #66594b !important;
  --accent: #ece2cc !important;
  --accent-foreground: #22365a !important;
  --destructive: #9f3a32 !important;
  --destructive-foreground: #fffdf8 !important;
  --success: #3d6b50 !important;
  --success-foreground: #fffdf8 !important;
  --warning: #946320 !important;
  --warning-foreground: #fffdf8 !important;
  --info: #2f5d8a !important;
  --info-foreground: #fffdf8 !important;
  --neutral: #76695a !important;
  --neutral-foreground: #fffdf8 !important;
  --border: #cfc0a0 !important;
  --input: #c9bb9c !important;
  --ring: #8a6a2c !important;
  --chart-1: #9c7a3c !important;
  --chart-2: #1f5f8b !important;
  --chart-3: #6a5796 !important;
  --chart-4: #a8566a !important;
  --chart-5: #3d6b50 !important;
  --overview-accent-1: #9c7a3c !important;
  --overview-accent-2: #1f5f8b !important;
  --overview-accent-3: #6a5796 !important;
  --sidebar: #f7f1e5 !important;
  --sidebar-foreground: #2e2219 !important;
  --sidebar-primary: #8a6a2c !important;
  --sidebar-primary-foreground: #fffdf8 !important;
  --sidebar-accent: #ece2cc !important;
  --sidebar-accent-foreground: #22365a !important;
  --sidebar-border: #d9cfba !important;
  --sidebar-ring: #8a6a2c !important;
  --skeleton-base: #efe8da !important;
  --skeleton-highlight: #fbf8f1 !important;
  --mx-title: #22365a;
  --mx-glass: linear-gradient(180deg, #fffdf8, #faf5ea);
  --mx-line: rgba(92,66,24,.2);
  --mx-sky: radial-gradient(120% 80% at 50% -10%, #f8f1e2 0%, #eee6d5 60%, #e6dcc7 100%);
  --mx-stars: none;
  --mx-btn: linear-gradient(180deg, #a98643, #8a6a2c);
  --mx-btn-glow: 0 0 0 1px rgba(138,106,44,.5), 0 8px 20px -12px rgba(138,106,44,.6);
}

/* ---------- 字体和圆角：界面用 Inter 配思源黑体，标题用 Cormorant Garamond 配思源宋体 ---------- */
html, html [data-theme-preset], html [data-theme-font] {
  --radius: .875rem !important;
  --font-body: Inter, "Noto Sans SC", "Source Han Sans SC", "PingFang SC", "Segoe UI", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif !important;
  --mx-display: "Cormorant Garamond", "Noto Serif SC", "Source Han Serif SC", "思源宋体 CN", Georgia, "Songti SC", "STZhongsong", "Microsoft YaHei UI", serif;
}
html, body { font-family: var(--font-body) !important; }
h1, h2, h3, [data-slot="card-title"], [data-slot="dialog-title"], [data-slot="sheet-title"], [data-slot="drawer-title"], [data-slot="alert-dialog-title"] {
  font-family: var(--mx-display) !important;
  color: var(--mx-title);
  letter-spacing: .04em;
  font-variant-numeric: lining-nums;
}
code, pre, kbd, .font-mono { font-family: "JetBrains Mono", "Cascadia Mono", Consolas, "Noto Sans SC", monospace !important; }

/* ---------- 背景：深色是夜空渐变，浅色是纸面。登录、注册页另加一层稀疏的星点；后台内容区只用渐变，文字后面不放亮点 ---------- */
body, #root > div, [data-slot="sidebar-wrapper"], [data-slot="sidebar-inset"] {
  background-image: var(--mx-sky) !important;
  background-size: cover !important;
  background-attachment: fixed !important;
}
html.dark body:has(.mx-auth-card) #root > div {
  background-image: var(--mx-stars), var(--mx-sky) !important;
  background-size: 620px 620px, 620px 620px, 620px 620px, 620px 620px, 620px 620px, cover !important;
}

/* ---------- 卡片、弹窗：半透明玻璃底加发丝线描边 ---------- */
[data-slot="card"], [data-slot="dialog-content"], [data-slot="alert-dialog-content"], [data-slot="popover-content"], [data-slot="dropdown-menu-content"], [data-slot="select-content"], [data-slot="sheet-content"] {
  background-image: var(--mx-glass);
  box-shadow: inset 0 0 0 1px var(--mx-line), 0 30px 60px -40px rgba(0,0,0,.8);
}

/* 卡片和各类面板（模型广场的筛选栏、工具栏等）：顶边一道居中渐隐的金线；浅色下再加纸面高光和暖色投影，和底色分开 */
:is([data-slot="card"], .bg-card.rounded-xl.border, .bg-card.rounded-2xl.border):not(.sticky, .fixed, .absolute) { position: relative; }
[data-slot="card"]::before, .bg-card.rounded-xl.border::before, .bg-card.rounded-2xl.border::before {
  content: "";
  position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(166,128,52,.9), transparent);
}
html.dark [data-slot="card"]::before, html.dark .bg-card.rounded-xl.border::before, html.dark .bg-card.rounded-2xl.border::before {
  background: linear-gradient(90deg, transparent, rgba(230,189,98,.6), transparent);
}
html:not(.dark) [data-slot="card"], html:not(.dark) .bg-card.rounded-xl.border, html:not(.dark) .bg-card.rounded-2xl.border {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px var(--mx-line), 0 1px 2px rgba(74,52,18,.08), 0 12px 28px -18px rgba(74,52,18,.35);
}

/* ---------- 主按钮：金色渐变加辉光 ---------- */
button.bg-primary, a.bg-primary, [data-slot="button"].bg-primary {
  background-image: var(--mx-btn) !important;
  color: var(--primary-foreground) !important;
  box-shadow: var(--mx-btn-glow);
  font-weight: 600;
  letter-spacing: .06em;
}
button.bg-primary:hover, a.bg-primary:hover { filter: brightness(1.06); }

/* ---------- 输入框：凹下去的深底 ---------- */
html.dark [data-slot="input"], html.dark [data-slot="textarea"], html.dark input.border-input, html.dark textarea.border-input, html.dark [data-slot="select-trigger"], html.dark [data-slot="input-group"] { background-color: rgba(5,8,16,.7) !important; }

/* ---------- 侧栏：当前项左侧一道发光的金线、金色渐隐底，分组小标题用衬线字 ---------- */
[data-slot="sidebar-group-label"] { font-family: var(--mx-display); letter-spacing: .18em; color: var(--mx-title); }
[data-slot="sidebar"]:not([data-collapsible="icon"]) [data-slot="sidebar-group-label"] { opacity: .75; }
[data-slot="sidebar"][data-collapsible="icon"] [data-slot="sidebar-group-label"] { opacity: 0; visibility: hidden; }
[data-slot="sidebar-menu-button"][data-active]:not([data-active="false"]) {
  background-color: transparent !important;
  background-image: linear-gradient(90deg, color-mix(in srgb, var(--primary) 20%, transparent), transparent 88%);
  box-shadow: inset 3px 0 0 var(--primary), inset 14px 0 16px -12px var(--primary);
}

/* ---------- 表头 ---------- */
[data-slot="table-head"] { font-family: var(--mx-display); letter-spacing: .08em; color: var(--mx-title); }

/* ---------- 登录、注册页：表单放进一张玻璃卡片；左上角站名用前台的行书 ---------- */
.mx-auth-card { background-image: var(--mx-glass); box-shadow: inset 0 0 0 1px var(--mx-line), 0 30px 60px -40px rgba(0,0,0,.8); border-radius: 18px; }
.mx-auth-page > a h1,
.mx-site-brand > span {
  font: 600 28px/1.2 "Brand Script", var(--mx-display) !important;
  letter-spacing: .08em;
  color: var(--mx-title);
  min-width: 0;
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 站标沿用三叉戟版画；站名和图标只占自己的布局空间。 */
img[src$="/logo.png"] { content: url("/_skin/emblem.webp"); border-radius: 0 !important; object-fit: contain !important; }
html.dark img[src$="/logo.png"] { filter: invert(1) sepia(1) saturate(1.5) hue-rotate(-8deg) brightness(.98); }
.mx-site-brand { gap: 10px; max-width: 100%; }
.mx-site-brand > div { width: 40px !important; height: 40px !important; overflow: visible !important; border-radius: 0 !important; }
@media (min-width: 641px) {
  .mx-public-header nav.h-12 .mx-site-brand > span { font-size: 26px !important; }
  .mx-public-header nav.h-12 .mx-site-brand > div { width: 36px !important; height: 36px !important; }
}
@media (min-width: 1024px) {
  .mx-public-header nav.h-12 [class~="@container/system-brand"] { min-width: 180px !important; }
}
header > div[class~="max-w-[52rem]"] { max-width: 64rem !important; }

/* 手机公共顶栏：站名按剩余空间收缩，不能画到货币、主题按钮下面。 */
@media (max-width: 640px) {
  .mx-public-header nav .mx-site-brand { gap: 6px; }
  .mx-public-header nav .mx-site-brand > span {
    font-size: clamp(16px, 5vw, 22px) !important;
    max-width: 100%;
  }
  .mx-public-header nav .mx-site-brand > div {
    width: 28px !important;
    height: 28px !important;
  }
  .mx-app-header .mx-site-brand { gap: 8px; }
  .mx-app-header .mx-site-brand > span {
    display: block;
    font-size: 22px !important;
  }
  .mx-app-header .mx-site-brand > div {
    width: 28px !important;
    height: 28px !important;
  }
}

/* ---------- 分段开关（顶栏的 $ / ¥、模型广场的 标准 / 充值 等）：选中的一项用主色标出来 ---------- */
[data-slot="toggle-group-item"][aria-pressed="true"] { background: var(--primary) !important; color: var(--primary-foreground) !important; font-weight: 600; }

/* 窄屏和高缩放的登录页，品牌与返回按钮分开占位 */
@media (max-width: 640px) {
  .mx-auth-page > a h1 { font-size: 22px !important; }
  .mx-auth-page > a > div { width: 32px !important; height: 32px !important; }
}
