/* 深度未来品牌外壳样式：作用于 New API 全站。
   站内默认白蓝配色；登录注册页固定深色科幻风；首页由品牌页 iframe 接管。 */

@font-face {
  font-family: "SDWL Brand";
  src: url("/landing/assets/brand/font/sdwl-brand.woff2") format("woff2");
  font-display: swap;
  unicode-range: U+6DF1, U+5EA6, U+672A, U+6765, U+0020, U+0044-0046, U+0050, U+0052, U+0054, U+0055;
}

/* ---------- 白蓝配色（默认） ---------- */

html:not(.dark) {
  --background: #f5f8ff;
  --foreground: #0b1633;
  --card: #ffffff;
  --card-foreground: #0b1633;
  --popover: #ffffff;
  --popover-foreground: #0b1633;
  --primary: #2f6bff;
  --primary-foreground: #ffffff;
  --secondary: #eef3ff;
  --secondary-foreground: #142a66;
  --muted: #f0f4fc;
  --muted-foreground: #5a6a8c;
  --accent: #e8efff;
  --accent-foreground: #123091;
  --border: #e1e8f5;
  --input: #d5dff2;
  --ring: #2f6bff;
  --sidebar: #f8faff;
  --sidebar-foreground: #23314f;
  --sidebar-primary: #2f6bff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e9f0ff;
  --sidebar-accent-foreground: #1640b8;
  --sidebar-border: #e3eaf7;
  --sidebar-ring: #2f6bff;
  --chart-1: #2f6bff;
  --chart-2: #22b8f0;
  --chart-3: #7c5cff;
  --chart-4: #14c8a8;
  --chart-5: #f5a524;
}

html:not(.dark) body {
  background:
    radial-gradient(1100px 520px at 88% -12%, rgba(47, 107, 255, 0.1), transparent 62%),
    radial-gradient(900px 480px at -8% 108%, rgba(34, 184, 240, 0.08), transparent 60%),
    #f5f8ff;
}

html:not(.dark) ::selection { background: rgba(47, 107, 255, 0.18); }

/* ---------- 深色配色（用户手动切换 / 登录注册页） ---------- */

html.dark {
  --background: #05070f;
  --foreground: #e8f1ff;
  --card: #0a0f1f;
  --card-foreground: #e8f1ff;
  --popover: #0c1224;
  --popover-foreground: #e8f1ff;
  --primary: #3d7bff;
  --primary-foreground: #ffffff;
  --secondary: #111a33;
  --secondary-foreground: #e8f1ff;
  --muted: #0f1730;
  --muted-foreground: #8d9bc2;
  --accent: #14214a;
  --accent-foreground: #e8f1ff;
  --border: rgba(120, 165, 255, 0.13);
  --input: rgba(120, 165, 255, 0.2);
  --ring: #3df5ff;
  --sidebar: #060a17;
  --sidebar-foreground: #dbe6ff;
  --sidebar-primary: #3d7bff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #111a33;
  --sidebar-border: rgba(120, 165, 255, 0.12);
  --chart-1: #3df5ff;
  --chart-2: #4f7bff;
  --chart-3: #9b5cff;
}

html.dark body {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(79, 123, 255, 0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(155, 92, 255, 0.08), transparent 60%),
    #05070f;
}

/* ---------- 顶部导航 ---------- */

html.sdwl-home header.fixed { display: none !important; }

header a[href="/"] > div:first-child {
  width: 34px !important;
  height: 34px !important;
  filter: drop-shadow(0 0 8px rgba(61, 160, 255, 0.4));
}

header a[href="/"] img { border-radius: 0 !important; }

/* 系统名称文字替换为加粗字标图（wordmark.svg 宽高比约 4.45:1） */
header a[href="/"] > span {
  display: block !important;
  flex: none !important;
  width: 98px !important;
  max-width: none !important;
  height: 22px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  color: transparent !important;
  background: url("/landing/assets/brand/wordmark.svg") left center / contain no-repeat !important;
}

