/* ==========================================================================
   太一 · NewAPI Overhaul v51
   规划者: GA / 2026-05-25
   基础: 今晚 prototype_home/styles.css v9 成功配方
   目标: NewAPI(Tailwind+lucide) → qd 5图 新中式水墨 dashboard
   策略: 高特异性覆盖 Tailwind utility 类 + light/dark 双模 token
   ========================================================================== */

/* ------------------------------ 0. 设计 tokens ------------------------------ */
:root,
html.light {
  /* 米白宣纸主色 */
  --ty-paper-1: #F4EFEB;
  --ty-paper-2: #EAE1D7;
  --ty-paper-3: #E2D6C5;
  --ty-card-bg: #FBF7F1;
  --ty-card-bg-alt: #F7F1E8;
  /* 墨色文字 */
  --ty-ink-1: #1A1A1A;
  --ty-ink-2: #4A4036;
  --ty-ink-3: #7A6B5D;
  --ty-ink-mute: #A89884;
  /* 强调色 */
  --ty-vermilion: #A61B1B;
  --ty-vermilion-soft: #C04848;
  --ty-bronze: #8C6239;
  --ty-gold: #B8956A;
  --ty-gold-soft: #D4B996;
  /* 描边 */
  --ty-hairline: rgba(140, 98, 57, .22);
  --ty-hairline-strong: rgba(140, 98, 57, .42);
  /* 阴影 */
  --ty-shadow-card: 0 6px 24px -10px rgba(60, 40, 20, .14), 0 2px 6px -2px rgba(60, 40, 20, .08);
  --ty-shadow-hover: 0 14px 36px -12px rgba(60, 40, 20, .22), 0 4px 12px -2px rgba(60, 40, 20, .12);
  /* 山水 bg */
  --ty-mountain-url: url('/taiyi/assets/v50/global/G05_mountain_river_bg.png');
  /* 字体栈 */
  --ty-serif: "Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  --ty-sans:  "Noto Sans SC","PingFang SC","Microsoft YaHei","Inter",sans-serif;
  --ty-mono:  "JetBrains Mono","SF Mono","Consolas",monospace;
  --ty-kaiti: "LXGW WenKai","KaiTi","STKaiti",cursive;
}

html.dark {
  --ty-paper-1: #14110E;
  --ty-paper-2: #1B1714;
  --ty-paper-3: #221C18;
  --ty-card-bg: #1F1A15;
  --ty-card-bg-alt: #251F19;
  --ty-ink-1: #ECE3D4;
  --ty-ink-2: #C9BBA5;
  --ty-ink-3: #9C8F7A;
  --ty-ink-mute: #6E6354;
  --ty-vermilion: #D45A4A;
  --ty-vermilion-soft: #E07A6A;
  --ty-bronze: #C9A87C;
  --ty-gold: #D4B996;
  --ty-gold-soft: #E8D4AE;
  --ty-hairline: rgba(212, 185, 150, .18);
  --ty-hairline-strong: rgba(212, 185, 150, .38);
  --ty-shadow-card: 0 8px 28px -10px rgba(0, 0, 0, .55), 0 2px 8px -2px rgba(0, 0, 0, .35);
  --ty-shadow-hover: 0 16px 40px -12px rgba(0, 0, 0, .70), 0 4px 14px -2px rgba(0, 0, 0, .45);
  --ty-mountain-url: url('/taiyi/assets/v50/global/G02_dark_mohei_base.png');
}

/* ------------------------------ 1. body 山水底 ------------------------------ */
html.light body.ty-newapi-shell {
  background:
    linear-gradient(180deg,
      rgba(244,239,235,.78) 0,
      rgba(244,239,235,.50) 320px,
      rgba(244,239,235,.10) 720px) no-repeat,
    var(--ty-mountain-url) center top / 100% auto no-repeat,
    var(--ty-paper-1) !important;
  background-blend-mode: normal, darken, normal !important;
  background-attachment: fixed, fixed, fixed !important;
  color: var(--ty-ink-1) !important;
  font-family: var(--ty-sans) !important;
}
html.dark body.ty-newapi-shell {
  background:
    linear-gradient(180deg,
      rgba(20,17,14,.82) 0,
      rgba(20,17,14,.62) 360px,
      rgba(20,17,14,.40) 760px) no-repeat,
    var(--ty-mountain-url) center top / 100% auto no-repeat,
    var(--ty-paper-1) !important;
  background-blend-mode: normal, lighten, normal !important;
  background-attachment: fixed, fixed, fixed !important;
  color: var(--ty-ink-1) !important;
  font-family: var(--ty-sans) !important;
}

