/* ===== ENHANCED THEME ===== */
:root{
  --bg:#050510;
  --bg-2:#0a0f1a;
  --fg:#ffffff;
  --muted:#8b95b8;
  --panel:rgba(15,20,35,0.75);
  --panel-solid:#0d1425;
  --panel-2:rgba(18,25,45,0.85);
  --border:#2a3555;
  --accent:#00d4ff;
  --accent-2:#8366ff;
  --accent-3:#ff6b9d;
  --chip:#1a2340;
  --chip-hover:#253050;
  --ok:#00ff88;
  --warn:#ffb700;
  --err:#ff4757;
  --shadow: 0 20px 60px rgba(0,0,0,.7), 0 4px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.05);
  --glow: 0 0 30px rgba(0,212,255,.4), 0 0 60px rgba(0,212,255,.2);
  --highlight-glow: 0 0 40px rgba(255,255,255,.8), 0 0 80px rgba(0,212,255,.6);
}

*{box-sizing:border-box}

html,body{
  height:100%;
  margin:0;
  background: linear-gradient(135deg, #050510 0%, #0a0f1a 50%, #050510 100%);
  color:var(--fg);
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Animated background gradient */
body::before {
  content:'';
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background: radial-gradient(ellipse at 20% 30%, rgba(0,212,255,0.15) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 70%, rgba(131,102,255,0.1) 0%, transparent 50%);
  pointer-events:none;
  z-index:0;
}

a{color:var(--accent); text-decoration:none; transition: color .2s;}
a:hover{color:#00ffff;}

.kbd{
  font:16px 'JetBrains Mono', ui-monospace, monospace;
  padding:2px 6px;
  border:1px solid var(--border);
  border-radius:6px;
  background:linear-gradient(135deg, #0a1228 0%, #151d35 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}

/* ===== LAYOUT ===== */
#app{display:grid;grid-template-rows:auto 1fr;height:100%;position:relative;z-index:1;}

header{
  display:grid;
  gap:16px;
  grid-template-columns:1fr auto auto;
  align-items:center;
  padding:12px 20px;
  background:linear-gradient(180deg,rgba(10,15,30,.95),rgba(5,8,20,.85));
  border-bottom:1px solid rgba(42,53,85,.5);
  position:sticky;
  top:0;
  z-index:10;
  backdrop-filter: blur(20px) saturate(150%);
}

header .left{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
header h1{
  margin:0;
  font-size:26px;
  font-weight:700;
  letter-spacing:-.5px;
  background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Header Controls */
.header-right-controls {
  display: flex;
  align-items: center;
  gap: 24px;
}

.galaxy-selector-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Radio Player */
#radio-player {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(20,28,50,.95) 0%, rgba(15,20,40,.9) 100%);
  border: 1px solid rgba(42,53,85,.6);
}

#radio-play-pause-btn {
  padding: 6px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#radio-play-pause-btn svg {
  width: 24px;
  height: 24px;
}

.volume-control {
  display: flex;
  align-items: center;
  gap: 8px;
}

.volume-control .volume-icon {
  width: 22px;
  height: 22px;
  color: var(--muted);
}

#radio-volume-slider {
  width: 100px;
  height: 4px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(42,53,85,.5);
  border-radius: 2px;
  outline: none;
  transition: all .2s;
}

#radio-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,212,255,.5);
  transition: all .2s;
}

#radio-volume-slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(0,212,255,.7);
}

#radio-volume-slider:focus {
  outline: none;
  box-shadow: none; /* Override general focus style for inputs */
}

.filter-info-box {
  padding: 10px 14px;
  background: rgba(0, 212, 255, 0.05);
  border: 1px solid rgba(0, 212, 255, 0.1);
  border-radius: 12px;
  font-size: 14px;
  text-align: center;
  color: var(--muted);
}

.pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px 12px;
  border-radius:999px;
  border:1px solid rgba(42,53,85,.5);
  background:linear-gradient(135deg, rgba(26,35,64,.7) 0%, rgba(18,25,45,.7) 100%);
  font-size:14px;
  color:var(--muted);
  backdrop-filter: blur(10px);
  transition: all .3s;
}

.pill:hover{
  border-color:var(--accent);
  box-shadow: 0 0 20px rgba(0,212,255,.2);
}

.pill strong{color:var(--accent); font-weight:600;}

