/*
 * Vedika Dashboard Theme — Terminal Aesthetic
 * Monospace font. Angular borders. Colorful sidebar. Pink accent.
 * All properties use !important to override Tailwind CDN utilities.
 * Mobile-first responsive preserved.
 */

/* ─── BASE ────────────────────────────────────────── */

@media screen and (min-width: 769px) {
  html.dashboard-page { font-size: 14px !important; }
}

.dashboard-page body,
body.dashboard-body {
  font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', 'JetBrains Mono', 'Fragment Mono', 'Consolas', monospace !important;
  background: #ffffff !important;
  color: #1a1a1a !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dashboard-body h1,
.dashboard-body h2,
.dashboard-body h3,
.dashboard-body h4,
.dashboard-body h5,
.dashboard-body h6 {
  font-family: 'SF Mono', 'Fira Code', 'Fragment Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: #1a1a1a !important;
  text-transform: uppercase !important;
}

/* ─── COLORFUL SIDEBAR ──────────────────────────────── */

.dashboard-body .sidebar {
  background: linear-gradient(180deg, #e84393 0%, #fd79a8 15%, #c4b5fd 40%, #a29bfe 60%, #0984e3 80%, #6c5ce7 100%) !important;
  border-right: none !important;
  width: 240px !important;
  position: relative !important;
}

.dashboard-body .sidebar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.88);
  pointer-events: none;
  z-index: 0;
}

.dashboard-body .sidebar > * {
  position: relative;
  z-index: 1;
}

.dashboard-body .sidebar .text-xs,
.dashboard-body .sidebar p.text-xs {
  color: #999 !important;
  font-size: 10px !important;
  letter-spacing: 0.12em !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
}

.dashboard-body .sidebar .text-gray-400,
.dashboard-body .sidebar .text-gray-500 {
  color: #999 !important;
}

.dashboard-body .sidebar-link {
  color: #555 !important;
  border-radius: 2px !important;
  padding: 8px 16px !important;
  margin: 1px 8px !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  display: flex;
  align-items: center !important;
  background: transparent !important;
  border-left: 3px solid transparent !important;
}

.dashboard-body .sidebar-link:hover {
  background: rgba(232, 67, 147, 0.06) !important;
  color: #333 !important;
}

.dashboard-body .sidebar-link.active {
  background: rgba(232, 67, 147, 0.08) !important;
  color: #e84393 !important;
  font-weight: 700 !important;
  border-left-color: #e84393 !important;
}

.dashboard-body .sidebar-link i,
.dashboard-body .sidebar-link .sidebar-icon {
  color: inherit !important;
  width: 20px !important;
  font-size: 13px !important;
  margin-right: 10px !important;
}

.dashboard-body .sidebar .px-4.mb-4 {
  padding-top: 4px !important;
}

/* ─── MOBILE DRAWER (TERMINAL) ─────────────────────── */

.dashboard-body .drawer {
  background: #fff !important;
  border-right: 2px solid #0a0a0a !important;
  box-shadow: none !important;
}

.dashboard-body .drawer .font-bold {
  color: #e84393 !important;
}

.dashboard-body .drawer .text-purple-600 {
  color: #e84393 !important;
}

.dashboard-body .drawer nav a {
  color: #555 !important;
  border-bottom-color: #e5e5e5 !important;
  padding: 10px 0 !important;
  font-size: 13px !important;
  font-family: 'SF Mono', 'Fragment Mono', monospace !important;
}

.dashboard-body .drawer nav a:hover {
  color: #e84393 !important;
}

.dashboard-body .drawer nav a.bg-purple-600 {
  background: #e84393 !important;
  color: #fff !important;
  border-radius: 2px !important;
}

.dashboard-body .drawer button svg {
  stroke: #555 !important;
}

.dashboard-body .drawer-backdrop.show {
  background: rgba(0, 0, 0, 0.3) !important;
}

/* ─── MOBILE TAB BAR ─────────────────────────────── */