/* ------------------------------ 2. 字体 ----------------------------------- */
.ty-newapi-shell h1, .ty-newapi-shell h2, .ty-newapi-shell h3,
.ty-newapi-shell .text-2xl, .ty-newapi-shell .text-xl,
.ty-newapi-shell .text-3xl, .ty-newapi-shell .text-4xl, .ty-newapi-shell .text-5xl {
  font-family: var(--ty-serif) !important;
  letter-spacing: .04em;
  color: var(--ty-ink-1) !important;
  font-weight: 700;
}
.ty-newapi-shell .font-mono, .ty-newapi-shell code, .ty-newapi-shell pre,
.ty-newapi-shell input[type="number"], .ty-newapi-shell .text-sm.font-mono {
  font-family: var(--ty-mono) !important;
}
.ty-newapi-shell { font-family: var(--ty-sans) !important; }

/* ------------------------------ 3. Tailwind 颜色高特异性覆盖 ----------------- */
/* 背景 */
.ty-newapi-shell .bg-white,
.ty-newapi-shell .bg-gray-50,
.ty-newapi-shell .bg-neutral-50,
.ty-newapi-shell .bg-slate-50 {
  background-color: var(--ty-card-bg) !important;
}
.ty-newapi-shell .bg-gray-100,
.ty-newapi-shell .bg-neutral-100,
.ty-newapi-shell .bg-slate-100 {
  background-color: var(--ty-card-bg-alt) !important;
}
.ty-newapi-shell .bg-gray-200,
.ty-newapi-shell .bg-neutral-200 {
  background-color: var(--ty-paper-2) !important;
}
html.dark .ty-newapi-shell .dark\:bg-gray-700,
html.dark .ty-newapi-shell .dark\:bg-gray-800,
html.dark .ty-newapi-shell .dark\:bg-gray-900,
html.dark .ty-newapi-shell .dark\:bg-neutral-800,
html.dark .ty-newapi-shell .dark\:bg-neutral-900 {
  background-color: var(--ty-card-bg) !important;
}

/* 文本色 */
.ty-newapi-shell .text-gray-900,
.ty-newapi-shell .text-black,
.ty-newapi-shell .text-neutral-900 {
  color: var(--ty-ink-1) !important;
}
.ty-newapi-shell .text-gray-700,
.ty-newapi-shell .text-gray-800,
.ty-newapi-shell .text-neutral-700 {
  color: var(--ty-ink-2) !important;
}
.ty-newapi-shell .text-gray-500,
.ty-newapi-shell .text-gray-600,
.ty-newapi-shell .text-neutral-500,
.ty-newapi-shell .text-neutral-600,
.ty-newapi-shell .text-slate-500,
.ty-newapi-shell .text-slate-600 {
  color: var(--ty-ink-3) !important;
}
.ty-newapi-shell .text-gray-400,
.ty-newapi-shell .text-neutral-400 {
  color: var(--ty-ink-mute) !important;
}
html.dark .ty-newapi-shell .dark\:text-white,
html.dark .ty-newapi-shell .dark\:text-gray-100,
html.dark .ty-newapi-shell .dark\:text-gray-200 {
  color: var(--ty-ink-1) !important;
}
html.dark .ty-newapi-shell .dark\:text-gray-300,
html.dark .ty-newapi-shell .dark\:text-gray-400 {
  color: var(--ty-ink-2) !important;
}

/* 描边 */
.ty-newapi-shell .border,
.ty-newapi-shell .border-gray-100,
.ty-newapi-shell .border-gray-200,
.ty-newapi-shell .border-gray-300,
.ty-newapi-shell .border-neutral-200,
.ty-newapi-shell .border-slate-200 {
  border-color: var(--ty-hairline) !important;
}
.ty-newapi-shell .border-b, .ty-newapi-shell .border-t,
.ty-newapi-shell .border-l, .ty-newapi-shell .border-r {
  border-color: var(--ty-hairline) !important;
}
html.dark .ty-newapi-shell .dark\:border-gray-700,
html.dark .ty-newapi-shell .dark\:border-gray-800 {
  border-color: var(--ty-hairline) !important;
}

