body { margin: 0; background: #050505; color: #eee; font-family: sans-serif; }
#controlPanel { position: absolute; top: 12px; left: 12px; max-width: 320px; background: rgba(0,0,0,0.85); border-radius: 6px; line-height: 1.4; font-size: 14px; transition: max-height 0.3s ease; overflow: hidden; z-index: 1000; }
#controlPanel.collapsed { max-height: 40px; }
#controlPanel.expanded { max-height: 400px; }
#controlHeader { padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
#controlHeader h1 { margin: 0; font-size: 16px; }
#controlArrow { transition: transform 0.3s ease; }
#controlPanel.collapsed #controlArrow { transform: rotate(-90deg); }
#controlContent { padding: 0 14px 10px 14px; }
#controlContent label { display: block; margin-bottom: 6px; margin-top: 10px; font-weight: 600; }
#controlContent .row { display: flex; align-items: center; gap: 10px; }
#controlContent input[type="range"] { flex: 1; }
#controlContent select { padding: 4px; background: rgba(255,255,255,0.1); color: #eee; border: 1px solid #555; border-radius: 4px; font-size: 12px; width: 100%; }
canvas { display: block; }
.label-hidden { display: none !important; }
#scaleLegend { position: absolute; left: 12px; bottom: 90px; padding: 8px 10px; background: rgba(0,0,0,0.55); border-radius: 6px; font-size: 12px; color: #ddd; }
#scaleLegend .bar { height: 4px; background: #ddd; margin-top: 6px; position: relative; }
#scaleLegend .tick { position: absolute; top: -4px; width: 1px; height: 12px; background: #ddd; }
#scaleLegend .label { margin-top: 4px; text-align: right; color: #ccc; font-size: 11px; }
.scale-tick { position: absolute; top: -4px; width: 1px; height: 12px; background: #ddd; }
#starInfo { position: fixed; top: 12px; right: 12px; max-width: 400px; background: rgba(0,0,0,0.55); padding: 10px 12px; border-radius: 6px; font-size: 13px; line-height: 1.5; z-index: 11; display: none; }
#starInfo .header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; gap: 12px; }
#starInfo h2 { margin: 0; font-size: 15px; font-weight: 600; flex: 1; }
#starInfo .close-btn { background: transparent; border: none; color: #fff; font-size: 18px; cursor: pointer; padding: 0; width: 20px; height: 20px; line-height: 1; flex-shrink: 0; }
#starInfo .close-btn:hover { color: #ffd84a; }
.lblCommon { font-weight:600; font-size:10px; }
.lblOfficial { font-weight:500; font-size:9px; color:#cccccc; }
.star-label { background: rgba(0,0,0,0.8); padding: 2px 6px; border-radius: 3px; }