/* 白蓝页面的顶部导航同样使用深色科技风横栏，与首页、文档、模型广场一致 */
html:not(.dark) header.fixed,
html:not(.dark) header.sticky {
  --foreground: #e8f1ff;
  --muted-foreground: rgba(214, 228, 255, 0.68);
  --muted: rgba(255, 255, 255, 0.07);
  --accent: rgba(255, 255, 255, 0.08);
  --accent-foreground: #ffffff;
  --secondary: rgba(255, 255, 255, 0.08);
  --secondary-foreground: #e8f1ff;
  --border: rgba(255, 255, 255, 0.12);
  --input: rgba(255, 255, 255, 0.16);
  --background: transparent;
  color: #e8f1ff;
  background:
    radial-gradient(600px 120px at 12% 0%, rgba(61, 245, 255, 0.14), transparent 70%),
    radial-gradient(600px 120px at 88% 0%, rgba(155, 92, 255, 0.16), transparent 70%),
    linear-gradient(180deg, rgba(5, 8, 20, 0.96), rgba(8, 13, 32, 0.94)) !important;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 12px 30px -20px rgba(5, 8, 20, 0.8);
}

html:not(.dark) header.fixed::after,
html:not(.dark) header.sticky::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61, 245, 255, 0.55) 25%, rgba(155, 92, 255, 0.55) 75%, transparent);
  pointer-events: none;
}

html:not(.dark) header.fixed nav {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

header nav a[aria-current="page"]:not([href="/"]) {
  position: relative;
  color: #ffffff !important;
  font-weight: 600 !important;
}

header nav a[aria-current="page"]:not([href="/"])::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3df5ff, #4f86ff);
  box-shadow: 0 0 10px rgba(61, 245, 255, 0.8);
}

