/* ==========================================================================
   YUANCHU AI - RED & WHITE SHARP INDUSTRIAL THEME (元初AI 红白纯直角科技体系)
   Full Coverage: Dashboard, Metric Cards, Charts, Filter Bar, Header, Sidebar
   Sidebar Header: Exactly matches yc-top-brand aesthetic
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800;900&family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');

:root {
  --yc-red: #e11d48;
  --yc-red-hover: #be123c;
  --yc-red-active: #9f1239;
  --yc-red-light: #fff1f2;
  --yc-red-border: rgba(225, 29, 72, 0.35);
  --yc-red-glow: rgba(225, 29, 72, 0.12);
  
  --yc-black: #090d16;
  --yc-dark: #0f172a;
  --yc-slate: #334155;
  --yc-gray: #64748b;
  --yc-gray-light: #94a3b8;
  --yc-border: #e2e8f0;
  --yc-border-dark: #cbd5e1;
  --yc-bg-page: #f8fafc;
  --yc-bg-card: #ffffff;
  --yc-font: 'Plus Jakarta Sans', 'Noto Sans SC', system-ui, -apple-system, sans-serif;
  --yc-mono: 'JetBrains Mono', monospace;

  --primary-50: 255 241 242;
  --primary-100: 255 228 230;
  --primary-200: 254 205 211;
  --primary-300: 253 164 175;
  --primary-400: 251 113 133;
  --primary-500: 244 63 94;
  --primary-600: 225 29 72;
  --primary-700: 190 18 60;
  --primary-800: 159 18 57;
  --primary-900: 136 19 55;
}

/* ==========================================================================
   1. GLOBAL RESET & UNIVERSAL SHARP CORNERS (全系统直角)
   ========================================================================== */
html, body {
  font-family: var(--yc-font) !important;
  color: var(--yc-dark) !important;
  background-color: var(--yc-bg-page) !important;
  -webkit-font-smoothing: antialiased !important;
}

*,
*::before,
*::after,
.rounded,
.rounded-sm,
.rounded-md,
.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl,
.rounded-full,
[class*="rounded"],
button,
input,
select,
textarea,
.card,
.card-glass,
.card-body,
.badge,
.tag,
.dropdown-menu,
.modal-content,
.tooltip,
.popover,
.avatar,
.img-avatar,
.stat-card,
.nav-item,
.tab,
.sidebar-logo,
.shadow-glow {
  border-radius: 0px !important;
}

/* ==========================================================================
   2. SIDEBAR HEADER (完全复刻 yc-top-brand 经典红白直角排版)
   ========================================================================== */
.sidebar-header {
  height: 72px !important;
  min-height: 72px !important;
  max-height: 72px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 18px !important;
  background: #ffffff !important;
  border-bottom: 2px solid var(--yc-border) !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* 2.1 Logo Box (复刻 .yc-brand-icon-wrap) */
.sidebar-logo,
a.sidebar-logo {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  max-width: 42px !important;
  max-height: 42px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--yc-red) !important;
  border-radius: 0px !important;
  box-shadow: 3px 3px 0px 0px var(--yc-red) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0px !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  transition: all 0.15s ease !important;
}

.sidebar-logo:hover {
  transform: translate(-1px, -1px) !important;
  box-shadow: 4px 4px 0px 0px var(--yc-red) !important;
}

.sidebar-logo img,
a.sidebar-logo img,
.sidebar-header img {
  content: url('/custom/logo-icon.png') !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0px !important;
}