#content{
  display:grid;
  grid-template-columns:400px 1fr 400px;
  gap:20px;
  padding:20px;
  height:calc(100vh - 72px);
  min-height:0;
  overflow:hidden;
}

/* ===== ENHANCED PANELS ===== */
.card,.blk,#filters,#details,#mapWrap{
  border:1px solid rgba(42,53,85,.4);
  border-radius:20px;
  background:linear-gradient(135deg, rgba(15,20,35,.85) 0%, rgba(10,15,30,.75) 100%);
  box-shadow:var(--shadow);
  backdrop-filter: blur(10px);
  position:relative;
}

#mapWrap{
  overflow:hidden;
  position: relative;
  z-index: 1;
}

/* Subtle animated border glow */
.card::before,.blk::before,#mapWrap::before{
  content:'';
  position:absolute;
  top:-2px;
  left:-2px;
  right:-2px;
  bottom:-2px;
  background: linear-gradient(45deg, transparent, var(--accent), transparent);
  border-radius:20px;
  opacity:0;
  z-index:-1;
  transition: opacity .3s;
}

.card:hover::before,.blk:hover::before{
  opacity:0.15;
}

#filters{
  padding:16px;
  overflow-y:auto;
  overflow-x:hidden;
  height:calc(100vh - 112px);
  min-height:0;
  z-index: 2;
  will-change: transform;
  scrollbar-gutter: stable;
}

#filters-inner {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

#details{
  padding:16px;
  overflow-y:auto;
  overflow-x:hidden;
  height:calc(100vh - 112px);
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index: 2;
  transform: translateZ(0);
  will-change: transform;
}

.blk{
  background:linear-gradient(135deg, rgba(18,25,45,.9) 0%, rgba(15,20,35,.8) 100%);
  padding:14px;
  transition: transform .2s, box-shadow .2s;
}

.blk:hover{
  transform: translateY(-2px);
  box-shadow: 0 25px 70px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}

.blk h3{
  margin:0 0 4px 0;
  font-size:16px;
  font-weight:600;
  letter-spacing:.5px;
  color:#ffffff;
  text-transform: uppercase;
  opacity:.95;
}

.blk .hdrline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(42,53,85,.3);
}

.card{
  background:linear-gradient(135deg, rgba(13,20,37,.95) 0%, rgba(10,15,30,.85) 100%);
  padding:14px;
  transition: all .3s;
}

.small{font-size:14px}
.muted{color:var(--muted);opacity:.85;}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.grid{display:grid;gap:12px}
.grid.cols2{grid-template-columns:1fr 1fr}
.grid.cols3{grid-template-columns:repeat(3,1fr)}

/* ===== ENHANCED FORM ELEMENTS ===== */
:where(select,input,button){
  background:linear-gradient(135deg, rgba(20,28,50,.95) 0%, rgba(15,20,40,.9) 100%);
  color:var(--fg);
  border:1px solid rgba(42,53,85,.6);
  border-radius:12px;
  padding:10px 14px;
  transition: all .2s ease;
  accent-color: var(--accent);
  font-size:15px;
}

select, input[type="search"], input[type="number"]{width:100%}

input[type="search"]{
  padding-left:40px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%2300d4ff" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>');
  background-repeat:no-repeat;
  background-position:12px center;
}

button{cursor:pointer; font-weight:500;}

button.primary{
  background:linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  color:#000;
  border:1px solid rgba(0,212,255,.5);
  font-weight:600;
  box-shadow:0 4px 20px rgba(0,212,255,.3), inset 0 1px 0 rgba(255,255,255,.3);
  text-transform: uppercase;
  letter-spacing: .5px;
}

button.primary:hover{
  background:linear-gradient(135deg, #00ffff 0%, #00aadd 100%);
  box-shadow:0 6px 30px rgba(0,212,255,.5), inset 0 1px 0 rgba(255,255,255,.4);
  transform: translateY(-1px);
}

button.ghost{
  background:rgba(20,28,50,.5);
  border:1px solid rgba(42,53,85,.5);
  backdrop-filter: blur(10px);
}

button.ghost:hover{
  background:rgba(30,40,60,.6);
  border-color:var(--accent);
  box-shadow: 0 0 20px rgba(0,212,255,.2);
}

:where(select,input,button):focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 30px rgba(0,212,255,.3), inset 0 1px 0 rgba(255,255,255,.1);
}