/* ------------------------------ 4. 卡片骨架 ------------------------------ */
.ty-newapi-shell .rounded-lg.shadow,
.ty-newapi-shell .rounded-xl.shadow,
.ty-newapi-shell .rounded-lg.border,
.ty-newapi-shell .rounded-xl.border,
.ty-newapi-shell article.rounded-lg,
.ty-newapi-shell section.rounded-lg,
.ty-newapi-shell div[class*="rounded-"][class*="shadow"],
.ty-newapi-shell div[class*="rounded-"][class*="border"] {
  background-color: var(--ty-card-bg) !important;
  border: 1px solid var(--ty-hairline) !important;
  box-shadow: var(--ty-shadow-card) !important;
  border-radius: 8px !important;
  position: relative;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ty-newapi-shell div[class*="rounded-"][class*="shadow"]:hover {
  box-shadow: var(--ty-shadow-hover) !important;
  transform: translateY(-2px);
}
/* 卡片左上角金色印章短线 */
.ty-newapi-shell section.rounded-lg::before,
.ty-newapi-shell article.rounded-lg::before {
  content: "";
  position: absolute; top: 14px; left: 0;
  width: 3px; height: 22px;
  background: linear-gradient(180deg, var(--ty-vermilion), var(--ty-gold));
  border-radius: 0 2px 2px 0;
  opacity: .72;
}

/* ------------------------------ 5. 按钮 ------------------------------ */
.ty-newapi-shell button,
.ty-newapi-shell .btn,
.ty-newapi-shell a[role="button"] {
  font-family: var(--ty-serif) !important;
  letter-spacing: .12em;
  border-radius: 4px !important;
  transition: all .18s ease;
}
/* 主按钮 — 朱砂 */
.ty-newapi-shell button.bg-blue-600,
.ty-newapi-shell button.bg-blue-500,
.ty-newapi-shell button.bg-primary,
.ty-newapi-shell button[class*="bg-blue"],
.ty-newapi-shell .btn-primary,
.ty-newapi-shell button[type="submit"] {
  background: linear-gradient(180deg, var(--ty-vermilion-soft), var(--ty-vermilion)) !important;
  color: #FFF8EE !important;
  border: 1px solid var(--ty-vermilion) !important;
  box-shadow: 0 4px 14px -4px rgba(166, 27, 27, .35) !important;
}
.ty-newapi-shell button.bg-blue-600:hover,
.ty-newapi-shell button[type="submit"]:hover,
.ty-newapi-shell .btn-primary:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px -4px rgba(166, 27, 27, .45) !important;
}
/* 次按钮 — 古金描边 */
.ty-newapi-shell button.bg-gray-100,
.ty-newapi-shell button.bg-gray-200,
.ty-newapi-shell button.bg-white,
.ty-newapi-shell .btn-secondary {
  background: transparent !important;
  color: var(--ty-bronze) !important;
  border: 1px solid var(--ty-gold) !important;
}
html.dark .ty-newapi-shell button.bg-gray-100,
html.dark .ty-newapi-shell .btn-secondary {
  color: var(--ty-gold) !important;
  border-color: var(--ty-gold-soft) !important;
}

/* ------------------------------ 6. 输入/表单 ------------------------------ */
.ty-newapi-shell input[type="text"],
.ty-newapi-shell input[type="email"],
.ty-newapi-shell input[type="password"],
.ty-newapi-shell input[type="number"],
.ty-newapi-shell input[type="search"],
.ty-newapi-shell textarea,
.ty-newapi-shell select {
  background-color: var(--ty-card-bg-alt) !important;
  border: 1px solid var(--ty-hairline) !important;
  color: var(--ty-ink-1) !important;
  font-family: var(--ty-sans) !important;
  border-radius: 4px !important;
  transition: border-color .15s, box-shadow .15s;
}
.ty-newapi-shell input:focus,
.ty-newapi-shell textarea:focus,
.ty-newapi-shell select:focus {
  outline: none !important;
  border-color: var(--ty-gold) !important;
  box-shadow: 0 0 0 3px rgba(184, 149, 106, .18) !important;
}

