@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Outfit:wght@300;400;600;800&family=Share+Tech+Mono&family=Noto+Sans+JP:wght@300;400;700&display=swap');

:root {
  /* Rockman Base Colors (Megaman Blue) */
  --bg-color: #030814;
  --bg-grid-color: rgba(0, 102, 255, 0.03);
  
  --text-main: #f0f7ff;
  --text-muted: #7d96b8;
  
  --panel-bg: rgba(6, 14, 36, 0.75);
  --panel-border: rgba(0, 102, 255, 0.2);
  --panel-border-glow: rgba(0, 102, 255, 0.45);
  
  /* Card Class Accent Colors */
  --color-standard: #0077ff;      /* Rockman Blue */
  --color-mega: #b052ff;          /* Mega Purple */
  --color-giga: var(--color-theme); /* Dynamic Satellite Color */
  --color-bokutai: #ff7a00;       /* Taiyou Orange */
  --color-gentei: #ffd700;        /* Event Gold */
  
  /* Status Colors */
  --color-acquired: #10b981;
  --color-acquired-bg: rgba(16, 185, 129, 0.1);
  --color-missing: #ef4444;
  --color-missing-bg: rgba(239, 68, 68, 0.08);
  
  --font-cyber: 'Orbitron', 'Share Tech Mono', sans-serif;
  --font-main: 'Outfit', 'Noto Sans JP', sans-serif;
  
  /* Default Theme Variables (Pegasus) */
  --color-theme: #00d2ff;
  --color-theme-glow: rgba(0, 210, 255, 0.4);
  --color-theme-bg: rgba(0, 210, 255, 0.06);
  --logo-shadow: 0 0 20px #00d2ff;
}

/* Satellite Specific Themes */
html[data-satellite="pegasus"] {
  --color-theme: #00d2ff;
  --color-theme-glow: rgba(0, 210, 255, 0.45);
  --color-theme-bg: rgba(0, 210, 255, 0.06);
  --logo-shadow: 0 0 20px rgba(0, 210, 255, 0.6);
  --bg-grid-color: rgba(0, 210, 255, 0.02);
}

html[data-satellite="leo"] {
  --color-theme: #ff473d;
  --color-theme-glow: rgba(255, 71, 61, 0.45);
  --color-theme-bg: rgba(255, 71, 61, 0.06);
  --logo-shadow: 0 0 20px rgba(255, 71, 61, 0.6);
  --bg-grid-color: rgba(255, 71, 61, 0.02);
}

html[data-satellite="dragon"] {
  --color-theme: #30d158;
  --color-theme-glow: rgba(48, 209, 88, 0.45);
  --color-theme-bg: rgba(48, 209, 88, 0.06);
  --logo-shadow: 0 0 20px rgba(48, 209, 88, 0.6);
  --bg-grid-color: rgba(48, 209, 88, 0.02);
}

/* Satellite Selector Styling */
.satellite-selector-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(0, 0, 0, 0.35);
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 102, 255, 0.25);
  transition: border-color 0.5s ease;
}

.selector-label {
  font-family: var(--font-cyber);
  font-size: 0.8rem;
  color: var(--text-muted);
  font-weight: bold;
}

.satellite-options {
  display: flex;
  gap: 8px;
}

.satellite-opt {
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
}

.satellite-opt input {
  display: none;
}

.satellite-opt .opt-text {
  color: var(--text-muted);
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 8px;
}

.satellite-opt:hover .opt-text {
  color: var(--text-main);
}

.satellite-opt[data-sat="pegasus"].active .opt-text {
  color: #00d2ff;
  text-shadow: 0 0 8px rgba(0, 210, 255, 0.6);
}

.satellite-opt[data-sat="leo"].active .opt-text {
  color: #ff473d;
  text-shadow: 0 0 8px rgba(255, 71, 61, 0.6);
}

.satellite-opt[data-sat="dragon"].active .opt-text {
  color: #30d158;
  text-shadow: 0 0 8px rgba(48, 209, 88, 0.6);
}

#btn-reset-default:hover {
  border-color: var(--color-missing);
  color: var(--color-missing);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.2);
}

/* Class Filters Chip Bar Active States */
#filter-all.active {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

#filter-standard { color: #5296ff; }
#filter-standard.active {
  background: rgba(0, 119, 255, 0.2);
  border-color: var(--color-standard);
  box-shadow: 0 0 10px rgba(0, 119, 255, 0.3);
}

#filter-mega { color: #c482ff; }
#filter-mega.active {
  background: rgba(176, 82, 255, 0.2);
  border-color: var(--color-mega);
  box-shadow: 0 0 10px rgba(176, 82, 255, 0.3);
}

#filter-giga { color: var(--color-theme); }
#filter-giga.active {
  background: var(--color-theme-bg);
  border-color: var(--color-theme);
  box-shadow: 0 0 10px var(--color-theme-glow);
}

#filter-bokutai { color: #ffa852; }
#filter-bokutai.active {
  background: rgba(255, 122, 0, 0.2);
  border-color: var(--color-bokutai);
  box-shadow: 0 0 10px rgba(255, 122, 0, 0.3);
}

#filter-gentei { color: #ffeb82; }
#filter-gentei.active {
  background: rgba(255, 215, 0, 0.15);
  border-color: var(--color-gentei);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

/* Class Labels inside Table */
.class-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: bold;
  font-family: var(--font-cyber);
  text-transform: uppercase;
}

.class-badge.std { background: rgba(0, 119, 255, 0.15); color: #52a7ff; border: 1px solid rgba(0, 119, 255, 0.3); }
.class-badge.mega { background: rgba(176, 82, 255, 0.15); color: #c482ff; border: 1px solid rgba(176, 82, 255, 0.3); }
.class-badge.giga { background: var(--color-theme-bg); color: var(--color-theme); border: 1px solid var(--color-theme-glow); }
.class-badge.bokutai { background: rgba(255, 122, 0, 0.15); color: #ffa852; border: 1px solid rgba(255, 122, 0, 0.3); }
.class-badge.gentei { background: rgba(255, 215, 0, 0.1); color: #ffe552; border: 1px solid rgba(255, 215, 0, 0.3); }