:root {
  --bg-primary: #0a0e1a;
  --bg-secondary: #101729;
  --bg-panel: rgba(16, 23, 41, 0.85);
  --border-color: rgba(0, 168, 255, 0.15);
  --text-primary: #e0e6f0;
  --text-secondary: #8892a8;
  --accent-blue: #00a8ff;
  --accent-red: #ff2020;
  --accent-amber: #ff8c00;
  --accent-green: #00cc66;
  --accent-purple: #a855f7;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: 'IBM Plex Sans', 'Noto Sans JP', sans-serif;
}

.font-mono {
  font-family: 'JetBrains Mono', monospace !important;
}

.font-jp {
  font-family: 'Noto Sans JP', 'IBM Plex Sans', sans-serif;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 168, 255, 0.3);
  border-radius: 3px;
}

/* Animations */
@keyframes pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 204, 102, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(0, 204, 102, 0); }
}

@keyframes pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 32, 32, 0.6); }
  50% { box-shadow: 0 0 0 6px rgba(255, 32, 32, 0); }
}

@keyframes ripple {
  0% { transform: scale(0); opacity: 0.8; }
  100% { transform: scale(1); opacity: 0; }
}

@keyframes flash-red {
  0%, 100% { background-color: rgba(255, 32, 32, 0.0); }
  50% { background-color: rgba(255, 32, 32, 0.15); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-2px) translateY(1px); }
  20% { transform: translateX(3px) translateY(-1px); }
  30% { transform: translateX(-1px) translateY(2px); }
  40% { transform: translateX(2px) translateY(-2px); }
  50% { transform: translateX(-3px) translateY(1px); }
  60% { transform: translateX(1px) translateY(-1px); }
  70% { transform: translateX(-2px) translateY(2px); }
  80% { transform: translateX(3px) translateY(-1px); }
  90% { transform: translateX(-1px) translateY(1px); }
}

@keyframes glow-border {
  0%, 100% { border-color: rgba(255, 32, 32, 0.3); }
  50% { border-color: rgba(255, 32, 32, 0.8); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes loading-bar {
  0% { width: 0%; }
  100% { width: 100%; }
}

@keyframes seismograph-idle {
  0% { d: path("M0,25 Q10,24 20,25 Q30,26 40,25 Q50,24 60,25 Q70,26 80,25"); }
  50% { d: path("M0,25 Q10,26 20,25 Q30,24 40,25 Q50,26 60,25 Q70,24 80,25"); }
}

.station-pulse {
  animation: pulse-green 2s infinite;
}

.station-alert {
  animation: pulse-red 0.5s infinite;
}

.header-alert {
  animation: flash-red 1s infinite;
}

.shake-effect {
  animation: shake 0.3s infinite;
}

.glow-border-red {
  animation: glow-border 1s infinite;
}

.panel-glass {
  background: var(--bg-panel);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

.loading-bar-fill {
  animation: loading-bar 2.5s ease-out forwards;
  background: linear-gradient(90deg, var(--accent-blue), var(--accent-green));
}

/* Wave pattern background */
.wave-bg {
  background-image: 
    radial-gradient(ellipse at 20% 80%, rgba(0, 168, 255, 0.03) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 32, 32, 0.02) 0%, transparent 50%);
}

/* Transition for language switch */
.lang-transition {
  transition: opacity 0.2s ease;
}

/* Map styling */
.japan-map-ocean {
  fill: #060a14;
  stroke: none;
}

.japan-map-land {
  fill: #1a2744;
  stroke: #2a3f66;
  stroke-width: 0.5;
  transition: fill 0.5s ease;
}

.japan-map-land:hover {
  fill: #223358;
}

.japan-map-land.affected {
  fill: rgba(255, 140, 0, 0.4);
  transition: fill 0.3s ease;
}

.japan-map-land.affected-severe {
  fill: rgba(255, 32, 32, 0.4);
}

/* Responsive */
@media (max-width: 1199px) {
  .dashboard-layout {
    flex-direction: column !important;
  }
  .sidebar-left, .sidebar-right {
    width: 100% !important;
    max-height: 300px;
  }
}

@media (max-width: 767px) {
  .header-center {
    display: none;
  }
  .sidebar-left, .sidebar-right {
    max-height: 250px;
  }
}