/* ------------------------------ 7. 顶栏 ------------------------------ */
.ty-newapi-shell header,
.ty-newapi-shell nav.fixed,
.ty-newapi-shell .sticky.top-0 {
  background: linear-gradient(180deg,
      rgba(251, 247, 241, .92),
      rgba(251, 247, 241, .68)) !important;
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  border-bottom: 1px solid var(--ty-hairline) !important;
  position: relative;
}
html.dark .ty-newapi-shell header,
html.dark .ty-newapi-shell nav.fixed,
html.dark .ty-newapi-shell .sticky.top-0 {
  background: linear-gradient(180deg,
      rgba(31, 26, 21, .92),
      rgba(31, 26, 21, .68)) !important;
}
.ty-newapi-shell header::after,
.ty-newapi-shell nav.fixed::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    var(--ty-hairline-strong) 30%,
    var(--ty-vermilion-soft) 50%,
    var(--ty-hairline-strong) 70%,
    transparent);
  opacity: .55;
}

/* ------------------------------ 8. 左侧栏 ------------------------------ */
.ty-newapi-shell aside,
.ty-newapi-shell nav.h-screen,
.ty-newapi-shell .sidebar {
  background: linear-gradient(180deg,
      rgba(251, 247, 241, .88),
      rgba(247, 241, 232, .80)) !important;
  border-right: 1px solid var(--ty-hairline) !important;
  backdrop-filter: blur(10px);
}
html.dark .ty-newapi-shell aside,
html.dark .ty-newapi-shell nav.h-screen,
html.dark .ty-newapi-shell .sidebar {
  background: linear-gradient(180deg,
      rgba(31, 26, 21, .88),
      rgba(37, 31, 25, .80)) !important;
}
.ty-newapi-shell aside a,
.ty-newapi-shell aside button {
  font-family: var(--ty-serif) !important;
  letter-spacing: .08em;
  border-radius: 4px !important;
}
.ty-newapi-shell aside a.active,
.ty-newapi-shell aside a[aria-current="page"],
.ty-newapi-shell aside button.active {
  background: linear-gradient(90deg,
    rgba(166, 27, 27, .14),
    rgba(166, 27, 27, .02)) !important;
  color: var(--ty-vermilion) !important;
  border-left: 2px solid var(--ty-vermilion) !important;
  font-weight: 700;
}

/* ------------------------------ 9. 表格 ------------------------------ */
.ty-newapi-shell table {
  background: var(--ty-card-bg) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 6px;
  overflow: hidden;
}
.ty-newapi-shell table thead,
.ty-newapi-shell table thead tr,
.ty-newapi-shell table th {
  background: var(--ty-card-bg-alt) !important;
  color: var(--ty-ink-2) !important;
  font-family: var(--ty-serif) !important;
  font-weight: 700;
  letter-spacing: .08em;
  border-bottom: 1px solid var(--ty-hairline-strong) !important;
}
.ty-newapi-shell table td {
  border-bottom: 1px solid var(--ty-hairline) !important;
  color: var(--ty-ink-2) !important;
}
.ty-newapi-shell table tbody tr:hover {
  background: rgba(184, 149, 106, .06) !important;
}

/* ------------------------------ 10. lucide 图标 ------------------------------ */
.ty-newapi-shell .lucide,
.ty-newapi-shell svg.lucide {
  color: var(--ty-bronze) !important;
  stroke: currentColor !important;
}
.ty-newapi-shell a:hover .lucide,
.ty-newapi-shell button:hover .lucide {
  color: var(--ty-vermilion) !important;
}

/* ------------------------------ 11. hero / 首页装饰 ------------------------------ */
body.ty-page-home .ty-newapi-shell main > section:first-of-type,
body.ty-page-home .ty-newapi-shell .hero,
body.ty-page-home main > div:first-child > section:first-of-type {
  position: relative;
  padding-top: 48px;
  padding-bottom: 56px;
}
/* 印章右上角 — 用 SVG data URI 内嵌避免请求 */
body.ty-page-home::before {
  content: "";
  position: fixed; top: 96px; right: 5%;
  width: 96px; height: 96px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect x='6' y='6' width='88' height='88' fill='%23A61B1B' stroke='%23861515' stroke-width='2'/><text x='50' y='62' font-size='52' fill='%23FBF1E2' font-family='serif' text-anchor='middle' font-weight='900'>一</text></svg>");
  background-size: contain; background-repeat: no-repeat;
  opacity: .82; pointer-events: none; z-index: 4;
  transform: rotate(-3deg);
  filter: drop-shadow(0 4px 8px rgba(166,27,27,.28));
}
html.dark body.ty-page-home::before {
  filter: drop-shadow(0 4px 12px rgba(212,90,74,.42));
  opacity: .72;
}

