@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,400..600&family=Noto+Serif+SC:wght@500;600&family=Inter:wght@400;500;600&display=swap");

:root,html,body{
  --el-color-primary:#CC785C!important;
  --el-color-primary-light-3:#d99578!important;
  --el-color-primary-light-5:#e0a890!important;
  --el-color-primary-light-7:#ebc1ad!important;
  --el-color-primary-light-8:#f0d2c4!important;
  --el-color-primary-light-9:#faeee6!important;
  --el-color-primary-dark-2:#b25e3f!important;
  --primary-50:250 238 230!important;
  --primary-100:240 210 196!important;
  --primary-200:235 193 173!important;
  --primary-300:224 168 144!important;
  --primary-400:217 149 120!important;
  --primary-500:204 120 92!important;
  --primary-600:178 94 63!important;
  --primary-700:163 85 58!important;
  --primary-800:138 70 47!important;
  --primary-900:113 56 38!important;
  --primary-950:67 32 22!important
}

body{font-family:"Inter","Noto Sans SC",system-ui,sans-serif!important}
h1,h2,h3,h4,.section-title,.title,.page-title{font-family:"Source Serif 4","Noto Serif SC",Georgia,serif!important;letter-spacing:-.01em}

/* ===== Custom .btn classes (sub2api uses these everywhere) ===== */
.btn-primary{background-color:#CC785C!important;background-image:none!important;border-color:#CC785C!important;color:#fff!important}
.btn-primary:hover{background-color:#b25e3f!important;background-image:none!important;border-color:#b25e3f!important}
.btn-primary:active,.btn-primary:focus{background-color:#a3553a!important;border-color:#a3553a!important}
.btn-primary:disabled,.btn-primary[disabled]{background-color:#e0a890!important;border-color:#e0a890!important;cursor:not-allowed}
.btn-secondary{background-color:#fff!important;border-color:#e5d8c8!important;color:#1f2937!important}
.btn-secondary:hover{background-color:#faeee6!important;border-color:#CC785C!important;color:#b25e3f!important}
.btn-danger{background-color:#dc2626!important;color:#fff!important}

/* ===== Custom .badge classes ===== */
.badge-primary{background-color:#faeee6!important;color:#b25e3f!important;border-color:#ebc1ad!important}
.badge-success{background-color:#d1fae5!important;color:#047857!important}
.badge-warning{background-color:#fef3c7!important;color:#b45309!important}
.badge-danger{background-color:#fee2e2!important;color:#b91c1c!important}

/* ===== Tailwind primary palette already covered above. Below: bg / text / border / ring utilities ===== */
.bg-primary-50{background-color:#faeee6!important}
.bg-primary-100{background-color:#f0d2c4!important}
.bg-primary-500{background-color:#CC785C!important}
.bg-primary-600{background-color:#b25e3f!important}
.bg-primary-700{background-color:#a3553a!important}
.text-primary-500,.text-primary-600{color:#b25e3f!important}
.text-primary-700{color:#a3553a!important}
.text-primary-400,.text-primary-300{color:#CC785C!important}
.border-primary-500,.border-primary-600{border-color:#CC785C!important}
.ring-primary-500,.ring-primary-600,.focus\:ring-primary-500:focus{--tw-ring-color:#CC785C!important}
.from-primary-500{--tw-gradient-from:#CC785C!important}
.to-primary-700{--tw-gradient-to:#a3553a!important}
.via-primary-600{--tw-gradient-via:#b25e3f!important}

/* Dark mode primaries */
.dark\:bg-primary-900\/20{background-color:rgba(113,56,38,.2)!important}
.dark\:bg-primary-900\/30{background-color:rgba(113,56,38,.3)!important}
.dark\:text-primary-400{color:#d99578!important}

/* Soften "teal" leftover semantics — only those that look brand-colored, not success markers */
.bg-teal-100,.bg-cyan-100,.bg-sky-100{background-color:#faeee6!important}
.text-teal-600,.text-cyan-600,.text-sky-600{color:#CC785C!important}
.bg-teal-50{background-color:#fdf7f3!important}

/* Element Plus fallbacks — kept in case some pages use them */
.el-button--primary{--el-button-bg-color:#CC785C!important;--el-button-border-color:#CC785C!important;--el-button-hover-bg-color:#b25e3f!important;--el-button-hover-border-color:#b25e3f!important;--el-button-active-bg-color:#a3553a!important;--el-button-active-border-color:#a3553a!important}
.el-button--primary.is-plain{--el-button-bg-color:#faeee6!important;--el-button-border-color:#ebc1ad!important;--el-button-text-color:#CC785C!important;--el-button-hover-bg-color:#CC785C!important;--el-button-hover-text-color:#fff!important}
.el-link--primary{color:#CC785C!important}
.el-menu-item.is-active,.el-sub-menu .el-menu-item.is-active{color:#CC785C!important;background-color:#faeee6!important}
.el-switch.is-checked .el-switch__core{background-color:#CC785C!important;border-color:#CC785C!important}
.el-tabs__active-bar{background-color:#CC785C!important}
.el-tabs__item.is-active{color:#CC785C!important}
.el-input__wrapper.is-focus{box-shadow:0 0 0 1px #CC785C inset!important}
.el-tag--primary{background-color:#faeee6!important;border-color:#ebc1ad!important;color:#b25e3f!important}

/* Generic links inside content (excluding navigation) */
a:not([class*="el-"]):not(.btn):not([class*="text-"]):not(.nav-link):not(.kna-topbar-btn):not(.kna-topbar-brand):not(.kna-footer-logo){color:#CC785C}
a:not([class*="el-"]):not(.btn):not(.kna-topbar-btn):not(.kna-topbar-brand):not(.kna-footer-logo):hover{color:#b25e3f}

/* Gradient text */
.gradient-text,.gradient-coral{background:linear-gradient(135deg,#CC785C,#b25e3f)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
.bg-gradient-to-br[class*="primary"],.bg-gradient-to-r[class*="primary"]{background:linear-gradient(135deg,#CC785C,#b25e3f)!important}

/* Form inputs focus state */
input:focus,textarea:focus,select:focus{outline:none!important;box-shadow:0 0 0 3px rgba(204,120,92,.15)!important;border-color:#CC785C!important}

/* Card hover/active states */
.card-active,.is-active{border-color:#CC785C}

/* Toggle/switch (Tailwind Headless UI style) */
.peer-checked\:bg-primary-500:checked,.peer:checked~.peer-checked\:bg-primary-500{background-color:#CC785C!important}

/* Loading spinner */
.text-primary{color:#CC785C!important}
.fill-primary{fill:#CC785C!important}
.stroke-primary{stroke:#CC785C!important}

/* Override gradient backgrounds on primary buttons */
.btn-primary,button.btn-primary,a.btn-primary,.bg-gradient-to-r.from-teal-500,.bg-gradient-to-r.from-emerald-500,.bg-gradient-to-r.from-cyan-500,.bg-gradient-to-br.from-teal-500,.bg-gradient-to-br.from-emerald-500{background-image:linear-gradient(to right,#CC785C,#b25e3f)!important}
.btn-primary:hover,button.btn-primary:hover{background-image:linear-gradient(to right,#b25e3f,#a3553a)!important}
.btn-primary:disabled,button.btn-primary:disabled{background-image:linear-gradient(to right,#e0a890,#d99578)!important}

/* ===== Balance / status text tints — keep semantic green but warmer ===== */
.text-emerald-500{color:#10A36C!important}
.text-emerald-700{color:#0e8155!important}
.dark\:text-emerald-300{color:#3fbf85!important}

/* "Current Balance" type green text → neutral ink */
.balance-display,.recharge-balance,[class*="balance"][class*="text-green"],[class*="balance"][class*="text-emerald"]{color:var(--ink,#1F1A15)!important}

/* Stat card icons: keep rainbow but warm the bright green to sage */
.bg-emerald-100{background-color:#E5EFE0!important}
.bg-green-100{background-color:#E8EFE0!important}
.bg-cyan-100,.bg-sky-100,.bg-blue-100{background-color:#E5EAEF!important}
.text-emerald-600,.text-green-600{color:#5A7A4F!important}
.text-cyan-600,.text-sky-600,.text-blue-600{color:#5A6E84!important}

/* ==== Purchase page: hide duplicate stripe-hint that lands inside the payment-method grid (we keep the one outside the grid) ==== */
.grid.grid-cols-2 > .kna-stripe-hint,
.sm\:flex > .kna-stripe-hint { display: none !important; }

/* ==========================================================
   Driver.js onboarding tour — KNA brand override
   ========================================================== */
.driver-popover.theme-tour-popover,
.driver-popover {
  background: #FAF7F2 !important;          /* cream-soft */
  border: 1px solid #E5DCD0 !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px -28px rgba(38,22,12,0.32),
              0 4px 14px -6px rgba(38,22,12,0.18) !important;
  font-family: "Inter","Noto Sans SC",system-ui,sans-serif !important;
  color: #1F1A15 !important;
  padding: 22px 24px !important;
}
.driver-popover-title {
  font-family: "Source Serif 4","Noto Serif SC",Georgia,serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  color: #1F1A15 !important;
  line-height: 1.3 !important;
  margin: 0 0 12px !important;
}
.driver-popover-description {
  color: #5A4F44 !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}
.driver-popover-description strong { color: #1F1A15 !important; }
.driver-popover-description code {
  background: #faeee6 !important;
  color: #b25e3f !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-size: 0.92em !important;
  font-family: "JetBrains Mono",ui-monospace,Menlo,monospace !important;
}
.driver-popover-close-btn {
  color: #8C7E6F !important;
  font-size: 18px !important;
  width: 26px !important;
  height: 26px !important;
  line-height: 26px !important;
  background: transparent !important;
  border-radius: 50% !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}
.driver-popover-close-btn:hover {
  background: #faeee6 !important;
  color: #b25e3f !important;
}

/* Footer area */
.driver-popover-footer {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 18px !important;
  padding-top: 16px !important;
  border-top: 1px solid #E5DCD0 !important;
}
.driver-popover-progress-text {
  font-family: "JetBrains Mono",ui-monospace,Menlo,monospace !important;
  font-size: 11.5px !important;
  color: #8C7E6F !important;
  letter-spacing: 0.04em !important;
}
.driver-popover-navigation-btns {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
  margin-left: auto !important;
}

/* CTA button — coral, replaces teal */
.driver-popover-next-btn {
  background: linear-gradient(180deg, #CC785C 0%, #b25e3f 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 10px !important;
  padding: 9px 18px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 0 rgba(0,0,0,0.08) !important;
  box-shadow: 0 6px 16px -6px rgba(204,120,92,0.45),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.driver-popover-next-btn:hover:not([disabled]):not(.driver-popover-btn-disabled) {
  background: linear-gradient(180deg, #d6896f 0%, #b25e3f 100%) !important;
  box-shadow: 0 8px 22px -6px rgba(204,120,92,0.55),
              inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-1px);
}

/* Skip / prev (跳过) */
.driver-popover-prev-btn {
  background: transparent !important;
  color: #5A4F44 !important;
  border: 1px solid #E5DCD0 !important;
  border-radius: 10px !important;
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}
.driver-popover-prev-btn:hover:not(.driver-popover-btn-disabled) {
  background: #faeee6 !important;
  border-color: #CC785C !important;
  color: #b25e3f !important;
}
.driver-popover-prev-btn.driver-popover-btn-disabled {
  opacity: 0.45 !important;
  cursor: not-allowed !important;
}

/* Keyboard hint chips ESC, ←, → */
.driver-popover-footer kbd,
.driver-popover-footer .kbd,
.driver-popover-arrow-btns {
  font-family: "JetBrains Mono",ui-monospace,Menlo,monospace !important;
  font-size: 11px !important;
  color: #8C7E6F !important;
}

/* Arrow on popover (the speech-bubble triangle) */
.driver-popover-arrow {
  border-color: #FAF7F2 !important;
}
.driver-popover-arrow-side-top.driver-popover-arrow,
.driver-popover-arrow-side-bottom.driver-popover-arrow,
.driver-popover-arrow-side-left.driver-popover-arrow,
.driver-popover-arrow-side-right.driver-popover-arrow {
  border-color: #FAF7F2 !important;
}

/* Backdrop overlay tint a hint of cream/coral instead of pure black */
.driver-overlay,
.driver-active-element + .driver-overlay {
  background: rgba(31,26,21,0.55) !important;
}

/* "Let's complete the initial setup in 3 minutes →" CTA-link inside description */
.driver-popover-description :is(p,div):last-child {
  color: #b25e3f !important;
}

@media (max-width: 600px) {
  .driver-popover { padding: 18px 18px !important; max-width: calc(100vw - 24px) !important; }
  .driver-popover-title { font-size: 18px !important; }
  .driver-popover-description { font-size: 14px !important; }
  .driver-popover-next-btn { padding: 9px 16px !important; font-size: 13.5px !important; }
}


/* ==========================================================
   Profile / Settings page — KNA brand-consistent override
   修复 sub2api 个人设置页大块 coral 渐变饱和度过高的问题。
   把 Tailwind from-primary-50 等编译出的深色 coral gradient
   全部改回 cream-soft 调,保持 KNA 桌面端克制的视觉风格。
   ========================================================== */

/* Hero card — admin info banner */
section.card.bg-gradient-to-br.from-primary-50,
.card.bg-gradient-to-br.from-primary-50.via-white,
section[class*="from-primary-50"][class*="to-amber"] {
  background: linear-gradient(135deg, #FAF7F2 0%, #FFFFFF 50%, #FAEEE6 100%) !important;
  border: 1px solid #E5DCD0 !important;
  box-shadow: 0 12px 32px -22px rgba(38,22,12,0.12) !important;
}

/* Make text inside the hero card readable on light bg */
section.card.bg-gradient-to-br.from-primary-50 *,
.card.bg-gradient-to-br.from-primary-50 * {
  color: inherit !important;
}
section.card.bg-gradient-to-br.from-primary-50 h1,
section.card.bg-gradient-to-br.from-primary-50 h2,
section.card.bg-gradient-to-br.from-primary-50 h3,
.card.bg-gradient-to-br.from-primary-50 h1,
.card.bg-gradient-to-br.from-primary-50 h2,
.card.bg-gradient-to-br.from-primary-50 h3 {
  color: #1F1A15 !important;
}

/* The avatar 'A' big block in hero — give it brand coral */
section.card.bg-gradient-to-br.from-primary-50 .h-24,
section.card.bg-gradient-to-br.from-primary-50 .h-28,
section.card.bg-gradient-to-br.from-primary-50 [class*="rounded-2xl"][class*="bg-"] {
  background: linear-gradient(135deg, #CC785C 0%, #b25e3f 100%) !important;
  box-shadow: 0 10px 26px -10px rgba(204,120,92,0.45) !important;
}

/* Stat cards (账户余额 / 并发限制 / 注册时间) — clean white pills */
section.card.bg-gradient-to-br.from-primary-50 .grid > div,
section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="rounded"]:not(:first-child) {
  background: rgba(255,255,255,0.78) !important;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(229,220,208,0.6) !important;
  box-shadow: 0 2px 6px -2px rgba(38,22,12,0.06) !important;
}
section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-xl,
section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-2xl,
section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="text-2xl"] {
  color: #1F1A15 !important;
  font-family: "Source Serif 4","Noto Serif SC",Georgia,serif !important;
  font-weight: 600 !important;
}
section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-xs,
section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-sm,
section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="text-xs"],
section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="text-sm"] {
  color: #8C7E6F !important;
  font-family: "JetBrains Mono",ui-monospace,Menlo,monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* Soften ALL Tailwind primary-tinted gradients across sub2api app */
[class*="from-primary-50"][class*="via-white"][class*="to-amber-50"],
.bg-gradient-to-br.from-primary-50,
.bg-gradient-to-r.from-primary-50,
.bg-gradient-to-tr.from-primary-50 {
  background: linear-gradient(135deg, #FAF7F2 0%, #FFFFFF 60%, #FAEEE6 100%) !important;
}

/* Soften from-primary-100, from-primary-200 too */
[class*="from-primary-100"][class*="to-amber"] {
  background: linear-gradient(135deg, #FAEEE6 0%, #FFFFFF 100%) !important;
}

/* "管理员" / "启用" badges — keep them subtle */
[class*="bg-primary-100"][class*="text-primary"] {
  background: rgba(204,120,92,0.10) !important;
  color: #b25e3f !important;
  border: 1px solid rgba(204,120,92,0.20) !important;
}

/* "更新资料" coral primary button — keep coral but improve hover */
button[class*="bg-primary-500"],
button[class*="bg-primary-600"] {
  background: linear-gradient(180deg, #CC785C 0%, #b25e3f 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 6px 14px -6px rgba(204,120,92,0.40),
              inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transition: all 0.15s ease !important;
}
button[class*="bg-primary-500"]:hover:not(:disabled),
button[class*="bg-primary-600"]:hover:not(:disabled) {
  background: linear-gradient(180deg, #d6896f 0%, #b25e3f 100%) !important;
  box-shadow: 0 10px 22px -6px rgba(204,120,92,0.55),
              inset 0 1px 0 rgba(255,255,255,0.22) !important;
  transform: translateY(-1px);
}

/* Avatar 'A' block in 资料头像 sub-card */
.card .rounded-2xl[class*="primary"][class*="text-white"] {
  background: linear-gradient(135deg, #CC785C 0%, #b25e3f 100%) !important;
  box-shadow: 0 6px 16px -8px rgba(204,120,92,0.4) !important;
}

/* Inputs — subtle KNA style (better border + focus ring)
   IMPORTANT: skip inputs that use the .input class (sub2api icon-prefix layout)
   or Tailwind pl-* helper (custom prefix slots like ¥/search/lock) */
.card input[type="text"]:not(.input):not([class*="pl-"]):not([class*="pr-"]),
.card input[type="email"]:not(.input):not([class*="pl-"]):not([class*="pr-"]) {
  border: 1px solid #E5DCD0 !important;
  background: #fff !important;
  border-radius: 10px !important;
  padding: 10px 14px !important;
  font-family: "Inter","Noto Sans SC",system-ui,sans-serif !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.card input[type="text"]:not(.input):not([class*="pl-"]):not([class*="pr-"]):focus,
.card input[type="email"]:not(.input):not([class*="pl-"]):not([class*="pr-"]):focus {
  border-color: #CC785C !important;
  box-shadow: 0 0 0 3px rgba(204,120,92,0.15) !important;
  outline: none !important;
}

/* "已绑定" / "管理员" / "启用" green pills — make them softer */
[class*="bg-green-100"],
[class*="bg-success"] {
  background: #d1fae5 !important;
  color: #065f46 !important;
  border: 1px solid rgba(16,185,129,0.25) !important;
  font-weight: 500 !important;
}

/* Generic .card style improvement */
.card {
  border-radius: 16px !important;
  border-color: #E5DCD0 !important;
  box-shadow: 0 4px 12px -8px rgba(38,22,12,0.06),
              0 1px 3px -1px rgba(38,22,12,0.04) !important;
}

/* Section title in profile (资料与头像 / 登录方式绑定) */
.card > div > h2,
.card > div > h3 {
  font-family: "Source Serif 4","Noto Serif SC",Georgia,serif !important;
  font-weight: 600 !important;
  color: #1F1A15 !important;
  letter-spacing: -0.01em !important;
}

/* ==========================================================
   Profile fix v2 — restore stat card white background that v1 broke
   ========================================================== */

/* Stat cards (账户余额 / 并发限制 / 注册时间) MUST stay white-glass */
section.card.bg-gradient-to-br.from-primary-50 .grid > div[class*="bg-white"],
section.card.bg-gradient-to-br.from-primary-50 [class*="rounded-2xl"][class*="bg-white"] {
  background: rgba(255,255,255,0.85) !important;
  background-image: none !important;
  border: 1px solid rgba(229,220,208,0.55) !important;
  box-shadow: 0 2px 8px -3px rgba(38,22,12,0.06) !important;
}

/* Override v1 too-broad rule that was painting all rounded-2xl with coral */
section.card.bg-gradient-to-br.from-primary-50 [class*="rounded-2xl"][class*="bg-"] {
  /* reset — v1 was wrong */
  background: unset;
}

/* Re-apply coral ONLY to actual avatar block (h-20 / h-24 / h-28 / w-20 etc — big square with letter inside) */
section.card.bg-gradient-to-br.from-primary-50 [class*="h-20"][class*="w-20"],
section.card.bg-gradient-to-br.from-primary-50 [class*="h-24"][class*="w-24"],
section.card.bg-gradient-to-br.from-primary-50 [class*="h-28"][class*="w-28"] {
  background: linear-gradient(135deg, #CC785C 0%, #b25e3f 100%) !important;
  box-shadow: 0 10px 26px -10px rgba(204,120,92,0.45) !important;
}

/* ==========================================================
   v3 — comprehensive UI fixes (2026-05-07)
   修复:
   1. /login & /register 邮箱/验证码输入框图标与占位符重叠
   2. /forgot-password & /reset-password 整页饱和 coral 背景
   3. .text-gradient 仍是原 sub2api 的青色 (#14b8a6) - 改为 KNA coral
   4. 顶部 navigation-progress-bar 青色 - 改为 coral
   5. 微弱青色网格背景 - 改为温和 ink
   ========================================================== */

/* --- Bug 1 修复: icon-wrapped 输入框左 padding 必须保留 ---
   .input-wrap 容器内的 .input 元素,其前置 .input-icon 是 absolute 定位
   left:14px width:16px,所以 .input 必须保留 padding-left: 42px。
   上面 .card input[type="email"] {padding:10px 14px} 把它击穿了。 */
.input-wrap > .input,
.input-wrap > input,
.card .input-wrap > .input,
.card .input-wrap > input {
  padding: 0 14px 0 42px !important;
  height: 46px !important;
  border-radius: 11px !important;
}

/* 同时让上面的 .card 输入框规则跳过带 icon 包裹 / 带 pl-* 的输入 */
.card .input-wrap input {
  /* 已经被上面 padding 覆盖,这里再加一次防御 */
  padding-left: 42px !important;
}

/* --- Bug 2 修复: 认证页装饰背景 - 不能被强制成饱和 coral ---
   sub2api Vue 认证页 (forgot/reset/邀请) 用一层 absolute inset-0 的
   bg-gradient-to-br from-gray-50 via-primary-50/30 to-gray-100,
   被前面 .bg-gradient-to-br[class*="primary"] 全局规则强制成纯 coral。
   恢复为 KNA 奶油背景 (与登录页主视觉一致)。 */
.absolute.inset-0.bg-gradient-to-br[class*="from-gray"],
.absolute.inset-0.bg-gradient-to-br[class*="via-primary"],
div.bg-gradient-to-br[class*="from-gray-50"][class*="via-primary"],
div.bg-gradient-to-br[class*="from-gray-50"][class*="to-gray"] {
  background: linear-gradient(135deg, #FAF7F2 0%, #FFFFFF 50%, #FAEEE6 100%) !important;
  background-image: linear-gradient(135deg, #FAF7F2 0%, #FFFFFF 50%, #FAEEE6 100%) !important;
}

/* via-primary 但不是 from-primary 的(中间过渡 tint), 弱化成奶油 */
.bg-gradient-to-br[class*="via-primary"]:not([class*="from-primary"]):not(.card),
.bg-gradient-to-r[class*="via-primary"]:not([class*="from-primary"]):not(.card),
.bg-gradient-to-tr[class*="via-primary"]:not([class*="from-primary"]):not(.card) {
  background: linear-gradient(135deg, #FAF7F2 0%, #FFFFFF 50%, #F5F1EB 100%) !important;
  background-image: linear-gradient(135deg, #FAF7F2 0%, #FFFFFF 50%, #F5F1EB 100%) !important;
}

/* --- Bug 3 修复: .text-gradient 改为 KNA coral 渐变 ---
   原 sub2api: linear-gradient(to right, #14b8a6, #64748b) -- 青色 -> 石板色
   KNA 品牌: coral -> ink (墨黑)，优雅且品牌一致 */
.text-gradient,
h1.text-gradient,
h2.text-gradient,
h3.text-gradient,
span.text-gradient,
.text-gradient * {
  background-image: linear-gradient(to right, #CC785C 0%, #1F1A15 100%) !important;
  --tw-gradient-from: #CC785C !important;
  --tw-gradient-to: #1F1A15 !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}

/* --- Bug 4 修复: 顶部进度条 teal -> coral --- */
.navigation-progress-bar {
  background: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    #CC785C 20%,
    #b25e3f 50%,
    #CC785C 80%,
    rgba(0,0,0,0) 100%
  ) !important;
  background-image: linear-gradient(90deg,
    rgba(0,0,0,0) 0%,
    #CC785C 20%,
    #b25e3f 50%,
    #CC785C 80%,
    rgba(0,0,0,0) 100%
  ) !important;
}

/* --- Bug 5 修复: 网格背景纹理 teal(rgba(20,184,166,...)) -> 温和 ink --- */
.absolute.inset-0[class*="rgba(20,184,166"] {
  background-image:
    linear-gradient(rgba(204,120,92,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(204,120,92,0.025) 1px, transparent 1px) !important;
}

/* --- 副效应: 认证 card-glass 在新奶油背景上需要白色不透明度提升 ---
   原本在 coral 上 card-glass 半透明显示得粉红;新背景下透明度需要调整
   保证有足够对比与可读性 */
.card-glass {
  background: rgba(255,255,255,0.92) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
  border: 1px solid rgba(229,220,208,0.65) !important;
  box-shadow:
    0 24px 48px -24px rgba(38,22,12,0.12),
    0 4px 12px -4px rgba(38,22,12,0.06) !important;
}

/* ==========================================================
   v4 — Tailwind pl-* / 自定义金额 / 搜索框保护
   ==========================================================
   覆盖场景:
   - /purchase 自定义金额 input.input.pl-8 (¥ prefix)
   - 搜索框 input.input.pl-10 (搜索图标 prefix)
   - 任何 sub2api Vue 组件中 .input + Tailwind pl-N
   核心规则: .input 类的 input 永远遵守 Tailwind pl-* 显式声明,
   不被任何 .card 父级规则击穿。 */

/* 任何带 .input 类 + Tailwind pl-* 的 input,
   左 padding 必须遵循 Tailwind 像素值 (1rem=16px, pl-7=28, pl-8=32, pl-9=36, pl-10=40, pl-11=44, pl-12=48) */
input.input[class*="pl-7"]  { padding-left: 28px !important; }
input.input[class*="pl-8"]  { padding-left: 32px !important; }
input.input[class*="pl-9"]  { padding-left: 36px !important; }
input.input[class*="pl-10"] { padding-left: 40px !important; }
input.input[class*="pl-11"] { padding-left: 44px !important; }
input.input[class*="pl-12"] { padding-left: 48px !important; }

/* 同理右 padding (input 末尾带 X 清除按钮 / 切换密码可见按钮的场景) */
input.input[class*="pr-7"]  { padding-right: 28px !important; }
input.input[class*="pr-8"]  { padding-right: 32px !important; }
input.input[class*="pr-9"]  { padding-right: 36px !important; }
input.input[class*="pr-10"] { padding-right: 40px !important; }
input.input[class*="pr-11"] { padding-right: 44px !important; }
input.input[class*="pr-12"] { padding-right: 48px !important; }

/* 通用兜底: .relative 容器内带 absolute 定位 prefix span 的 input
   (purchase 页 ¥ prefix 走的就是这个 pattern,不依赖 .input-wrap) */
div.relative > span[class*="absolute"] + input.input,
div.relative > span[class*="absolute"][class*="left-3"] ~ input,
div.relative > span[class*="absolute"][class*="left-2"] ~ input {
  padding-left: 32px !important;
}

/* purchase 页面 当前余额 数字数颜色保留绿色 (visually fine);
   只确保整个 card 不被前面规则误染 */
.card[class*="bg-gradient"]:not([class*="from-primary"]) {
  /* 不主动改 - 让 sub2api 自己渲染 */
}

/* ==========================================================
   Profile hero — DARK MODE variant (2026-05-11)
   The earlier light-mode override (lines ~282-460) forces cream
   bg unconditionally. In dark mode that block looked like a bright
   cream rectangle floating inside a dark page. Below: re-skin the
   hero, stat pills, and copy for html.dark.
   ========================================================== */

/* Hero card body in dark mode */
html.dark section.card.bg-gradient-to-br.from-primary-50,
html.dark .card.bg-gradient-to-br.from-primary-50,
html.dark section[class*="from-primary-50"][class*="to-amber"],
.dark section.card.bg-gradient-to-br.from-primary-50,
.dark .card.bg-gradient-to-br.from-primary-50 {
  background: linear-gradient(135deg, #1a1410 0%, #211a15 50%, #2a1f17 100%) !important;
  border: 1px solid rgba(204,120,92,0.20) !important;
  box-shadow: 0 12px 32px -18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

/* Headline + secondary email text in dark hero */
html.dark section.card.bg-gradient-to-br.from-primary-50 h1,
html.dark section.card.bg-gradient-to-br.from-primary-50 h2,
html.dark section.card.bg-gradient-to-br.from-primary-50 h3,
html.dark .card.bg-gradient-to-br.from-primary-50 h1,
html.dark .card.bg-gradient-to-br.from-primary-50 h2 {
  color: #F5F1EB !important;
}

html.dark section.card.bg-gradient-to-br.from-primary-50 p,
html.dark section.card.bg-gradient-to-br.from-primary-50 .text-gray-600,
html.dark section.card.bg-gradient-to-br.from-primary-50 .text-gray-500,
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="text-gray-4"] {
  color: #B8AB9C !important;
}

/* Stat cards (账户余额/并发/注册时间) — dark glass pills */
html.dark section.card.bg-gradient-to-br.from-primary-50 .grid > div[class*="bg-white"],
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="rounded-2xl"][class*="bg-white"],
html.dark section.card.bg-gradient-to-br.from-primary-50 .grid > div {
  background: rgba(255,255,255,0.04) !important;
  background-image: none !important;
  border: 1px solid rgba(204,120,92,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02) !important;
  backdrop-filter: none !important;
}

/* Stat numerical values in dark hero — bright serif */
html.dark section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-xl,
html.dark section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-2xl,
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="text-2xl"],
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="text-xl"] {
  color: #F5F1EB !important;
}

/* Stat labels (ACCOUNT BALANCE / CONCURRENCY LIMIT / MEMBER SINCE) */
html.dark section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-xs,
html.dark section.card.bg-gradient-to-br.from-primary-50 .grid > div .text-sm,
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="text-xs"],
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="grid"] [class*="text-sm"] {
  color: #8C7E6F !important;
}

/* Role badge "User" — dark hero variant */
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="bg-gray-"],
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="bg-slate-"] {
  background: rgba(255,255,255,0.06) !important;
  color: #DDD2C3 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
}

/* "Active" green pill — dark hero variant */
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="bg-green-"],
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="bg-emerald-"],
html.dark section.card.bg-gradient-to-br.from-primary-50 [class*="bg-success"] {
  background: rgba(34,197,94,0.14) !important;
  color: #5FE39A !important;
  border: 1px solid rgba(34,197,94,0.28) !important;
}

/* Soften OTHER primary-50 gradients across pages — keep dark variant too */
html.dark [class*="from-primary-50"][class*="via-white"][class*="to-amber-50"],
html.dark .bg-gradient-to-br.from-primary-50,
html.dark .bg-gradient-to-r.from-primary-50,
html.dark .bg-gradient-to-tr.from-primary-50 {
  background: linear-gradient(135deg, #1a1410 0%, #211a15 60%, #2a1f17 100%) !important;
}

html.dark [class*="from-primary-100"][class*="to-amber"] {
  background: linear-gradient(135deg, #2a1f17 0%, #1a1410 100%) !important;
}


/* KNA-HIDE-UPSTREAM-UPDATER */
/* Hide sub2api's in-place auto-update UI. Our KNA build of sub2api is heavily
 * customized (kna-rewriter, KNA-branded emails, custom auth pages, downstream
 * API consumers like kna-chat and kna-desktop). The upstream auto-updater
 * would replace the running binary in-place and could break those integrations.
 * We do controlled upgrades via docker pull + staging tests, so the in-app
 * updater is suppressed.
 *
 * Selector: the sidebar version pill becomes amber-colored + gets a
 * title attribute mentioning a new version when sub2api detects one.
 * Plain version display (no update) uses different styling and stays visible. */
.sidebar-brand button[title*="新版本"] {
  display: none !important;
}

/* === 2026-05-14 mobile responsive bug fix ============================
 * Bug: sub2api SPA uses Tailwind "flex-1 truncate" on text holders inside
 * flex rows. When the text content is longer than the row (e.g. affiliate
 * URL "https://code.wearekna.com/register?aff=XXXXX"), flex-1 refuses to
 * shrink below its content width because the flex item default is
 * min-width:auto. Result: the row overflows the viewport horizontally
 * on phones (~360-414px wide).
 * Fix: add min-width:0 so truncate (overflow:hidden + ellipsis) works.
 * Scope: only <=768px to leave desktop layout untouched.
 * ==================================================================== */
@media (max-width: 768px) {
  .flex-1.truncate { min-width: 0 !important; }
  /* Defensive: any direct flex child with truncate also needs min-w-0 */
  [class~="flex"] > .truncate,
  [class*=" flex "] > .truncate { min-width: 0 !important; }
  /* Prevent rogue overflow from leaking horizontal scroll to whole page */
  body { overflow-x: hidden !important; }
}

/* === 2026-05-14b mobile defensive overflow guards ===================
 * Belt-and-suspenders on top of the earlier .flex-1.truncate fix.
 * Some Tailwind flex children dont have .truncate yet still cause
 * horizontal overflow on real mobile when content exceeds row width.
 * ==================================================================== */
@media (max-width: 768px) {
  /* Any flex-1 element — give it permission to shrink */
  .flex-1 { min-width: 0 !important; }
  /* Any element with whitespace:nowrap that overflows: ellipsis it */
  .truncate { max-width: 100% !important; }
  /* Hard wall against horizontal scroll on the html level */
  html { overflow-x: hidden !important; }
}

/* === 2026-05-14c mobile: replace truncate-with-ellipsis with wrap =====
 * User feedback: previous fix used `truncate` which clips URL with "..."
 * but hides part of the text. Long URLs become un-readable / un-selectable.
 * Better: let those rows wrap onto multiple lines on mobile so the full
 * URL/code is visible and copyable. Scope to the rounded-xl rows that
 * sub2api uses to display code/URL (the affiliate page pattern).
 * ==================================================================== */
@media (max-width: 768px) {
  .rounded-xl.bg-gray-50 .flex-1,
  .rounded-xl.dark\:bg-dark-900 .flex-1,
  .rounded-xl[class*="bg-gray"] .flex-1.truncate,
  .rounded-xl[class*="bg-gray"] .flex-1 {
    white-space: normal !important;
    word-break: break-all !important;
    overflow: visible !important;
    text-overflow: clip !important;
    min-width: 0 !important;
  }
}