.dashboard-body .tab-button {
  padding: 8px 14px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #666 !important;
  border-radius: 2px !important;
  transition: color 0.15s ease, background 0.15s ease !important;
  background: transparent !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.dashboard-body .tab-button.active {
  color: #e84393 !important;
  font-weight: 700 !important;
  background: rgba(232, 67, 147, 0.06) !important;
}

.dashboard-body .tab-button.active::after {
  background: #e84393 !important;
  height: 2px !important;
  border-radius: 0 !important;
}

.dashboard-body .tab-button:hover:not(.active) {
  color: #333 !important;
  background: #f9f9f9 !important;
}

/* ─── CARDS ──────────────────────────────────────── */

.dashboard-body .bg-white {
  background: #fff !important;
  border: 1px solid #e5e5e5 !important;
}

.dashboard-body .bg-white.rounded-xl {
  border-radius: 2px !important;
  box-shadow: none !important;
}

.dashboard-body .bg-white.rounded-xl:hover,
.dashboard-body .bg-white.rounded-xl:focus-within {
  transform: none !important;
}

.dashboard-body .rounded-xl {
  border-radius: 2px !important;
}

.dashboard-body .rounded-lg {
  border-radius: 2px !important;
}

.dashboard-body .rounded-md {
  border-radius: 2px !important;
}

.dashboard-body .rounded-full:not(.animate-spin):not(img) {
  border-radius: 2px !important;
}

.dashboard-body .shadow-md {
  box-shadow: none !important;
}

.dashboard-body .shadow-lg {
  box-shadow: none !important;
}

.dashboard-body .shadow-sm {
  box-shadow: none !important;
}

/* ─── TEXT COLOR OVERRIDES ────────────────────────── */

.dashboard-body .text-gray-900 {
  color: #1a1a1a !important;
}

.dashboard-body .text-gray-700 {
  color: #374151 !important;
}

.dashboard-body .text-gray-600 {
  color: #555 !important;
}

.dashboard-body .text-gray-500 {
  color: #777 !important;
}

.dashboard-body .text-gray-400 {
  color: #999 !important;
}

.dashboard-body .text-gray-300 {
  color: #bbb !important;
}

.dashboard-body .text-purple-600 {
  color: #e84393 !important;
}

/* ─── STAT CARD NUMBERS & LABELS ─────────────────── */

.dashboard-body .text-3xl.font-bold {
  font-size: 26px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

.dashboard-body .text-gray-500.text-sm.font-medium {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #999 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ─── PAGE TITLES ─────────────────────────────────── */

.dashboard-body h2.text-3xl {
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: 0.06em !important;
}

.dashboard-body h3.text-xl {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* ─── TABLES ──────────────────────────────────────── */

.dashboard-body table thead th {
  font-size: 10px !important;
  font-weight: 700 !important;
  color: #555 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 16px !important;
  border-bottom: 2px solid #333 !important;
  background: #fafafa !important;
}

.dashboard-body table tbody tr {
  border-bottom: 1px solid #f0f0f0 !important;
  transition: background 0.1s ease !important;
}

.dashboard-body table tbody tr:hover {
  background: #f9f9f9 !important;
}

.dashboard-body table tbody td {
  padding: 10px 16px !important;
  font-size: 12.5px !important;
  color: #1a1a1a !important;
}

/* ─── WALLET BALANCE CARD ─────────────────────────── */

.dashboard-body .bg-gradient-to-r.from-purple-600.to-purple-800 {
  background: #0a0a0a !important;
  border: 1px solid #333 !important;
  border-radius: 2px !important;
}

.dashboard-body .bg-gradient-to-r.from-purple-600.to-purple-800 h3,
.dashboard-body .bg-gradient-to-r.from-purple-600.to-purple-800 p,
.dashboard-body .bg-gradient-to-r.from-purple-600.to-purple-800 span,
.dashboard-body .bg-gradient-to-r.from-purple-600.to-purple-800 .font-bold {
  color: #ffffff !important;
}

.dashboard-body .bg-gradient-to-r .text-purple-200 {
  color: #aaa !important;
}

.dashboard-body .bg-gradient-to-r .border-purple-400\/30 {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* ─── CURRENT PLAN BANNER ────────────────────────── */

.dashboard-body .bg-gradient-to-r.from-purple-600.to-indigo-600 {
  background: #e84393 !important;
  border-radius: 2px !important;
}

/* ─── PLAN CARDS ──────────────────────────────────── */

.dashboard-body .plan-card {
  border-radius: 2px !important;
  transition: border-color 0.2s ease !important;
}

.dashboard-body .plan-card:hover {
  transform: none !important;
  box-shadow: none !important;
  border-color: #e84393 !important;
}

.dashboard-body .plan-badge {
  background: #e84393 !important;
  font-size: 9px !important;
  letter-spacing: 0.1em !important;
  font-weight: 800 !important;
  border-radius: 2px !important;
  padding: 3px 10px !important;
  text-transform: uppercase !important;
}

/* Monthly/Annual toggle */
.dashboard-body .bg-gray-100.rounded-full {
  background: #f3f4f6 !important;
  border: 1px solid #e5e5e5 !important;
  border-radius: 2px !important;
}

.dashboard-body .bg-gray-100 {
  background: #f3f4f6 !important;
}

/* ─── MODALS ──────────────────────────────────────── */

.dashboard-body .fixed.inset-0.bg-gray-600 {
  background: rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(2px) !important;
  -webkit-backdrop-filter: blur(2px) !important;
}

.dashboard-body .shadow-lg.rounded-xl.bg-white,
.dashboard-body .shadow-lg.rounded-md.bg-white {
  border: 2px solid #0a0a0a !important;
  box-shadow: none !important;
  border-radius: 2px !important;
}

/* ─── BUTTONS ─────────────────────────────────────── */

.dashboard-body .bg-purple-600 {
  background: #e84393 !important;
  transition: background 0.15s ease !important;
  font-weight: 700 !important;
  border-radius: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 12px !important;
}

.dashboard-body .bg-purple-600:hover {
  background: #d63384 !important;
}

.dashboard-body .bg-purple-600.text-white {
  box-shadow: none !important;
}

.dashboard-body .hover\:bg-gray-50:hover {
  background: #f9f9f9 !important;
}

/* ─── BADGES ──────────────────────────────────────── */

.dashboard-body .bg-green-100 {
  background: #ecfdf5 !important;
  border-radius: 2px !important;
}

.dashboard-body .text-green-700,
.dashboard-body .text-green-600 {
  color: #00b894 !important;
}

.dashboard-body .bg-yellow-100 {
  background: #fefce8 !important;
  border-radius: 2px !important;
}

.dashboard-body .text-yellow-700,
.dashboard-body .text-yellow-600 {
  color: #a16207 !important;
}

.dashboard-body .bg-red-100 {
  background: #fef2f2 !important;
  border-radius: 2px !important;
}

.dashboard-body .text-red-700,
.dashboard-body .text-red-600 {
  color: #ff6b6b !important;
}

.dashboard-body .bg-purple-100 {
  background: rgba(232, 67, 147, 0.08) !important;
  border-radius: 2px !important;
}

.dashboard-body .text-purple-700 {
  color: #d63384 !important;
}

.dashboard-body .bg-blue-100 {
  background: #eff6ff !important;
  border-radius: 2px !important;
}

.dashboard-body .text-blue-700 {
  color: #0984e3 !important;
}

/* ─── CODE / API KEY DISPLAY ──────────────────────── */

.dashboard-body code {
  font-family: 'SF Mono', 'Fragment Mono', 'Consolas', monospace !important;
  font-size: 11.5px !important;
  background: #f5f5f5 !important;
  border: 1px solid #ddd !important;
  border-radius: 2px !important;
  padding: 2px 8px !important;
  color: #1a1a1a !important;
}

/* ─── PROGRESS BARS ───────────────────────────────── */

.dashboard-body .bg-gray-200 {
  background: #e5e7eb !important;
}

.dashboard-body .bg-green-200 {
  background: #bbf7d0 !important;
}

.dashboard-body .bg-blue-200 {
  background: #bfdbfe !important;
}

.dashboard-body .h-2 .bg-purple-600,
.dashboard-body .h-full.bg-purple-600 {
  background: #e84393 !important;
  border-radius: 1px !important;
}

.dashboard-body .h-full.bg-green-500 {
  background: #00b894 !important;
}

.dashboard-body .h-full.bg-blue-500 {
  background: #0984e3 !important;
}

/* ─── PRICING / BG OVERRIDES ─────────────────────── */

.dashboard-body .bg-gray-50 {
  background: #fafafa !important;
}

.dashboard-body .bg-green-50 {
  background: #f0fdf4 !important;
}

/* ─── GRADIENT TEXT OVERRIDE ─────────────────────── */

.dashboard-body .gradient-text {
  background: none !important;
  -webkit-text-fill-color: #e84393 !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
}

.dashboard-body .gradient-bg {
  background: #e84393 !important;
}

/* ─── BORDER OVERRIDES ───────────────────────────── */

.dashboard-body .border-gray-200 {
  border-color: #e5e5e5 !important;
}

.dashboard-body .border-gray-300 {
  border-color: #d1d5db !important;
}

.dashboard-body .border-gray-100 {
  border-color: #f0f0f0 !important;
}

.dashboard-body .border-b {
  border-bottom-color: #e5e5e5 !important;
}

/* ─── SELECT/INPUT STYLES ──────────────────────────── */

.dashboard-body select {
  background: #fff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 2px !important;
  font-size: 12px !important;
  color: #1a1a1a !important;
}

.dashboard-body input {
  border-radius: 2px !important;
}

.dashboard-body input:focus,
.dashboard-body select:focus {
  border-color: #e84393 !important;
  box-shadow: 0 0 0 2px rgba(232, 67, 147, 0.15) !important;
  outline: none !important;
}

/* ─── STAT ICONS (ANGULAR) ──────────────────────── */

.dashboard-body .stat-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.stat-icon.purple {
  background: rgba(232, 67, 147, 0.08) !important;
  color: #e84393 !important;
  border: 1px solid rgba(232, 67, 147, 0.2) !important;
}

.stat-icon.green {
  background: rgba(0, 184, 148, 0.08) !important;
  color: #00b894 !important;
  border: 1px solid rgba(0, 184, 148, 0.2) !important;
}

.stat-icon.blue {
  background: rgba(9, 132, 227, 0.08) !important;
  color: #0984e3 !important;
  border: 1px solid rgba(9, 132, 227, 0.2) !important;
}

.stat-icon.amber {
  background: rgba(253, 203, 110, 0.15) !important;
  color: #fdcb6e !important;
  border: 1px solid rgba(253, 203, 110, 0.3) !important;
}

.stat-icon.rose {
  background: rgba(232, 67, 147, 0.08) !important;
  color: #e84393 !important;
  border: 1px solid rgba(232, 67, 147, 0.2) !important;
}

.stat-icon.indigo {
  background: rgba(108, 92, 231, 0.08) !important;
  color: #6c5ce7 !important;
  border: 1px solid rgba(108, 92, 231, 0.2) !important;
}

.stat-icon.teal {
  background: rgba(0, 206, 201, 0.08) !important;
  color: #00cec9 !important;
  border: 1px solid rgba(0, 206, 201, 0.2) !important;
}

.stat-icon.cyan {
  background: rgba(9, 132, 227, 0.08) !important;
  color: #0984e3 !important;
  border: 1px solid rgba(9, 132, 227, 0.2) !important;
}

/* ─── SECTION HEADER ICONS ────────────────────────── */

.dashboard-body .section-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  margin-right: 8px !important;
  background: rgba(232, 67, 147, 0.06) !important;
  color: #e84393 !important;
  border: 1px solid rgba(232, 67, 147, 0.15) !important;
  box-shadow: none !important;
}

/* ─── SCROLL & SELECTION ──────────────────────────── */

.dashboard-body ::selection {
  background: rgba(232, 67, 147, 0.15) !important;
  color: #1a1a1a !important;
}

.dashboard-body ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.dashboard-body ::-webkit-scrollbar-track {
  background: transparent;
}

.dashboard-body ::-webkit-scrollbar-thumb {
  background: rgba(232, 67, 147, 0.2);
  border-radius: 1px;
}

.dashboard-body ::-webkit-scrollbar-thumb:hover {
  background: rgba(232, 67, 147, 0.4);
}

/* ─── SPINNER ──────────────────────────── */

.dashboard-body .fa-spinner.fa-spin {
  color: #e84393 !important;
}

/* ─── RESPONSIVE ─────────────────────────────────── */

.dashboard-body .flex-1 {
  padding: 16px 12px !important;
}

@media (min-width: 640px) {
  .dashboard-body .flex-1 {
    padding: 20px 16px !important;
  }
}

@media (min-width: 768px) {
  .dashboard-body .flex-1 {
    padding: 24px 28px !important;
  }
}

@media (min-width: 1280px) {
  .dashboard-body .flex-1 {
    padding: 28px 36px !important;
  }
}

@media (max-width: 639px) {
  .dashboard-body .grid {
    gap: 8px !important;
  }

  .dashboard-body .rounded-xl.p-5,
  .dashboard-body .rounded-xl.p-6 {
    padding: 12px 14px !important;
  }

  .dashboard-body .text-3xl.font-bold {
    font-size: 22px !important;
  }

  .dashboard-body h2.text-3xl {
    font-size: 16px !important;
  }
}

/* ─── NAV BAR ────────────────────────────────────── */

.dashboard-body nav.sticky .bg-white {
  background: #fff !important;
}

.dashboard-body nav.sticky .bg-white.rounded-lg {
  background: #fff !important;
}

.dashboard-body nav .absolute.bg-white {
  background: #fff !important;
  border-radius: 2px !important;
}

.dashboard-body #mobile-menu {
  background: #fff !important;
}

.dashboard-body #mobile-menu a {
  color: #555 !important;
}

.dashboard-body #mobile-menu a:hover {
  background: #f9f9f9 !important;
  color: #e84393 !important;
}

/* ─── ACCESSIBILITY ───────────────────────────────── */

.dashboard-body *:focus-visible {
  outline: 2px solid #e84393 !important;
  outline-offset: 2px !important;
}

@media (prefers-reduced-motion: reduce) {
  .dashboard-body * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── INVOICE ROW HOVER ───────────────────────────── */

.dashboard-body .invoice-row:hover {
  background: #f9f9f9 !important;
}

/* ─── MEMBER AVATAR ───────────────────────────────── */

.dashboard-body .bg-purple-100.flex.items-center.justify-center {
  background: rgba(232, 67, 147, 0.08) !important;
}

/* ─── PLAN FEATURE CHIPS ─────────────────────────── */

.dashboard-body .bg-purple-100.text-purple-700.rounded-full {
  background: rgba(232, 67, 147, 0.08) !important;
  color: #d63384 !important;
  border-radius: 2px !important;
}

.dashboard-body .bg-green-100.text-green-700.rounded-full {
  background: #ecfdf5 !important;
  color: #00b894 !important;
  border-radius: 2px !important;
}

.dashboard-body .bg-blue-100.text-blue-700.rounded-full {
  background: #eff6ff !important;
  color: #0984e3 !important;
  border-radius: 2px !important;
}

/* ─── WHITE/20 ON DARK CARDS ─────────────────────── */

.dashboard-body .bg-white\/20 {
  background: rgba(255, 255, 255, 0.12) !important;
}

/* ─── PLAN HERO CARD ─────────────────────────────── */

.dashboard-body .plan-hero {
  border-radius: 2px !important;
  overflow: hidden !important;
  border: 1px solid #e5e5e5 !important;
  background: #fff !important;
  box-shadow: none !important;
}

.plan-hero-header {
  background: #0a0a0a !important;
  padding: 24px 28px !important;
}

.plan-hero-icon {
  width: 40px !important;
  height: 40px !important;
  border-radius: 2px !important;
  background: rgba(232, 67, 147, 0.15) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid rgba(232, 67, 147, 0.25) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  color: #fd79a8 !important;
  box-shadow: none !important;
}

.plan-hero-label {
  font-size: 10px !important;
  color: #999 !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  margin: 0 !important;
  text-transform: uppercase !important;
}

.plan-hero-name {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Force white on dark header */
.plan-hero-header h3,
.plan-hero-header .plan-hero-name {
  color: #ffffff !important;
}

.plan-hero-cycle {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #d1d5db !important;
  padding: 4px 12px !important;
  border-radius: 2px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.plan-hero-btn {
  background: #e84393 !important;
  color: #fff !important;
  padding: 8px 20px !important;
  border-radius: 2px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  transition: background 0.15s ease !important;
  border: none !important;
  cursor: pointer !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.plan-hero-btn:hover {
  background: #d63384 !important;
}

/* Usage meters */
.plan-hero-body {
  padding: 0 !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

.plan-meter {
  padding: 18px 28px !important;
  border-bottom: 1px solid #f0f0f0 !important;
}

@media (min-width: 768px) {
  .plan-hero-body .grid {
    display: flex !important;
  }
  .plan-meter {
    flex: 1 !important;
    border-bottom: none !important;
    border-right: 1px solid #f0f0f0 !important;
  }
  .plan-meter:last-child {
    border-right: none !important;
  }
}

.plan-meter-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}

.plan-meter-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 2px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

.plan-meter-icon.purple {
  background: rgba(232, 67, 147, 0.08) !important;
  color: #e84393 !important;
  border: 1px solid rgba(232, 67, 147, 0.2) !important;
}

.plan-meter-icon.green {
  background: rgba(0, 184, 148, 0.08) !important;
  color: #00b894 !important;
  border: 1px solid rgba(0, 184, 148, 0.2) !important;
}

.plan-meter-icon.blue {
  background: rgba(9, 132, 227, 0.08) !important;
  color: #0984e3 !important;
  border: 1px solid rgba(9, 132, 227, 0.2) !important;
}

.plan-meter-info {
  display: flex !important;
  flex-direction: column !important;
}

.plan-meter-label {
  font-size: 10px !important;
  color: #999 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.plan-meter-value {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #1a1a1a !important;
  letter-spacing: -0.01em !important;
}

.plan-meter-bar {
  height: 4px !important;
  background: #f0f0f0 !important;
  border-radius: 1px !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
}

.plan-meter-fill {
  height: 100% !important;
  border-radius: 1px !important;
  transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.plan-meter-fill.purple { background: #e84393 !important; }
.plan-meter-fill.green { background: #00b894 !important; }
.plan-meter-fill.blue { background: #0984e3 !important; }

.plan-meter-sub {
  font-size: 10px !important;
  color: #999 !important;
  margin: 0 !important;
}

/* Features grid */
.plan-hero-features {
  padding: 18px 28px 22px !important;
  background: #fafafa !important;
}

.plan-features-title {
  font-size: 10px !important;
  font-weight: 800 !important;
  color: #999 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 12px !important;
}

.plan-features-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px 16px !important;
}

@media (min-width: 768px) {
  .plan-features-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

.plan-feature-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.plan-feature-check {
  font-size: 12px !important;
  flex-shrink: 0 !important;
}

.plan-feature-check.purple { color: #e84393 !important; }
.plan-feature-check.green { color: #00b894 !important; }
.plan-feature-check.blue { color: #0984e3 !important; }