/* Night sky aesthetics */
:root{
  --bg-top:#0b1020;
  --bg-bottom:#03060f;
  --primary:#89b4ff;
  --accent:#ffd166;
  --text:#e6ecff;
  --muted:#9aa7c7;
  --glass:rgba(255,255,255,0.06);
  --glass-brd:rgba(255,255,255,0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
html,body{margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:linear-gradient(180deg,var(--bg-top),var(--bg-bottom));color:var(--text);}

#sky{position:fixed;inset:0;width:100%;height:100%;display:block;background:radial-gradient(1200px 800px at 70% 20%, rgba(255,255,255,0.05), transparent 60%);} 

.ui{position:fixed;left:50%;top:8%;transform:translateX(-50%);width:min(680px,92vw);padding:22px 22px 18px;background:var(--glass);backdrop-filter:blur(10px);border:1px solid var(--glass-brd);border-radius:16px;box-shadow:0 12px 40px rgba(0,0,0,0.35)}
.ui h1{margin:0 0 6px;font-size:28px;letter-spacing:0.5px}
.subtitle{margin:0 0 14px;color:var(--muted)}

form{display:flex;gap:10px}
input[type="text"]{flex:1;padding:12px 14px;border-radius:12px;border:1px solid var(--glass-brd);background:rgba(12,18,36,0.8);color:var(--text);outline:none;transition:border-color .2s}
input[type="text"]:focus{border-color:var(--primary)}
button{padding:12px 16px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--primary),#6cbcff);color:#081124;font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(137,180,255,.35);transition:transform .08s ease, box-shadow .2s}
button:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(137,180,255,.45)}

.message{min-height:20px;margin-top:10px;color:var(--accent)}
.legend{margin-top:6px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:8px}
.legend .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent)}

.tooltip{position:fixed;padding:6px 10px;border-radius:10px;background:rgba(10,14,26,0.9);border:1px solid var(--glass-brd);color:var(--text);pointer-events:none;font-size:12px;white-space:nowrap;transform:translate(-50%,-140%);box-shadow:0 8px 24px rgba(0,0,0,0.5)}

/* Star glow classes rendered on canvas overlay elements when needed */
.star{position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.8),0 0 18px rgba(120,180,255,.6)}