/* 2.2 Brand Text Container (复刻 .yc-brand-text) */
.sidebar-brand {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  background: transparent !important;
  overflow: hidden !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

/* 2.3 Brand Title (复刻 .yc-brand-name + .yc-brand-en) */
.sidebar-brand-title {
  font-size: 19px !important;
  font-weight: 900 !important;
  color: var(--yc-black) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
  text-decoration: none !important;
  display: block !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
}

.sidebar-brand-title:hover {
  color: var(--yc-red) !important;
}

.sidebar-brand-title::after {
  content: 'YUANCHU AI DISPATCH' !important;
  display: block !important;
  font-family: var(--yc-mono) !important;
  font-size: 9.5px !important;
  font-weight: 700 !important;
  color: var(--yc-red) !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

/* Hide extra version button */
.sidebar-brand .relative,
.sidebar-brand div[data-v-3e3138b6] {
  display: none !important;
}

/* ==========================================================================
   3. SIDEBAR NAVIGATION & BODY
   ========================================================================== */
aside,
.sidebar,
nav.sidebar,
[data-v-sidebar] {
  background: #ffffff !important;
  border-right: 1.5px solid var(--yc-border) !important;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02) !important;
}

aside nav a,
.sidebar a.nav-item,
.sidebar a {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--yc-slate) !important;
  border-radius: 0px !important;
  margin: 4px 8px !important;
  padding: 10px 14px !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

aside nav a.router-link-active,
aside nav a.router-link-exact-active,
.sidebar a.router-link-active,
.sidebar a.active,
aside nav a[aria-current="page"],
.sidebar a[aria-current="page"] {
  background-color: var(--yc-red-light) !important;
  color: var(--yc-red) !important;
  font-weight: 800 !important;
  border: 1px solid var(--yc-red-border) !important;
  border-left: 3.5px solid var(--yc-red) !important;
  box-shadow: 2px 2px 0px 0px rgba(225, 29, 72, 0.06) !important;
}

aside nav a.router-link-active svg,
.sidebar a.router-link-active svg {
  color: var(--yc-red) !important;
}

aside nav a:hover:not(.router-link-active),
.sidebar a:hover:not(.router-link-active) {
  background-color: #f1f5f9 !important;
  color: var(--yc-black) !important;
  border: 1px solid var(--yc-border) !important;
}

/* ==========================================================================
   4. DASHBOARD MISSION-CONTROL BACKGROUND
   ========================================================================== */
.layout-content,
main,
.app-layout,
.main-content,
div.min-h-screen.bg-gray-50,
div.min-h-screen.bg-slate-50 {
  background-color: #f8fafc !important;
  background-image: 
    linear-gradient(to right, rgba(225, 29, 72, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(225, 29, 72, 0.035) 1px, transparent 1px),
    radial-gradient(circle at 5% 5%, rgba(225, 29, 72, 0.04) 0%, transparent 35%),
    radial-gradient(circle at 95% 95%, rgba(225, 29, 72, 0.03) 0%, transparent 35%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
}

/* ==========================================================================
   5. STATS METRIC CARDS (8 大数据卡片)
   ========================================================================== */
.grid.grid-cols-1.gap-4,
.grid.grid-cols-2.gap-4,
.grid.grid-cols-4.gap-4,
.grid.gap-4 {
  gap: 14px !important;
}

.grid > div.bg-white,
.grid > div.card,
.stat-card,
div[class*="rounded-xl"][class*="bg-white"] {
  background: #ffffff !important;
  border: 1.5px solid var(--yc-border) !important;
  border-radius: 0px !important;
  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.04) !important;
  padding: 16px 18px !important;
  position: relative !important;
  transition: all 0.18s ease !important;
}

.grid > div.bg-white:hover,
.stat-card:hover {
  border-color: var(--yc-red) !important;
  box-shadow: 3.5px 3.5px 0px 0px var(--yc-red) !important;
  transform: translateY(-1px) !important;
}

.grid > div.bg-white .flex.h-10.w-10,
.grid > div.bg-white .flex.h-11.w-11,
.grid > div.bg-white .flex.h-12.w-12,
.stat-icon-primary,
.stat-card .flex.items-center.justify-center {
  border-radius: 0px !important;
  background-color: var(--yc-red-light) !important;
  border: 1.5px solid var(--yc-red-border) !important;
  box-shadow: 2px 2px 0px 0px rgba(225, 29, 72, 0.1) !important;
  color: var(--yc-red) !important;
}

.grid > div.bg-white svg,
.stat-card svg {
  color: var(--yc-red) !important;
}

.grid > div.bg-white .text-2xl,
.grid > div.bg-white .text-xl,
.grid > div.bg-white .font-bold.text-gray-900,
.grid > div.bg-white .text-emerald-600,
.grid > div.bg-white .text-purple-600 {
  font-family: var(--yc-mono) !important;
  font-weight: 900 !important;
  color: var(--yc-black) !important;
  letter-spacing: -0.5px !important;
}

.grid > div.bg-white:first-child .text-2xl,
.grid > div.bg-white:first-child .text-emerald-600,
.grid > div.bg-white .text-purple-600 {
  color: var(--yc-red) !important;
}

.grid > div.bg-white .text-sm.text-gray-500,
.grid > div.bg-white .text-xs.text-gray-400 {
  font-weight: 700 !important;
  color: var(--yc-gray) !important;
  font-size: 12px !important;
  letter-spacing: 0.3px !important;
}

/* ==========================================================================
   6. FILTER TOOLBAR
   ========================================================================== */
.flex.flex-wrap.items-center.justify-between.gap-4.bg-white,
div[class*="bg-white"][class*="shadow-sm"].p-4 {
  background: #ffffff !important;
  border: 1.5px solid var(--yc-border) !important;
  border-radius: 0px !important;
  box-shadow: 3px 3px 0px 0px rgba(0, 0, 0, 0.03) !important;
  padding: 14px 18px !important;
}

.flex.flex-wrap button,
.flex.flex-wrap select,
.flex.flex-wrap .btn {
  border-radius: 0px !important;
  font-family: var(--yc-mono) !important;
  font-weight: 700 !important;
  border: 1.5px solid var(--yc-border) !important;
  background: #ffffff !important;
  color: var(--yc-dark) !important;
  transition: all 0.15s ease !important;
}

.flex.flex-wrap button:hover,
.flex.flex-wrap select:hover {
  border-color: var(--yc-red) !important;
  color: var(--yc-red) !important;
}

button.btn-primary,
.flex.flex-wrap button.bg-primary-600 {
  background-color: var(--yc-red) !important;
  border: 1.5px solid var(--yc-black) !important;
  color: #ffffff !important;
  box-shadow: 2.5px 2.5px 0px 0px var(--yc-black) !important;
}

button.btn-primary:hover {
  background-color: var(--yc-red-hover) !important;
  box-shadow: 1px 1px 0px 0px var(--yc-black) !important;
  transform: translate(1px, 1px) !important;
}

/* ==========================================================================
   7. MODEL DISTRIBUTION & TOKEN TREND MODULES
   ========================================================================== */
.grid.grid-cols-1.gap-6.lg\:grid-cols-2,
.grid.grid-cols-1.gap-6,
.grid.grid-cols-2.gap-6 {
  gap: 20px !important;
}

.grid.grid-cols-1.gap-6 > div.bg-white,
.grid.grid-cols-2.gap-6 > div.bg-white,
div[class*="rounded-xl"].bg-white.p-6 {
  background: #ffffff !important;
  border: 1.5px solid var(--yc-black) !important;
  border-top: 4px solid var(--yc-red) !important;
  border-radius: 0px !important;
  box-shadow: 5px 5px 0px 0px var(--yc-border), 0 10px 25px -10px rgba(0, 0, 0, 0.05) !important;
  padding: 22px 24px !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

.grid.grid-cols-1.gap-6 > div.bg-white:hover {
  box-shadow: 5px 5px 0px 0px var(--yc-red) !important;
}

.grid.grid-cols-1.gap-6 > div.bg-white h3,
.grid.grid-cols-2.gap-6 > div.bg-white h3,
.grid.grid-cols-1.gap-6 > div.bg-white .text-lg.font-semibold,
div[class*="rounded-xl"].bg-white.p-6 h3 {
  font-size: 16px !important;
  font-weight: 900 !important;
  color: var(--yc-black) !important;
  letter-spacing: -0.3px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
}

.grid.grid-cols-1.gap-6 > div.bg-white h3::before,
div[class*="rounded-xl"].bg-white.p-6 h3::before {
  content: '//' !important;
  font-family: var(--yc-mono) !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: var(--yc-red) !important;
}

.grid.grid-cols-1.gap-6 .flex.flex-col.sm\:flex-row,
.grid.grid-cols-1.gap-6 .flex.flex-col.items-center {
  gap: 20px !important;
  align-items: stretch !important;
}

.grid.grid-cols-1.gap-6 .relative.h-48.w-48,
.grid.grid-cols-1.gap-6 .h-48.w-48 {
  width: 190px !important;
  height: 190px !important;
  min-width: 190px !important;
  background: #fafbfc !important;
  border: 1.5px solid var(--yc-border) !important;
  border-radius: 0px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px !important;
  box-shadow: inset 2px 2px 0px 0px rgba(0,0,0,0.02) !important;
}

.grid.grid-cols-1.gap-6 .relative.h-48.w-48 .text-sm.text-gray-500,
.grid.grid-cols-1.gap-6 .h-48.w-48 .text-sm.text-gray-500 {
  font-family: var(--yc-mono) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--yc-gray) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}

.grid.grid-cols-1.gap-6 .relative.h-48.w-48 .text-sm.text-gray-500::before,
.grid.grid-cols-1.gap-6 .h-48.w-48 .text-sm.text-gray-500::before {
  content: 'NO DATA' !important;
  font-family: var(--yc-mono) !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--yc-red) !important;
  background: var(--yc-red-light) !important;
  padding: 2px 8px !important;
  border: 1px solid var(--yc-red-border) !important;
  border-radius: 0px !important;
}

.grid.grid-cols-1.gap-6 .max-h-48.w-full,
.grid.grid-cols-1.gap-6 .overflow-auto {
  max-height: 190px !important;
  border: 1.5px solid var(--yc-border) !important;
  background: #ffffff !important;
  border-radius: 0px !important;
  padding: 0 !important;
}

.grid.grid-cols-1.gap-6 table thead th {
  background: #f8fafc !important;
  border-bottom: 2px solid var(--yc-black) !important;
  border-top: none !important;
  font-family: var(--yc-mono) !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  color: var(--yc-black) !important;
  padding: 8px 10px !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

.grid.grid-cols-1.gap-6 table tbody tr {
  border-bottom: 1px solid #f1f5f9 !important;
  transition: all 0.12s ease !important;
}

.grid.grid-cols-1.gap-6 table tbody tr:hover {
  background-color: var(--yc-red-light) !important;
}

.grid.grid-cols-1.gap-6 table tbody td {
  padding: 9px 10px !important;
  font-family: var(--yc-mono) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--yc-dark) !important;
}

.grid.grid-cols-1.gap-6 table tbody td:first-child {
  font-weight: 800 !important;
  color: var(--yc-black) !important;
  letter-spacing: -0.2px !important;
}

.grid.grid-cols-1.gap-6 table tbody td.text-green-600,
.grid.grid-cols-1.gap-6 table tbody td:nth-child(4) {
  color: var(--yc-red) !important;
  font-weight: 800 !important;
}

.grid.grid-cols-1.gap-6 > div.bg-white .flex.h-48.items-center.justify-center,
.grid.grid-cols-1.gap-6 > div.bg-white .h-48.flex.items-center {
  background: #fafbfc !important;
  border: 1.5px dashed var(--yc-border) !important;
  font-family: var(--yc-mono) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--yc-gray) !important;
}

