@import url('./controls.css');
@import url('./canvas.css');
@import url('./menu.css');
@import url('./side-menu.css');
@import url('./graph-option.css');
@import url('./responsive.css');
@import url('./info-modal.css');

body {
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  background: linear-gradient(120deg, #e3e9f3 0%, #f7fafc 100%);
  margin: 0;
  min-height: 100vh;
  color: #222;
  letter-spacing: 0.01em;
}

h1, h2, h3, h4, h5 {
  font-family: 'Segoe UI Semibold', 'Roboto', Arial, sans-serif;
  color: #2a3a5e;
  margin-top: 0;
}

.canvas-wrapper {
  border: 2px solid #e3e9f3;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 32px rgba(60, 80, 120, 0.13), 0 2px 8px rgba(60, 80, 120, 0.09);
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
  padding: 1.5rem 1.5rem 2.5rem 1.5rem;
  transition: box-shadow 0.2s;
}
.canvas-wrapper:hover {
  box-shadow: 0 10px 40px rgba(60, 80, 120, 0.18), 0 4px 16px rgba(60, 80, 120, 0.13);
}

canvas {
  border: 1.5px solid #bfcbe3;
  background: linear-gradient(135deg, #f7fafc 0%, #e3e9f3 100%);
  border-radius: 18px;
  box-shadow: 0 4px 32px rgba(60, 80, 120, 0.10), 0 1.5px 6px rgba(60, 80, 120, 0.07);
  display: block;
}

.controls {
  background: #f7f7fa;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(74,144,226,0.07);
  padding: 1.2rem 2.5rem;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}

label {
  font-size: 1.15rem;
  color: #2a3a5e;
  font-weight: 500;
}

select, button {
  font-size: 1.1rem;
  padding: 0.5rem 1.3rem 0.5rem 0.8rem;
  border-radius: 7px;
  border: 1.5px solid #bfcbe3;
  background: #fff;
  color: #2a3a5e;
  transition: border 0.2s, box-shadow 0.2s;
  outline: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
select:hover, select:focus, button:hover, button:focus {
  border: 1.5px solid #4a90e2;
  box-shadow: 0 2px 8px rgba(74,144,226,0.10);
}

#reset-view-btn {
  background: linear-gradient(90deg, #e3e9f3 0%, #bfcbe3 100%);
  color: #2a3a5e;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#reset-view-btn:hover {
  background: linear-gradient(90deg, #bfcbe3 0%, #e3e9f3 100%);
  color: #4a90e2;
}

::-webkit-scrollbar {
  width: 10px;
  background: #e3e9f3;
}
::-webkit-scrollbar-thumb {
  background: #bfcbe3;
  border-radius: 8px;
}