:where(select,input,button):active{
  transform: translateY(1px);
}

/* Enhanced checkbox chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 10px;
  background:linear-gradient(135deg, rgba(26,35,64,.8) 0%, rgba(20,28,50,.7) 100%);
  border:1px solid rgba(42,53,85,.5);
  border-radius:999px;
  font-size:13px;
  transition: all .2s;
  cursor:pointer;
  user-select:none;
}

.chip:hover{
  background:linear-gradient(135deg, rgba(37,48,80,.9) 0%, rgba(30,40,60,.8) 100%);
  border-color:rgba(0,212,255,.3);
  box-shadow: 0 0 15px rgba(0,212,255,.15);
}

.chip input[type="checkbox"]{
  margin:0;
  width:14px;
  height:14px;
}

.chip.active, .chip input:checked + *{
  background:linear-gradient(135deg, rgba(0,212,255,.2) 0%, rgba(0,153,204,.15) 100%);
  border-color:var(--accent);
  color:var(--accent);
}

.tagRow,.chipsRow{display:flex;flex-wrap:wrap;gap:8px}
.chipsRow{margin-top:8px}

/* Enhanced cards with animated borders */
.planetCard,.stationCard,.beltCard{
  border:1px solid rgba(42,53,85,.4);
  padding:12px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(18,28,56,.7) 0%, rgba(15,23,45,.6) 100%);
  transition: all .3s;
  position:relative;
  overflow:hidden;
}

.planetCard::before,.stationCard::before,.beltCard::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--accent-2), transparent);
  animation: shimmer 3s infinite;
  opacity:0;
  transition: opacity .3s;
}

@keyframes shimmer{
  0%{transform:translateX(-100%)}
  100%{transform:translateX(100%)}
}

.planetCard:hover::before,.stationCard:hover::before,.beltCard:hover::before{
  opacity:1;
}

.planetCard.match{
  border-color:var(--accent);
  background:linear-gradient(135deg, rgba(0,212,255,.15) 0%, rgba(0,153,204,.1) 100%);
  box-shadow:0 0 40px rgba(0,212,255,.3), inset 0 0 30px rgba(0,212,255,.1);
  animation: pulse 2s infinite;
}

@keyframes pulse{
  0%,100%{box-shadow:0 0 40px rgba(0,212,255,.3), inset 0 0 30px rgba(0,212,255,.1)}
  50%{box-shadow:0 0 60px rgba(0,212,255,.5), inset 0 0 40px rgba(0,212,255,.15)}
}

.hdr{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.hdr .name{font-weight:600; color:#ffffff;}

.sysTitle{
  font-weight:700;
  margin:0;
  font-size:20px;
  letter-spacing:-.5px;
  background: linear-gradient(135deg, #ffffff 0%, #00d4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sysSub{
  margin:8px 0 12px 0;
  font-size:15px;
  color:var(--muted);
  opacity:.9;
}

.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;font-size:15px}
.kv .k{color:var(--muted);opacity:.8}
.kv .v{color:var(--fg);font-weight:500}


.planetResourceBlock{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.08);
}

.planetResourceBlock__summary{
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  list-style:none;
  user-select:none;
  padding-bottom:6px;
}

.planetResourceBlock__summary:focus-visible{
  outline:2px solid rgba(0,212,255,.6);
  outline-offset:4px;
  border-radius:8px;
}

.planetResourceBlock__summary::-webkit-details-marker,
.planetResourceBlock__summary::marker{
  display:none;
}

.planetResourceBlock__summary::after{
  content:"";
  flex:0 0 10px;
  height:10px;
  border-right:2px solid rgba(255,255,255,.4);
  border-bottom:2px solid rgba(255,255,255,.4);
  transform:rotate(45deg);
  transition:transform .2s ease, border-color .2s ease;
}

.planetResourceBlock[open] .planetResourceBlock__summary::after{
  transform:rotate(-135deg);
  border-color:var(--accent);
}

.planetResourceBlock__summary:hover::after{
  border-color:var(--accent);
}

.planetResourceBlock__summary:hover .planetResourceBlock__title{
  color:var(--accent);
}

.planetResourceBlock[open] .planetResourceBlock__title{
  color:var(--accent);
}

.planetResourceBlock__title{
  font-size:12px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--muted);
  flex:1;
}

