* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background: linear-gradient(135deg,#1a1a1a 0%,#2d2d2d 100%); padding: 20px; min-height:100vh; }
.container { max-width:1200px; margin:0 auto; background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,0.25); }
.header { background: linear-gradient(135deg,#333 0%,#555 100%); color:#fff; padding:28px; text-align:center; }
.search-section { padding:20px; background:#f8f9fa; border-bottom:2px solid #e9ecef; }
.search-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); margin-bottom:12px; }
label { display:block; margin-bottom:6px; font-weight:600; color:#333; }
input, select, button { padding:10px; font-size:15px; border-radius:6px; border:1px solid #ddd; width:100%; }
.searchable-dropdown { position: relative; }
.searchable-dropdown::after {
  content: '▼';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: #666;
  font-size: 12px;
}
.searchable-dropdown input[type="text"] { padding:10px; font-size:15px; border-radius:6px; border:1px solid #ddd; width:100%; }
.dropdown-list { 
  position: absolute; 
  top: 100%; 
  left: 0; 
  right: 0; 
  background: white; 
  border: 1px solid #ddd; 
  border-top: none; 
  border-radius: 0 0 6px 6px; 
  max-height: 200px; 
  overflow-y: auto; 
  z-index: 1000; 
  display: none; 
}
.dropdown-item { 
  padding: 10px; 
  cursor: pointer; 
  border-bottom: 1px solid #f0f0f0; 
}
.dropdown-item:hover { 
  background-color: #f8f9fa; 
}
.dropdown-item:last-child { 
  border-bottom: none; 
}
.dropdown-list.show { 
  display: block; 
}
.btn { background:linear-gradient(135deg,#444,#666); color:#fff; border:0; cursor:pointer; padding:12px; font-weight:700; }
.results-section { padding:20px; display:none; }
.chart-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* square */
  max-width: 400px;      /* optional cap */
  margin: 16px auto;
}

.stat-card { background:#f8f9fa; padding:14px; border-radius:8px; text-align:center; border:1px solid #e9ecef; }
.stats-grid { display:grid; gap:12px; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); margin-top:12px; }
.loading { text-align:center; padding:14px; color:#666; }
.loading-spinner { border: 4px solid #f3f3f3; border-top: 4px solid #666; border-radius: 50%; width: 36px; height: 36px; animation: spin 1s linear infinite; margin: 0 auto 8px; }
@keyframes spin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
.error { background:#fee; border:2px solid #fcc; padding:12px; border-radius:8px; color:#900; margin-top:12px; }
.footer { padding:12px; background:#f8f9fa; text-align:center; border-top:2px solid #e9ecef; color:#666; }
@media (max-width:768px){ .chart-container { height:260px; } }