/* ==========================================================================
   8. TOP NAVBAR & HEADER BADGES
   ========================================================================== */
header,
.navbar,
nav.header {
  background: #ffffff !important;
  border-bottom: 1.5px solid var(--yc-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

header .text-primary-600,
header a[href*="finance"],
header .bg-primary-50 {
  background: var(--yc-red-light) !important;
  color: var(--yc-red) !important;
  border: 1.5px solid var(--yc-red-border) !important;
  border-radius: 0px !important;
  font-weight: 800 !important;
  font-family: var(--yc-mono) !important;
  box-shadow: 1.5px 1.5px 0px 0px var(--yc-red-border) !important;
}

header .rounded-full,
header .avatar,
header div[class*="rounded-full"].bg-primary-600,
header div[class*="rounded-full"].bg-primary-500 {
  border-radius: 0px !important;
  background: var(--yc-red) !important;
  border: 1.5px solid var(--yc-black) !important;
  color: #ffffff !important;
  font-family: var(--yc-mono) !important;
  font-weight: 800 !important;
}

/* ==========================================================================
   9. TAILWIND COLOR TOKENS
   ========================================================================== */
.text-primary-500,
.text-primary-600,
.text-primary-700,
.text-primary-800,
.text-teal-500,
.text-teal-600,
.text-teal-700,
.text-cyan-500,
.text-cyan-600,
.text-cyan-700,
.hover\:text-primary-600:hover,
.hover\:text-primary-700:hover,
.hover\:text-teal-600:hover {
  color: var(--yc-red) !important;
}

.bg-primary-50,
.bg-primary-100,
.bg-teal-50,
.bg-cyan-50,
.bg-emerald-50,
.bg-primary-50\/40,
.bg-primary-50\/50,
.bg-primary-50\/60,
.bg-primary-50\/70,
.bg-primary-50\/80,
.bg-primary-200\/50,
.bg-teal-100,
.bg-cyan-100,
.hover\:bg-primary-50:hover,
.hover\:bg-teal-50:hover {
  background-color: var(--yc-red-light) !important;
}

.bg-primary-500,
.bg-primary-600,
.bg-primary-700,
.bg-teal-500,
.bg-teal-600,
.bg-cyan-500,
.bg-cyan-600,
.hover\:bg-primary-600:hover,
.hover\:bg-primary-700:hover {
  background-color: var(--yc-red) !important;
}

.border-primary-100,
.border-primary-200,
.border-primary-300,
.border-primary-400,
.border-primary-500,
.border-primary-600,
.border-teal-500,
.border-cyan-500,
.border-t-primary-600,
.hover\:border-primary-500:hover {
  border-color: var(--yc-red) !important;
}

.ring-primary-500,
.ring-primary-600,
.focus\:ring-primary-500:focus,
.focus\:ring-primary-600:focus,
.focus\:border-primary-500:focus {
  --tw-ring-color: var(--yc-red) !important;
  border-color: var(--yc-red) !important;
}

.from-primary-600,
.from-primary-500,
.from-teal-500,
.from-cyan-500 {
  --tw-gradient-from: #e11d48 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: #be123c var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-primary-600,
.to-primary-700,
.to-teal-600,
.to-cyan-600 {
  --tw-gradient-to: #9f1239 var(--tw-gradient-to-position) !important;
}

/* ==========================================================================
   10. AUTH / LOGIN PAGES
   ========================================================================== */
body.yc-auth-active {
  background-color: #ffffff !important;
  background-image: 
    linear-gradient(to right, rgba(225, 29, 72, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(225, 29, 72, 0.04) 1px, transparent 1px),
    radial-gradient(circle at 10% 20%, rgba(225, 29, 72, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(225, 29, 72, 0.04) 0%, transparent 40%) !important;
  background-size: 32px 32px, 32px 32px, 100% 100%, 100% 100% !important;
  background-position: 0 0, 0 0, center, center !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  overflow-x: hidden !important;
}

body.yc-auth-active #app {
  min-height: 100vh !important;
  background: transparent !important;
}

body.yc-auth-active [data-v-86388737] > .absolute,
body.yc-auth-active [data-v-86388737] .pointer-events-none,
body.yc-auth-active [data-v-86388737] .mb-8.text-center,
body.yc-auth-active [data-v-86388737] > .absolute.inset-0,
body.yc-auth-active [data-v-86388737] .mt-8.text-center.text-xs {
  display: none !important;
}

body.yc-auth-active [data-v-86388737].relative.flex {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
  padding: 40px 8% !important;
  min-height: 100vh !important;
  width: 100% !important;
  box-sizing: border-box !important;
  background: transparent !important;
  position: relative !important;
}

@media (max-width: 1024px) {
  body.yc-auth-active [data-v-86388737].relative.flex {
    justify-content: center !important;
    padding: 20px !important;
  }
}

.yc-left-hero {
  position: fixed !important;
  left: 8% !important;
  top: 50% !important;
  transform: translateY(-46%) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 46% !important;
  max-width: 580px !important;
  z-index: 20 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  pointer-events: auto !important;
}

@media (max-width: 1024px) {
  .yc-left-hero {
    display: none !important;
  }
}

.yc-top-brand {
  position: fixed !important;
  top: 36px !important;
  left: 8% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  z-index: 25 !important;
}

.yc-brand-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  background: #ffffff !important;
  border: 1.5px solid var(--yc-red) !important;
  border-radius: 0px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 3px 3px 0px 0px var(--yc-red) !important;
  padding: 0px !important;
  overflow: hidden !important;
}

.yc-brand-icon {
  height: 100% !important;
  width: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.yc-brand-text {
  display: flex !important;
  flex-direction: column !important;
}

.yc-brand-name {
  font-size: 20px !important;
  font-weight: 900 !important;
  color: var(--yc-black) !important;
  letter-spacing: -0.5px !important;
  line-height: 1.1 !important;
}

.yc-brand-en {
  font-family: var(--yc-mono) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--yc-red) !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-top: 2px !important;
}

.yc-hero-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: var(--yc-red-light) !important;
  border: 1px solid var(--yc-red-border) !important;
  border-left: 3px solid var(--yc-red) !important;
  border-radius: 0px !important;
  font-family: var(--yc-mono) !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--yc-red) !important;
  margin-bottom: 20px !important;
  width: fit-content !important;
  text-transform: uppercase !important;
}

.yc-hero-badge .yc-pulse-dot {
  width: 6px !important;
  height: 6px !important;
  background: var(--yc-red) !important;
}

.yc-hero-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: var(--yc-black) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.8px !important;
  margin: 0 0 14px 0 !important;
}

