:root{
  --bg1:#0f4c3a; --bg2:#1a5c47; --bg3:#2d8f47; --bg4:#50c878; --bg5:#6be585;
  --panel: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.03);
  --text: #e6fff2;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Press Start 2P', monospace;
  color:var(--text);
  background: linear-gradient(135deg, var(--bg1) 0%, var(--bg2) 25%, var(--bg3) 50%, var(--bg4) 75%, var(--bg5) 100%);
  -webkit-font-smoothing:antialiased;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;padding:16px;border-bottom:2px solid rgba(0,0,0,0.15);
}
.topbar h1{margin:0;font-size:14px}
.controls{display:flex;align-items:center;gap:8px}
.controls select, .controls input{font-family:inherit;padding:8px;border-radius:6px;border:0;background:var(--panel);color:var(--text)}
main{display:flex;height:calc(100vh - 110px)}
.sidebar{width:320px;padding:12px;overflow:auto;background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));border-right:1px solid rgba(0,0,0,0.12)}
.trainer-list{display:flex;flex-direction:column;gap:8px}
.trainer-item{display:flex;align-items:center;gap:12px;padding:8px;border-radius:8px;background:var(--glass);cursor:pointer;border:1px solid rgba(0,0,0,0.12)}
.trainer-item img{width:72px;height:72px;image-rendering:pixelated}
.trainer-meta{font-size:11px}
.trainer-meta div{margin-bottom:6px}
.content{flex:1;padding:18px;overflow:auto}
.trainer-detail{background:rgba(255,255,255,0.02);padding:16px;border-radius:12px;min-height:200px}
.trainer-header{display:flex;gap:18px;align-items:center}
.trainer-header img{width:128px;height:128px;image-rendering:pixelated}
.trainer-info{font-size:12px}
.trainer-team{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.pkm-card{width:220px;padding:10px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(0,0,0,0.12)}
.pkm-card .sprite{width:96px;height:96px;display:block;margin:0 auto;image-rendering:pixelated}
.pkm-card h3{text-align:center;margin:6px 0;font-size:12px}
.type-badges{display:flex;gap:6px;justify-content:center;margin-bottom:8px}
.type-badge{padding:6px 8px;border-radius:6px;font-size:10px;color:#0a0a0a;font-weight:700}
.stat-row{display:flex;align-items:center;gap:8px;margin:6px 0}
.stat-name{width:70px;font-size:10px}
.stat-bar{flex:1;height:10px;background:rgba(255,255,255,0.06);border-radius:8px;overflow:hidden}
.stat-fill{height:100%;width:0%;background:lime}
.badge-icon{display:inline-block;padding:4px 8px;background:rgba(255,255,255,0.04);border-radius:6px;font-size:10px}
.placeholder{opacity:0.85}
.footer{font-size:10px;padding:12px;text-align:center;border-top:1px solid rgba(0,0,0,0.08)}
.empty .placeholder{margin:80px;text-align:center}

/* responsive */
@media (max-width:900px){.sidebar{display:none}.content{padding:12px}}

/* styles.css additions */
/* styles.css additions */
.controls select {
  font-family: 'Press Start 2P', monospace;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid #50c878;
  background: linear-gradient(135deg, #1a5c47 0%, #2d8f47 50%, #50c878 100%);
  color: #ffffff;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: all 0.2s ease;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.controls select:hover {
  border-color: #6be585;
  background: linear-gradient(135deg, #2d8f47 0%, #50c878 50%, #6be585 100%);
}
.controls select:focus {
  border-color: #6be585;
  box-shadow: 0 0 6px rgba(107,229,133,0.8);
}

/* Custom ▼ arrow */
.controls select {
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

/* Style dropdown options */
.controls select option {
  background: #1a5c47;
  color: #ffffff;
  padding: 10px;
  font-family: 'Press Start 2P', monospace;
}
.controls select option:hover,
.controls select option:focus,
.controls select option:checked {
  background: #50c878;
  color: #0f0f0f;
}

/* Custom themed scrollbar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: linear-gradient(135deg, #0f4c3a, #1a5c47);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #2d8f47, #50c878);
  border-radius: 10px;
  border: 2px solid #0f4c3a;
}
::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #50c878, #6be585);
}

/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #50c878 #1a5c47;
}

.trainer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.trainer-header h2 {
  font-family: 'Press Start 2P', monospace;
  font-size: 18px;
  color: #ffffff;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
}

.trainer-header select {
  font-family: 'Press Start 2P', monospace;
  padding: 10px 14px;
  border-radius: 10px;
  border: 2px solid #50c878;
  background: linear-gradient(135deg, #1a5c47 0%, #2d8f47 50%, #50c878 100%);
  color: #ffffff;
  cursor: pointer;
  appearance: none;
  outline: none;
  transition: all 0.2s ease;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
  background-image: url("data:image/svg+xml;utf8,<svg fill='white' height='16' viewBox='0 0 24 24' width='16' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 40px;
}

.trainer-header select:hover {
  border-color: #6be585;
  background: linear-gradient(135deg, #2d8f47 0%, #50c878 50%, #6be585 100%);
}

.trainer-header select:focus {
  border-color: #6be585;
  box-shadow: 0 0 6px rgba(107,229,133,0.8);
}

.trainer-header select option {
  background: #1a5c47;
  color: #ffffff;
  padding: 10px;
  font-family: 'Press Start 2P', monospace;
}

.trainer-header select option:hover,
.trainer-header select option:focus,
.trainer-header select option:checked {
  background: #50c878;
  color: #0f0f0f;
}