/* ============================================================
   MIAOHA Cat Theme Enhanced — Pink & Blue · Native .dark toggle
   60fps GPU-composited · Mobile-first · Micro-interactions
   ============================================================ */

/* ===== CSS VARIABLES ===== */
:root {
  --pink-50: #fff0f3;  --pink-100: #ffe4ec; --pink-200: #ffc2d1;
  --pink-300: #ffb3c6; --pink-400: #ff8fa3; --pink-500: #ff6b84;
  --blue-50: #f0f6ff;  --blue-100: #e4f1fd; --blue-200: #c2e0ff;
  --blue-300: #a3cfff; --blue-400: #7eb8ff; --blue-500: #5a9fff;
  --purple-300: #c4b5f8; --purple-400: #a895f0; --purple-500: #8b6fe8;
  --surface: #ffffff; --surface-alt: #faf8fc;
  --text-primary: #2d2345; --text-secondary: #5c5075; --text-muted: #8b7daa;
  --radius: 14px; --radius-sm: 10px; --radius-xs: 8px;
}

.dark {
  --pink-50: #2a1520;  --pink-100: #2d1822; --pink-200: #3d1e2e;
  --pink-300: #5c2840; --pink-400: #d4607e; --pink-500: #e87890;
  --blue-50: #101828;   --blue-100: #141e30; --blue-200: #1a2a40;
  --blue-300: #203858;  --blue-400: #5a90d0; --blue-500: #78a8e0;
  --purple-300: #6858a0; --purple-400: #8870d8; --purple-500: #9b85e8;
  --surface: #1a1528; --surface-alt: #151225;
  --text-primary: #d8d0e8; --text-secondary: #b0a5c8; --text-muted: #7b6d9a;
}

/* ===== BASE ===== */
html { scroll-behavior: smooth; }
body {
  background: linear-gradient(155deg, var(--pink-50) 0%, var(--pink-100) 12%, var(--surface-alt) 38%, var(--blue-50) 62%, var(--blue-100) 100%) !important;
  background-attachment: fixed !important;
  color: var(--text-primary) !important;
  transition: background 0.6s ease, color 0.6s ease;
}
.dark body {
  background: linear-gradient(155deg, #1a1022 0%, #1a1528 35%, #141e30 60%, #101828 100%) !important;
}

/* Ambient orbs — 2 large distinct color zones */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse at 8% 25%, rgba(255,179,198,0.20) 0%, transparent 42%),
    radial-gradient(ellipse at 92% 68%, rgba(163,207,255,0.22) 0%, transparent 42%),
    radial-gradient(ellipse at 50% 85%, rgba(168,149,240,0.10) 0%, transparent 50%);
}
.dark body::after {
  background:
    radial-gradient(ellipse at 8% 25%, rgba(212,96,126,0.10) 0%, transparent 42%),
    radial-gradient(ellipse at 92% 68%, rgba(90,144,208,0.10) 0%, transparent 42%);
}

/* ===== 3D CANVAS ===== */
#cat3d { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.42; }
.dark #cat3d { opacity: 0.30; }

/* ================================================================
   SIDEBAR — PINK ZONE
   ================================================================ */
.sidebar, nav, aside, [class*="sidebar"], [class*="nav-"], .el-menu {
  background: linear-gradient(180deg, #fff0f3 0%, #ffe4ec 40%, #faf8fc 100%) !important;
  border-right: 1px solid rgba(255,143,163,0.18) !important;
  transition: background 0.5s ease;
  position: relative;
}
/* Cat ear decoration on top of sidebar */
.sidebar::before, [class*="sidebar"]::before {
  content: "🐱";
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  font-size: 22px; opacity: 0.25; pointer-events: none; z-index: 1;
}

.dark .sidebar, .dark nav, .dark aside, .dark [class*="sidebar"], .dark .el-menu {
  background: linear-gradient(180deg, #2a1520 0%, #24182c 40%, #1a1528 100%) !important;
  border-right-color: rgba(212,96,126,0.12) !important;
}

.el-menu-item.is-active, [class*="sidebar"] [class*="active"] {
  background: linear-gradient(90deg, rgba(255,143,163,0.15), transparent 70%) !important;
  border-left: 3px solid var(--pink-400) !important;
  color: var(--pink-500) !important;
  font-weight: 600;
}
.el-menu-item:hover { background: rgba(255,179,198,0.08) !important; }

/* ================================================================
   CARDS — BLUE ZONE
   ================================================================ */
.card, [class*="card"], [class*="bg-white"], [class*="shadow"],
.el-card, .panel, [class*="panel"], main [class*="bg-"] {
  background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(240,246,255,0.88)) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(163,207,255,0.22) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 2px 12px rgba(126,184,255,0.08) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}
.card:hover, [class*="bg-white"]:hover, [class*="shadow"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05), 0 6px 24px rgba(126,184,255,0.16) !important;
  border-color: rgba(163,207,255,0.38) !important;
}

