/* Roboto — self-hosted for consistent typography across systems (latin + latin-ext) */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/roboto-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/roboto-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/roboto-latin-500-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/roboto-latin-ext-500-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/roboto-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/roboto-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #161616; color: #c9cede;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow: hidden; }
#app { position: fixed; inset: 0; }
#sky { position: fixed; inset: 0; width: 100vw; height: 100vh;
  display: block; cursor: grab; touch-action: none; }
#sky:active { cursor: grabbing; }
#sky.star-clickable { cursor: pointer; }
#sky.star-clickable:active { cursor: grabbing; }
#hoverCard { position: fixed; z-index: 18; width: max-content; max-width: min(240px, calc(100vw - 20px)); min-height: 52px; padding: 10px 54px 10px 12px;
  border: 0; border-radius: 8px; background: #1f2c4c; box-shadow: 0 10px 26px rgba(0,0,0,.32);
  color: #dbe5f8; font-size: 12px; line-height: 1.35; pointer-events: auto; transform: translate(-50%, calc(-100% - 12px)); }
#hoverCard.is-below { transform: translate(-50%, 12px); }
#hoverCard[hidden] { display: none; }
.hover-card-head { display: block; }
.hover-card-title { display: block; color: #f0f4ff; font-size: 13px; font-weight: 600; }
.hover-card-identifiers { display: block; margin-top: 2px; color: #9db4e5; font-size: 11px; text-wrap: balance; }
.hover-card-meta { display: block; margin-top: 4px; color: #8194bc; font-size: 11px; }
.hover-card-details { position: absolute; inset: 0 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 43px; height: auto; margin: 0; padding: 0; border: 0; border-left: 1px solid rgba(130, 157, 213, .3); border-radius: 0 8px 8px 0; background: transparent; color: #a9bee9; cursor: pointer; }
.hover-card-details:hover, .hover-card-details:focus-visible { background: rgba(99, 128, 188, .28); color: #fff; outline: none; }
.hover-card-details svg { width: 19px; height: 19px; }
body.atlas #hoverCard { border-color: #8a9abb; background: rgba(255, 253, 247, .97); color: #2c3b5a; box-shadow: 0 8px 20px rgba(40,48,65,.18); }
body.atlas .hover-card-title { color: #17223c; }
body.atlas .hover-card-identifiers { color: #46618e; }
body.atlas .hover-card-meta { color: #62718c; }
body.atlas .hover-card-details { color: #52658c; }
body.atlas .hover-card-details { border-left-color: rgba(96, 118, 157, .24); }
body.atlas .hover-card-details:hover, body.atlas .hover-card-details:focus-visible { background: rgba(96, 118, 157, .16); color: #17223c; }
body.night #hoverCard { border-color: #76373e; background: rgba(31, 7, 11, .97); color: #e6bbbb; }
body.night .hover-card-title { color: #ffe0e0; }
body.night .hover-card-identifiers { color: #e09a9a; }
body.night .hover-card-meta { color: #ba7979; }
body.night .hover-card-details { color: #e09a9a; }
body.night .hover-card-details { border-left-color: rgba(181, 91, 99, .3); }
body.night .hover-card-details:hover, body.night .hover-card-details:focus-visible { background: rgba(151, 59, 68, .28); color: #ffe0e0; }
@media (hover: none), (pointer: coarse) { #hoverCard { display: none !important; } }

.status { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%);
  padding: 12px 18px; background: rgba(12,16,26,0.9); border: 1px solid #23304d;
  border-radius: 8px; font-size: 14px; line-height: 22px; color: #9fb0d0; z-index: 30; max-width: 80vw; }
.location-toast { position: fixed; top: 50%; left: 50%; z-index: 60; max-width: min(360px, calc(100vw - 26px));
  padding: 11px 15px; border: 1px solid #3a5799; border-radius: 8px; background: rgba(12, 18, 34, .96);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32); color: #dce7ff; font-size: 13px; line-height: 1.35; text-align: center;
  pointer-events: none; opacity: 0; transform: translate(-50%, calc(-50% + 7px)); transition: opacity .16s ease, transform .16s ease; }
.location-toast.is-visible { opacity: 1; transform: translate(-50%, -50%); }
.location-toast-title, .location-toast-detail { display: block; }
.location-toast-title { white-space: nowrap; }
.location-toast-detail { margin-top: 2px; }
.location-toast-coordinates { white-space: nowrap; }

#topbar { position: fixed; top: 10px; left: 10px; z-index: 20;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
#topbarActions { display: flex; gap: 6px; }
#topbarActions #liveTag:not([hidden]) { display: flex; align-items: center; height: 34px; padding: 0 9px; }

#panelToggle, #toolsPanelToggle, #btnToday, #liveToggle, #btnPlanner, #btnSolarSystem, #searchToggle { width: 34px; height: 34px; border-radius: 8px;
  background: #9badd6; color: #17223c; border: 1px solid #9badd6;
  font-size: 16px; cursor: pointer; flex: 0 0 34px; min-width: 34px; max-width: 34px; padding: 0; }
#toolsPanelToggle, #btnToday, #liveToggle, #btnPlanner, #btnSolarSystem, #searchToggle { display: inline-flex; align-items: center; justify-content: center;
  background: #1d2f53; color: #9badd6; border-color: #1d2f53; }
#liveToggle svg { width: 21px; height: 21px; }
#toolsPanelToggle svg, #btnToday svg, #btnPlanner svg, #btnSolarSystem svg, #searchToggle svg { width: 19px; height: 19px; }
#liveToggle .live-pause { display: none; }
#liveToggle.active .live-play { display: none; }
#liveToggle.active .live-pause { display: block; }
#btnPlanner svg { width: 21px; height: 21px; }
#btnSolarSystem svg { width: 21px; height: 21px; }
#panelToggle:active { background: #e6ebf7; color: black; border-color: #e6ebf7; }
#panelToggle[aria-expanded="true"] { background: #e6ebf7; color: black; border-color: #e6ebf7; }
@media (hover: hover) and (pointer: fine) {
  #panelToggle:hover { background: #e6ebf7; color: black; border-color: #e6ebf7; }
}
#toolsPanelToggle:active, #btnToday:active, #liveToggle:active, #btnPlanner:active, #btnSolarSystem:active, #searchToggle:active { background: #233a68; color: #e6ebf7; border-color: #233a68; }
@media (hover: hover) and (pointer: fine) {
  #toolsPanelToggle:hover, #btnToday:hover, #liveToggle:hover, #btnPlanner:hover, #btnSolarSystem:hover, #searchToggle:hover { background: #233a68; color: #e6ebf7; border-color: #233a68; }
}
#topbarActions #toolsPanelToggle[aria-expanded="true"],
#topbarActions #btnToday[aria-expanded="true"],
#topbarActions #btnPlanner[aria-expanded="true"],
#topbarActions #searchToggle.is-open,
#topbarActions #liveToggle.active { color: #fff; }
#liveToggle.active { /*background: #2d4488; border-color: #6d94e0; color: #eaf0ff; */ }

body.atlas #panelToggle, body.atlas #toolsPanelToggle, body.atlas #btnToday, body.atlas #liveToggle, body.atlas #btnPlanner, body.atlas #btnSolarSystem, body.atlas #searchToggle { width: 34px; height: 34px; border-radius: 8px;
  background:#519051; color: #cdd6ea; border: 0px solid #519051;
  font-size: 16px; cursor: pointer; }
body.atlas #toolsPanelToggle, body.atlas #btnToday, body.atlas #liveToggle, body.atlas #btnPlanner, body.atlas #btnSolarSystem, body.atlas #searchToggle { background: #17223c; color: #cdd6ea; border-color: #519051; }
#body.atlas #liveToggle.active { background: #2d4488; color: #cdd6ea; border-color: #519051; }




#rightTools { position: fixed; top: 10px; right: 10px; z-index: 20; display: flex; flex-direction: column; gap: 8px; }
#rightTools #btnFullscreen, #rightTools #btnNight, #rightTools #btnLegend, #rightTools #geoQuick, #rightTools #btnSolarSystem, #rightTools #btnConstellations, #rightTools #btnShare, #rightTools #btnAtlasQuick, #rightTools #btnExportPng { position: static;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(14,20,34,0.85); color: #cdd6ea; border: 1px solid #3460ea;
  border-radius: 8px; cursor: pointer; padding: 0; backdrop-filter: blur(4px); }

body.atlas #rightTools #btnFullscreen, body.atlas #rightTools #btnNight, body.atlas #rightTools #btnLegend, body.atlas #rightTools #geoQuick, body.atlas #rightTools #btnSolarSystem, body.atlas #rightTools #btnConstellations, body.atlas #rightTools #btnShare, body.atlas #rightTools #btnAtlasQuick, body.atlas #rightTools #btnExportPng { position: static;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  background: rgba(14,20,34,0.85); color: #cdd6ea; border: 1px solid #26324e;
  border-radius: 8px; cursor: pointer; padding: 0; backdrop-filter: blur(4px); }




#rightTools #btnCompass { position: static; display: flex; align-items: center; justify-content: center;
  background: rgba(14,20,34,0.85); color: #cdd6ea; border: 1px solid #3460ea; border-radius: 8px; cursor: pointer; backdrop-filter: blur(4px); }
body.atlas #rightTools #btnCompass { background: rgba(14,20,34,0.85); color: #cdd6ea; border-color: #26324e; }
#btnFullscreen:hover, #btnNight:hover, #btnLegend:hover, #geoQuick:hover, #btnCompass:hover, #btnSolarSystem:hover, #btnConstellations:hover, #btnShare:hover, #btnAtlasQuick:hover, #btnExportPng:hover { background: rgba(24,34,56,0.95); color: #eaf0ff; }
#btnFullscreen svg, #btnNight svg, #btnLegend svg, #geoQuick svg, #btnCompass svg, #btnConstellations svg, #btnShare svg, #btnAtlasQuick svg, #btnExportPng svg { width: 16px; height: 16px; display: block; }
#btnCompass svg { width: 18px; height: 18px; }
#btnConstellations svg { width: 19px; height: 19px; }
#btnExportPng svg { width: 18px; height: 18px; }
#rightTools > #btnAtlasQuick.active { background: #519051; color: #fff; border-color: #519051; }
#btnNight.active { color: #ff6a6a; border-color: #5a2626; }
/* Star atlas mode is a light theme -> night vision makes no sense there */
body.atlas #btnNight { display: none; }

#planner { position: fixed; right: 10px; bottom: 12px; z-index: 25; width: min(390px, calc(100vw - 32px));
  max-height: min(76vh, 650px); overflow-y: auto; padding: 16px; background: rgba(10,16,29,.94);
  color: #c9cede; border: 1px solid #273a61; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.38);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity .18s ease, filter .18s ease; }
#planner[hidden] { display: none; }
body:has(#modal:not([hidden]).data-modal) #planner { opacity: .34; filter: saturate(.65); pointer-events: none; }
.planner-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.planner-kicker { margin: 0 0 3px; color: #8195c0; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.planner-head h2 { color: #e7edf9; font-size: 18px; line-height: 1.2; }
#plannerClose, .modal-x { font-family: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 24px; line-height: 1; }
#plannerClose { flex: none; width: 30px; height: 30px; margin: -8px -4px 0 0; padding: 0;
  background: transparent; color: #8a97b8; border: 0; border-radius: 0; cursor: pointer; }
#plannerClose:hover { color: #dfe6f5; background: transparent; }
.planner-tabs { display: flex; gap: 8px; margin: 15px 0 10px; padding: 0; background: transparent; }
.planner-tab { flex: 1; min-height: 30px; padding: 5px 8px; background: #17223c; color: #cdd8f0; border: 0; border-radius: 6px; cursor: pointer; font: 500 12px/1 "Roboto", sans-serif; }
.planner-tab:hover { color: #cdd8f0; background: #21315a; }
.planner-tab.active { color: #eaf0ff; background: #2d4488; }
.planner-summary { min-height: 32px; margin: 0 1px 10px; color: #aebbd6; font-size: 12px; line-height: 1.4; text-wrap: balance; }
.planner-targets { border-top: 1px solid rgba(86,107,151,.38); }
.planner-target { display: grid; grid-template-columns: minmax(0, 1fr) 32px; min-height: 55px; border-bottom: 1px solid rgba(86,107,151,.38); background: transparent; }
.planner-target:hover, .planner-target:focus-within { background: rgba(73, 101, 164, .20); }
.planner-target-main, .planner-target-info { border: 0; background: transparent; cursor: pointer; }
.planner-target-main { min-width: 0; padding: 9px 8px 9px 1px; border-radius: 0; text-align: left; color: inherit; }
.planner-target-main:hover, .planner-target-main:focus { background: transparent; outline: none; }
.planner-target-main:hover .planner-target-name, .planner-target-main:focus .planner-target-name { color: #fff; }
.planner-target-name { display: block; overflow: hidden; color: #dce6fa; font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.planner-target-meta { display: block; margin-top: 3px; overflow: hidden; color: #8295bd; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.planner-target-info { align-self: center; width: 28px; height: 28px; padding: 0; color: #91a7d7; border: 1px solid rgba(102,128,184,.58); border-radius: 50%; font: 700 13px/26px Georgia, serif; }
.planner-target-info:hover { color: #fff; background: transparent; border-color: #6d94e0; }
.planner-empty { padding: 13px 1px; color: #91a0bc; font-size: 12px; line-height: 1.4; }
.planner-note { margin: 12px 1px 0; color: #7182a5; font-size: 12px; line-height: 1.4; }
.planner-about { display: inline-block; margin: 8px 1px 0; font-size: 12px; }
body.atlas #planner { background: rgba(248,247,239,.95); border-color: #8794ad; color: #17223c; box-shadow: 0 14px 38px rgba(32,45,60,.2); }
body.atlas .planner-head h2, body.atlas .planner-target-name { color: #17223c; }
body.atlas .planner-kicker, body.atlas .planner-target-meta, body.atlas .planner-summary { color: #526789; }
body.atlas #plannerClose { color: #52658c; }
body.atlas #plannerClose:hover { color: #17223c; background: transparent; }
body.atlas .planner-tab { color: #405477; }
body.atlas .planner-tab { background: #e0e6f0; }
body.atlas .planner-tab:hover { background: #cdd8e9; }
body.atlas .planner-tab.active { color: #fff; background: #2d4488; }
body.atlas .planner-targets, body.atlas .planner-target { border-color: rgba(85,108,150,.3); }
body.atlas .planner-target:hover, body.atlas .planner-target:focus-within { background: rgba(112, 135, 88, .16); }
body.atlas .planner-target-info { color: #405477; border-color: #6f83a8; }
body.atlas .planner-target-info:hover { color: #17223c; background: transparent; border-color: #2d4488; }
body.atlas .planner-note { color: #5e6f8f; }

#todayPanel { position: fixed; top: 126px; left: 10px; z-index: 21; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 142px); overflow-y: auto; padding: 16px; background: #141d33; color: #c9cede; border: 0; border-radius: 12px; box-shadow: 0 18px 50px rgba(0,0,0,.38); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#todayPanel[hidden] { display: none; }
.today-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.today-kicker { margin: 0 0 3px; color: #8195c0; font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.today-head h2 { margin: 0; color: #e7edf9; font-size: 18px; line-height: 1.2; }
.today-date { margin: 4px 0 0; color: #8fa1c6; font-size: 12px; }
#todayClose { flex: none; width: 30px; height: 30px; margin: -8px -4px 0 0; padding: 0; background: transparent; color: #8a97b8; border: 0; border-radius: 0; cursor: pointer; font: 24px/1 "Roboto", system-ui, sans-serif; }
#todayClose:hover { color: #dfe6f5; background: transparent; }
.today-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.today-card { min-width: 0; padding: 11px 12px; background: #1f2c4c; border: 0; border-radius: 8px; }
.today-card--wide { grid-column: 1 / -1; }
.today-card h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; color: #e1e8f7; font-size: 13px; font-weight: 600; }
.today-card-icon { width: 18px; height: 18px; color: #b9c9ef; }
.today-card-icon.today-sun { color: #f0c56d; }
.today-card-icon.today-moon { color: #d9e0ef; }
.today-stat { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; border-top: 1px solid rgba(76,92,129,.25); font-variant-numeric: tabular-nums; }
.today-stat:first-of-type { border-top: 0; }
.today-stat span { color: #8292ba; font-size: 12px; }
.today-stat strong { color: #d9e1f1; font-size: 12px; font-weight: 500; text-align: right; }
.today-moon-phase { display: flex; align-items: center; gap: 8px; margin: -1px 0 7px; }
.today-moon-phase img { width: 34px; height: 34px; border-radius: 50%; }
.today-moon-phase strong { color: #e3e9f5; font-size: 12px; font-weight: 600; }
.today-moon-phase span { display: block; margin-top: 1px; color: #8c9ec2; font-size: 11px; }
.today-planets { display: flex; flex-wrap: wrap; gap: 6px; }
.today-planet { padding: 5px 7px; background: #192846; color: #cbd8f2; border: 1px solid #344b7c; border-radius: 5px; font: 500 11px/1.15 "Roboto", sans-serif; }
.today-planet:hover { background: #233a68; color: #fff; }
.today-highlights { display: flex; flex-direction: column; }
.today-highlight { padding: 4px 0; border-top: 1px solid rgba(76,92,129,.25); }
.today-highlight:first-child { padding-top: 0; border-top: 0; }
.today-highlight strong { display: block; color: #d9e1f1; font-size: 12px; font-weight: 500; }
.today-highlight span { display: block; overflow: hidden; margin-top: 2px; color: #8292ba; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.today-fact { margin: 0; padding-right: 0%; color: #aab7d1; font-size: 12px; line-height: 1.45; }
.today-note { margin: 11px 1px 0; color: #7182a5; font-size: 11px; line-height: 1.4; text-wrap: balance; }
.today-about { display: inline-block; margin: 8px 1px 0; font-size: 12px; }
body.atlas #todayPanel { background: rgba(248,247,239,.97); border: 0; color: #26344e; box-shadow: 0 14px 38px rgba(32,45,60,.2); }
body.atlas .today-head h2, body.atlas .today-card h3, body.atlas .today-stat strong, body.atlas .today-moon-phase strong { color: #17223c; }
body.atlas .today-kicker, body.atlas .today-date, body.atlas .today-stat span, body.atlas .today-moon-phase span, body.atlas .today-fact, body.atlas .today-note { color: #526789; }
body.atlas .today-card { background: rgba(225,231,240,.72); border: 0; }
body.atlas .today-stat { border-color: rgba(101,119,151,.25); }
body.atlas .today-highlight { border-color: rgba(101,119,151,.25); }
body.atlas .today-highlight strong { color: #17223c; }
body.atlas .today-highlight span { color: #526789; }
body.atlas .today-planet { background: #e2e8f1; color: #334968; border-color: #91a1bb; }
body.atlas .today-planet:hover { background: #cad8e8; color: #17223c; }
body.atlas #todayClose { color: #52658c; }
body.atlas #todayClose:hover { color: #17223c; }
#botleft { position: fixed; left: 12px; bottom: 12px; z-index: 15;
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
#liveTag { color: #ff5a5a; font-weight: 700; letter-spacing: 1.5px; }
#liveTag[hidden] { display: none; }
.readout { font-size: 12px; color: #7f8fb2; background: rgba(8,12,20,0.7);
  padding: 6px 10px; border-radius: 6px; border: 0px solid #1b2540;
  white-space: nowrap; font-variant-numeric: tabular-nums; }

body.atlas .readout { color: #fff; }

.observer-context { max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; }
body.atlas #liveTag { color: #fff; border: 0; }
body.night #liveTag { border: 0; }




#panel, #toolsPanel { position: fixed; top: 126px; left: 10px; width: 260px; z-index: 20;
  background: #0a101c; border: 1px solid #222d47; border-radius: 10px;
  padding: 14px; backdrop-filter: blur(6px); max-height: calc(100vh - 128px);
  overflow-y: auto; transition: transform .18s ease, opacity .18s ease; }
#panel.collapsed, #toolsPanel.collapsed { transform: translateX(-290px); opacity: 0; pointer-events: none; }
#brand { display: flex; flex-direction: column; line-height: 1.12; user-select: none;
  text-shadow: 0 1px 3px rgba(0,0,0,0.85); margin-bottom:10px; }
#brand .brand-name { font-size: 24px; font-weight: 600; letter-spacing: .3px; color: #e6ebf7; margin-bottom: 6px;}
#brand .brand-sub { font-size: 16px; font-weight: 500; letter-spacing: .5px; color: #9badd6; }
#panel section { margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid #182034; }
#panel section:last-child { border-bottom: none; margin-bottom: 0; }
.tools-panel-head { margin: 0 0 16px; padding: 1px 1px 14px; border-bottom: 1px solid #182034; }
.tools-panel-kicker { margin: 0 0 4px; color: #8195c0; font-size: 11px; font-weight: 700; letter-spacing: .1em; }
.tools-panel-head h2 { margin: 0; color: #e7edf9; font-size: 18px; line-height: 1.2; }
.tools-panel-head p:last-child { margin: 7px 0 0; color: #91a0bc; font-size: 12px; line-height: 1.4; }





body.atlas #panel, body.atlas #toolsPanel { position: fixed; top: 126px; left: 10px; width: 260px; z-index: 20;
  background: #fff; border: 1px solid #c9c9c9; border-radius: 10px;
  padding: 14px; backdrop-filter: blur(6px); max-height: calc(100vh - 128px);
  overflow-y: auto; transition: transform .18s ease, opacity .18s ease; }
body.atlas .tools-panel-head { border-bottom-color: #e3e5e7; }
body.atlas .tools-panel-kicker { color: #526789; }
body.atlas .tools-panel-head h2 { color: #17223c; }
body.atlas .tools-panel-head p:last-child { color: #5e6f8f; }




.legend-title { font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: #6a7aa0; margin-bottom: 8px; }

details.sec { margin-bottom: 11px; padding-bottom: 11px; border-bottom: 1px solid #182034; }
details.sec:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
details.sec > summary { list-style: none; cursor: pointer; user-select: none;
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: #9badd6; font-weight: 500;
  display: flex; align-items: center; gap: 8px; padding: 1px 0; }
details.sec > summary::-webkit-details-marker { display: none; }
.section-icon { width: 15px; height: 15px; flex: 0 0 15px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
details.sec > summary::after { content: ""; width: 6px; height: 6px; margin-left: auto; margin-right: 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease; }
details.sec[open] > summary::after { transform: rotate(45deg); }
details.sec > summary:hover { color: #e6ebf7; }
details.sec[open] > summary { color: #e6ebf7; }


body.atlas details.sec { margin-bottom: 11px; padding-bottom: 12px; border-bottom: 1px solid #eaeaea; }

body.atlas details.sec > summary { list-style: none; cursor: pointer; user-select: none;
  font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: #2d4488; font-weight: 500;
  display: flex; align-items: center; gap: 8px; padding: 1px 0; }

body.atlas details.sec > summary:hover { color: #519051; }
body.atlas details.sec[open] > summary { color: #519051; }






details.sec > .checks, details.sec > .legend { margin-top: 8px; }
details.sec > summary + .fld { margin-top: 9px; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #94a2c4; }
.fld.sm { flex: 1; }
input[type=datetime-local], input[type=number], input[type=search], select {
  background: #0c1220; border: 1px solid #26324e; color: #dbe2f2;
  border-radius: 6px; padding: 6px 8px; font-size: 13px; width: 100%; }
select { cursor: pointer; }
select optgroup { background: #0c1220; color: #7f8fb2; }
select option { background: #0c1220; color: #dbe2f2; }
input:focus { outline: none; border-color: #4159a0; }
.row { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.location-status { margin-top: 8px; font-size: 11px; line-height: 1.35; color: #7f8fb2; }
.location-status[data-state="error"] { color: #e09a9a; }
.location-status[data-state="approximate"] { color: #b9b27b; }
.location-autostart { display: flex; align-items: center; gap: 7px; margin-top: 8px; font-size: 11px; line-height: 1.35; color: #94a2c4; cursor: pointer; }
.location-autostart input { width: 14px; height: 14px; accent-color: #5a76d6; }
.city-results { display: flex; flex-direction: column; max-height: 172px; overflow-y: auto;
  margin-top: 4px; border: 1px solid #26324e; border-radius: 6px; background: #0c1220; }
.city-results[hidden] { display: none; }
.city-results + .fld { margin-top: 10px; }
.city-result { display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  width: 100%; padding: 7px 8px; border-radius: 0; border-bottom: 1px solid #202a42;
  background: transparent; color: #dbe2f2; text-align: left; flex: 0 0 auto;
  font-size: 12px; line-height: 1.35; }
.city-result:last-child { border-bottom: 0; }
.city-result:hover, .city-result:focus { background: #1c2b4d; outline: none; }
.city-result small { color: #8fa2cb; font-size: 11px; text-align: right; }
body.atlas .city-results { background: rgba(255,255,255,.82); border-color: #9badd6; }
body.atlas .city-result { color: #17223c; border-bottom-color: #d7dce7; }
body.atlas .city-result:hover, body.atlas .city-result:focus { background: #e5eedf; }
body.atlas .city-result small { color: #45608f; }
button { background: #17223c; color: #cdd8f0; border: 0px solid #2b3960;
  border-radius: 6px; padding: 6px 10px; font-size: 12px; cursor: pointer; flex: 1; }
button:hover { background: #21315a; }

/* Keep the utility buttons fixed-size even though the shared button rule is flexible. */
#rightTools > button {
  flex: 0 0 34px;
  width: 34px;
  min-width: 34px;
  max-width: 34px;
  height: 34px;
  min-height: 34px;
  max-height: 34px;
  padding: 0;
}

.row.seg button.active { background: #2d4488; border-color: #4a63b8; color: #eaf0ff; }
.sp.active { background: #2d4488; border-color: #4a63b8; color: #eaf0ff; }

#dirpad { position: fixed; right: 18px; bottom: 18px; z-index: 20;
  display: grid; grid-template-columns: repeat(3, 34px); grid-template-rows: repeat(3, 34px);
  gap: 4px; }
#dirpad button { background: rgba(14,20,34,0.85); color: #cdd8f0;
  border: 1px solid #2b3960; border-radius: 7px; font-size: 13px; font-weight: 600;
  cursor: pointer; padding: 0; backdrop-filter: blur(4px); }
/* These are momentary navigation controls, not selected-state buttons. */
#dirpad button:active { background: #21315a; }
#dirpad .d-n { grid-column: 2; grid-row: 1; }
#dirpad .d-w { grid-column: 1; grid-row: 2; }
#dirpad .d-e { grid-column: 3; grid-row: 2; }
#dirpad .d-s { grid-column: 2; grid-row: 3; }
#dirpad .d-c { grid-column: 2; grid-row: 2; border-radius: 50%; position: relative; }
#dirpad .d-c::before { content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 15px; height: 15px;
  border: 1px solid #cdd8f0; border-radius: 50%; }
#dirpad .d-c::after { content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%); width: 4px; height: 4px;
  border-radius: 50%; background: #cdd8f0; }
#zoomControls { position: fixed; right: 36px; bottom: 132px; z-index: 20; display: flex; gap: 4px; }
#zoomControls button { width: 34px; height: 34px; flex: 0 0 34px; padding: 0;
  background: rgba(14,20,34,0.85); color: #cdd8f0; border: 1px solid #2b3960;
  border-radius: 7px; font-size: 18px; font-weight: 500; line-height: 1; cursor: pointer; backdrop-filter: blur(4px); }
/* Zoom controls use the same press-only feedback on mouse and touch input. */
#zoomControls button:active { background: #21315a; }

.checks label { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: #b3bedb; padding: 5px 0; cursor: pointer; }

body.atlas .checks label { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: #2d4488; padding: 5px 0; cursor: pointer; }



.checks input { accent-color: #5a76d6; width: 15px; height: 15px; }

.legend .lg { display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: #9aa8c8; padding: 2px 0; }

body.atlas .legend .lg { display: flex; align-items: center; gap: 8px; font-size: 12px;
  color: #2d4488; padding: 2px 0; }


.dot { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.dot.o { background: rgb(190,118,198); } 
.dot.b { background: rgb(91,128,220); }
.dot.a { background: rgb(232,236,242); } 
.dot.f { background: rgb(92,178,108); }
.dot.g { background: rgb(220,213,92); } 
.dot.k { background: rgb(230,145,82); }
.dot.m { background: rgb(205,82,76); }


.sym { display: inline-block; width: 11px; text-align: center; color: #c7bd54; }
.magscale { display: flex; align-items: center; gap: 9px; padding: 4px 2px 2px; }
.magscale .ms { display: inline-block; background: #f4f6ff; border-radius: 50%; flex: none; }
.magscale-lbl { display: flex; gap: 9px; font-size: 10px; color: #7f8fb2;
  padding-left: 2px; }
.magscale-lbl span { width: 18px; text-align: center; }
.magscale-lbl span:nth-child(n+2) { width: 13px; }


body.atlas .magscale .ms { display: inline-block; background: #141414; border-radius: 50%; flex: none; }


.hint { margin-top: 8px; font-size: 11px; color: #667091; }

@media (max-width: 560px){
  #panel, #toolsPanel { width: min(250px, calc(100vw - 20px)); }
  #todayPanel { left: 10px; width: calc(100vw - 20px); max-height: calc(100vh - 142px); }
  .today-content { grid-template-columns: 1fr; }
  .today-card--wide { grid-column: auto; }
  #planner { right: 8px; bottom: 0; left: 8px; width: auto; max-height: 72vh; border-radius: 13px 13px 0 0; }
}

/* red night-vision mode: whole page mapped to red shades */
body.night #app { filter: url(#nightRed); }
body.night #panel, body.night #toolsPanel { backdrop-filter: none; -webkit-backdrop-filter: none; }
/* corner buttons live outside #app (no filter) -> tint them red in night mode */
body.night #btnFullscreen, body.night #btnNight, body.night #btnLegend, body.night #geoQuick, body.night #btnCompass, body.night #btnSolarSystem, body.night #btnConstellations, body.night #btnShare, body.night #btnAtlasQuick, body.night #btnExportPng { background: rgba(30,6,6,0.85);
  border-color: #4a1a1a; color: #d98a8a; }
body.night #btnFullscreen:hover, body.night #btnNight:hover, body.night #btnLegend:hover, body.night #geoQuick:hover, body.night #btnCompass:hover, body.night #btnSolarSystem:hover, body.night #btnConstellations:hover, body.night #btnShare:hover, body.night #btnAtlasQuick:hover, body.night #btnExportPng:hover { background: rgba(50,10,10,0.95); color: #ffb0b0; }
body.night #btnNight.active { color: #ff6a6a; border-color: #6a2626; }
/* The right-side group uses a two-ID selector, so match it here in night mode. */
body.night #rightTools > #btnFullscreen,
body.night #rightTools > #btnNight,
body.night #rightTools > #btnLegend,
body.night #rightTools > #btnConstellations,
body.night #rightTools > #geoQuick,
body.night #rightTools > #btnCompass,
body.night #rightTools > #btnSolarSystem,
body.night #rightTools > #btnShare,
body.night #rightTools > #btnAtlasQuick,
body.night #rightTools > #btnExportPng {
  background: rgba(30, 6, 6, 0.88);
  border-color: #6a2626;
  color: #d98a8a;
}
body.night #rightTools > #btnFullscreen:hover,
body.night #rightTools > #btnNight:hover,
body.night #rightTools > #btnLegend:hover,
body.night #rightTools > #btnConstellations:hover,
body.night #rightTools > #geoQuick:hover,
body.night #rightTools > #btnCompass:hover,
body.night #rightTools > #btnSolarSystem:hover,
body.night #rightTools > #btnShare:hover,
body.night #rightTools > #btnAtlasQuick:hover,
body.night #rightTools > #btnExportPng:hover {
  background: rgba(50, 10, 10, 0.96);
  border-color: #9a3c3c;
  color: #ffb0b0;
}
body.night #rightTools > #btnNight.active { color: #ff6a6a; border-color: #9a3c3c; }
body.night #planner { background: rgba(23,7,10,.96); border-color: #4a1616; color: #d59a9a; }
body.night .planner-head h2, body.night .planner-target-name { color: #efb2b2; }
body.night .planner-kicker, body.night .planner-target-meta, body.night .planner-summary { color: #c87979; }
body.night .planner-tab { color: #d18b8b; }
body.night .planner-tab { background: #351116; }
body.night .planner-tab:hover { background: #501c23; }
body.night .planner-tab.active { color: #ffe1e1; background: #6a2626; }
body.night .planner-targets, body.night .planner-target { border-color: rgba(128,48,48,.52); }
body.night .planner-target:hover, body.night .planner-target:focus-within { background: rgba(128, 42, 42, .22); }
body.night .planner-target-info { color: #e49b9b; border-color: #754040; }
body.night .planner-target-info:hover { color: #fff; background: transparent; border-color: #c86c6c; }
body.night #plannerClose { color: #c07a7a; }
body.night #plannerClose:hover { color: #ff9f9f; background: transparent; }
body.night .planner-note { color: #ad6f6f; }
body.night #todayPanel { background: rgba(23,7,10,.96); border: 0; color: #d59a9a; }
body.night .today-head h2, body.night .today-card h3, body.night .today-stat strong, body.night .today-moon-phase strong { color: #efb2b2; }
body.night .today-kicker, body.night .today-date, body.night .today-stat span, body.night .today-moon-phase span, body.night .today-fact, body.night .today-note { color: #c87979; }
body.night .today-card { background: rgba(43,10,14,.74); border: 0; }
body.night .today-stat { border-color: rgba(128,48,48,.42); }
body.night .today-highlight { border-color: rgba(128,48,48,.42); }
body.night .today-highlight strong { color: #efb2b2; }
body.night .today-highlight span { color: #c87979; }
body.night .today-planet { background: #351016; color: #e7a0a0; border-color: #754040; }
body.night .today-planet:hover { background: #50141c; color: #fff; }
body.night #todayClose { color: #c07a7a; }
body.night #todayClose:hover { color: #ff9f9f; }
/* modal is outside the filtered #app, so tint it red directly in night mode */
body.night .modal-backdrop { background: rgba(24,2,2,0.72); }
body.night .modal-box { background: #17070a; border-color: #4a1616; color: #d59a9a;
  box-shadow: 0 18px 60px rgba(0,0,0,0.7); }
body.night .modal-title { color: #ff7a7a; }
body.night .modal-body { color: #cf8f8f; }
body.night .modal-body h3 { color: #c56a6a; }
body.night .modal-body a { color: #ff8f8f; }
body.night .modal-x { color: #c07a7a; }
body.night .modal-x:hover { color: #ff9f9f; }
body.night .star-fact { border-bottom-color: rgba(128, 48, 48, .52); }
body.night .star-fact-label, body.night .star-source, body.night .star-loading { color: #c87979; }
body.night .star-fact-value { color: #efb2b2; }


/* section info link (shown under a summary when the section is open) */
.secinfo { margin: 10px 0 5px 0; font-size: 12px; }
.infolink { color: #6f86c8; cursor: pointer; text-decoration: none;
  border-bottom: 1px dotted rgba(111,134,200,0.55); }
.infolink:hover { color: #9fb0e0; border-bottom-color: rgba(159,176,224,/mod0.8); }
button.infolink { flex: none; padding: 0; border: 0; border-bottom: 1px dotted rgba(111,134,200,0.55);
  border-radius: 0; background: transparent; font-family: inherit; font-size: 12px; font-weight: 400; line-height: normal; text-align: left; }
button.infolink:hover { background: transparent; }

/* non-collapsible label-style link (opens a modal); like a summary but not uppercase */
.sec-link { display: flex; align-items: center; gap: 8px; font-size: 13px; letter-spacing: .6px; color: #9badd6;
  font-weight: 500; text-transform: none; text-decoration: none; cursor: pointer;
  padding: 1px 0; border: 0; border-radius: 0; background: transparent; font-family: inherit; text-align: left; }
button.sec-link { width: 100%; flex: none; }
.sec-link + .sec-link { padding-top: 11px; }

.panel-link-icon { width: 15px; height: 15px; flex: 0 0 15px; }

body.atlas .sec-link { display: flex; font-size: 13px; letter-spacing: .6px; color: #2d4488;
  font-weight: 500; text-transform: none; text-decoration: none; cursor: pointer;
  padding: 2px 0; }

.sec-link + .sec-link { margin-top: 11px; padding-top: 12px; border-top: 1px solid #182034; }

body.atlas .sec-link + .sec-link { margin-top: 11px; padding-top: 12px; border-top: 1px solid #eaeaea; }


.sec-link:hover { color: #e6ebf7; background: transparent; }
button.infolink:focus-visible, button.sec-link:focus-visible, .credits button:focus-visible { outline: 2px solid #4a63b8; outline-offset: 3px; }

/* info modal — styled like the panel; half-screen on desktop */
.modal[hidden] { display: none; }
.modal { position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
#modal { z-index: 110; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(4,7,14,0.66); }
.modal-box { position: relative; width: min(800px, calc(100vw - 32px)); min-width: 300px;
  max-height: 70vh; overflow-y: auto;
  background: rgba(12,16,26,0.98); border: 1px solid #26324e; border-radius: 12px;
  padding: 22px 26px; color: #c9cede; box-shadow: 0 18px 60px rgba(0,0,0,0.6); }
.modal.data-modal { align-items: flex-end; justify-content: flex-end; }
.modal.data-modal .modal-box { width: min(400px, calc(100vw - 32px)); }
.modal.data-modal .modal-backdrop { background: transparent; }
.modal.contact-modal .modal-box { width: min(500px, calc(100vw - 32px)); max-height: 90vh; }
.modal.legend-modal .modal-box { width: min(600px, calc(100vw - 32px)); max-height: 80vh; }
.modal-x { position: absolute; top: 8px; right: 12px; width: 30px; height: 30px; flex: none;
  background: transparent; border: none; color: #8a97b8;
  cursor: pointer; padding: 0; }
.modal-x:hover { background: transparent; color: #dfe6f5; }
.modal-title { font-size: 18px; font-weight: 600; letter-spacing: .2px; color: #e6ebf7;
  margin: 0 34px 12px 0; }
.moon-phase-icon { width: 30px; height: 30px; vertical-align: middle; margin: -4px 8px -4px 0; border-radius: 50%; }
.modal-body { font-size: 13.5px; line-height: 1.62; color: #b3bedb; }
.modal-body p { margin: 0 0 10px; }
.modal-body h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
  color: #7f8fb2; margin: 16px 0 6px; }
.modal-body ul { margin: 0 0 10px; padding-left: 18px; }
.modal-body li { margin: 3px 0; }
.solar-system-modal .modal-box { width: min(88vw, 1120px); max-height: min(86vh, 820px); overflow: hidden; padding-bottom: 18px; }
.solar-system-intro { margin: -4px 34px 24px 0; color: #91a0bd; font-size: 12px; line-height: 1.45; }
.solar-system-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 12px; height: min(66vh, 620px); min-height: 360px; }
.solar-system-sidebar { min-width: 0; overflow-y: auto; padding: 12px; background: rgba(20, 31, 56, .52); scrollbar-width: thin; scrollbar-color: #52658c transparent; }
.solar-system-stage { display: flex; min-width: 0; min-height: 0; flex-direction: column; }
#solarSystemCanvas { display: block; flex: 1; width: 100%; min-height: 0; border: 0; border-radius: 8px; background: #090e1a; cursor: grab; touch-action: none; }
#solarSystemCanvas:active { cursor: grabbing; }
.solar-time-panel { padding-bottom: 11px; border-bottom: 1px solid rgba(64, 86, 132, .38); }
.solar-time-heading { margin-bottom: 8px; color: #8fa1c7; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.solar-time-heading strong { display: block; margin-top: 3px; color: #d8e2f7; font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; font-variant-numeric: tabular-nums; }
.solar-time-controls { display: grid; gap: 4px; }
.solar-time-step { display: grid; grid-template-columns: minmax(0, 1fr) 30px 30px; align-items: center; gap: 4px; }
.solar-time-step > span { color: #a9b8d7; font-size: 12px; font-weight: 500; }
.solar-time-controls button { width: 30px; min-height: 28px; padding: 5px 0; border: 0; border-radius: 6px; background: #1d2f53; color: #cdd8f0; font: 400 16px/1 "Roboto", sans-serif; cursor: pointer; }
.solar-time-controls button:hover { background: #2d4488; color: #fff; }
.solar-map-time { display: inline-block; margin: 8px 0 0; padding: 0; border: 0; border-bottom: 1px dotted rgba(129, 147, 186, .58); background: transparent; color: #8193ba; font: 400 11px/1.3 "Roboto", sans-serif; cursor: pointer; }
.solar-map-time:hover { background: transparent; color: #dce6fa; }
.solar-map-time:disabled { cursor: default; opacity: .48; }
.solar-view-panel { margin-top: 12px; }
.solar-side-heading { margin: 0 0 7px; color: #8fa1c7; font-size: 10px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.solar-system-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.solar-system-controls #solarSystemAnimate, .solar-system-controls #solarSystemSpeed { width: auto; }
.solar-system-controls #solarSystemReset { width: auto; background: transparent; color: #7182a5; opacity: .72; }
.solar-system-controls #solarSystemReset:hover { background: #1d2f53; color: #cdd8f0; opacity: 1; }
.solar-system-controls button { min-height: 30px; padding: 5px 6px; border: 0; border-radius: 6px; background: #1d2f53; color: #cdd8f0; font: 400 12px/1 "Roboto", sans-serif; cursor: pointer; }
.solar-system-controls button:hover { background: #2d4488; color: #fff; }
.solar-system-controls button.active { background: #2d4488; color: #fff; }
.solar-system-gesture, .solar-system-note { margin: 0; color: #8292ba; font-size: 12px; line-height: 1.4; }
.solar-system-gesture { margin: 8px 1px 0; }
.solar-system-note { margin-top: 12px; }
.solar-ecliptic-legend { display: grid; gap: 2px; margin: 8px 0 0; color: #7182a5; font-size: 10px; line-height: 1.45; }
.solar-ecliptic-legend-title { margin-bottom: 1px; color: #8fa1c7; font-size: 9px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.solar-system-about { display: inline-block; margin-top: 10px; font-size: 12px; }
.moon-calendar-modal .modal-box { width: min(900px, calc(100vw - 32px)); max-height: min(86vh, 790px); overflow-y: auto; border: 0; background: #141d33; }
.moon-calendar-intro { margin: -4px 34px 16px 0; color: #91a0bd; font-size: 12px; line-height: 1.45; }
.moon-calendar-nav { display: grid; grid-template-columns: 32px minmax(0, 1fr) 32px; gap: 7px; align-items: center; margin-bottom: 13px; }
.moon-calendar-nav button { width: 32px; height: 30px; padding: 0; border: 0; border-radius: 6px; background: #1d2f53; color: #cdd8f0; font: 400 18px/1 "Roboto", sans-serif; cursor: pointer; }
.moon-calendar-nav button:hover { background: #2d4488; color: #fff; }
.moon-calendar-nav strong { color: #dfe7f9; font-size: 14px; font-weight: 500; text-align: center; }
.moon-calendar-weekdays, .moon-calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.moon-calendar-weekdays { margin-bottom: 5px; color: #7f91bb; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.moon-calendar-day { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto auto; min-width: 0; min-height: 90px; padding: 8px 8px 1px; border: 1px solid rgba(67, 89, 139, .42); border-radius: 7px; background: rgba(20, 31, 56, .52); color: #d4def2; font-family: inherit; text-align: left; cursor: pointer; }
.moon-calendar-day:hover, .moon-calendar-day:focus-visible { border-color: #6687cf; background: #1d2f53; outline: none; }
.moon-calendar-day.is-selected { border-color: #8ba8e4; box-shadow: inset 0 0 0 1px rgba(139, 168, 228, .28); }
.moon-calendar-day.is-major-phase { background: rgba(37, 56, 99, .7); }
.moon-calendar-day-number { color: #dfe8fa; font-size: 12px; font-weight: 600; }
.moon-calendar-glyph { justify-self: center; width: 26px; height: 26px; margin: -3px 2px 0; border-radius: 50%; object-fit: contain; }
.moon-calendar-illumination { align-self: center; color: #9bafd8; font-size: 10px; }
.moon-calendar-phase { grid-column: 1 / -1; align-self: end; margin-top: -4px; overflow: hidden; color: #c9d6f0; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; transform: translateY(-3px); }
.moon-calendar-times { grid-column: 1 / -1; margin-top: 3px; color: #8193ba; font-size: 11px; font-variant-numeric: tabular-nums; white-space: nowrap; transform: translateY(-3px); }
.moon-calendar-note { margin: 12px 0 0; color: #8292ba; font-size: 11px; line-height: 1.4; }
.moon-calendar-about { display: inline-block; margin-top: 8px; font-size: 12px; }
.constellation-modal .modal-box { width: min(760px, calc(100vw - 32px)); max-height: 80vh; }
.constellation-intro { margin: -4px 34px 12px 0; color: #91a0bd; font-size: 12px; line-height: 1.45; }
.constellation-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(76, 92, 129, .32); }
.constellation-list div { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 7px; padding: 7px 8px 7px 0; border-bottom: 1px solid rgba(76, 92, 129, .32); color: #c9d4eb; font-size: 12px; line-height: 1.3; }
.constellation-list div:nth-child(3n + 2), .constellation-list div:nth-child(3n) { padding-left: 10px; border-left: 1px solid rgba(76, 92, 129, .32); }
.constellation-list strong { color: #8da4da; font-style: italic; font-weight: 500; }
body.atlas .constellation-intro { color: #5e6f8f; }
body.atlas .constellation-list { border-color: rgba(120, 112, 92, .28); }
body.atlas .constellation-list div { border-color: rgba(120, 112, 92, .28); color: #2c3039; }
body.atlas .constellation-list div:nth-child(3n + 2), body.atlas .constellation-list div:nth-child(3n) { border-left-color: rgba(120, 112, 92, .28); }
body.atlas .constellation-list strong { color: #52658c; }
body.night .constellation-intro { color: #ba7979; }
body.night .constellation-list { border-color: rgba(128, 48, 48, .52); }
body.night .constellation-list div { border-color: rgba(128, 48, 48, .52); color: #e2aaaa; }
body.night .constellation-list div:nth-child(3n + 2), body.night .constellation-list div:nth-child(3n) { border-left-color: rgba(128, 48, 48, .52); }
body.night .constellation-list strong { color: #e49b9b; }
.share-modal .modal-box { width: min(420px, calc(100vw - 32px)); }
.share-intro { margin: -4px 34px 14px 0; color: #91a0bd; font-size: 12px; line-height: 1.45; }
.share-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.share-action { display: flex; align-items: center; justify-content: center; min-height: 32px; padding: 6px 10px;
  border: 0; border-radius: 6px; background: #17223c; color: #cdd8f0; font: 400 12px/1 "Roboto", sans-serif;
  text-decoration: none; cursor: pointer; }
.share-action:hover { background: #21315a; color: #eaf0ff; }
.share-copy-status { min-height: 17px; margin: 9px 0 0; color: #8292ba; font-size: 12px; }
body.atlas .share-intro, body.atlas .share-copy-status { color: #5e6f8f; }
body.atlas .share-action { background: #e0e6f0; color: #405477; }
body.atlas .share-action:hover { background: #cdd8e9; color: #17223c; }
body.night .share-intro, body.night .share-copy-status { color: #ba7979; }
body.night .share-action { background: #351116; color: #d18b8b; }
body.night .share-action:hover { background: #6a2626; color: #ffe1e1; }
body.atlas .solar-system-intro, body.atlas .solar-system-gesture, body.atlas .solar-system-note { color: #5e6f8f; }
body.atlas .solar-ecliptic-legend { color: #687893; }
body.atlas .solar-ecliptic-legend-title { color: #63718b; }
body.atlas #solarSystemCanvas { background: #f7f4eb; }
body.atlas .solar-system-sidebar { background: rgba(244, 240, 226, .72); }
body.atlas .solar-time-panel { border-color: rgba(117, 107, 81, .35); }
body.atlas .solar-time-heading, body.atlas .solar-side-heading { color: #63718b; }
body.atlas .solar-time-heading strong { color: #263553; }
body.atlas .solar-time-controls button { background: #e0e6f0; color: #405477; }
body.atlas .solar-time-controls button:hover { background: #cdd8e9; color: #17223c; }
body.atlas .solar-time-step > span { color: #52658c; }
body.atlas .solar-map-time { background: transparent; color: #687893; }
body.atlas .solar-map-time:hover { background: transparent; color: #405477; }
body.atlas .solar-system-controls button { background: #e0e6f0; color: #405477; }
body.atlas .solar-system-controls button:hover { background: #cdd8e9; color: #17223c; }
body.atlas .solar-system-controls button.active { background: #519051; color: #fff; }
body.atlas .solar-system-controls #solarSystemReset { background: transparent; color: #687893; }
body.atlas .solar-system-controls #solarSystemReset:hover { background: #e0e6f0; color: #405477; }
body.night .solar-system-intro, body.night .solar-system-gesture, body.night .solar-system-note { color: #ba7979; }
body.night .solar-ecliptic-legend { color: #a66a6a; }
body.night .solar-ecliptic-legend-title { color: #b7787d; }
body.night #solarSystemCanvas { background: #160609; }
body.night .solar-system-sidebar { background: rgba(50, 15, 22, .58); }
body.night .solar-time-panel { border-color: rgba(111, 49, 61, .58); }
body.night .solar-time-heading, body.night .solar-side-heading { color: #b7787d; }
body.night .solar-time-heading strong { color: #efc4c8; }
body.night .solar-time-controls button { background: #351116; color: #d18b8b; }
body.night .solar-time-controls button:hover { background: #6a2626; color: #ffe1e1; }
body.night .solar-time-step > span { color: #c87979; }
body.night .solar-map-time { background: transparent; color: #a66a6a; }
body.night .solar-map-time:hover { background: transparent; color: #ffe1e1; }
body.night .solar-system-controls button { background: #351116; color: #d18b8b; }
body.night .solar-system-controls button:hover { background: #6a2626; color: #ffe1e1; }
body.night .solar-system-controls button.active { background: #6a2626; color: #ffe1e1; }
body.night .solar-system-controls #solarSystemReset { background: transparent; color: #a66a6a; }
body.night .solar-system-controls #solarSystemReset:hover { background: #351116; color: #d18b8b; }
body.atlas .moon-calendar-intro, body.atlas .moon-calendar-note { color: #5e6f8f; }
body.atlas .moon-calendar-nav button { background: #e0e6f0; color: #405477; }
body.atlas .moon-calendar-nav button:hover { background: #cdd8e9; color: #17223c; }
body.atlas .moon-calendar-nav strong, body.atlas .moon-calendar-day-number { color: #263553; }
body.atlas .moon-calendar-weekdays { color: #63718b; }
body.atlas .moon-calendar-day { border-color: rgba(117, 107, 81, .32); background: rgba(244, 240, 226, .72); color: #405477; }
body.atlas .moon-calendar-day:hover, body.atlas .moon-calendar-day:focus-visible { border-color: #6883be; background: #e7ecf3; }
body.atlas .moon-calendar-day.is-selected { border-color: #6883be; box-shadow: inset 0 0 0 1px rgba(104, 131, 190, .24); }
body.atlas .moon-calendar-day.is-major-phase { background: #e5e9ee; }
body.atlas .moon-calendar-illumination { color: #52658c; }
body.atlas .moon-calendar-phase { color: #405477; }
body.atlas .moon-calendar-times { color: #687893; }
body.night .moon-calendar-intro, body.night .moon-calendar-note { color: #ba7979; }
body.night .moon-calendar-nav button { background: #351116; color: #d18b8b; }
body.night .moon-calendar-nav button:hover { background: #6a2626; color: #ffe1e1; }
body.night .moon-calendar-nav strong, body.night .moon-calendar-day-number { color: #efc4c8; }
body.night .moon-calendar-weekdays { color: #b7787d; }
body.night .moon-calendar-day { border-color: rgba(111, 49, 61, .58); background: rgba(50, 15, 22, .58); color: #efc4c8; }
body.night .moon-calendar-day:hover, body.night .moon-calendar-day:focus-visible { border-color: #ba666d; background: #4e1b24; }
body.night .moon-calendar-day.is-selected { border-color: #d18b8b; box-shadow: inset 0 0 0 1px rgba(209, 139, 139, .28); }
body.night .moon-calendar-day.is-major-phase { background: rgba(81, 26, 35, .72); }
body.night .moon-calendar-illumination { color: #d18b8b; }
body.night .moon-calendar-phase { color: #efc4c8; }
body.night .moon-calendar-times { color: #a66a6a; }
@media (max-width: 760px){
  #panel, #toolsPanel, body.atlas #panel, body.atlas #toolsPanel, #todayPanel { top: 115px; }
  #topbar { gap: 6px; }
  #brand { margin-bottom: 7.5px; }
  #brand .brand-name { margin-bottom: 4.5px; }
  #brand .brand-name { font-size: 18px; }
  #brand .brand-sub { font-size: 12px; }
  #zoomControls { right: 12px; bottom: 164px; display: grid; grid-template-columns: 34px; gap: 4px; }
  #dirpad { right: 12px; bottom: 12px; grid-template-columns: 34px; grid-template-rows: repeat(4, 34px); gap: 4px; }
  #dirpad .d-c { display: none; }
  #dirpad .d-n { grid-column: 1; grid-row: 1; }
  #dirpad .d-e { grid-column: 1; grid-row: 2; }
  #dirpad .d-s { grid-column: 1; grid-row: 3; }
  #dirpad .d-w { grid-column: 1; grid-row: 4; }
  .solar-system-modal .modal-box { width: calc(100vw - 24px); max-height: 90vh; overflow-y: auto; }
  .solar-system-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .solar-system-stage { height: min(52vh, 430px); min-height: 260px; }
  #solarSystemCanvas { flex: 1; min-height: 0; }
  .solar-system-sidebar { overflow: visible; }
  .moon-calendar-modal .modal-box { width: calc(100vw - 24px); padding: 18px 12px 14px; }
  .moon-calendar-intro { margin-right: 30px; }
  .moon-calendar-weekdays, .moon-calendar-grid { gap: 3px; }
  .moon-calendar-weekdays { font-size: 8px; }
  .moon-calendar-day { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; min-height: 58px; padding: 4px; justify-items: center; text-align: center; }
  .moon-calendar-day-number { align-self: start; font-size: 10px; }
  .moon-calendar-glyph { width: 22px; height: 22px; margin: 0; }
  .moon-calendar-illumination { align-self: end; font-size: 8px; }
  .moon-calendar-phase { display: none; }
  .moon-calendar-times { display: none; }
}
.map-key-summary { margin: 0 0 18px; padding: 12px; border: 1px solid rgba(70, 88, 129, .48); border-radius: 8px; background: rgba(20, 29, 49, .42); }
.map-key-summary h3 { margin: 0 0 9px; }
.map-key-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.map-key-group h4 { margin: 0 0 7px; color: #aab9dc; font-size: 13px; font-weight: 500; }
.map-key-colours { display: grid; grid-template-columns: repeat(4, max-content); gap: 5px 8px; }
.map-key-colours span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; }
.map-key-colours .dot { width: 9px; height: 9px; }
.map-key-objects { display: flex; flex-direction: column; gap: 4px; font-size: 11px; }
.map-key-objects .sym { margin-right: 3px; }
.map-key-meteors { grid-column: 1 / -1; }
.meteor-key-icon { width: 17px; height: 17px; margin: -2px 3px -3px 0; vertical-align: middle; color: #55ded3; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; }
.meteor-key-core { fill: currentColor; stroke: none; }
.meteor-key-peak { fill: none; stroke: currentColor; stroke-width: 1.2; }
body.atlas .map-key-summary { border-color: rgba(117, 107, 81, .35); background: rgba(244, 240, 226, .62); }
body.atlas .map-key-group h4 { color: #52658c; }
body.atlas .meteor-key-icon { color: #9d4f22; }
@media (max-width: 560px){ .map-key-grid { grid-template-columns: 1fr; gap: 10px; } }
.star-facts { width: 100%; font-variant-numeric: tabular-nums; }
.star-fact { display: grid; grid-template-columns: minmax(100px, 40%) minmax(0, 1fr); gap: 10px; padding: 2px 0; border-bottom: 1px solid rgba(76, 92, 129, .32); }
.star-fact-label { color: #8292ba; font-size: 12px; font-weight: 500; }
.star-fact-value { color: #d6dced; min-width: 0; font-size: 12px; }
.star-fact-value.meteor-status-inactive { color: #d9ba76; font-weight: 600; }
.star-identifiers { color: #8fa2ce; font-size: 12px; margin-bottom: 12px !important; }
.star-source, .star-loading { color: #7f8fb2; font-size: 12px; margin-top: 14px !important; }
.search-horizon-warning { margin: 0 0 11px !important; padding: 7px 9px; border: 1px solid rgba(187, 149, 73, .55); border-radius: 6px; background: rgba(123, 91, 30, .18); color: #d9ba76; font-size: 12px; line-height: 1.4; }
body.atlas .star-fact-label, body.atlas .star-identifiers, body.atlas .star-source, body.atlas .star-loading { color: #5d6b8f; }
body.atlas .search-horizon-warning { border-color: rgba(135, 107, 43, .45); background: rgba(201, 176, 104, .18); color: #735d28; }
body.night .search-horizon-warning { border-color: rgba(157, 66, 66, .58); background: rgba(112, 30, 30, .20); color: #d58d8d; }
body.atlas .star-fact { border-bottom-color: rgba(120, 112, 92, .28); }
body.atlas .star-fact-value { color: #2c3039; }
body.atlas .star-fact-value.meteor-status-inactive { color: #8a651d; }
body.night .star-fact-value.meteor-status-inactive { color: #f0b36d; }
/* Star atlas is a paper-light theme: the modal must not dim the chart and
   uses the same cream palette as the atlas itself. */
body.atlas .modal-backdrop { background: transparent; }
body.atlas .modal-box { background: rgba(255, 253, 247, .97); border-color: #c7c0ae; color: #2c3039;
  box-shadow: 0 12px 34px rgba(52, 48, 38, .20); }
body.atlas .modal-title { color: #17223c; }
body.atlas .modal-body { color: #3b3c40; }
body.atlas .modal-body h3 { color: #52658c; }
body.atlas .modal-body a { color: #2d5f9e; }
body.atlas .modal-x { color: #52658c; }
body.atlas .modal-x:hover { color: #17223c; }
.modal-body a { color: #6f86c8; }
.search-modal .modal-box { width: min(520px, calc(100vw - 32px)); max-height: min(70vh, 560px); overflow: hidden; }
.search-field { position: relative; display: flex; align-items: center; }
.search-field svg { position: absolute; left: 11px; width: 16px; height: 16px; color: #8496bf; pointer-events: none; }
#objectSearch { width: 100%; height: 40px; padding: 0 12px 0 36px; border: 1px solid #344a76; border-radius: 8px; background: #101827; color: #e6ebf7; font: inherit; font-size: 14px; }
#objectSearch:focus { border-color: #6687cf; box-shadow: 0 0 0 2px rgba(102,135,207,.16); }
.search-hint { margin: 10px 0 8px !important; color: #8292ba; font-size: 12px; line-height: 1.45; text-wrap: balance; }
.search-results { max-height: min(340px, calc(70vh - 170px)); overflow-y: auto; padding-right: 7px; border-top: 1px solid rgba(76, 92, 129, .32); scrollbar-gutter: stable; }
.search-results:empty { border-top-color: transparent; }
.search-result { display: grid; grid-template-columns: minmax(0, 1fr) auto; width: 100%; gap: 12px; align-items: center; padding: 9px 2px; border: 0; border-bottom: 1px solid rgba(76, 92, 129, .32); border-radius: 0; background: transparent; color: #d6dced; text-align: left; font: inherit; cursor: pointer; }
.search-result:hover, .search-result.active { background: rgba(73, 101, 164, .20); }
.search-result-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.search-result-kind { color: #8292ba; font-size: 11px; white-space: nowrap; }
.search-empty { padding: 12px 2px; color: #8292ba; font-size: 12px; }
body.night #objectSearch { border-color: #642a2a; background: #18080b; color: #e0aaaa; }
body.night .search-field svg, body.night .search-hint, body.night .search-result-kind, body.night .search-empty { color: #b87575; }
body.night .search-results, body.night .search-result { border-color: rgba(116, 54, 54, .5); }
body.night .search-result { color: #e0aaaa; }
body.night .search-result:hover, body.night .search-result.active { background: rgba(128, 42, 42, .22); }
body.atlas #objectSearch { border-color: #b9b09b; background: #fffdf7; color: #2c3039; }
body.atlas .search-field svg, body.atlas .search-hint, body.atlas .search-result-kind, body.atlas .search-empty { color: #68728a; }
body.atlas .search-results, body.atlas .search-result { border-color: rgba(120, 112, 92, .28); }
body.atlas .search-result { color: #2c3039; }
body.atlas .search-result:hover, body.atlas .search-result.active { background: rgba(112, 135, 88, .16); }
.search-results { scrollbar-width: thin; scrollbar-color: #52658c transparent; }
.search-results::-webkit-scrollbar { width: 6px; }
.search-results::-webkit-scrollbar-track { background: transparent; }
.search-results::-webkit-scrollbar-thumb { background: #52658c; border-radius: 0; }
body.atlas .search-results { scrollbar-color: #8d887b transparent; }
body.atlas .search-results::-webkit-scrollbar-thumb { background: #8d887b; }
body.night .search-results { scrollbar-color: #8d4c4c transparent; }
body.night .search-results::-webkit-scrollbar-thumb { background: #8d4c4c; }
@media (max-width: 560px){
  .modal-box, .modal.data-modal .modal-box, .search-modal .modal-box { width: calc(100vw - 24px); }
  /* Keep search above the mobile keyboard and reserve vertical room for its results. */
  .search-modal {
    top: var(--search-viewport-offset-top, 0px); right: 0; bottom: auto; left: 0;
    height: var(--search-viewport-height, 100dvh); box-sizing: border-box;
    align-items: flex-start; padding: 115px 12px 16px;
  }
  .search-modal .modal-box { max-height: calc(var(--search-viewport-height, 100dvh) - 131px); }
  .search-modal .search-results { max-height: min(340px, max(110px, calc(var(--search-viewport-height, 100dvh) - 301px))); }
  .solar-system-modal .modal-box { width: calc(100vw - 24px); max-height: 90vh; overflow-y: auto; padding: 18px 16px 14px; }
  .solar-system-layout { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .solar-system-stage { height: min(52vh, 430px); min-height: 260px; }
  #solarSystemCanvas { flex: 1; min-height: 0; }
  .solar-system-sidebar { overflow: visible; }
  .constellation-modal .modal-box { width: calc(100vw - 24px); }
  .constellation-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .constellation-list div:nth-child(3n + 2), .constellation-list div:nth-child(3n) { padding-left: 0; border-left: 0; }
  .constellation-list div:nth-child(2n) { padding-left: 10px; border-left: 1px solid rgba(76, 92, 129, .32); }
  body.atlas .constellation-list div:nth-child(2n) { border-left-color: rgba(120, 112, 92, .28); }
  body.night .constellation-list div:nth-child(2n) { border-left-color: rgba(128, 48, 48, .52); }
}

/* footer credits under Data & licenses */
.credits { margin-top: 30px; font-size: 11px; color: #6a7794; letter-spacing: .2px; }
.credits a { color: #6f86c8; text-decoration: none; }
.credits a:hover { color: #9fb0e0; text-decoration: underline; }
.credits button { flex: none; padding: 0; border: 0; border-radius: 0; background: transparent; color: #6f86c8;
  font: inherit; letter-spacing: inherit; text-align: left; }
.credits button:hover { background: transparent; color: #9fb0e0; text-decoration: underline; }

/* Star display: row1 = Spectral color + Star magnitude; row2 = Star atlas mode (full width) */
.row.starseg { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; row-gap: 0; }
.row.starseg button { flex: none; }
.row.starseg #sAtlas { grid-column: 1 / -1; margin-top: 8px; }

/* Star atlas mode button: green when ON (#3a7a3a), dark green (matching the
   neighbouring #17223c buttons) when OFF */
.row.starseg #sAtlas { background: #173c22; }
.row.starseg #sAtlas:hover { background: #1f4a2b; }
.row.starseg #sAtlas.active { background: #3a7a3a; border-color: #4e9e4e; color: #eef7ee; }
.star-density-control { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.star-density-label { flex: 1; color: #9aa9cb; font-size: 12px; }
.star-density-actions { display: flex; gap: 4px; }
.star-density-actions button { flex: 0 0 30px; width: 30px; padding: 6px 0; font-size: 16px; line-height: 1; }
body.atlas .star-density-label { color: #5d6b8f; }

/* Atlas mode: logo on cream background — black title, green subtitle, no shadow */
body.atlas #brand { text-shadow: none; }
body.atlas #brand .brand-name { color: #17223c; }
body.atlas #brand .brand-sub { color: #519051; }

/* Logo opens the About modal */
#brand { cursor: pointer; }
#brand:hover .brand-name { text-decoration: underline; text-underline-offset: 3px; }
#brand:focus-visible { outline: 2px solid #4a63b8; outline-offset: 3px; border-radius: 4px; }



#panel,
#toolsPanel,
.modal-box,
#planner,
#todayPanel
{
  /* Firefox */
  scrollbar-width: thin;
  scrollbar-color: #26324e transparent;
}

#panel::-webkit-scrollbar,
#toolsPanel::-webkit-scrollbar,
.modal-box::-webkit-scrollbar,
#planner::-webkit-scrollbar,
#todayPanel::-webkit-scrollbar
{
  width: 6px;
}

#panel::-webkit-scrollbar-track,
#toolsPanel::-webkit-scrollbar-track,
.modal-box::-webkit-scrollbar-track,
#planner::-webkit-scrollbar-track,
#todayPanel::-webkit-scrollbar-track
{
  background: transparent;
}

#panel::-webkit-scrollbar-thumb,
#toolsPanel::-webkit-scrollbar-thumb,
.modal-box::-webkit-scrollbar-thumb,
#planner::-webkit-scrollbar-track,
#todayPanel::-webkit-scrollbar-track
{
  background: #26324e;
  border-radius: 10px;
}

#panel::-webkit-scrollbar-thumb:hover,
#toolsPanel::-webkit-scrollbar-thumb:hover,
.modal-box::-webkit-scrollbar-thumb:hover,
#planner::-webkit-scrollbar-track,
#todayPanel::-webkit-scrollbar-track
{
  background: #3b4f78;
}