.yc-hero-title span.highlight {
  color: var(--yc-red) !important;
  position: relative !important;
  display: inline-block !important;
}

.yc-hero-subtitle {
  font-size: 15.5px !important;
  font-weight: 500 !important;
  color: var(--yc-gray) !important;
  line-height: 1.6 !important;
  margin: 0 0 28px 0 !important;
}

.yc-features-grid {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 32px !important;
  max-width: 480px !important;
}

.yc-feature-card {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 16px !important;
  background: #ffffff !important;
  border: 1px solid var(--yc-border) !important;
  box-shadow: 2px 2px 0px 0px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
}

.yc-feature-card:hover {
  border-color: var(--yc-red) !important;
  box-shadow: 3px 3px 0px 0px var(--yc-red) !important;
  transform: translateX(2px) !important;
}

.yc-feature-tag {
  font-family: var(--yc-mono) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--yc-red) !important;
  background: var(--yc-red-light) !important;
  padding: 3px 6px !important;
  border: 1px solid var(--yc-red-border) !important;
  flex-shrink: 0 !important;
}

.yc-feature-text {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--yc-dark) !important;
}

.yc-hero-meta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  font-family: var(--yc-mono) !important;
  font-size: 11.5px !important;
  color: #94a3b8 !important;
  border-top: 1px dashed var(--yc-border) !important;
  padding-top: 18px !important;
}