.dark .card, .dark [class*="bg-white"], .dark [class*="shadow"],
.dark .el-card, .dark .panel, .dark main [class*="bg-"] {
  background: linear-gradient(135deg, rgba(26,21,40,0.92), rgba(20,30,40,0.88)) !important;
  border-color: rgba(90,144,208,0.12) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 2px 12px rgba(0,0,0,0.15) !important;
}
.dark .card:hover, .dark [class*="bg-white"]:hover {
  border-color: rgba(90,144,208,0.28) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25), 0 6px 24px rgba(0,0,0,0.3) !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
/* Primary = Pink */
button[class*="primary"], .btn-primary, .el-button--primary,
[class*="bg-blue-"], [class*="bg-indigo-"] {
  background: linear-gradient(135deg, var(--pink-400), var(--pink-500)) !important;
  border: none !important; color: #fff !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: 0 2px 10px rgba(255,107,132,0.25) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease !important;
}
button[class*="primary"]:hover, .btn-primary:hover, .el-button--primary:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 18px rgba(255,107,132,0.38) !important;
  filter: brightness(1.06);
}
button[class*="primary"]:active, .btn-primary:active {
  transform: scale(0.97) !important;
  transition: transform 0.08s ease !important;
}

/* Secondary = Blue */
.el-button--default, button:not([class*="primary"]):not([class*="danger"]):not([class*="ghost"]):not([class*="text"]) {
  background: linear-gradient(135deg, var(--blue-100), var(--blue-200)) !important;
  border: 1.5px solid rgba(126,184,255,0.32) !important;
  color: var(--blue-500) !important;
  border-radius: var(--radius-xs) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.dark .el-button--default, .dark button:not([class*="primary"]):not([class*="danger"]):not([class*="ghost"]):not([class*="text"]) {
  background: rgba(90,144,208,0.10) !important;
  border-color: rgba(90,144,208,0.22) !important;
  color: var(--blue-500) !important;
}
.el-button--default:hover { transform: translateY(-1px) !important; box-shadow: 0 2px 10px rgba(126,184,255,0.20) !important; }

/* Danger */
[class*="bg-red-"], .el-button--danger {
  background: linear-gradient(135deg, #ff8a80, #ff5252) !important; border: none !important;
}

/* Ghost text buttons */
button[class*="ghost"], button[class*="text"], .el-button--text {
  color: var(--purple-500) !important;
}
button[class*="ghost"]:hover, .el-button--text:hover {
  background: rgba(168,149,240,0.08) !important;
  color: var(--pink-500) !important;
}

/* ================================================================
   INPUTS
   ================================================================ */
input, textarea, select, .el-input__inner, [class*="input"] {
  background: rgba(255,255,255,0.85) !important;
  border: 1.5px solid rgba(163,207,255,0.28) !important;
  border-radius: var(--radius-xs) !important;
  color: var(--text-primary) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
input:focus, textarea:focus, select:focus, .el-input__inner:focus {
  border-color: var(--blue-400) !important;
  box-shadow: 0 0 0 3px rgba(126,184,255,0.10) !important; outline: none !important;
}
.dark input, .dark textarea, .dark select, .dark .el-input__inner {
  background: rgba(20,30,40,0.65) !important;
  border-color: rgba(90,144,208,0.18) !important;
}
::placeholder { color: var(--text-muted) !important; }

/* ================================================================
   TABLE
   ================================================================ */
thead, th, .el-table__header th {
  background: linear-gradient(180deg, var(--blue-100), var(--blue-50)) !important;
  color: var(--blue-500) !important; font-weight: 600 !important;
  border-bottom: 2px solid rgba(163,207,255,0.28) !important;
}
.dark thead, .dark th, .dark .el-table__header th {
  background: linear-gradient(180deg, rgba(90,144,208,0.14), rgba(90,144,208,0.04)) !important;
}
tbody tr { transition: background 0.15s ease !important; }
tbody tr:hover, .el-table__body tr:hover { background: rgba(255,179,198,0.08) !important; }
.dark tbody tr:hover { background: rgba(212,96,126,0.10) !important; }
table, .el-table { border-radius: var(--radius) !important; overflow: hidden !important; }

/* Alternating row subtle colors */
tbody tr:nth-child(even) { background: rgba(240,246,255,0.30); }
.dark tbody tr:nth-child(even) { background: rgba(90,144,208,0.03); }

/* ================================================================
   TAGS / BADGES
   ================================================================ */
.badge, .tag, .el-tag, [class*="badge"] {
  border-radius: 20px !important;
  background: linear-gradient(135deg, var(--pink-100), var(--pink-200)) !important;
  border: 1px solid rgba(255,143,163,0.22) !important;
  color: var(--pink-500) !important;
  font-weight: 500;
}
.dark .badge, .dark .tag, .dark .el-tag {
  background: rgba(212,96,126,0.12) !important;
  border-color: rgba(212,96,126,0.22) !important;
}
.el-tag--success { background: #a8e6cf !important; color: #1b5e3a !important; }
.el-tag--danger  { background: #ffcdd2 !important; color: #7f1d1d !important; }
.el-tag--warning { background: #fff9c4 !important; color: #5d4e00 !important; }
.el-tag--info    { background: var(--blue-100) !important; color: var(--blue-500) !important; }

/* ================================================================
   SCROLLBAR
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--pink-300), var(--purple-400), var(--blue-300));
  border-radius: 3px;
}

/* ================================================================
   LINKS
   ================================================================ */
a, .el-link { color: #7c5ce7 !important; transition: color 0.2s ease !important; }
a:hover, .el-link:hover { color: var(--pink-500) !important; }
.dark a, .dark .el-link { color: var(--purple-400) !important; }
.dark a:hover { color: var(--pink-400) !important; }

/* ================================================================
   MODALS — frosted glass
   ================================================================ */
.modal, .dialog, .el-dialog, .el-overlay, [class*="overlay"] {
  backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important;
}
.modal-content, .dialog-content, .el-dialog__body, .el-dialog {
  background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(240,246,255,0.90)) !important;
  border: 1px solid rgba(163,207,255,0.22) !important;
  border-radius: 18px !important;
  box-shadow: 0 16px 48px rgba(126,184,255,0.14), 0 4px 12px rgba(0,0,0,0.06) !important;
}
.dark .modal-content, .dark .dialog-content, .dark .el-dialog {
  background: linear-gradient(135deg, rgba(26,21,40,0.96), rgba(20,30,40,0.92)) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.45) !important;
}

/* ================================================================
   DROPDOWNS
   ================================================================ */
.el-dropdown-menu, .el-select-dropdown, .el-popper, [class*="dropdown"] {
  background: rgba(255,255,255,0.95) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(163,207,255,0.22) !important;
  border-radius: var(--radius) !important;
  box-shadow: 0 8px 32px rgba(126,184,255,0.10), 0 2px 8px rgba(0,0,0,0.06) !important;
}
.dark .el-dropdown-menu, .dark .el-select-dropdown, .dark .el-popper {
  background: rgba(26,21,40,0.96) !important;
  border-color: rgba(90,144,208,0.12) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}

/* ================================================================
   TABS
   ================================================================ */
.el-tabs__item { color: var(--text-muted) !important; transition: color 0.2s ease !important; }
.el-tabs__item.is-active { color: var(--pink-500) !important; font-weight: 600; }
.el-tabs__active-bar { background: var(--pink-400) !important; height: 2.5px !important; border-radius: 2px; }
.el-tabs__nav-wrap::after { background: rgba(163,207,255,0.15) !important; height: 1px !important; }

/* ================================================================
   TOGGLE / SWITCH
   ================================================================ */
.el-switch__core { background: rgba(179,157,248,0.2) !important; }
.el-switch.is-checked .el-switch__core {
  background: var(--pink-400) !important; border-color: var(--pink-400) !important;
}

/* ================================================================
   PROGRESS
   ================================================================ */
.el-progress-bar__inner {
  background: linear-gradient(90deg, var(--pink-400), var(--purple-400), var(--blue-400)) !important;
}
.el-progress-bar__outer { background: rgba(163,207,255,0.15) !important; border-radius: 10px !important; }

/* ================================================================
   PAGINATION
   ================================================================ */
.el-pager li {
  background: transparent !important; color: var(--text-secondary) !important;
  border-radius: var(--radius-xs) !important; min-width: 34px;
}
.el-pager li.active {
  background: linear-gradient(135deg, var(--pink-400), var(--purple-400)) !important;
  color: #fff !important; font-weight: 600;
}
.el-pager li:hover:not(.active) { color: var(--pink-500) !important; }
.el-pagination button { color: var(--text-secondary) !important; border-radius: var(--radius-xs) !important; }
.el-pagination button:hover { color: var(--pink-500) !important; }

/* ================================================================
   LOGIN PAGE — center pink-blue card
   ================================================================ */
#app > div:first-child:has(form) {
  display: flex; align-items: center; justify-content: center; min-height: 100vh;
}
/* Login card */
form, [class*="login"], [class*="auth"] {
  background: linear-gradient(145deg, rgba(255,240,243,0.95), rgba(240,246,255,0.92)) !important;
  border: 1px solid rgba(255,143,163,0.18) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 40px rgba(255,143,163,0.12), 0 2px 8px rgba(126,184,255,0.10) !important;
  padding: 36px 32px !important;
}
.dark form, .dark [class*="login"], .dark [class*="auth"] {
  background: linear-gradient(145deg, rgba(42,21,32,0.95), rgba(20,30,40,0.92)) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35) !important;
}

/* Login header */
[class*="login"] h1, [class*="login"] h2, [class*="auth"] h1 {
  background: linear-gradient(135deg, var(--pink-400), var(--purple-400), var(--blue-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 800; font-size: 1.8rem;
  text-align: center; margin-bottom: 24px;
}

/* ================================================================
   HEADER / TOPBAR — subtle gradient
   ================================================================ */
header, .header, .topbar, [class*="header"], [class*="topbar"], .navbar {
  background: linear-gradient(90deg, rgba(255,240,243,0.7), rgba(250,248,252,0.6), rgba(240,246,255,0.7)) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid rgba(255,143,163,0.12) !important;
  transition: background 0.5s ease;
}
.dark header, .dark .header, .dark [class*="header"], .dark .navbar {
  background: linear-gradient(90deg, rgba(42,21,32,0.85), rgba(26,21,40,0.8), rgba(20,30,40,0.85)) !important;
  border-bottom-color: rgba(212,96,126,0.10) !important;
}

/* ================================================================
   MESSAGES / TOASTS
   ================================================================ */
.el-message, .el-notification, [class*="toast"], [class*="alert"] {
  border-radius: var(--radius) !important;
  backdrop-filter: blur(12px) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.10) !important;
}
.el-message--success { background: linear-gradient(135deg, #d4edda, #c3e6cb) !important; border: 1px solid #a8d5b0 !important; color: #1b5e3a !important; }
.el-message--error   { background: linear-gradient(135deg, #fce4e4, #f8d0d0) !important; border: 1px solid #e8b0b0 !important; color: #7f1d1d !important; }
.el-message--warning { background: linear-gradient(135deg, #fff8e1, #fff3c0) !important; border: 1px solid #ffe0a0 !important; color: #5d4e00 !important; }
.el-message--info    { background: linear-gradient(135deg, #e4f1fd, #d0e8fc) !important; border: 1px solid #b8d8f8 !important; color: #1a4a7a !important; }

/* ================================================================
   DIALOG CLOSE BUTTON
   ================================================================ */
.el-dialog__close, .el-drawer__close-btn {
  color: var(--text-muted) !important; font-size: 20px !important;
}
.el-dialog__close:hover { color: var(--pink-500) !important; }

/* ================================================================
   SKELETON / LOADING
   ================================================================ */
.el-skeleton__item { background: linear-gradient(90deg, var(--blue-100), var(--pink-100), var(--blue-100)) !important; }
.dark .el-skeleton__item { background: linear-gradient(90deg, rgba(90,144,208,0.1), rgba(212,96,126,0.1), rgba(90,144,208,0.1)) !important; }

/* ================================================================
   EMPTY STATE
   ================================================================ */
.el-empty__description { color: var(--text-muted) !important; }
.el-empty__image svg { opacity: 0.5; }

/* ================================================================
   STEPS / WIZARD
   ================================================================ */
.el-step__title.is-process { color: var(--pink-500) !important; font-weight: 600; }
.el-step__title.is-finish  { color: var(--blue-500) !important; }
.el-step__head.is-process .el-step__line { background: var(--pink-300) !important; }
.el-step__head.is-finish  .el-step__line { background: var(--blue-300) !important; }

/* ================================================================
   STAT CARDS — alternating pink/blue left accents
   ================================================================ */
[class*="stat"]:nth-child(odd)  { border-left: 3px solid var(--pink-400) !important; }
[class*="stat"]:nth-child(even) { border-left: 3px solid var(--blue-400) !important; }

/* ================================================================
   CAT CURSOR TRAIL
   ================================================================ */
.cat-paw {
  position: fixed; pointer-events: none; z-index: 99999;
  font-size: 18px; opacity: 0.60;
  animation: pawFade 0.6s ease-out forwards;
  will-change: transform, opacity;
}
@keyframes pawFade {
  0%   { opacity:0.60; transform:scale(1) translateY(0); }
  100% { opacity:0;    transform:scale(0.15) translateY(-12px); }
}

/* ===== FLOATING CATS ===== */
.cat-decoration {
  position: fixed; pointer-events: none; z-index: 0;
  font-size: 22px; opacity: 0.08;
  animation: floatCat 8s ease-in-out infinite;
  will-change: transform;
}
@keyframes floatCat {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-5px) rotate(2deg); }
}

/* ===== HEADERS — pink-purple gradient text ===== */
h1, h2, h3, [class*="page-title"], [class*="header-title"] {
  background: linear-gradient(135deg, var(--pink-400), var(--purple-400));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; font-weight: 700;
}

/* ===== DIVIDERS ===== */
hr, .el-divider { border-color: rgba(163,207,255,0.18) !important; }
.dark hr, .dark .el-divider { border-color: rgba(90,144,208,0.10) !important; }

/* ===== TOOLTIP ===== */
.el-tooltip__popper {
  background: var(--surface) !important; color: var(--text-primary) !important;
  border: 1px solid rgba(255,143,163,0.20) !important;
  border-radius: var(--radius-xs) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important;
}

/* ===== RADIO / CHECKBOX ===== */
.el-radio__input.is-checked .el-radio__inner { background: var(--pink-400) !important; border-color: var(--pink-400) !important; }
.el-checkbox__input.is-checked .el-checkbox__inner { background: var(--pink-400) !important; border-color: var(--pink-400) !important; }

/* ===== MENU ===== */
.el-menu-item { color: var(--text-secondary) !important; transition: all 0.2s ease !important; border-radius: var(--radius-xs) !important; margin: 2px 6px !important; }
.el-menu-item i, .el-menu-item svg { color: var(--text-muted) !important; }
.el-menu-item.is-active i, .el-menu-item.is-active svg { color: var(--pink-400) !important; }

/* ================================================================
   REDUCED MOTION
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; transition-duration:0.01ms !important; }
}

/* ================================================================
   MOBILE < 768px
   ================================================================ */
@media (max-width: 768px) {
  #cat3d { opacity: 0.16 !important; }
  .cat-paw, .cat-decoration { display: none; }
  .sidebar::before { display: none; }

  [class*="grid"], [class*="flex-row"] { flex-direction:column !important; grid-template-columns:1fr !important; }

  .card, [class*="card"] { padding:12px !important; margin:4px 0 !important; border-radius:12px !important; }
  button, .btn, .el-button { min-height:42px; padding:10px 16px !important; font-size:14px !important; }
  input, select, textarea { font-size:16px !important; }
  table, .el-table { font-size:13px !important; }
  th, td { padding:8px 4px !important; }

  form, [class*="login"], [class*="auth"] { padding:24px 18px !important; margin:12px !important; }
}

/* ================================================================
   TABLET 769-1024px
   ================================================================ */
@media (min-width: 769px) and (max-width: 1024px) {
  [class*="grid"] { grid-template-columns: repeat(2, 1fr) !important; }
}