:root { --space:#050810; --panel:#080e1c; --border:#1a2744; --cyan:#00e5ff; --cyan-dim:#0099bb; --amber:#ffaa00; --red:#ff4444; --text:#c8deff; --dim:#4a6080; }
* { margin:0; padding:0; box-sizing:border-box; }
body { background:var(--space); color:var(--text); font-family:'Share Tech Mono',monospace; min-height:100vh; overflow-x:hidden; }
#stars { position:fixed; top:0; left:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.star { position:absolute; background:white; border-radius:50%; animation:twinkle var(--d) ease-in-out infinite alternate; }
@keyframes twinkle { from{opacity:.1} to{opacity:1} }

header { position:relative; z-index:10; padding:32px 40px 0; display:flex; align-items:flex-start; gap:20px; }
.logo-icon { width:52px; height:52px; border:2px solid var(--cyan); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; box-shadow:0 0 20px var(--cyan); animation:glow 3s ease-in-out infinite; flex-shrink:0; margin-top:4px; }
@keyframes glow { 0%,100%{box-shadow:0 0 20px var(--cyan)} 50%{box-shadow:0 0 40px var(--cyan)} }
h1 { font-family:'Orbitron',sans-serif; font-weight:900; font-size:clamp(1.6rem,4vw,2.8rem); letter-spacing:.15em; color:var(--cyan); text-shadow:0 0 30px var(--cyan); line-height:1; }
.subtitle { font-size:.75rem; color:var(--dim); letter-spacing:.2em; margin-top:6px; }

.input-panel { position:relative; z-index:10; margin:28px 40px; background:var(--panel); border:1px solid var(--border); border-top:2px solid var(--cyan); padding:24px 28px; }
.panel-label { font-family:'Orbitron',sans-serif; font-size:.65rem; letter-spacing:.3em; color:var(--cyan); margin-bottom:16px; }
.input-row { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; }
.coord-group { display:flex; flex-direction:column; gap:6px; }
.coord-group label { font-size:.65rem; letter-spacing:.2em; color:var(--dim); }
.coord-group input { background:#0a1020; border:1px solid var(--border); border-bottom:2px solid var(--cyan-dim); color:var(--cyan); font-family:'Share Tech Mono',monospace; font-size:1.1rem; padding:10px 16px; width:180px; outline:none; transition:all .2s; }
.coord-group input:focus { border-bottom-color:var(--cyan); }
.coord-group input::placeholder { color:var(--dim); }
.btn { background:transparent; border:1px solid; font-family:'Share Tech Mono',monospace; font-size:.8rem; letter-spacing:.12em; padding:12px 20px; cursor:pointer; transition:all .2s; height:44px; }
.btn-primary { border-color:var(--cyan); color:var(--cyan); }
.btn-primary:hover { background:rgba(0,229,255,.1); box-shadow:0 0 20px rgba(0,229,255,.3); }
.btn-geo { border-color:var(--amber); color:var(--amber); }
.btn-geo:hover { background:rgba(255,170,0,.1); }
.status-bar { margin-top:14px; font-size:.7rem; color:var(--dim); min-height:18px; }
.status-bar.ok { color:#44ff88; }
.status-bar.err { color:var(--red); }
.status-bar.loading { color:var(--amber); }

.planets-grid { position:relative; z-index:10; display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:2px; padding:0 40px 60px; }
.planet-card { background:var(--panel); border:1px solid var(--border); position:relative; overflow:hidden; }
.planet-card::before { content:''; position:absolute; top:0; left:0; right:0; height:2px; background:var(--accent,var(--cyan)); z-index:2; }
.planet-header { padding:12px 16px; display:flex; align-items:center; gap:12px; position:relative; z-index:2; background:rgba(5,8,16,.7); }
.planet-symbol { font-size:1.4rem; line-height:1; }
.planet-name { font-family:'Orbitron',sans-serif; font-size:.85rem; font-weight:700; letter-spacing:.15em; color:var(--accent,var(--cyan)); }
.planet-source { font-size:.55rem; color:#2a4060; letter-spacing:.05em; margin-top:2px; }
.planet-coords-display { margin-left:auto; font-size:.6rem; color:var(--dim); text-align:right; line-height:1.6; }
.map-container { height:260px; position:relative; }
.planet-footer { padding:8px 16px; font-size:.6rem; color:var(--dim); border-top:1px solid var(--border); background:rgba(5,8,16,.8); }

/* Leaflet dark theme */
.leaflet-container { background:#08101a !important; }
.leaflet-control-zoom { border:1px solid var(--border) !important; box-shadow:none !important; }
.leaflet-control-zoom a { background:var(--panel) !important; color:var(--cyan) !important; border-bottom:1px solid var(--border) !important; font-size:16px !important; line-height:26px !important; }
.leaflet-control-zoom a:hover { background:#0d1830 !important; }
.leaflet-control-attribution { font-size:9px !important; background:rgba(5,8,16,.85) !important; color:#3a5070 !important; }
.leaflet-control-attribution a { color:#3a7090 !important; }

/* Layer control dark theme */
.leaflet-control-layers {
    background: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 12px rgba(0,0,0,.6) !important;
    padding: 0 !important;
}
.leaflet-control-layers-toggle {
    background-color: var(--panel) !important;
    border: 1px solid var(--border) !important;
    border-radius: 0 !important;
    width: 30px !important;
    height: 30px !important;
    background-image: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.leaflet-control-layers-toggle::after {
    content: '⊞';
    color: var(--cyan);
    font-size: 16px;
    line-height: 1;
}
.leaflet-control-layers-expanded {
    padding: 8px 10px !important;
    min-width: 140px !important;
}
.leaflet-control-layers-list {
    font-family: 'Share Tech Mono', monospace !important;
    font-size: 0.65rem !important;
    color: var(--text) !important;
}
.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    padding: 3px 0 !important;
    color: var(--text) !important;
    font-size: 0.65rem !important;
    letter-spacing: .04em !important;
}
.leaflet-control-layers-separator {
    border-top: 1px solid var(--border) !important;
    margin: 4px 0 !important;
}
.leaflet-control-layers input[type="radio"],
.leaflet-control-layers input[type="checkbox"] {
    accent-color: var(--cyan);
}
.leaflet-control-layers-base::before {
    content: 'FOND';
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    letter-spacing: .2em;
    color: var(--dim);
    margin-bottom: 4px;
}
.leaflet-control-layers-overlays::before {
    content: 'COUCHES';
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.5rem;
    letter-spacing: .2em;
    color: var(--dim);
    margin-bottom: 4px;
}

.custom-marker { width:14px; height:14px; border:2px solid #fff; border-radius:50%; animation:mpulse 2s ease-in-out infinite; }
@keyframes mpulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.3)} }

.divider { position:relative; z-index:10; height:1px; background:linear-gradient(90deg,transparent,var(--border),transparent); margin:0 40px 24px; }
.section-title { position:relative; z-index:10; font-family:'Orbitron',sans-serif; font-size:.65rem; letter-spacing:.35em; color:var(--dim); padding:0 40px; margin-bottom:16px; display:flex; align-items:center; gap:12px; }
.section-title::after { content:''; flex:1; height:1px; background:var(--border); }

@media(max-width:600px) {
    header,.divider,.section-title { padding-left:16px; padding-right:16px; }
    .input-panel { margin:20px 16px; padding:16px; }
    .planets-grid { padding:0 16px 40px; }
    .coord-group input { width:140px; }
}