.yc-hero-meta .status-dot {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  background: #10b981 !important;
  margin-right: 6px !important;
}

body.yc-auth-active [data-v-86388737] > .relative.z-10 {
  flex: 0 0 420px !important;
  max-width: 420px !important;
  width: 420px !important;
  margin-left: auto !important;
  margin-right: 2% !important;
  z-index: 30 !important;
}

body.yc-auth-active .card-glass {
  background: #ffffff !important;
  border: 1.5px solid var(--yc-black) !important;
  box-shadow: 6px 6px 0px 0px var(--yc-red), 0 20px 40px -15px rgba(0, 0, 0, 0.08) !important;
  padding: 36px 32px !important;
  position: relative !important;
}

body.yc-auth-active .card-glass::before {
  content: 'YUANCHU AI // 登录控制台' !important;
  display: block !important;
  font-family: var(--yc-mono) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: var(--yc-red) !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 22px !important;
  padding-bottom: 12px !important;
  border-bottom: 1.5px solid #f1f5f9 !important;
}

/* ==========================================================================
   11. TRANSITION OVERLAY
   ========================================================================== */
#yc-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: all;
}

#yc-transition-overlay.yc-overlay-visible {
  opacity: 1;
}

.yc-transition-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 40px;
  background: #ffffff;
  border: 1.5px solid var(--yc-black);
  border-radius: 0px;
  box-shadow: 6px 6px 0px 0px var(--yc-red);
}

.yc-transition-logo-wrap {
  width: 60px;
  height: 60px;
  border-radius: 0px;
  background: var(--yc-red-light);
  border: 1.5px solid var(--yc-red);
  box-shadow: 3px 3px 0px 0px var(--yc-red);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  animation: yc-pulse-sharp 1.5s infinite ease-in-out;
}

.yc-transition-logo {
  width: 36px;
  height: 36px;
  object-fit: cover;
  border-radius: 0px;
}

.yc-transition-title {
  font-size: 19px;
  font-weight: 900;
  color: var(--yc-black);
  letter-spacing: -0.2px;
  margin-bottom: 4px;
}

.yc-transition-msg {
  font-size: 13px;
  font-weight: 500;
  color: var(--yc-gray);
  margin-bottom: 18px;
}

.yc-transition-bar {
  width: 160px;
  height: 4px;
  background: var(--yc-border);
  border-radius: 0px;
  overflow: hidden;
  position: relative;
}

.yc-transition-bar-inner {
  width: 45%;
  height: 100%;
  background: var(--yc-red);
  border-radius: 0px;
  animation: yc-slide-sharp 1.2s infinite cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes yc-pulse-sharp {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes yc-slide-sharp {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}