/* 四角金色细装饰 */
.ty-newapi-shell .ty-ornament-corner {
  position: fixed; width: 56px; height: 56px;
  pointer-events: none; z-index: 3;
  background-image:
    linear-gradient(var(--ty-gold), var(--ty-gold)),
    linear-gradient(var(--ty-gold), var(--ty-gold));
  background-size: 100% 1px, 1px 100%;
  background-repeat: no-repeat;
  background-position: top left, top left;
  opacity: .55;
}
.ty-newapi-shell .ty-ornament-corner.tl { top: 8px; left: 8px; }
.ty-newapi-shell .ty-ornament-corner.tr {
  top: 8px; right: 8px;
  background-position: top right, top right;
}
.ty-newapi-shell .ty-ornament-corner.bl {
  bottom: 8px; left: 8px;
  background-position: bottom left, bottom left;
}
.ty-newapi-shell .ty-ornament-corner.br {
  bottom: 8px; right: 8px;
  background-position: bottom right, bottom right;
}

/* ------------------------------ 12. 浮动暗亮切换按钮 ------------------------------ */
.ty-theme-fab {
  position: fixed; right: 24px; bottom: 24px; z-index: 9999;
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--ty-card-bg);
  border: 1px solid var(--ty-hairline-strong);
  box-shadow: var(--ty-shadow-card);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 22px;
  color: var(--ty-bronze);
  transition: transform .2s, box-shadow .2s;
  font-family: var(--ty-serif);
}
.ty-theme-fab:hover {
  transform: translateY(-2px) rotate(-12deg);
  box-shadow: var(--ty-shadow-hover);
  color: var(--ty-vermilion);
}
html.dark .ty-theme-fab { color: var(--ty-gold); }
html.dark .ty-theme-fab:hover { color: var(--ty-gold-soft); }

/* ------------------------------ 13. 登录页特殊优化 ------------------------------ */
body.ty-page-login .ty-newapi-shell,
body.ty-area-public .ty-newapi-shell {
  min-height: 100vh;
}
body.ty-page-login form,
body.ty-area-public form {
  background: var(--ty-card-bg) !important;
  border: 1px solid var(--ty-hairline-strong) !important;
  box-shadow: var(--ty-shadow-card) !important;
  border-radius: 8px !important;
  padding: 40px 36px !important;
  position: relative;
}
body.ty-page-login form::before,
body.ty-area-public form::before {
  content: "";
  position: absolute; top: -1px; left: 16%; right: 16%; height: 2px;
  background: linear-gradient(90deg,
    transparent, var(--ty-vermilion), var(--ty-gold), var(--ty-vermilion), transparent);
  opacity: .7;
}

/* ------------------------------ 14. 链接/分割线 ------------------------------ */
.ty-newapi-shell a:not([role="button"]):not(.btn) {
  color: var(--ty-bronze);
  text-decoration: none;
  transition: color .15s;
}
.ty-newapi-shell a:not([role="button"]):not(.btn):hover {
  color: var(--ty-vermilion);
}
html.dark .ty-newapi-shell a:not([role="button"]):not(.btn) { color: var(--ty-gold); }
html.dark .ty-newapi-shell a:not([role="button"]):not(.btn):hover { color: var(--ty-gold-soft); }
.ty-newapi-shell hr {
  border: none !important;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ty-hairline-strong), transparent) !important;
  margin: 24px 0;
}

/* ------------------------------ 15. 滚动条 ------------------------------ */
.ty-newapi-shell ::-webkit-scrollbar { width: 8px; height: 8px; }
.ty-newapi-shell ::-webkit-scrollbar-track { background: transparent; }
.ty-newapi-shell ::-webkit-scrollbar-thumb {
  background: var(--ty-hairline-strong);
  border-radius: 4px;
}
.ty-newapi-shell ::-webkit-scrollbar-thumb:hover { background: var(--ty-gold); }

/* ------------------------------ 16. 隐藏 NewAPI 自带 default style 突兀色块 ----- */
.ty-newapi-shell .bg-gradient-to-r,
.ty-newapi-shell .bg-gradient-to-br,
.ty-newapi-shell .bg-gradient-to-l {
  background-image: linear-gradient(135deg,
    var(--ty-card-bg) 0%,
    var(--ty-card-bg-alt) 100%) !important;
}

/* ------------------------------ END ------------------------------ */