.planetResourceBlock__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:6px 16px;
  margin-top:10px;
}

.planetResourceBlock__item{
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:12px;
  line-height:1.4;
}

.planetResourceBlock__label{
  color:var(--muted);
  flex:1;
}

.planetResourceBlock__value{
  color:var(--fg);
  font-weight:600;
  font-variant-numeric:tabular-nums;
  text-align:right;
  min-width:48px;
}

.planetResourceBlock__empty{
  margin-top:8px;
  font-size:12px;
}

/* Enhanced double slider */
.double-slider{position:relative;padding:10px 0}

.double-slider input[type=range]{
  width:100%;
  background:transparent;
  appearance:none;
  position:absolute;
  left:0;
  right:0;
  top:2px;
  height:32px;
  pointer-events:none;
}

.double-slider input[type=range]::-webkit-slider-thumb{
  pointer-events:auto;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:linear-gradient(135deg, #00d4ff 0%, #0099cc 100%);
  border:2px solid #0a0f1a;
  box-shadow:0 0 20px rgba(0,212,255,.5);
  cursor:pointer;
  transition: all .2s;
}

.double-slider input[type=range]::-webkit-slider-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 0 30px rgba(0,212,255,.7);
}

.double-slider .track{
  height:10px;
  background:linear-gradient(90deg, #1a2340 0%, #253050 100%);
  border:1px solid rgba(42,53,85,.5);
  border-radius:999px;
  position:relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.3);
}

.double-slider .fill{
  position:absolute;
  height:100%;
  background:linear-gradient(90deg, #00d4ff 0%, #8366ff 100%);
  border-radius:999px;
  box-shadow:0 0 20px rgba(0,212,255,.4);
}

/* Map area enhancements */
#mapWrap{
  position:relative;
  overflow:hidden;
  background: radial-gradient(ellipse at center, rgba(0,20,40,.3) 0%, transparent 70%);
}

#stars{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
}

#map{
  position:relative;
  z-index:1;
  width:100%;
  height:100%;
}

.tooltip{
  position:absolute;
  pointer-events:none;
  top: 70px; /* Position below the toolbar */
  right: 16px;
  background:linear-gradient(135deg, rgba(10,15,30,.98) 0%, rgba(5,8,20,.95) 100%);
  border:1px solid rgba(0,212,255,.3);
  border-radius:12px;
  padding:10px 14px;
  font-size:16px;
  z-index:4;
  display:none;
  box-shadow:0 10px 40px rgba(0,0,0,.8), 0 0 30px rgba(0,212,255,.2);
  backdrop-filter: blur(10px);
  max-width: 300px;
  white-space: normal;
}

.tooltip h4 {
  font-size: 18px;
  margin: 8px 0 4px 0;
  color: var(--accent-2);
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
}

.tooltip ul {
  margin: 0;
  padding: 0 0 0 16px;
  list-style-type: '› ';
}

.tooltip li {
  margin-bottom: 2px;
}

/* Enhanced Toolbar */
.toolbar{
  position:absolute;
  right:16px;
  top:16px;
  z-index:3;
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  background:linear-gradient(135deg, rgba(15,24,52,.85) 0%, rgba(10,15,30,.8) 100%);
  border:1px solid rgba(42,53,85,.5);
  padding:10px;
  border-radius:14px;
  backdrop-filter: blur(20px);
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

.toolchk{
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-size:18px;
  color:var(--muted);
  transition: color .2s;
}

.toolchk:hover{color:var(--fg);}

.toolbar button{
  padding:8px 12px;
  border-radius:10px;
  min-width:36px;
  text-align:center;
}

/* Label size slider */
.label-size-control{
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 8px;
  border-left:1px solid rgba(42,53,85,.3);
}

.label-size-control label{
  font-size:16px;
  color:var(--muted);
  white-space:nowrap;
}

.label-size-control input[type="range"]{
  width:100px;
  height:4px;
  -webkit-appearance:none;
  appearance:none;
  background:rgba(42,53,85,.5);
  border-radius:2px;
  outline:none;
}

.label-size-control input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:14px;
  height:14px;
  background:var(--accent);
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 0 10px rgba(0,212,255,.5);
}