header nav a:not([aria-current="page"]):not([href="/"]):hover { color: #ffffff !important; }

/* ---------- 控制台 ---------- */

html:not(.dark) [data-slot="sidebar-inset"] {
  box-shadow: 0 1px 2px rgba(16, 32, 74, 0.04), 0 18px 48px -24px rgba(47, 107, 255, 0.28) !important;
  border: 1px solid #e6edf9;
}

[data-slot="sidebar-menu-button"][data-active] {
  position: relative;
  font-weight: 600;
}

html:not(.dark) [data-slot="sidebar-menu-button"][data-active] {
  background: linear-gradient(90deg, #e3ecff, #f1f6ff) !important;
  color: #1640b8 !important;
}

html.dark [data-slot="sidebar-menu-button"][data-active] {
  background: linear-gradient(90deg, rgba(61, 123, 255, 0.22), rgba(61, 123, 255, 0.06)) !important;
  color: #dff3ff !important;
}

[data-slot="sidebar-menu-button"][data-active]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #22d3ee, #2f6bff);
}

[data-slot="sidebar-group-label"] { letter-spacing: 0.12em; }

/* ---------- 用户侧边栏：控制台 / 个人中心（名称与补充菜单项由 shell.js 处理） ---------- */

/* 收起：聊天分组、模型数据看板、审计日志；安全与访问保留在右上角头像菜单 */
[data-slot="sidebar-group"]:has(a[href="/playground"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/dashboard/models"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/usage-logs/audit"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/security"]) { display: none !important; }

[data-slot="sidebar-menu-item"]:has(> a[href="/dashboard/overview"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/wallet"]) { order: 1; }
[data-slot="sidebar-menu-item"]:has(> a[href="/keys"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/dashboard/overview?view=rebate"]) { order: 2; }
[data-slot="sidebar-menu-item"]:has(> a[href="/usage-logs/common"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/dashboard/overview?view=bills"]) { order: 3; }
[data-slot="sidebar-menu-item"]:has(> a[href="/dashboard/overview?view=drawings"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/dashboard/overview?view=tickets"]) { order: 4; }
[data-slot="sidebar-menu-item"]:has(> a[href="/usage-logs/task"]),
[data-slot="sidebar-menu-item"]:has(> a[href="/profile"]) { order: 5; }

[data-slot="sidebar-group"]:has(a[href="/keys"]) [data-slot="sidebar-menu-button"],
[data-slot="sidebar-group"]:has(a[href="/wallet"]) [data-slot="sidebar-menu-button"] {
  height: 40px;
  gap: 10px;
  border-radius: 12px;
  font-size: 14px;
}

/* 3D 图标（Microsoft Fluent Emoji，MIT）：替换线条图标，保留原 svg 占位 */
[data-slot="sidebar-menu-button"]:is([href="/dashboard/overview"], [href="/keys"], [href="/usage-logs/common"], [href="/dashboard/overview?view=drawings"],
  [href="/usage-logs/task"], [href="/wallet"], [href="/dashboard/overview?view=rebate"], [href="/dashboard/overview?view=bills"], [href="/dashboard/overview?view=tickets"], [href="/profile"]) > svg {
  width: 22px !important;
  height: 22px !important;
  background: center / contain no-repeat;
  filter: drop-shadow(0 2px 3px rgba(16, 32, 74, 0.14));
}
[data-slot="sidebar-menu-button"]:is([href="/dashboard/overview"], [href="/keys"], [href="/usage-logs/common"], [href="/dashboard/overview?view=drawings"],
  [href="/usage-logs/task"], [href="/wallet"], [href="/dashboard/overview?view=rebate"], [href="/dashboard/overview?view=bills"], [href="/dashboard/overview?view=tickets"], [href="/profile"]) > svg > * { display: none; }
[data-slot="sidebar-menu-button"][href="/dashboard/overview"] > svg { background-image: url(/landing/assets/console/icons/dashboard.webp); }
[data-slot="sidebar-menu-button"][href="/keys"] > svg { background-image: url(/landing/assets/console/icons/keys.webp); }
[data-slot="sidebar-menu-button"][href="/usage-logs/common"] > svg { background-image: url(/landing/assets/console/icons/logs.webp); }
[data-slot="sidebar-menu-button"][href="/dashboard/overview?view=drawings"] > svg { background-image: url(/landing/assets/console/icons/drawings.webp); }
[data-slot="sidebar-menu-button"][href="/usage-logs/task"] > svg { background-image: url(/landing/assets/console/icons/tasks.webp); }
[data-slot="sidebar-menu-button"][href="/wallet"] > svg { background-image: url(/landing/assets/console/icons/wallet.webp); }
[data-slot="sidebar-menu-button"][href="/dashboard/overview?view=rebate"] > svg { background-image: url(/landing/assets/console/icons/rebate.webp); }
[data-slot="sidebar-menu-button"][href="/dashboard/overview?view=bills"] > svg { background-image: url(/landing/assets/console/icons/bills.webp); }
[data-slot="sidebar-menu-button"][href="/dashboard/overview?view=tickets"] > svg { background-image: url(/landing/assets/console/icons/tickets.webp); }
[data-slot="sidebar-menu-button"][href="/profile"] > svg { background-image: url(/landing/assets/console/icons/settings.webp); }

/* 补充页面上：New API 自己的菜单不显示选中；安全与访问页选中「个人设置」 */
html.sdwl-ext [data-slot="sidebar-menu-button"][data-active]:not([data-sdwl-item]) {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit;
}
html.sdwl-ext [data-slot="sidebar-menu-button"][data-active]:not([data-sdwl-item])::before { display: none; }
html.sdwl-security [data-slot="sidebar-menu-button"][href="/profile"] { position: relative; font-weight: 600; }
html.sdwl-security:not(.dark) [data-slot="sidebar-menu-button"][href="/profile"] { background: linear-gradient(90deg, #e3ecff, #f1f6ff) !important; color: #1640b8 !important; }
html.sdwl-security.dark [data-slot="sidebar-menu-button"][href="/profile"] { background: linear-gradient(90deg, rgba(61, 123, 255, 0.22), rgba(61, 123, 255, 0.06)) !important; color: #dff3ff !important; }
html.sdwl-security [data-slot="sidebar-menu-button"][href="/profile"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22%;
  bottom: 22%;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg, #22d3ee, #2f6bff);
}

[data-sdwl-hidden] { display: none !important; }

/* ---------- 主按钮：品牌渐变 ---------- */

[data-slot="button"].bg-primary,
button.bg-primary {
  background-image: linear-gradient(100deg, #22b8f0 0%, #2f6bff 55%, #6a5cff 100%);
  box-shadow: 0 8px 22px -10px rgba(47, 107, 255, 0.7);
}

/* ---------- 模型广场 ---------- */

header[class*="max-w-3xl"] { position: relative; z-index: 0; }

header[class*="max-w-3xl"]::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -40px;
  width: min(1100px, 96vw);
  height: 320px;
  transform: translateX(-50%);
  background-image: radial-gradient(rgba(47, 107, 255, 0.22) 1px, transparent 1.2px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 10%, transparent 68%);
  mask-image: radial-gradient(ellipse at center, #000 10%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}

h1[class*="text-[clamp(2rem"] {
  background: linear-gradient(100deg, #0b1633 10%, #1d47c9 55%, #22b8f0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: 0.06em;
}

html.dark h1[class*="text-[clamp(2rem"] {
  background-image: linear-gradient(100deg, #ffffff 10%, #bcd3ff 55%, #3df5ff 100%);
}

/* ---------- 登录注册页：深色科幻 ---------- */

.sdwl-auth-deco { display: none; }

html.sdwl-auth body {
  background:
    radial-gradient(900px 600px at 18% 50%, rgba(47, 107, 255, 0.16), transparent 62%),
    radial-gradient(800px 600px at 85% 20%, rgba(155, 92, 255, 0.12), transparent 60%),
    #04060d !important;
}

html.sdwl-auth .sdwl-auth-deco {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

html.sdwl-auth #root { position: relative; z-index: 1; }

.sdwl-auth-deco canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.sdwl-auth-aura {
  position: absolute;
  left: -10vw;
  bottom: -40vh;
  width: 80vw;
  height: 80vh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(61, 245, 255, 0.12), transparent 70%);
  filter: blur(30px);
}

.sdwl-auth-brand {
  position: absolute;
  left: 9vw;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: 10px;
  color: #e8f1ff;
}

.sdwl-auth-mark { position: relative; width: 104px; height: 104px; display: grid; place-items: center; margin-bottom: 18px; }
.sdwl-auth-mark img { position: relative; width: 84px; height: 84px; filter: drop-shadow(0 0 16px rgba(108, 251, 255, 0.6)) drop-shadow(0 0 40px rgba(79, 134, 255, 0.45)); }

.sdwl-auth-mark span {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 62%, rgba(108, 251, 255, 0.9) 78%, transparent 80%);
  -webkit-mask: radial-gradient(circle, transparent 54px, #000 55px);
  mask: radial-gradient(circle, transparent 54px, #000 55px);
  animation: sdwl-spin 5s linear infinite;
}

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

.sdwl-auth-wordmark { display: block; height: 86px; width: auto; }

.sdwl-auth-brand p { margin-top: 18px; font-size: 17px; letter-spacing: 0.5em; color: rgba(214, 230, 255, 0.66); }

.sdwl-auth-models { display: flex; gap: 10px; margin-top: 30px; }

.sdwl-auth-models i {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: rgba(10, 15, 34, 0.6);
  border: 1px solid rgba(140, 185, 255, 0.2);
}

.sdwl-auth-models img { width: 22px; height: 22px; }
.sdwl-auth-models i.is-mono img { filter: invert(1) brightness(1.4); }

@media (max-width: 1100px) {
  .sdwl-auth-brand { display: none; }
}

/* 表单卡片 */
html.sdwl-auth #root .container > div {
  position: relative;
  padding: 36px 34px !important;
  border-radius: 24px;
  background: rgba(8, 12, 28, 0.72);
  border: 1px solid rgba(130, 175, 255, 0.18);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 40px 120px -40px rgba(47, 107, 255, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.sdwl-auth #root .container > div::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(61, 245, 255, 0.8), rgba(155, 92, 255, 0.8), transparent);
}

@media (min-width: 1101px) {
  html.sdwl-auth #root .container > div { margin-right: 8vw !important; margin-left: auto !important; }
  html.sdwl-auth #root a.absolute[href="/"] { display: none; }
}

html.sdwl-auth #root h2 { font-size: 26px; letter-spacing: 0.12em; }

html.sdwl-auth #root input[data-slot="form-control"],
html.sdwl-auth #root input {
  height: 44px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(130, 175, 255, 0.2);
  transition: border-color 0.3s, box-shadow 0.3s;
}

html.sdwl-auth #root input:focus-visible {
  border-color: rgba(61, 245, 255, 0.7);
  box-shadow: 0 0 0 4px rgba(61, 245, 255, 0.12);
}

html.sdwl-auth #root form button[type="submit"] {
  height: 46px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #03040a;
  background: linear-gradient(100deg, #3df5ff 0%, #4f86ff 50%, #9b5cff 100%) !important;
  box-shadow: 0 12px 34px -12px rgba(61, 245, 255, 0.7);
}

html.sdwl-auth #root form button[type="submit"]:hover { filter: brightness(1.08); }
html.sdwl-auth #root a.underline { color: #6cfbff; }

@media (prefers-reduced-motion: reduce) {
  .sdwl-auth-mark span { animation: none; }
}