* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0a0e27; color: #e0e0e0; font-family: 'IBM Plex Mono', monospace; overflow-x: hidden; }

:root {
  --navy: #0a0e27;
  --grid-blue: #1a2a5e;
  --green: #00ff88;
  --red: #cc0000;
  --bright-red: #ff0000;
  --yellow: #ffcc00;
  --ocean-blue: #003366;
  --cyan: #00ccff;
}

@keyframes pulse-green { 0%,100% { opacity: 0.6; } 50% { opacity: 1; } }
@keyframes pulse-red { 0%,100% { box-shadow: 0 0 5px #ff0000; } 50% { box-shadow: 0 0 30px #ff0000, 0 0 60px #cc0000; } }
@keyframes pulse-station { 0%,100% { r: 3; opacity: 0.4; } 50% { r: 5; opacity: 1; } }
@keyframes flash-border { 0%,100% { border-color: #ff0000; } 50% { border-color: #ffcc00; } }
@keyframes wave-expand { 0% { r: 0; opacity: 0.8; } 100% { r: 200; opacity: 0; } }
@keyframes shake-sm { 0%,100% { transform: translate(0,0); } 10% { transform: translate(-2px,1px); } 20% { transform: translate(3px,-1px); } 30% { transform: translate(-1px,2px); } 40% { transform: translate(2px,-2px); } 50% { transform: translate(-3px,1px); } 60% { transform: translate(1px,-1px); } 70% { transform: translate(-2px,3px); } 80% { transform: translate(3px,-2px); } 90% { transform: translate(-1px,1px); } }
@keyframes shake-lg { 0%,100% { transform: translate(0,0); } 10% { transform: translate(-5px,3px); } 20% { transform: translate(6px,-4px); } 30% { transform: translate(-3px,5px); } 40% { transform: translate(4px,-6px); } 50% { transform: translate(-6px,2px); } 60% { transform: translate(3px,-3px); } 70% { transform: translate(-4px,6px); } 80% { transform: translate(5px,-5px); } 90% { transform: translate(-2px,4px); } }
@keyframes slide-in { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes ticker-scroll { 0% { transform: translateX(100%); } 100% { transform: translateX(-100%); } }
@keyframes tsunami-wave { 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -20; } }
@keyframes epicenter-pulse { 0%,100% { r: 4; fill-opacity: 1; } 50% { r: 8; fill-opacity: 0.5; } }

.shaking-sm { animation: shake-sm 0.3s infinite; }
.shaking-lg { animation: shake-lg 0.2s infinite; }
.alert-overlay { animation: slide-in 0.5s ease-out; }
.flash-border { animation: flash-border 0.5s infinite; }

.shindo-0 { fill: #888888; } .shindo-1 { fill: #7ec8e3; } .shindo-2 { fill: #4caf50; }
.shindo-3 { fill: #ffeb3b; } .shindo-4 { fill: #ff9800; } .shindo-5l { fill: #ff6b6b; }
.shindo-5u { fill: #f44336; } .shindo-6l { fill: #d32f2f; } .shindo-6u { fill: #8b0000; }
.shindo-7 { fill: #4a0080; }

.tab-btn { transition: all 0.2s; }
.tab-btn:hover { background: rgba(255,255,255,0.1); }
.tab-btn.active { background: #1a2a5e; border-bottom: 2px solid #00ff88; color: #00ff88; }

.scrollbar-thin::-webkit-scrollbar { width: 6px; }
.scrollbar-thin::-webkit-scrollbar-track { background: #0a0e27; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: #1a2a5e; border-radius: 3px; }

@media (max-width: 768px) {
  .main-layout { flex-direction: column !important; }
  .map-panel { width: 100% !important; height: 50vh !important; }
  .info-panel { width: 100% !important; }
}