/* Enhanced SVG styling */
.system-container {
  pointer-events: none; /* Pass clicks through to the cell/point */
}

.asteroid-belt {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.5px;
  stroke-dasharray: 4, 4;
}

.planet-dot {
  fill: #ffffff;
  stroke: #000000;
  stroke-width: 1px;
}

.planet--inhabitable {
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.5px;
  opacity: 0.7;
}

.station-dot {
  fill: #ffffff; /* Use accent color for stations */
  stroke: #000000;
  stroke-width: 1px;
}

svg text{
  fill:var(--fg);
  font-size:14px;
  font-weight:500;
  paint-order:stroke;
  stroke:#000;
  stroke-width:3px;
  stroke-linejoin:round;
  opacity:.9;
  transition: font-size .2s;
}

.cell{
  stroke:rgba(0,0,0,.8);
  stroke-width:2px;
  opacity:.85;
  transition: all .3s;
  cursor:pointer;
}

.cell:hover{
  opacity:1;
  stroke-width:2.5px;
  filter:brightness(1.2);
}

.cell.highlight{
  stroke:#ffffff;
  stroke-width:3px;
  opacity:1;
  filter:drop-shadow(0 0 20px rgba(255,255,255,.8)) drop-shadow(0 0 40px rgba(0,212,255,.6)) brightness(1.3);
  animation: highlightPulse 1.5s infinite;
}

@keyframes highlightPulse{
  0%,100%{
    filter:drop-shadow(0 0 20px rgba(255,255,255,.8)) drop-shadow(0 0 40px rgba(0,212,255,.6)) brightness(1.3);
    stroke-width:3px;
  }
  50%{
    filter:drop-shadow(0 0 30px rgba(255,255,255,1)) drop-shadow(0 0 60px rgba(0,212,255,.8)) brightness(1.5);
    stroke-width:4px;
  }
}

.point{
  stroke:#000;
  stroke-width:2px;
  transition: all .3s;
  cursor:pointer;
}

.point:hover{
  r:10;
  filter:drop-shadow(0 0 15px rgba(255,255,255,.8));
}

.point.highlight{
  fill:#00ffff;
  stroke:#ffffff;
  stroke-width:2.5px;
  r:12;
  filter:drop-shadow(0 0 25px rgba(0,255,255,1));
  animation: pointPulse 1.5s infinite;
}

@keyframes pointPulse{
  0%,100%{r:12; filter:drop-shadow(0 0 25px rgba(0,255,255,1))}
  50%{r:14; filter:drop-shadow(0 0 35px rgba(0,255,255,1))}
}

.edges path{
  stroke:rgba(0,212,255,.2);
  stroke-opacity:.4;
  stroke-width:1px;
  fill:none;
  stroke-dasharray:3,5;
}

/* Results list hover effects */
.result{
  cursor:pointer;
  border:1px solid transparent;
  transition: all .3s;
}

.result:hover{
  border-color:var(--accent);
  box-shadow:0 0 30px rgba(0,212,255,.3), inset 0 0 20px rgba(0,212,255,.05);
  transform: translateX(4px);
  background:linear-gradient(135deg, rgba(0,212,255,.1) 0%, rgba(0,153,204,.05) 100%);
}

.result .chipsRow {
  max-height: 105px;
  overflow-y: auto;
  padding-right: 5px;
  border-radius: 6px;
}

/* Loading animation */
#loaderOverlay{
  position:fixed;
  inset:0;
  background:rgba(5,5,16,.95);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:20;
  backdrop-filter: blur(10px);
}

#loaderPanel{
  background:linear-gradient(135deg, rgba(18,25,45,.95) 0%, rgba(15,20,35,.9) 100%);
  width:min(560px,92vw);
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}

/* Smooth scrollbar */
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-track{background:rgba(10,15,30,.3); border-radius:5px;}
::-webkit-scrollbar-thumb{background:linear-gradient(135deg, rgba(0,212,255,.3) 0%, rgba(131,102,255,.3) 100%); border-radius:5px;}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(135deg, rgba(0,212,255,.5) 0%, rgba(131,102,255,.5) 100%);}

/* Darker */
:root { color-scheme: dark; }

select,
select option,
select optgroup {
  background-color: var(--panel-solid);
  color: var(--fg);
}

#filter-block-inhabitable .small.muted, .blk .small.muted {
  font-size: 14px; /* Increased for readability */
  line-height: 1.4;
}

