:root {
      --bg:#f0f0f0; --fg:#333; --muted:#666; --card:#fff;
      --accent:#007bff; --accent-hover:#0056b3;
      --border:#ccc; --shadow:0 4px 8px rgba(0,0,0,.1);
    }
    *{
      box-sizing:border-box;
    }
    html{
      overflow-anchor:none;
    }
    body{
      margin:0;
      font-family:Arial, sans-serif;
      background:var(--bg);
      color:var(--fg);
      transition: background-color .5s, color .5s;
      padding:24px;
      overflow-x:hidden;
      overflow-anchor:none;
    }
    .overlay-controls{
      position:sticky;
      top:10px;
      display:block;
      z-index:45;
      margin:0 auto 20px;
      width:min(100%, 1180px);
      overflow-anchor:none;
    }
    .grid{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(min(100%, 350px), 1fr));
      grid-auto-rows:8px;
      grid-auto-flow:dense;
      gap:20px;
      align-items:start;
      overflow-anchor:none;
    }
    .dashboard-stack{
      display:contents;
    }
    .display-container{
      position:relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      border:2px solid var(--border);
      border-radius:10px;
      padding:20px;
      background:var(--card);
      box-shadow:var(--shadow);
      min-height:180px;
      min-width:0;
      overflow-anchor:none;
    }
    .wide-card{
      grid-column:auto;
    }
    .date-location-card{ order:10; }
    .solar-card{ order:20; }
    .small-bodies-card{ order:30; }
    .moon-nodes-card{ order:35; }
    .conjunction-card{ order:38; }
    .meteor-card{ order:40; }
    .constellation-card{ order:50; }
    .constellation-year-card{ order:55; }
    .season-card{ order:60; }
    .spacecraft-card{ order:70; }
    .jupiter-card{ order:70; }
    .visibility-card{ order:80; }
    .retrograde-card{ order:82; }
    .inner-phases-card{ order:84; }
    .night-visibility-card{ order:86; }
    .satellite-card{ order:88; }
    .aurora-card{ order:118; }
    .earth-card{ order:90; }
    .system-card{ order:100; }
    .sky-calendar-card{
      order:110;
      overflow-anchor:none;
    }
    .bsky-card{ order:120; }
    .about-card{ order:130; }
    @media (min-width:1180px){
      .solar-card,
      .small-bodies-card,
      .moon-nodes-card,
      .conjunction-card,
      .night-visibility-card,
      .satellite-card,
      .aurora-card,
      .meteor-card,
      .constellation-card,
      .spacecraft-card,
      .jupiter-card,
      .system-card,
      .sky-calendar-card{
        grid-column:span 2;
      }
    }
    .time-card{
      gap:12px;
    }
    .about-card{
      align-items:flex-start;
      gap:12px;
      justify-content:flex-start;
      min-height:auto;
    }
    .about-card .group-title{
      width:100%;
      text-align:left;
      margin-bottom:0;
    }
    .about-copy{
      display:grid;
      gap:8px;
      width:100%;
      font-size:.98rem;
      color:var(--fg);
    }
    .about-line{
      line-height:1.45;
      word-break:break-word;
    }
    .about-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .about-link {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      padding:10px 14px;
      border:1px solid rgba(37,99,235,.18);
      border-radius:999px;
      background:#f8fbff;
      color:#1d4ed8;
      text-decoration:none;
      font-weight:600;
      box-shadow:0 1px 2px rgba(15,23,42,.06);
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .about-link:hover {
      background:#eef5ff;
      box-shadow:0 4px 12px rgba(37,99,235,.12);
      transform:translateY(-1px);
    }
    .about-contact{
      display:grid;
      gap:4px;
      width:100%;
      color:var(--muted);
    }
    .about-contact a{
      color:#1d4ed8;
      text-decoration:none;
    }
    .about-contact a:hover{
      text-decoration:underline;
    }
    .time-tools{
      width:100%;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(200px,1fr));
      gap:14px;
      margin-top:8px;
    }
    .time-tool{
      display:flex;
      flex-direction:column;
      align-items:center;
      padding:12px;
      border:1px solid var(--border);
      border-radius:8px;
      background:rgba(255,255,255,.35);
    }
    .time-tool-title{
      font-size:1rem;
      font-weight:600;
      color:var(--fg);
      margin-bottom:4px;
    }
    .time-tool #stopwatch,
    .time-tool #countdown{
      font-size:2rem;
    }
    .time-tool-actions{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      align-items:center;
    }
    .time-tool input{
      width:8rem;
    }
    .settings-controls{
      width:100%;
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(130px,1fr));
      gap:10px;
    }
    .setting-field{
      display:flex;
      flex-direction:column;
      align-items:stretch;
      text-align:center;
    }
    .setting-field select{
      width:100%;
      margin:5px 0 0;
      min-width:0;
    }
    .group-title{
      font-size:1.2rem;
      margin-bottom:6px;
      color:var(--fg);
      font-weight:600;
      text-align:center;
    }
    #time,#stopwatch,#countdown{
      font-size:3.2rem;
      color:var(--fg);
      transition: transform .5s, text-shadow .5s, color .5s;
    }
    #date{
      font-size:1.1rem;
      color:var(--muted);
      margin-top:4px;
    }
    select,input,button{
      margin:8px;
      font-size:1rem;
      padding:10px 16px;
      border:1px solid var(--border);
      border-radius:6px;
      background:var(--bg);
      color:var(--fg);
      cursor:pointer;
      transition: background-color .3s, border-color .3s;
    }
    button{
      background:var(--accent);
      color:#fff;
      border:none;
    }
    button:hover{
      background:var(--accent-hover);
    }

    /* Moon progress bar */
    .moonbar{
      width:100%;
      height:8px;
      background:linear-gradient(180deg,#e9e9e9,#dcdcdc);
      border:1px solid var(--border);
      border-radius:999px;
      overflow:hidden;
      margin-top:10px;
      box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
    }
    .moonbar-fill{
      height:100%;
      width:0%;
      min-width:0;
      background: linear-gradient(90deg, #6ee7b7, #3b82f6);
      box-shadow: 0 0 6px rgba(59,130,246,.5);
      transition: width .6s ease;
    }

    .moon-graphic{
      width:72px;
      height:72px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:3rem;
      line-height:1;
      background:radial-gradient(circle at 35% 35%, #fff, #d8d8d8 55%, #8b8b8b);
      box-shadow: inset -10px -8px 14px rgba(0,0,0,.22), 0 0 14px rgba(0,0,0,.15);
    }

    .moon-label-line{
      width:100%;
      font-size:.85rem;
      color:var(--muted);
      margin-top:6px;
      text-align:left;
    }


    /* Jupiter system */
    .jupiter-wrap{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .jupiter-system{
      position:relative;
      width:min(100%, 400px);
      aspect-ratio:1;
    }
    .jupiter{
      position:absolute;
      left:50%;
      top:50%;
      width:48px;
      height:48px;
      margin:-24px 0 0 -24px;
      border-radius:50%;
      background: radial-gradient(circle at 35% 35%, #ffcf6e, #c47a27 60%, #8a4f1a);
      box-shadow: 0 0 20px rgba(196,122,39,.6);
    }
    .orbit{
      position:absolute;
      left:50%;
      top:50%;
      transform: translate(-50%,-50%);
      border:1px dashed var(--border);
      border-radius:50%;
      animation: spin linear infinite;
    }
    .orbit .moon{
      position:absolute;
      left:50%;
      top:0;
      width:8px;
      height:8px;
      margin-left:-4px;
      border-radius:50%;
      background:#e5e7eb;
      box-shadow:0 0 6px rgba(0,0,0,.25);
    }
    .moon.io{ background:#f2c14e; }
    .moon.europa{ background:#d7d7d7; }
    .moon.ganymede{ background:#a7b0b5; }
    .moon.callisto{ background:#8b8b8b; }

    .moon-label{
      position:absolute;
      left:50%;
      top:0;
      transform: translate(-50%,-170%);
      font-size:.8rem;
      color:var(--fg);
      white-space:nowrap;
      text-shadow:0 1px 2px rgba(0,0,0,.08);
    }
    .legend-small{
      margin-top:10px;
      font-size:.9rem;
      color:var(--muted);
      text-align:center;
    }
    @keyframes spin{
      to{ transform: translate(-50%,-50%) rotate(360deg); }
    }

    /* Solar system */
    .solar-card{
      min-height:0;
    }
    .solar-system{
      position:relative;
      width:min(100%, 560px);
      aspect-ratio:1;
      margin-top:10px;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,210,105,.22), transparent 8%),
        radial-gradient(circle at 50% 50%, rgba(148,163,184,.13), transparent 35%),
        #ffffff;
      overflow:hidden;
      box-shadow:inset 0 0 28px rgba(148,163,184,.16), 0 8px 24px rgba(0,0,0,.12);
    }
    .solar-controls{
      width:min(100%, 560px);
      margin-top:12px;
    }
    .date-location-card{
      width:100%;
      min-height:0;
      gap:10px;
      align-items:stretch;
      background:rgba(255,255,255,.9);
      backdrop-filter:blur(14px);
      border:1px solid rgba(191,219,254,.9);
      border-radius:18px;
      box-shadow:0 14px 34px rgba(15,23,42,.14);
      padding:12px 16px;
    }
    .date-mobile-bar{
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      min-width:0;
    }
    .date-mobile-summary{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      flex:1 1 auto;
    }
    .mobile-readout{
      font-size:1rem;
      line-height:1.1;
    }
    .mobile-location-readout{
      color:var(--muted);
      font-size:.84rem;
      font-weight:600;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .date-mobile-actions{
      display:flex;
      align-items:center;
      gap:6px;
      flex:0 0 auto;
    }
    .date-mobile-actions button{
      margin:0;
      min-height:34px;
      padding:7px 10px;
      border-radius:999px;
      font-size:.9rem;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
      background:#f8fbff;
      color:#0f172a;
      border:1px solid #bfdbfe;
      box-shadow:none;
    }
    .date-mobile-step-button{
      min-width:34px;
      padding:7px 0;
      font-size:1rem;
    }
    .date-mobile-today-button{
      background:linear-gradient(135deg, #1d4ed8, #3b82f6) !important;
      color:#fff !important;
      border:1px solid #2563eb !important;
    }
    .date-mobile-toggle-button{
      min-width:34px;
      padding:7px 0;
      color:#1d4ed8 !important;
    }
    .date-mobile-panel{
      display:block;
    }
    .date-toolbar{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
      min-width:0;
    }
    .control-date-readout{
      flex:0 0 auto;
      color:#2563eb;
      font-family:inherit;
      font-size:1.12rem;
      font-weight:700;
      letter-spacing:0;
      text-align:left;
      padding:0;
      border-bottom:0;
      text-shadow:none;
    }
    .date-toolbar-slider{
      flex:1 1 260px;
      min-width:220px;
    }
    .date-toolbar-actions{
      flex:0 1 auto;
      display:flex;
      flex-wrap:nowrap;
      gap:6px;
      align-items:center;
      justify-content:flex-end;
      min-width:0;
    }
    .date-toolbar-actions button{
      flex:0 0 auto;
      min-height:34px;
      margin:0;
      padding:7px 10px;
      border-radius:999px;
      font-size:.9rem;
      font-weight:700;
      line-height:1;
      white-space:nowrap;
      background:#f8fbff;
      color:#0f172a;
      border:1px solid #bfdbfe;
      box-shadow:none;
    }
    .date-toolbar-actions button:hover{
      background:#eff6ff;
      border-color:#93c5fd;
    }
    .date-toolbar-actions .date-today-button{
      background:linear-gradient(135deg, #1d4ed8, #3b82f6);
      color:#fff;
      border:1px solid #2563eb;
      box-shadow:0 8px 20px rgba(37,99,235,.18);
    }
    .date-toolbar-actions .date-auto-button{
      color:#1d4ed8;
      background:#f8fbff;
      border:1px solid #93c5fd;
    }
    .date-toolbar-actions .date-auto-button:hover{
      background:#eff6ff;
      border-color:#60a5fa;
      color:#1e40af;
    }
    .date-toolbar-actions .date-auto-button.active{
      background:linear-gradient(135deg, #2563eb, #60a5fa);
      color:#fff;
      border:1px solid #2563eb;
      box-shadow:0 8px 20px rgba(37,99,235,.18);
    }
    .date-toolbar-actions .date-today-button:hover{
      background:linear-gradient(135deg, #1e40af, #2563eb);
    }
    .location-control{
      flex:0 1 180px;
      min-width:150px;
      display:flex;
      align-items:center;
      gap:8px;
      margin:0;
      text-align:left;
      color:#0f172a;
      font-weight:700;
      font-size:.82rem;
    }
    .location-control select{
      width:100%;
      padding:8px 12px;
      border:1px solid #d8e2ef;
      border-radius:999px;
      background:#fff;
      color:var(--fg);
      font-size:.9rem;
      box-shadow:none;
      margin:0;
    }
    .solar-slider-row{
      display:grid;
      grid-template-columns:auto minmax(120px,1fr) auto;
      gap:8px;
      align-items:center;
      color:var(--muted);
      font-size:.74rem;
    }
    #solarDateSlider{
      width:100%;
      margin:0;
      padding:0;
      accent-color:#2563eb;
    }
    .solar-control-actions{
      display:flex;
      justify-content:center;
      align-items:center;
      min-height:0;
    }
    .solar-step-button{
      width:auto;
      height:auto;
      padding:0;
      font-size:1rem;
      line-height:1;
      user-select:none;
      touch-action:manipulation;
    }
    .sun{
      position:absolute;
      left:50%;
      top:50%;
      width:34px;
      height:34px;
      margin:-17px 0 0 -17px;
      border-radius:50%;
      background:radial-gradient(circle at 35% 35%, #fff7b0, #f8b43c 55%, #b45309);
      box-shadow:0 0 24px rgba(248,180,60,.9);
      z-index:3;
    }
    .solar-orbit{
      position:absolute;
      left:50%;
      top:50%;
      border:1px solid rgba(107,114,128,.24);
      border-radius:50%;
      transform:translate(-50%,-50%);
    }
    .solar-planet{
      position:absolute;
      left:50%;
      top:50%;
      width:12px;
      height:12px;
      margin:-6px 0 0 -6px;
      border-radius:50%;
      box-shadow:0 0 8px rgba(255,255,255,.5);
      z-index:4;
    }
    .solar-label{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(8px, -18px);
      color:#1f2937;
      font-size:.78rem;
      white-space:nowrap;
      text-shadow:0 1px 2px rgba(255,255,255,.9);
      z-index:5;
    }
    .solar-planet.mercury{ width:7px; height:7px; margin:-3.5px 0 0 -3.5px; background:#b8b1a3; }
    .solar-planet.venus{ width:11px; height:11px; margin:-5.5px 0 0 -5.5px; background:#e8c07d; }
    .solar-planet.earth{ width:12px; height:12px; margin:-6px 0 0 -6px; background:#3b82f6; }
    .solar-planet.mars{ width:10px; height:10px; margin:-5px 0 0 -5px; background:#c65f35; }
    .solar-planet.jupiter{ width:20px; height:20px; margin:-10px 0 0 -10px; background:#d6a25f; }
    .solar-planet.saturn{ width:18px; height:18px; margin:-9px 0 0 -9px; background:#d6c08a; }
    .solar-planet.uranus{ width:15px; height:15px; margin:-7.5px 0 0 -7.5px; background:#7dd3fc; }
    .solar-planet.neptune{ width:15px; height:15px; margin:-7.5px 0 0 -7.5px; background:#4169e1; }
    .small-bodies-card{
      gap:12px;
    }
    .small-bodies-map{
      width:min(100%, 680px);
      aspect-ratio:1;
      margin-top:6px;
      border-radius:50%;
      overflow:visible;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,210,105,.18), transparent 8%),
        radial-gradient(circle at 50% 50%, rgba(148,163,184,.14), transparent 50%),
        #ffffff;
      box-shadow:inset 0 0 30px rgba(148,163,184,.18), 0 8px 24px rgba(0,0,0,.12);
    }
    .small-bodies-map svg{
      display:block;
      width:100%;
      height:100%;
      overflow:visible;
      border-radius:50%;
      touch-action:auto;
      cursor:default;
      user-select:none;
      -webkit-user-select:none;
      -webkit-touch-callout:none;
    }
    .small-bodies-map svg.is-dragging{
      cursor:default;
    }
    .small-bodies-orbit{
      fill:none;
      stroke-width:2.1;
      stroke-opacity:.8;
    }
    .small-bodies-hitarea{
      fill:none;
      stroke:transparent;
      stroke-width:20;
      pointer-events:stroke;
      cursor:help;
    }
    .small-bodies-tools{
      width:min(100%, 680px);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-top:2px;
    }
    .small-bodies-tools button{
      padding:8px 12px;
      border-radius:999px;
      font-size:.82rem;
    }
    .small-bodies-hint{
      color:var(--muted);
      font-size:.78rem;
      line-height:1.35;
      text-align:right;
      flex:1;
      min-width:220px;
    }
    .small-bodies-label-chip{
      cursor:pointer;
    }
    .small-bodies-label-guide{
      stroke:rgba(71,85,105,.45);
      stroke-width:1.2;
      stroke-dasharray:2 3;
      pointer-events:none;
    }
    .small-bodies-label{
      fill:#1f2937;
      font-size:11px;
      font-weight:600;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:3px;
      stroke-linejoin:round;
      pointer-events:none;
    }
    .small-bodies-belt{
      fill:none;
      stroke:#94a3b8;
      stroke-width:16;
      stroke-dasharray:1 6;
      stroke-linecap:round;
      opacity:.32;
    }
    .small-bodies-belt.kuiper{
      stroke:#60a5fa;
      stroke-width:24;
      stroke-dasharray:1 8;
      opacity:.22;
    }
    .small-bodies-sun{
      fill:url(#smallBodiesSunGradient);
      filter:url(#smallBodiesSunGlow);
    }
    .small-bodies-summary{
      width:min(100%, 680px);
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:8px;
      font-size:.78rem;
      color:var(--muted);
      text-align:left;
    }
    .small-bodies-summary strong{
      color:var(--fg);
      display:block;
      font-size:.82rem;
    }
    .small-bodies-detail{
      width:min(100%, 680px);
      min-height:52px;
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:8px;
      background:#f8fafc;
      color:var(--muted);
      font-size:.82rem;
      line-height:1.35;
      text-align:left;
    }
    .small-bodies-detail strong{
      color:var(--fg);
    }
    .astro-visual-card{
      gap:10px;
    }
    .astro-disc{
      width:min(100%, 420px);
      aspect-ratio:1;
      margin-top:6px;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.85), transparent 32%),
        radial-gradient(circle at 50% 50%, rgba(148,163,184,.16), transparent 62%),
        #ffffff;
      box-shadow:inset 0 0 26px rgba(148,163,184,.16), 0 8px 22px rgba(0,0,0,.1);
    }
    .astro-disc svg{
      display:block;
      width:100%;
      height:100%;
      overflow:hidden;
      border-radius:50%;
    }
    .astro-summary{
      width:min(100%, 420px);
      display:grid;
      gap:6px;
      color:var(--muted);
      font-size:.82rem;
      text-align:left;
    }
    .astro-summary strong{
      color:var(--fg);
    }
    .moon-nodes-figure{
      width:min(100%, 560px);
      aspect-ratio:1.8;
      margin-top:6px;
      border-radius:24px;
      background:
        radial-gradient(circle at 50% 36%, rgba(255,255,255,.85), transparent 28%),
        radial-gradient(circle at 50% 50%, rgba(148,163,184,.12), transparent 76%),
        #ffffff;
      box-shadow:inset 0 0 26px rgba(148,163,184,.14), 0 8px 22px rgba(0,0,0,.1);
    }
    .moon-nodes-figure svg{
      display:block;
      width:100%;
      height:100%;
    }
    .moon-nodes-panel{
      fill:rgba(255,255,255,.9);
      stroke:#dbeafe;
      stroke-width:1.6;
    }
    .moon-nodes-panel-title{
      font-size:13px;
      font-weight:700;
      fill:#334155;
      text-anchor:middle;
    }
    .moon-nodes-caption{
      font-size:11px;
      fill:#64748b;
      text-anchor:middle;
    }
    .moon-nodes-season-label{
      font-size:12px;
      font-weight:700;
      fill:#334155;
      text-anchor:middle;
    }
    .retrograde-panel,
    .planet-phases-panel,
    .night-visibility-panel{
      width:min(100%, 420px);
    }
    .retrograde-panel{
      display:grid;
      gap:10px;
      margin-top:4px;
    }
    .retro-row{
      display:grid;
      gap:6px;
      padding:10px 12px;
      border:1px solid #dbeafe;
      border-radius:12px;
      background:linear-gradient(180deg,#fbfdff,#f3f8ff);
    }
    .retro-head{
      display:flex;
      justify-content:space-between;
      gap:8px;
      align-items:center;
      font-size:.9rem;
      font-weight:600;
      color:var(--fg);
    }
    .retro-badge{
      padding:3px 8px;
      border-radius:999px;
      font-size:.73rem;
      background:#e2e8f0;
      color:#475569;
    }
    .retro-badge.retro{
      background:#dbeafe;
      color:#1d4ed8;
    }
    .retro-meter{
      position:relative;
      height:8px;
      border-radius:999px;
      background:#e2e8f0;
      overflow:hidden;
    }
    .retro-meter-fill{
      position:absolute;
      top:0;
      bottom:0;
      border-radius:999px;
      background:linear-gradient(90deg,#60a5fa,#2563eb);
    }
    .retro-copy{
      font-size:.78rem;
      color:var(--muted);
      display:flex;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
    }
    .planet-phases-panel{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
      gap:12px;
      margin-top:4px;
    }
    .planet-phase-card{
      display:grid;
      justify-items:center;
      gap:8px;
      padding:14px 12px;
      border:1px solid #dbeafe;
      border-radius:14px;
      background:linear-gradient(180deg,#fbfdff,#f3f8ff);
      text-align:center;
    }
    .planet-phase-name{
      font-weight:700;
      color:var(--fg);
    }
    .planet-phase-svg{
      width:96px;
      height:96px;
      display:block;
    }
    .planet-phase-meta{
      display:grid;
      gap:4px;
      width:100%;
      font-size:.8rem;
      color:var(--muted);
      text-align:left;
    }
    .planet-phase-meta strong{
      color:var(--fg);
    }
    .night-visibility-panel{
      display:grid;
      gap:8px;
      margin-top:4px;
    }
    .night-visibility-header{
      display:grid;
      grid-template-columns:72px 1fr;
      gap:12px;
      align-items:end;
      font-size:.76rem;
      color:#64748b;
    }
    .night-visibility-place{
      font-weight:600;
      color:#475569;
    }
    .night-visibility-scale{
      position:relative;
      height:20px;
      border-radius:999px;
      background:linear-gradient(90deg,#0f172a,#1e3a8a 48%,#0f172a);
      box-shadow:inset 0 0 12px rgba(255,255,255,.08);
    }
    .night-visibility-scale span{
      position:absolute;
      top:-1px;
      font-size:.72rem;
      color:#475569;
      transform:translateX(-50%);
    }
    .night-visibility-scale .left{
      left:0;
      transform:none;
    }
    .night-visibility-scale .right{
      right:0;
      left:auto;
      transform:none;
    }
    .night-row{
      display:grid;
      grid-template-columns:72px 1fr;
      gap:12px;
      align-items:center;
      font-size:.82rem;
    }
    .night-name{
      color:var(--fg);
      font-weight:600;
    }
    .night-track{
      position:relative;
      height:16px;
      border-radius:999px;
      background:linear-gradient(90deg,#0f172a,#1e3a8a 48%,#0f172a);
      overflow:hidden;
      box-shadow:inset 0 0 12px rgba(255,255,255,.08);
    }
    .night-bar{
      position:absolute;
      top:2px;
      height:12px;
      border-radius:999px;
      background:linear-gradient(90deg,#fbbf24,#fde68a);
      box-shadow:0 0 10px rgba(251,191,36,.45);
    }
    .night-empty{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:.68rem;
      color:#cbd5e1;
      text-align:center;
      padding:0 8px;
    }
    .night-best{
      margin-top:2px;
      font-size:.76rem;
      color:var(--muted);
      text-align:right;
    }
    .night-best.empty{
      color:#94a3b8;
    }
    .satellite-summary-grid{
      display:grid;
      grid-template-columns:repeat(auto-fit,minmax(130px,1fr));
      gap:8px 12px;
    }
    .conjunction-timeline{
      width:min(100%, 560px);
      display:grid;
      gap:8px;
    }
    .conjunction-timeline svg{
      display:block;
      width:100%;
      height:auto;
      border-radius:14px;
      background:linear-gradient(180deg,#fbfdff,#f3f8ff);
      border:1px solid #dbeafe;
      box-shadow:inset 0 0 14px rgba(148,163,184,.18);
    }
    .conjunction-summary{
      width:min(100%, 520px);
      display:grid;
      gap:4px;
      color:var(--muted);
      font-size:.82rem;
      text-align:left;
    }
    .constellation-year-card{
      min-width:min(100%, 560px);
    }
    .constellation-year-disc{
      width:min(100%, 520px);
      aspect-ratio:1;
      margin-top:4px;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.82), transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(96,165,250,.08), transparent 68%),
        #ffffff;
      box-shadow:inset 0 0 20px rgba(148,163,184,.16), 0 8px 20px rgba(0,0,0,.08);
    }
    .constellation-year-disc svg{
      display:block;
      width:100%;
      height:100%;
    }
    .constellation-month-label{
      font-size:10px;
      fill:#475569;
      text-anchor:middle;
      dominant-baseline:middle;
      font-weight:600;
    }
    .constellation-name-label{
      font-size:12px;
      fill:#334155;
      text-anchor:middle;
      dominant-baseline:middle;
      font-weight:600;
    }
    .constellation-mini-ring{
      fill:rgba(255,255,255,.86);
      stroke:#bfdbfe;
      stroke-width:1.2;
    }
    .constellation-mini-line{
      stroke:#94a3b8;
      stroke-width:1.1;
      fill:none;
      stroke-linecap:round;
    }
    .constellation-mini-star{
      fill:#2563eb;
      stroke:#fff;
      stroke-width:.8;
    }
    .constellation-mini-star.current{
      fill:#f59e0b;
    }
    .retrograde-card{
      gap:10px;
    }
    .moon-nodes-status{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:4px 10px;
      border-radius:999px;
      background:#e2e8f0;
      color:#475569;
      font-size:.78rem;
      font-weight:600;
      width:max-content;
    }
    .moon-nodes-status.active{
      background:#dbeafe;
      color:#1d4ed8;
    }
    .moon-nodes-status.near{
      background:#ffedd5;
      color:#c2410c;
    }
    .moon-nodes-status.exact{
      background:#fde68a;
      color:#92400e;
      box-shadow:0 0 0 1px rgba(245,158,11,.16) inset;
    }
    .retro-path{
      width:100%;
      height:58px;
      border-radius:12px;
      background:linear-gradient(180deg,#fbfdff,#f3f8ff);
      border:1px solid #dbeafe;
      overflow:hidden;
    }
    .retro-path svg{
      display:block;
      width:100%;
      height:100%;
    }
    .aurora-panel{
      width:min(100%, 420px);
      display:grid;
      gap:10px;
    }
    .aurora-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:6px;
      min-height:34px;
      padding:8px 12px;
      border-radius:999px;
      font-weight:700;
      font-size:.92rem;
      color:#0f172a;
      background:#e2e8f0;
    }
    .aurora-badge.low{ background:#dbeafe; color:#1d4ed8; }
    .aurora-badge.medium{ background:#fef3c7; color:#92400e; }
    .aurora-badge.high{ background:#dcfce7; color:#166534; }
    .aurora-badge.extreme{ background:#ede9fe; color:#5b21b6; }
    .aurora-meta{
      display:grid;
      gap:5px;
      color:var(--muted);
      font-size:.82rem;
      text-align:left;
    }
    .meteor-arc{
      fill:none;
      stroke-width:10;
      stroke-linecap:round;
      opacity:.72;
    }
    .meteor-peak{
      stroke:#111827;
      stroke-width:2;
      fill:#fff;
    }
    .meteor-month-tick{
      stroke:#9ca3af;
      stroke-width:1;
      stroke-linecap:round;
    }
    .meteor-month-label{
      fill:#4b5563;
      font-size:10px;
      text-anchor:middle;
      dominant-baseline:middle;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:3px;
      stroke-linejoin:round;
    }
    .meteor-today{
      fill:#ef4444;
      stroke:#fff;
      stroke-width:2;
    }
    .meteor-radiants{
      width:min(100%, 420px);
      display:grid;
      grid-template-columns:140px 1fr;
      align-items:center;
      gap:12px;
      margin-top:4px;
      font-size:.78rem;
      color:var(--muted);
      text-align:left;
    }
    .meteor-radiant-map{
      width:140px;
      aspect-ratio:1;
      border-radius:50%;
      background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,.78), transparent 50%),
        #f8fafc;
      box-shadow:inset 0 0 16px rgba(148,163,184,.24);
    }
    .meteor-radiant-map svg{
      display:block;
      width:100%;
      height:100%;
    }
    .meteor-radiant-dot{
      stroke:#fff;
      stroke-width:2;
    }
    .meteor-radiant-dot.inactive{
      opacity:.28;
    }
    .meteor-radiant-label{
      fill:#1f2937;
      font-size:8px;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:2px;
      stroke-linejoin:round;
    }
    .meteor-radiant-copy{
      display:grid;
      gap:4px;
    }
    .constellation-card{
      gap:10px;
    }
    .constellation-map{
      width:min(100%, 460px);
      aspect-ratio:1;
      margin-top:4px;
      border-radius:8px;
      background:
        radial-gradient(circle at 50% 30%, rgba(96,165,250,.14), transparent 48%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
      box-shadow:inset 0 0 18px rgba(148,163,184,.18);
    }
    .constellation-map svg{
      display:block;
      width:100%;
      height:100%;
    }
    .constellation-line{
      stroke:#64748b;
      stroke-width:1.4;
      opacity:.72;
    }
    .constellation-star{
      fill:#f59e0b;
      stroke:#fff;
      stroke-width:1.5;
    }
    .constellation-star.main{
      fill:#2563eb;
    }
    .constellation-star-label{
      fill:#1f2937;
      font-size:12px;
      font-weight:600;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:4px;
      stroke-linejoin:round;
    }
    .constellation-name{
      font-weight:700;
      color:var(--fg);
      font-size:1.02rem;
    }
    .constellation-summary{
      width:min(100%, 460px);
      color:var(--muted);
      font-size:.82rem;
      text-align:left;
      display:grid;
      gap:4px;
    }
    .season-orbit{
      fill:none;
      stroke:#d1d5db;
      stroke-width:2;
    }
    .season-axis{
      stroke:#2563eb;
      stroke-width:3;
      stroke-linecap:round;
    }
    .season-axis-pole{
      fill:#2563eb;
      stroke:#fff;
      stroke-width:1.5;
    }
    .season-earth{
      fill:url(#seasonEarthGradient);
      filter:url(#seasonEarthShadow);
    }
    .season-night{
      fill:rgba(15,23,42,.34);
    }
    .season-sunray{
      stroke:#f59e0b;
      stroke-width:2;
      stroke-linecap:round;
      opacity:.55;
    }
    .season-label{
      fill:#4b5563;
      font-size:10px;
      text-anchor:middle;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:3px;
      stroke-linejoin:round;
    }
    .season-month-tick{
      stroke:#9ca3af;
      stroke-width:1;
      stroke-linecap:round;
    }
    .season-month-label{
      fill:#4b5563;
      font-size:9px;
      text-anchor:middle;
      dominant-baseline:middle;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:3px;
      stroke-linejoin:round;
    }
    .season-declination-label{
      fill:#1f2937;
      font-size:9px;
      text-anchor:middle;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:3px;
      stroke-linejoin:round;
    }
    .spacecraft-track{
      fill:none;
      stroke:#cbd5e1;
      stroke-width:1.2;
      stroke-linecap:round;
      stroke-dasharray:4 4;
    }
    .spacecraft-marker{
      stroke:#fff;
      stroke-width:2;
    }
    .spacecraft-label{
      fill:#1f2937;
      font-size:10px;
      paint-order:stroke;
      stroke:#fff;
      stroke-width:3px;
      stroke-linejoin:round;
    }
    .spacecraft-card .astro-disc{
      width:min(100%, 460px);
      overflow:visible;
    }
    .spacecraft-card .astro-disc svg{
      overflow:visible;
      border-radius:0;
    }
    .spacecraft-orbit{
      fill:none;
      stroke:#cbd5e1;
      stroke-width:1;
      opacity:.24;
    }
    /* Earth-Moon system */
    .earthmoon-wrap{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .earthmoon{
      position:relative;
      width:210px;
      height:210px;
    }
    .earth{
      position:absolute;
      left:50%;
      top:50%;
      width:36px;
      height:36px;
      margin:-18px 0 0 -18px;
      border-radius:50%;
      background: radial-gradient(circle at 35% 35%, #5db6ff, #1d78c1 60%, #0b4f7a);
      box-shadow:0 0 16px rgba(29,120,193,.45);
    }
    .em-orbit{
      position:absolute;
      left:50%;
      top:50%;
      width:180px;
      height:120px;
      transform: translate(-50%,-50%);
      border:1px dashed var(--border);
      border-radius:50%;    /* aus Kreis wird bei ungleicher width/height eine Ellipse */
    }
    .em-moon{
      position:absolute;
      width:14px;
      height:14px;
      border-radius:50%;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:12px;
      /* neu: Mittelpunkt-Position über translate(-50%, -50%) */
      transform: translate(-50%, -50%);
    }
    .em-info{
      margin-top:10px;
      font-size:.95rem;
      text-align:center;
      color:var(--fg);
    }
    .moon-details{
      width:100%;
      padding-top:14px;
      border-top:1px solid var(--border);
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    .earthmoon-layout{
      width:100%;
      display:flex;
      flex-direction:column;
      gap:14px;
      align-items:stretch;
    }
    .earthmoon-primary{
      display:flex;
      flex-direction:column;
      align-items:center;
    }
    .earth-card .moon-graphic{
      width:56px;
      height:56px;
      font-size:2.4rem;
    }
    .sunlight-panel{
      width:100%;
      padding-top:14px;
      border-top:1px solid var(--border);
      text-align:left;
      font-size:.84rem;
    }
    .eclipse-geometry{
      position:relative;
      border-top:1px solid var(--border);
      margin-top:10px;
      padding-top:10px;
      font-size:.8rem;
      color:var(--muted);
      display:grid;
      gap:6px;
    }
    .eclipse-head{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
    }
    .eclipse-title{
      color:var(--fg);
      font-weight:700;
      text-align:center;
    }
    .eclipse-info{
      position:relative;
      flex:0 0 auto;
    }
    .eclipse-info-button{
      width:22px;
      height:22px;
      min-height:22px;
      margin:0;
      padding:0;
      border-radius:999px;
      border:1px solid #bfdbfe;
      background:#eff6ff;
      color:#1d4ed8;
      font-size:.82rem;
      font-weight:700;
      line-height:1;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .eclipse-info-button:hover,
    .eclipse-info-button:focus-visible{
      background:#dbeafe;
      border-color:#93c5fd;
    }
    .eclipse-info-popup{
      position:absolute;
      top:28px;
      right:0;
      width:min(260px, 72vw);
      padding:10px 12px;
      border:1px solid var(--border);
      border-radius:8px;
      background:#ffffff;
      color:var(--muted);
      box-shadow:0 10px 24px rgba(15,23,42,.16);
      line-height:1.35;
      z-index:12;
      display:none;
      text-align:left;
    }
    .eclipse-info.open .eclipse-info-popup{
      display:block;
    }
    .eclipse-map{
      width:100%;
      aspect-ratio:2.6;
      min-height:82px;
      border-radius:8px;
      background:#f8fafc;
      box-shadow:inset 0 0 12px rgba(148,163,184,.18);
    }
    .eclipse-map svg{
      display:block;
      width:100%;
      height:100%;
    }
    .eclipse-status{
      line-height:1.25;
      text-align:left;
    }
    .sunlight-title{
      margin-bottom:6px;
      font-weight:bold;
      text-align:center;
      color:var(--fg);
    }
    .sunlight-grid{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:4px 10px;
      align-items:baseline;
    }
    .sunlight-label{
      color:var(--muted);
      white-space:nowrap;
    }
    .sunlight-value{
      color:var(--fg);
      text-align:right;
    }
    .day-night-arc{
      position:relative;
      width:100%;
      height:24px;
      margin-top:10px;
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:999px;
      background:linear-gradient(90deg, #172554 0%, #475569 18%, #facc15 26%, #fde68a 74%, #475569 82%, #172554 100%);
    }
    .day-night-marker{
      position:absolute;
      top:50%;
      width:2px;
      height:18px;
      background:#111827;
      transform:translate(-50%, -50%);
      box-shadow:0 0 0 1px rgba(255,255,255,.75);
    }
    .day-night-now{
      position:absolute;
      top:50%;
      width:10px;
      height:10px;
      border-radius:50%;
      background:#ef4444;
      transform:translate(-50%, -50%);
      box-shadow:0 0 0 2px rgba(255,255,255,.9);
    }
    .light-hours{
      width:100%;
      margin-top:10px;
    }
    .light-hours-title{
      margin-bottom:5px;
      color:var(--muted);
      font-size:.78rem;
      text-align:left;
    }
    .light-hour-arc{
      position:relative;
      width:100%;
      height:18px;
      overflow:hidden;
      border:1px solid var(--border);
      border-radius:999px;
      background:#172554;
    }
    .light-hour-segment{
      position:absolute;
      top:0;
      height:100%;
    }
    .light-hour-segment.day{ background:#fde68a; }
    .light-hour-segment.blue{ background:#3b82f6; }
    .light-hour-segment.golden{ background:#f59e0b; }
    .light-hour-now{
      position:absolute;
      top:50%;
      width:3px;
      height:16px;
      border-radius:999px;
      background:#ef4444;
      transform:translate(-50%, -50%);
      box-shadow:0 0 0 1px rgba(255,255,255,.9);
    }
    .light-hour-legend{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:4px 8px;
      margin-top:6px;
      font-size:.72rem;
      color:var(--muted);
    }
    .light-hour-legend-item{
      display:flex;
      align-items:center;
      gap:5px;
      min-width:0;
    }
    .light-hour-swatch{
      width:18px;
      height:9px;
      border:1px solid var(--border);
      border-radius:999px;
      flex:0 0 auto;
    }
    .light-hour-swatch.blue{ background:#3b82f6; }
    .light-hour-swatch.golden{ background:#f59e0b; }
    .light-hour-swatch.day{ background:#fde68a; }
    .light-hour-swatch.night{ background:#172554; }
    .moon-timeline{
      position:relative;
      width:100%;
      height:46px;
      margin-top:10px;
      border-top:1px solid var(--border);
    }
    .moon-timeline-track{
      position:absolute;
      left:6px;
      right:6px;
      top:22px;
      height:4px;
      border-radius:999px;
      background:linear-gradient(90deg,#111827,#d1d5db,#f8fafc,#d1d5db,#111827);
    }
    .moon-timeline-marker{
      position:absolute;
      top:7px;
      width:22px;
      height:22px;
      display:flex;
      align-items:center;
      justify-content:center;
      transform:translateX(-50%);
      font-size:1rem;
      line-height:1;
      text-shadow:0 1px 2px rgba(0,0,0,.22);
    }
    .moon-timeline-label{
      position:absolute;
      top:30px;
      transform:translateX(-50%);
      font-size:.64rem;
      color:var(--muted);
      white-space:nowrap;
    }
    .moon-timeline-today{
      position:absolute;
      top:8px;
      width:3px;
      height:22px;
      background:var(--accent);
      border-radius:999px;
      transform:translateX(-50%);
    }
    .visibility-card{
      gap:10px;
    }
    .visibility-list{
      width:100%;
      display:grid;
      gap:8px;
    }
    .visibility-color-legend{
      width:100%;
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:6px 10px;
      font-size:.75rem;
      color:var(--muted);
    }
    .visibility-legend-item{
      display:flex;
      align-items:center;
      gap:6px;
      min-width:0;
    }
    .visibility-swatch{
      width:20px;
      height:10px;
      border-radius:999px;
      border:1px solid var(--border);
      flex:0 0 auto;
    }
    .visibility-swatch.night{ background:#172554; }
    .visibility-swatch.twilight{ background:#475569; }
    .visibility-swatch.day{ background:#facc15; }
    .visibility-swatch.window{ background:rgba(0,123,255,.78); }
    .visibility-row{
      display:grid;
      grid-template-columns:72px 1fr 112px;
      grid-template-areas:
        "name track note"
        ". night night";
      gap:10px;
      align-items:center;
      font-size:.84rem;
    }
    .visibility-name{
      grid-area:name;
    }
    .visibility-track{
      grid-area:track;
      position:relative;
      height:12px;
      border-radius:999px;
      overflow:hidden;
      background:linear-gradient(90deg,#172554 0%,#475569 25%,#facc15 50%,#475569 75%,#172554 100%);
    }
    .visibility-fill{
      position:absolute;
      top:0;
      height:100%;
      border-radius:999px;
      background:rgba(0,123,255,.78);
    }
    .visibility-note{
      grid-area:note;
      color:var(--muted);
      text-align:right;
    }
    .visibility-night-detail{
      grid-area:night;
      color:#64748b;
      font-size:.76rem;
      line-height:1.3;
      text-align:right;
    }
    .eclipse-panel{
      width:100%;
      margin-top:4px;
      padding-top:12px;
      border-top:1px solid var(--border);
    }
    .eclipse-summary{
      display:grid;
      gap:4px;
      margin-bottom:10px;
      color:var(--muted);
      font-size:.85rem;
      text-align:left;
    }
    .eclipse-toggle{
      margin:0 auto;
      display:block;
    }
    .eclipse-details{
      margin-top:10px;
      overflow-x:auto;
    }
    .eclipse-details[hidden]{
      display:none;
    }
    .eclipse-table{
      width:100%;
      min-width:520px;
      border-collapse:collapse;
      font-size:.8rem;
      text-align:left;
    }
    .eclipse-table th,
    .eclipse-table td{
      padding:6px 8px;
      border-bottom:1px solid var(--border);
      vertical-align:top;
    }
    .eclipse-table th{
      color:var(--muted);
      font-weight:bold;
    }
    .sky-events-panel{
      margin-top:12px;
    }
    .calendar-toolbar{
      width:100%;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      margin:6px 0 12px;
    }
    .calendar-view-toggle{
      width:100%;
      display:flex;
      justify-content:center;
      gap:8px;
      margin:2px 0 12px;
    }
    .calendar-view-button{
      min-width:96px;
      margin:0;
      padding:8px 14px;
      border:1px solid var(--border);
      border-radius:999px;
      background:#fff;
      color:var(--fg);
      font-size:.84rem;
      font-weight:600;
    }
    .calendar-view-button.active{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
    }
    .calendar-filter{
      margin:0;
      padding:7px 10px;
      font-size:.82rem;
      background:var(--bg);
      color:var(--fg);
      border:1px solid var(--border);
    }
    .calendar-filter.active{
      background:var(--accent);
      color:#fff;
      border-color:var(--accent);
    }
    .calendar-options{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:10px;
      color:var(--muted);
      font-size:.82rem;
    }
    .calendar-options label{
      display:flex;
      align-items:center;
      gap:6px;
      cursor:pointer;
    }
    .calendar-options input{
      margin:0;
    }
    .calendar-next{
      width:100%;
      color:var(--muted);
      font-size:.86rem;
      text-align:left;
      margin-bottom:10px;
    }
    .calendar-downloads{
      width:100%;
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap:8px;
      margin-bottom:12px;
    }
    .calendar-download-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:36px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid rgba(37,99,235,.18);
      background:rgba(37,99,235,.06);
      color:#1d4ed8;
      font-size:.8rem;
      font-weight:600;
      text-decoration:none;
    }
    .calendar-download-link:hover{
      background:rgba(37,99,235,.12);
      text-decoration:none;
    }
    .calendar-detail[hidden]{
      display:none !important;
    }
    .calendar-view-stack{
      position:relative;
      width:100%;
      overflow:hidden;
    }
    .calendar-view-panel{
      position:absolute;
      inset:0;
      visibility:hidden;
      pointer-events:none;
    }
    .calendar-view-panel.is-active{
      position:relative;
      visibility:visible;
      pointer-events:auto;
    }
    .calendar-month-view[hidden],
    .calendar-detail[hidden]{
      display:none !important;
    }
    .calendar-timeline{
      width:100%;
      display:grid;
      gap:10px;
    }
    .calendar-item{
      position:relative;
      display:grid;
      grid-template-columns:auto 1fr;
      gap:10px;
      padding:10px 0 10px 2px;
      border-top:1px solid var(--border);
      text-align:left;
      min-width:0;
    }
    .calendar-item-content{
      min-width:0;
    }
    .calendar-dot{
      width:12px;
      height:12px;
      margin-top:4px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 3px rgba(0,123,255,.12);
    }
    .calendar-item.category-eclipse .calendar-dot{ background:#1d4ed8; }
    .calendar-item.category-meteor .calendar-dot{ background:#7c3aed; }
    .calendar-item.category-planet .calendar-dot{ background:#f59e0b; }
    .calendar-item.category-moon .calendar-dot{ background:#64748b; }
    .calendar-item.category-season .calendar-dot{ background:#16a34a; }
    .calendar-detail-card.category-eclipse .calendar-meta,
    .calendar-month-event.category-eclipse .calendar-month-event-dot,
    .calendar-month-list-item.category-eclipse .calendar-dot,
    .calendar-download-link.category-eclipse{
      background:#1d4ed8;
    }
    .calendar-detail-card.category-meteor .calendar-meta,
    .calendar-month-event.category-meteor .calendar-month-event-dot,
    .calendar-month-list-item.category-meteor .calendar-dot,
    .calendar-download-link.category-meteor{
      background:#7c3aed;
    }
    .calendar-detail-card.category-planet .calendar-meta,
    .calendar-month-event.category-planet .calendar-month-event-dot,
    .calendar-month-list-item.category-planet .calendar-dot,
    .calendar-download-link.category-planet{
      background:#f59e0b;
    }
    .calendar-detail-card.category-moon .calendar-meta,
    .calendar-month-event.category-moon .calendar-month-event-dot,
    .calendar-month-list-item.category-moon .calendar-dot,
    .calendar-download-link.category-moon{
      background:#64748b;
    }
    .calendar-detail-card.category-season .calendar-meta,
    .calendar-month-event.category-season .calendar-month-event-dot,
    .calendar-month-list-item.category-season .calendar-dot,
    .calendar-download-link.category-season{
      background:#16a34a;
    }
    .calendar-date{
      color:var(--muted);
      font-size:.78rem;
      margin-bottom:2px;
    }
    .calendar-title{
      font-weight:700;
      color:var(--fg);
      margin-bottom:3px;
    }
    .calendar-meta{
      display:inline-block;
      margin-bottom:4px;
      padding:2px 7px;
      border-radius:999px;
      background:rgba(0,0,0,.06);
      color:var(--muted);
      font-size:.72rem;
      max-width:100%;
      overflow-wrap:anywhere;
    }
    .calendar-note{
      color:var(--muted);
      font-size:.82rem;
      line-height:1.35;
      overflow-wrap:anywhere;
    }
    .calendar-event-trigger{
      display:block;
      width:100%;
      padding:0;
      border:0;
      background:transparent;
      text-align:left;
      color:inherit;
      cursor:pointer;
    }
    .calendar-event-trigger:hover .calendar-title,
    .calendar-month-list-item:hover .calendar-month-list-title,
    .calendar-month-event:hover .calendar-month-event-label{
      color:var(--accent);
    }
    .calendar-month-view{
      width:100%;
      display:grid;
      align-content:start;
      gap:12px;
    }
    .calendar-month-header{
      width:100%;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:12px;
      text-align:left;
    }
    .calendar-month-title{
      font-size:1.08rem;
      font-weight:700;
      color:var(--fg);
    }
    .calendar-month-subtitle{
      color:var(--muted);
      font-size:.82rem;
    }
    .calendar-month-weekdays{
      width:100%;
      display:grid;
      grid-template-columns:repeat(7, minmax(0, 1fr));
      gap:8px;
    }
    .calendar-month-weekday{
      color:var(--muted);
      font-size:.76rem;
      font-weight:700;
      text-transform:uppercase;
      text-align:center;
    }
    .calendar-month-grid{
      width:100%;
      display:grid;
      grid-template-columns:repeat(7, minmax(0, 1fr));
      gap:8px;
      align-content:start;
    }
    .calendar-month-cell{
      min-height:92px;
      padding:6px;
      border:1px solid var(--border);
      border-radius:12px;
      background:#fff;
      text-align:left;
      display:grid;
      align-content:start;
      gap:5px;
    }
    .calendar-month-cell.is-outside{
      opacity:.35;
    }
    .calendar-month-cell.is-selected-month-day{
      border-color:rgba(37,99,235,.45);
      box-shadow:0 0 0 2px rgba(37,99,235,.08);
    }
    .calendar-month-day{
      font-size:.82rem;
      font-weight:700;
      color:var(--fg);
    }
    .calendar-month-events{
      display:grid;
      gap:2px;
    }
    .calendar-month-event{
      display:flex;
      align-items:flex-start;
      gap:4px;
      width:100%;
      padding:0;
      margin:0;
      border:0;
      background:transparent;
      text-align:left;
      cursor:pointer;
      color:var(--fg);
    }
    .calendar-month-event-dot{
      width:9px;
      height:9px;
      margin-top:2px;
      border-radius:50%;
      background:var(--accent);
      flex:0 0 auto;
    }
    .calendar-month-event-label{
      display:-webkit-box;
      min-width:0;
      font-size:.72rem;
      line-height:1.2;
      overflow:visible;
      text-overflow:clip;
      white-space:normal;
      word-break:break-word;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
    }
    .calendar-detail{
      position:fixed;
      inset:0;
      z-index:1200;
      display:grid;
      place-items:center;
      padding:20px;
    }
    .calendar-detail-backdrop{
      position:absolute;
      inset:0;
      background:rgba(15,23,42,.42);
      backdrop-filter:blur(4px);
    }
    .calendar-detail-card{
      position:relative;
      z-index:1;
      width:min(640px, calc(100vw - 32px));
      max-height:min(78vh, 720px);
      overflow:auto;
      padding:18px;
      border:1px solid var(--border);
      border-radius:20px;
      background:#fff;
      box-shadow:0 24px 80px rgba(15,23,42,.22);
      text-align:left;
      display:grid;
      gap:10px;
    }
    .calendar-detail-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:12px;
    }
    .calendar-detail-actions{
      display:flex;
      align-items:center;
      gap:10px;
    }
    .calendar-detail-date{
      color:var(--muted);
      font-size:.8rem;
      font-weight:600;
    }
    .calendar-detail-title{
      color:var(--fg);
      font-size:1rem;
      font-weight:700;
      line-height:1.3;
    }
    .calendar-detail-download{
      color:#1d4ed8;
      font-size:.8rem;
      font-weight:600;
      text-decoration:none;
      white-space:nowrap;
    }
    .calendar-detail-download:hover{
      text-decoration:underline;
    }
    .calendar-detail-close{
      width:34px;
      height:34px;
      min-width:34px;
      padding:0;
      border:1px solid var(--border);
      border-radius:999px;
      background:#fff;
      color:var(--fg);
      font-size:1.2rem;
      line-height:1;
      box-shadow:none;
    }
    .calendar-detail-close:hover{
      background:#f8fafc;
    }
    .calendar-detail-card .calendar-meta{
      width:max-content;
      max-width:100%;
      color:#fff;
      background:var(--accent);
    }
    .calendar-show-more{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      align-self:center;
      min-height:42px;
      margin-top:12px;
      padding:10px 18px;
      border-radius:12px;
      border:1px solid var(--accent);
      background:var(--accent);
      color:#fff;
      font-size:.9rem;
      font-weight:700;
      opacity:1;
      visibility:visible;
    }
    .calendar-show-more:hover{
      background:#1d4ed8;
      color:#fff;
    }
    .calendar-month-empty{
      grid-column:1 / -1;
      padding:12px;
      border:1px dashed var(--border);
      border-radius:12px;
      background:rgba(15,23,42,.02);
      text-align:center;
    }
    @media (max-width: 820px){
      .calendar-month-header{
        grid-template-columns:1fr;
        display:grid;
      }
      .calendar-month-weekdays,
      .calendar-month-grid{
        gap:6px;
      }
      .calendar-month-cell{
        min-height:96px;
        padding:6px;
      }
    }
    @media (max-width: 640px){
      .calendar-view-toggle{
        flex-wrap:wrap;
      }
      .calendar-month-weekdays{
        display:none;
      }
      .calendar-month-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .calendar-month-cell{
        min-height:104px;
        padding:6px;
      }
      .calendar-detail-head{
        display:grid;
      }
      .calendar-detail{
        padding:12px;
      }
      .calendar-detail-card{
        width:min(100vw - 16px, 560px);
        max-height:min(84vh, 900px);
        padding:16px;
        border-radius:18px;
      }
      .calendar-detail-actions{
        justify-content:space-between;
      }
    }

    .bsky-card{
      gap:10px;
    }
    .bsky-card[hidden]{
      display:none;
    }
    .bsky-status{
      width:100%;
      color:var(--muted);
      font-size:.86rem;
      text-align:center;
    }
    .bsky-account-note{
      color:var(--muted);
      font-size:.82rem;
      text-align:left;
      line-height:1.3;
    }
    .bsky-post{
      width:100%;
      display:grid;
      gap:10px;
    }
    .bsky-list{
      width:100%;
      display:grid;
      gap:14px;
      max-height:720px;
      overflow-y:auto;
      padding-right:4px;
    }
    .bsky-feed-item{
      display:grid;
      gap:10px;
      padding-top:12px;
      border-top:1px solid var(--border);
    }
    .bsky-feed-item:first-child{
      padding-top:0;
      border-top:0;
    }
    .bsky-author{
      display:grid;
      grid-template-columns:auto 1fr;
      gap:10px;
      align-items:center;
      text-align:left;
    }
    .bsky-avatar{
      width:42px;
      height:42px;
      border-radius:50%;
      object-fit:cover;
      background:var(--bg);
      border:1px solid var(--border);
    }
    .bsky-avatar-placeholder{
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--muted);
      font-weight:700;
    }
    .bsky-author-name{
      font-weight:700;
      color:var(--fg);
    }
    .bsky-date{
      color:var(--muted);
      font-size:.78rem;
    }
    .bsky-text{
      margin:0;
      color:var(--fg);
      font-size:.9rem;
      line-height:1.35;
      text-align:left;
      overflow-wrap:anywhere;
      white-space:pre-line;
    }
    .bsky-images{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:8px;
      width:100%;
    }
    .bsky-images.single{
      grid-template-columns:1fr;
    }
    .bsky-image{
      width:100%;
      aspect-ratio:1;
      object-fit:cover;
      border-radius:8px;
      border:1px solid var(--border);
      background:var(--bg);
    }
    .bsky-images.single .bsky-image{
      aspect-ratio:16 / 10;
    }
    .bsky-link{
      align-self:center;
      margin-top:2px;
      color:var(--accent);
      font-size:.88rem;
      text-decoration:none;
    }
    .bsky-link:hover{
      text-decoration:underline;
    }

    /* Other planet systems */
    .planet-systems-wrap{
      width:100%;
      display:flex;
      justify-content:center;
    }
    .planet-systems{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:center;
    }
    .planet-system{
      position:relative;
      width:210px;
      height:240px;
    }
    .planet{
      position:absolute;
      left:50%;
      top:50%;
      width:26px;
      height:26px;
      margin:-13px 0 0 -13px;
      border-radius:50%;
      box-shadow:0 0 10px rgba(0,0,0,.4);
    }
    .planet.mars{
      background: radial-gradient(circle at 30% 30%, #f4a460, #b7410e);
    }
    .planet.saturn{
      background: radial-gradient(circle at 30% 30%, #f5deb3, #c2a27a);
    }
    .planet.uranus{
      background: radial-gradient(circle at 30% 30%, #b0e0e6, #5f9ea0);
    }
    .planet.neptune{
      background: radial-gradient(circle at 30% 30%, #6a5acd, #191970);
    }
    .planet-orbit{
      position:absolute;
      left:50%;
      top:50%;
      border-radius:50%;
      border:1px dashed var(--border);
      transform: translate(-50%,-50%);
      animation: spin linear infinite;
    }
    .planet-moon{
      position:absolute;
      left:50%;
      top:0;
      width:6px;
      height:6px;
      margin-left:-3px;
      border-radius:50%;
      background:#f5f5f5;
      box-shadow:0 0 4px rgba(0,0,0,.4);
    }
    .planet-name{
      position:absolute;
      bottom:0;
      width:100%;
      text-align:center;
      font-size:.8rem;
      color:var(--fg);
    }
    .planet-moon-label{
      position:absolute;
      left:50%;
      top:0;
      transform: translate(-50%,-160%);
      font-size:.65rem;
      color:var(--fg);
      white-space:nowrap;
    }

    @media (min-width:1180px){
      .earth-card{
        min-height:0;
      }
      .overlay-controls{
        width:min(100%, 1280px);
      }
      .date-toolbar{
        flex-wrap:nowrap;
        align-items:center;
      }
      .date-toolbar-slider{
        flex:1 1 340px;
        min-width:240px;
      }
      .date-toolbar-actions{
        flex:0 0 auto;
      }
      .location-control{
        flex:0 1 220px;
        min-width:0;
        max-width:220px;
        margin-left:auto;
        justify-content:flex-end;
      }
      .location-control select{
        min-width:0;
      }
    }
    @media (max-width:1180px){
      .solar-stack{
        grid-column:span 1;
      }
    }
    @media (max-width:900px){
      body{
        padding:16px;
      }
      .grid{
        grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr));
        gap:16px;
      }
      .visibility-row{
        grid-template-columns:56px minmax(90px,1fr) 62px;
        gap:7px;
        font-size:.78rem;
      }
    }
    @media (max-width:760px){
      body{
        padding:12px;
      }
      .grid{
        grid-template-columns:minmax(0,1fr);
        grid-auto-rows:auto;
        grid-auto-flow:row;
        gap:14px;
      }
      .display-container{
        grid-row:auto !important;
      }
      .jupiter-system{
        width:min(100%, 360px);
      }
      .date-location-card{
        padding:8px 10px;
        gap:6px;
      }
      .overlay-controls{
        top:8px;
        width:calc(100% - 8px);
        margin-bottom:10px;
      }
      .date-mobile-bar{
        display:flex;
        cursor:pointer;
      }
      .date-location-card.mobile-collapsed{
        padding:8px 10px;
      }
      .date-location-card.mobile-collapsed .date-mobile-panel{
        display:none;
      }
      .date-location-card.mobile-collapsed .date-mobile-bar{
        min-height:40px;
      }
      .date-toolbar{
        gap:8px;
      }
      .date-toolbar > .control-date-readout{
        display:none;
      }
      .date-toolbar-slider,
      .date-toolbar-actions,
      .location-control{
        flex-basis:100%;
      }
      .date-toolbar-actions{
        display:grid;
        grid-template-columns:repeat(2, minmax(0, 1fr));
        justify-content:stretch;
        gap:6px;
      }
      .date-toolbar-actions button{
        width:100%;
        min-height:42px;
        padding:8px 10px;
        font-size:.95rem;
      }
      #btnSolarPrevYear{ order:1; }
      #btnSolarNextYear{ order:2; }
      #btnSolarPrevMonth{ order:3; }
      #btnSolarNextMonth{ order:4; }
      #btnSolarPrevWeek{ order:5; }
      #btnSolarNextWeek{ order:6; }
      #btnSolarPrev{ order:7; }
      #btnSolarNext{ order:8; }
      #btnSolarToday{
        order:9;
        grid-column:1 / -1;
        margin-bottom:0;
      }
      #btnSolarAutoplay{
        order:10;
        grid-column:1 / -1;
      }
      .location-control{
        margin-right:0;
      }
      .small-bodies-label{
        font-size:13px;
        stroke-width:4px;
      }
      .constellation-month-label{
        font-size:11px;
      }
      .constellation-name-label{
        font-size:14px;
      }
      .season-label{
        font-size:12px;
        stroke-width:4px;
      }
      .season-month-label{
        font-size:10.5px;
        stroke-width:4px;
      }
      .season-declination-label{
        font-size:11px;
        stroke-width:4px;
      }
      .spacecraft-label{
        font-size:12px;
        stroke-width:4px;
      }
    }

    /* Input error state for countdown */
    #countdownMinutes.error {
      border: 2px solid red;
      box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
    }


    /* Fancy time styles */
    @keyframes wobble{
      0%,100%{ transform:rotate(-4deg); }
      50%{ transform:rotate(4deg); }
    }
    @keyframes pulse{
      0%,100%{ transform:scale(1); }
      50%{ transform:scale(1.08); }
    }
    @keyframes spinTime{
      to{ transform:rotate(360deg); }
    }
    .time-plain{}
    .time-wobble{ animation:wobble 1.2s infinite; }
    .time-pulse{ animation:pulse 1.1s infinite; }
    .time-spin{ animation:spinTime 6s linear infinite; }
    .time-matrix{
      font-family:"Courier New",monospace;
      color:#22c55e;
      text-shadow:0 0 6px #16a34a;
    }
    .time-neon{
      color:#60a5fa;
      text-shadow:0 0 6px #3b82f6, 0 0 14px #1d4ed8;
    }
    .time-segment{
      font-family:"Courier New",monospace;
      letter-spacing:4px;
      text-shadow:0 0 2px rgba(0,0,0,.8);
    }
    .card-help{
      position:absolute;
      top:14px;
      right:14px;
      z-index:8;
    }
    .card-help.open{
      z-index:32;
    }
    .card-help-button{
      width:34px;
      height:34px;
      margin:0;
      padding:0;
      border-radius:50%;
      border:1px solid rgba(148,163,184,.45);
      background:#fff;
      color:#1d4ed8;
      font-size:1rem;
      font-weight:700;
      box-shadow:0 8px 20px rgba(15,23,42,.10);
    }
    .card-help-button:hover,
    .card-help-button:focus-visible{
      background:#eff6ff;
      color:#1e40af;
      outline:none;
    }
    .card-help-popup{
      position:absolute;
      top:42px;
      right:0;
      width:min(420px, calc(100vw - 52px));
      max-height:min(68vh, 620px);
      overflow:auto;
      padding:16px 16px 14px;
      border:1px solid #dbeafe;
      border-radius:16px;
      background:rgba(255,255,255,.98);
      color:#0f172a;
      box-shadow:0 24px 60px rgba(15,23,42,.18);
      backdrop-filter:blur(10px);
      display:none;
      text-align:left;
    }
    .card-help.open .card-help-popup{
      display:block;
    }
    .card-help-title{
      font-size:1rem;
      font-weight:700;
      color:#0f172a;
      margin-bottom:10px;
    }
    .card-help-section + .card-help-section{
      margin-top:12px;
    }
    .card-help-section h4{
      margin:0 0 8px;
      font-size:.86rem;
      letter-spacing:.02em;
      text-transform:uppercase;
      color:#475569;
    }
    .card-help-section p{
      margin:0 0 8px;
      line-height:1.45;
      color:#334155;
    }
    .card-help-list{
      margin:0;
      padding-left:18px;
      color:#334155;
    }
    .card-help-list li + li{
      margin-top:6px;
    }
    .card-help-formulas{
      display:grid;
      gap:8px;
    }
    .card-help-formula{
      padding:10px 12px;
      border:1px solid #dbeafe;
      border-radius:12px;
      background:linear-gradient(180deg,#f8fbff,#eff6ff);
    }
    .card-help-formula-expr{
      font-family:"Cambria Math","Times New Roman",serif;
      font-size:1rem;
      color:#0f172a;
      white-space:normal;
    }
    .card-help-formula-note{
      margin-top:5px;
      font-size:.85rem;
      color:#64748b;
    }
    .card-help-links{
      display:grid;
      gap:8px;
    }
    .card-help-link{
      display:block;
      padding:10px 12px;
      border:1px solid #dbeafe;
      border-radius:12px;
      background:#f8fbff;
      color:#1d4ed8;
      text-decoration:none;
      font-weight:600;
    }
    .card-help-link:hover,
    .card-help-link:focus-visible{
      background:#eff6ff;
      color:#1e40af;
      outline:none;
    }
    @media (max-width:640px){
      .card-help-popup{
        right:-4px;
        width:min(360px, calc(100vw - 28px));
      }
    }

/* ============================================
   MOBILE USABILITY IMPROVEMENTS
   ============================================ */

/* --- Base Touch Targets --- */
button {
  min-width: 48px;
  min-height: 48px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s ease;
}

button:active {
  transform: scale(0.96);
  background: var(--bg);
}

button:focus, input:focus, select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Specific button classes */
.solar-step-button, .date-today-button, .date-auto-button {
  min-width: 56px;
  padding: 10px 14px;
}

button[aria-label^="Previous"], button[aria-label^="Next"] {
  min-width: 56px;
}

/* --- Form Elements --- */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--border);
  outline: none;
  margin: 12px 0;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  transition: transform 0.2s;
}

input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.2);
}

input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent);
  cursor: pointer;
  border: none;
}

select {
  min-height: 48px;
  padding: 12px 16px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
}

#locationSelector {
  min-width: 180px;
  width: 100%;
  min-height: 0;
}

/* --- Mobile Layout (max-width: 768px) --- */
@media (max-width: 768px) {
  body {
    padding: 16px 12px;
    font-size: 15px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .display-container {
    min-width: 100%;
    width: 100%;
  }

  .display-container[data-help-key] {
    padding-top: 18px;
    padding-right: 46px;
  }

  .overlay-controls {
    top: 8px;
    padding: 0 8px;
  }

  .date-toolbar {
    flex-wrap: wrap;
    gap: 8px;
  }

  .date-mobile-actions {
    gap: 5px;
  }

  .date-mobile-actions button {
    min-height: 32px;
    padding: 6px 9px;
    font-size: 0.84rem;
  }

  .solar-slider-row {
    width: 100%;
    order: 3;
  }

  .solar-slider-row input[type="range"] {
    width: 100%;
    margin: 8px 0;
  }

  .date-toolbar-actions {
    gap: 8px;
  }

  .group-title {
    font-size: 1.1rem;
    margin-bottom: 12px;
    padding-right: 0;
  }

  .display-container[data-help-key] .group-title {
    width: calc(100% - 42px);
    max-width: calc(100% - 42px);
    align-self: center;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.2;
    text-align: center;
  }

  .card-help {
    top: 10px;
    right: 10px;
  }

  .card-help-button {
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    font-size: 0.68rem;
    line-height: 1;
    padding: 0;
  }

  .legend-small {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  #time, #date {
    font-size: 2rem;
  }

}

/* --- Extra Small Devices (max-width: 400px) --- */
@media (max-width: 400px) {
  .date-mobile-summary {
    min-width: 0;
  }

  .mobile-readout {
    font-size: 0.95rem;
  }

  .mobile-location-readout {
    font-size: 0.78rem;
  }

  .date-mobile-actions {
    gap: 4px;
  }

  .date-mobile-actions button {
    min-width: 30px;
    min-height: 30px;
    padding: 5px 8px;
  }

  .display-container[data-help-key] {
    padding-right: 42px;
  }

  .display-container[data-help-key] .group-title {
    width: calc(100% - 38px);
    max-width: calc(100% - 38px);
    text-align: center;
  }

  .card-help {
    top: 8px;
    right: 8px;
  }

  .card-help-button {
    width: 17px;
    height: 17px;
    min-width: 17px;
    min-height: 17px;
    font-size: 0.64rem;
  }

  .date-toolbar-actions {
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:5px;
  }

  #btnSolarPrevYear{ order:1; }
  #btnSolarNextYear{ order:2; }
  #btnSolarPrevMonth{ order:3; }
  #btnSolarNextMonth{ order:4; }
  #btnSolarPrevWeek{ order:5; }
  #btnSolarNextWeek{ order:6; }
  #btnSolarPrev{ order:7; }
  #btnSolarNext{ order:8; }
  #btnSolarToday{
    order:9;
    grid-column:1 / -1;
  }
  #btnSolarAutoplay{
    order:10;
    grid-column:1 / -1;
  }
}