/* ChopCalc CyberAg Custom Stylesheet - White Background & Red-Blue Digital Typography */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Noto+Sans+Thai:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root {
  --neon-cyan: #0284c7;
  --neon-cyan-glow: rgba(2, 132, 199, 0.25);
  --neon-red: #e11d48;
  --neon-red-glow: rgba(225, 29, 72, 0.25);
  --neon-blue: #2563eb;
  --bg-white: #ffffff;
  --bg-soft: #f8fafc;
  --panel-bg: rgba(255, 255, 255, 0.95);
  --text-main: #0f172a;
  --text-muted: #64748b;
  --border-color: #e2e8f0;
}

body {
  font-family: 'Noto Sans Thai', 'Chakra Petch', system-ui, -apple-system, sans-serif;
  background-color: var(--bg-white);
  background-image: 
    radial-gradient(at 0% 0%, rgba(2, 132, 199, 0.07) 0px, transparent 50%),
    radial-gradient(at 100% 0%, rgba(225, 29, 72, 0.07) 0px, transparent 50%),
    radial-gradient(at 50% 100%, rgba(6, 182, 212, 0.05) 0px, transparent 50%),
    linear-gradient(rgba(15, 23, 42, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 23, 42, 0.02) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 36px 36px, 36px 36px;
  color: var(--text-main);
}

.font-mono-num {
  font-family: 'JetBrains Mono', 'Chakra Petch', monospace;
}

/* Glass panel on White Theme */
.glass-panel {
  background: var(--panel-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px -2px rgba(2, 132, 199, 0.06), 0 2px 6px -1px rgba(225, 29, 72, 0.04);
  transition: all 0.25s ease;
}

.glass-panel:hover {
  border-color: rgba(2, 132, 199, 0.35);
  box-shadow: 0 8px 25px -4px rgba(2, 132, 199, 0.12);
}

/* Red & Blue Glow Borders */
.neon-border-cyan {
  box-shadow: 0 0 15px rgba(2, 132, 199, 0.2);
  border-color: rgba(2, 132, 199, 0.5);
}

.neon-border-red {
  box-shadow: 0 0 15px rgba(225, 29, 72, 0.2);
  border-color: rgba(225, 29, 72, 0.5);
}

.neon-glow-dual {
  box-shadow: 0 4px 25px rgba(2, 132, 199, 0.1), 0 0 35px rgba(225, 29, 72, 0.08);
}

/* Active Category Card */
.category-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid var(--border-color);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.category-card:hover {
  transform: translateY(-3px);
  border-color: #0284c7;
  box-shadow: 0 10px 20px -3px rgba(2, 132, 199, 0.15);
}

.category-card.active {
  border-color: #0284c7;
  background: linear-gradient(180deg, #ffffff 0%, rgba(240, 249, 255, 0.9) 100%);
  box-shadow: 0 0 18px rgba(2, 132, 199, 0.25), inset 0 0 10px rgba(2, 132, 199, 0.08);
}

.category-card.active::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #e11d48, #0284c7);
  z-index: 5;
}

/* Plant Card */
.plant-card {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  background: #ffffff;
  border: 1px solid var(--border-color);
}

.plant-card:hover {
  transform: translateY(-2px);
  border-color: rgba(225, 29, 72, 0.4);
  box-shadow: 0 6px 16px -2px rgba(225, 29, 72, 0.12);
}

.plant-card.active {
  background: linear-gradient(135deg, rgba(2, 132, 199, 0.08), rgba(225, 29, 72, 0.08)) !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 18px rgba(2, 132, 199, 0.2);
}

/* Tab buttons */
.tab-btn {
  position: relative;
  transition: all 0.2s ease;
}

.tab-btn.active {
  background: #ffffff;
  color: #0284c7;
  border-color: rgba(2, 132, 199, 0.4);
  box-shadow: 0 2px 8px rgba(2, 132, 199, 0.12);
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 15%;
  right: 15%;
  height: 2.5px;
  background: linear-gradient(90deg, #e11d48, #0284c7);
  border-radius: 2px;
}

/* Neon buttons */
.btn-neon-action {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 40%, #e11d48 100%);
  background-size: 200% 200%;
  animation: gradientShift 6s ease infinite;
  color: #ffffff !important;
  transition: all 0.3s ease;
}

.btn-neon-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(2, 132, 199, 0.35), 0 0 25px rgba(225, 29, 72, 0.25);
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #0284c7;
}

/* Scanning Pulse on White Background */
@keyframes scanlineLight {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(1000%); }
}

.scan-indicator {
  position: relative;
  overflow: hidden;
}

.scan-indicator::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0284c7, #e11d48, transparent);
  animation: scanlineLight 3s linear infinite;
}

/* Red & Blue Typography Accents */
.text-cyber-blue {
  color: #0284c7;
}

.text-cyber-red {
  color: #e11d48;
}

.title-gradient-rb {
  background: linear-gradient(90deg, #0284c7 0%, #2563eb 45%, #e11d48 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}