label:has(#ratioSim) {
  font-size: 14px; /* Increased for readability */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

label:has(#ratioSim) input[type=range] {
  width: 100%;
  margin: 8px 0;
}

/* Tighter chips for the uninhabitable filter - increased font size */
#filter-block-inhabitable .tagRow .chip {
  padding: 5px 10px;
  font-size: 13px;
}

/* Specific styles for the ratio display chips */
#filter-block-inhabitable .double-slider + .chipsRow {
  flex-wrap: nowrap;
}
#filter-block-inhabitable .double-slider + .chipsRow .chip {
  font-size: 12px;
  padding: 4px 8px;
}

/* Ensure checkbox groups use a grid layout */
#filters #raceBox,
#filters #terrainBox,
#filters #resBox,
#filters #resourceRateBox {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}

/* ===== Accordion Styles ===== */
#filters .blk .hdrline {
  cursor: pointer;
  transition: background-color .3s;
}

#filters .blk .collapsible-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out;
  padding-top: 0;
  padding-bottom: 0;
}

#filters .blk.active > .collapsible-content {
  max-height: 1000px; /* Large enough to fit any content */
  overflow: visible;
  padding-top: 14px;
  padding-bottom: 14px;
}

#filters .blk.active { 
  background:linear-gradient(135deg, rgba(38,45,65,.9) 0%, rgba(25,30,45,.8) 100%);
  box-shadow: 0 0 25px rgba(0,212,255,.2);
}

#filters .hdrline {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hdr-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--accent-2);
  box-shadow: 0 0 10px var(--accent-2), 0 0 20px var(--accent-2);
  opacity: 0;
  transition: opacity .3s;
}

.blk.filter-active.active .status-dot {
  opacity: 1;
}

.chevron {
  width: 12px;
  height: 12px;
  border-style: solid;
  border-color: var(--muted);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  transition: transform 0.3s ease-out, border-color .3s;
}

#filters .blk.active .chevron {
  transform: rotate(-135deg);
  border-color: var(--fg);
}


/* ===== Route Line Styling ===== */
.route-line {
  stroke: #fff;
  stroke-width: 2px;
  stroke-opacity: 1;
  fill: none;
  filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--accent)) drop-shadow(0 0 15px var(--accent));
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: routePulse 2s infinite ease-in-out;
}

@keyframes routePulse {
  50% {
    filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 12px var(--accent)) drop-shadow(0 0 25px var(--accent));
  }
}

.route-label {
  fill: #ffffff;
  font-size: 16px;
  font-weight: bold;
  paint-order: stroke;
  stroke: #000000;
  stroke-width: 4px;
  stroke-linejoin: round;
  text-anchor: middle;
  dominant-baseline: middle;
}

/* ===== Route Planner UI Enhancements ===== */
.route-input-group {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.route-picker-btn {
  padding: 8px;
  min-width: 42px; /* Match height of input */
  font-size: 18px;
}

#map.picking-mode {
  cursor: crosshair;
}

#route-picker-status {
  color: var(--accent);
  text-align: center;
  font-weight: 500;
}

.resourceRateSummaryWrap {
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  background: var(--panel);
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow-x: auto;
}

.resourceRateSummary__title {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.resourceRateSummary {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 320px;
}

.resourceRateSummary thead th,
.resourceRateSummary tbody td {
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
}

.resourceRateSummary thead th {
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.resourceRateSummary tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.resourceRateSummary tbody tr:last-child td {
  border-bottom: none;
}

.resourceRateSummary__value {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.resourceRateSummary tbody tr:hover {
  background: rgba(0, 212, 255, 0.08);
}

.galaxy-result-header {
  font-size: 18px;
  font-weight: 600;
  color: var(--accent-2);
  padding: 16px 0 8px 4px;
  margin: 0;
  border-bottom: 1px solid var(--border);
}

/* ===== Result Animations ===== */
@keyframes fade-slide-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.result-card-enter {
  animation: fade-slide-in 0.5s ease-out forwards;
}

.no-results-card {
  text-align: center;
  padding: 40px 20px;
  font-size: 18px;
  color: var(--muted);
}

.no-results-card .icon {
  font-size: 48px;
  margin-bottom: 16px;
  display: block;
  opacity: 0.5;
}