:root{--background:#0f172a;--foreground:#f8fafc;--card-bg:#1e293b;--border:#334155;--accent:#f59e0b;--accent-hover:#d97706;--text-muted:#94a3b8;--success:#34d399;--warning:#fbbf24;--error:#f87171}*{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;overflow-x:hidden}body{background:var(--background);color:var(--foreground);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;width:100%;min-height:100vh;margin:0;padding:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif;position:relative;overflow-x:hidden}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}.app{flex-direction:column;width:100%;max-width:100vw;min-height:100vh;display:flex;overflow-x:hidden}.header{background:var(--card-bg);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;width:100%;padding:1.5rem;display:flex}.header h1{align-items:center;gap:.5rem;font-size:1.25rem;display:flex}.header-actions{gap:.5rem;display:flex}.header-btn{border:1px solid var(--border);color:var(--foreground);cursor:pointer;background:0 0;border-radius:6px;align-items:center;gap:.25rem;padding:.5rem .75rem;font-size:.85rem;transition:all .2s;display:flex}.header-btn:hover{background:var(--border)}.main-content{width:100%;min-width:0;max-width:900px;margin:0 auto;padding:1.5rem;overflow-x:hidden}.calendar-header{justify-content:space-between;align-items:center;margin-bottom:1.5rem;display:flex}.calendar-nav{align-items:center;gap:1rem;display:flex}.calendar-nav button{background:var(--card-bg);border:1px solid var(--border);color:var(--foreground);cursor:pointer;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.calendar-nav button:hover{background:var(--border)}.calendar-nav h2{text-align:center;min-width:200px;font-size:1.5rem}.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;min-width:0;display:grid}.calendar-grid-wrapper{-webkit-overflow-scrolling:touch;width:100%;padding-bottom:4px;overflow-x:auto}.calendar-weekday{text-align:center;color:var(--text-muted);padding:.5rem;font-size:.85rem;font-weight:600}.calendar-day{background:var(--card-bg);border:1px solid var(--border);cursor:pointer;border-radius:8px;min-height:115px;padding:.5rem;transition:all .2s}.calendar-day:hover{border-color:var(--accent)}.calendar-day.today:not(.selected){border-color:var(--accent);border-style:dashed}.calendar-day.other-month{opacity:.4}.calendar-day.selected{border-color:var(--accent);background:#f59e0b26;border-width:2px}.day-number{margin-bottom:.5rem;font-size:.9rem;font-weight:600}.day-moon{flex-direction:column;align-items:center;gap:.25rem;display:flex}.moon-icon{width:32px;height:32px}.day-moon svg{max-width:100%;height:auto}.moon-age{color:var(--text-muted);font-size:.75rem}.moon-info-panel{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;margin-top:1.5rem;padding:1.5rem}.moon-info-header{border-bottom:1px solid var(--border);align-items:center;gap:1.5rem;margin-bottom:1rem;padding-bottom:1rem;display:flex}.moon-icon-wrapper{flex-shrink:0;justify-content:center;align-items:center;width:96px;height:96px;display:flex}.moon-info-header h3{font-size:1.25rem}.moon-info-header .moon-phase-name{color:var(--text-muted);font-size:.9rem}.moon-details{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1rem;display:grid}.moon-detail-item{flex-direction:column;gap:.25rem;display:flex}.moon-detail-label{color:var(--text-muted);font-size:.8rem}.moon-detail-value{font-size:1rem;font-weight:500}.moon-location{color:var(--text-muted);border-top:1px solid var(--border);align-items:center;gap:.5rem;margin-top:1rem;padding-top:1rem;font-size:.85rem;display:flex}.next-phases{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}.next-phases h4{color:var(--text-muted);margin-bottom:.75rem;font-size:.9rem;font-weight:500}.next-phases-grid{grid-template-columns:repeat(4,1fr);gap:.5rem;display:grid}.next-phase-item{background:#0003;border-radius:8px;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem;display:flex}.next-phase-item .phase-icon{font-size:1.5rem}.next-phase-item .phase-name{color:var(--text-muted);text-align:center;font-size:.7rem}.next-phase-item .phase-date{font-size:.85rem;font-weight:600}.night-timeline{border-top:1px solid var(--border);margin-top:1rem;padding-top:1rem}.night-timeline h4{color:var(--text-muted);margin-bottom:.75rem;font-size:.9rem;font-weight:500}.timeline-container{margin-bottom:.75rem;padding-top:2.5rem}.timeline-bar{background:linear-gradient(90deg,#1a237e,#0d1b2a,#1a237e);border-radius:6px;height:48px;margin:0 12px;position:relative;overflow:clip visible}.timeline-twilight{background:linear-gradient(#3949ab 0%,#1a237e 100%);height:100%;position:absolute;top:0}.timeline-dark{background:linear-gradient(#050510 0%,#0a0a18 50%,#050510 100%);height:100%;position:absolute;top:0;box-shadow:inset 0 0 8px #ffffff0d}.timeline-moon{pointer-events:none;background:linear-gradient(#ffdb7566,#ffdb7526);border-top:2px solid #ffdb7599;height:100%;position:absolute;top:0}.timeline-marker{z-index:10;background:#00000080;border:1px solid #ffdb7580;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;display:flex;position:absolute;top:50%;transform:translate(-50%,-50%)}.altitude-curve{pointer-events:none;z-index:5;width:100%;height:100%;position:absolute;top:0;left:0}.timeline-marker .marker-label{color:#ffdb75;font-size:.7rem;font-weight:700}.timeline-marker.transit{background:#ffdb754d;border-color:#ffdb75cc;width:18px;height:18px}.timeline-marker.transit .marker-label{font-size:.45rem}.transit-label{color:#ffdb75;white-space:nowrap;z-index:15;flex-direction:column;align-items:center;padding-bottom:.25rem;font-family:monospace;font-size:.7rem;display:flex;position:absolute;bottom:100%;transform:translate(-50%)}.transit-label .transit-alt{color:var(--text-muted);font-size:.6rem}.moon-time-label{color:#ffdb75;white-space:nowrap;z-index:15;text-shadow:0 1px 2px #000c;flex-direction:column;align-items:center;font-family:monospace;font-size:.6rem;display:flex;position:absolute;bottom:4px;transform:translate(-50%)}.moon-time-label .time-value{font-weight:600}.moon-time-label .time-name{color:var(--text-muted);font-size:.5rem}.timeline-labels{justify-content:space-between;align-items:center;margin-top:.5rem;margin-left:12px;margin-right:12px;font-size:.7rem;display:flex}.timeline-label-time{color:var(--text-muted);align-items:center;gap:.25rem;font-family:monospace;display:flex}.timeline-label-time .label-icon{color:#ffa726;font-size:.65rem}.timeline-label-center{color:#5c6b7a;text-transform:uppercase;letter-spacing:.05em;font-size:.65rem}.timeline-moon-times{color:#ffdb75;flex-wrap:wrap;justify-content:center;gap:.75rem 1.5rem;margin-top:.5rem;font-family:monospace;font-size:.75rem;display:flex}.location-selector{background:var(--card-bg);border:1px solid var(--border);cursor:pointer;border-radius:8px;align-items:center;gap:.5rem;padding:.75rem 1rem;transition:all .2s;display:flex}.location-selector:hover{border-color:var(--accent)}.location-selector select{color:var(--foreground);cursor:pointer;background:0 0;border:none;flex:1;font-size:.9rem}.location-selector select:focus{outline:none}.dark-night-bar{background:var(--border);border-radius:4px;height:8px;margin-top:.5rem;overflow:hidden}.dark-night-fill{background:linear-gradient(90deg,#1e293b 0%,#0f172a 50%,#1e293b 100%);border-radius:4px;height:100%}@media (max-width:768px){.calendar-day{min-height:95px;padding:.25rem}.day-number{font-size:.8rem}.moon-age{font-size:.65rem}.calendar-nav h2{min-width:150px;font-size:1.1rem}.header h1{font-size:1rem}.moon-details,.next-phases-grid{grid-template-columns:repeat(2,1fr)}.moon-icon-wrapper,.moon-icon-wrapper svg{width:72px;height:72px}.timeline-container{padding-top:2rem}.timeline-bar{height:40px;margin:0 8px}.transit-label{font-size:.6rem}.transit-label .transit-alt{font-size:.5rem}.moon-time-label{display:none}.timeline-labels{margin-left:8px;margin-right:8px;font-size:.6rem}.timeline-label-center{display:none}.timeline-moon-times{gap:.5rem 1rem;font-size:.65rem}}@media (max-width:480px){.header{padding:.75rem .5rem}.main-content{max-width:100%;margin:0;padding:.5rem}.calendar-grid{grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}.calendar-weekday{padding:.25rem 0;font-size:.65rem}.calendar-day{min-height:60px;padding:.25rem}.day-number{margin-bottom:.25rem;font-size:.75rem}.moon-age{font-size:.55rem}.day-moon svg{width:32px;height:32px}.timeline-container{padding-top:1.5rem}.timeline-bar{height:36px;margin:0 4px}.transit-label{font-size:.55rem}.timeline-labels{margin-left:4px;margin-right:4px;font-size:.55rem}.timeline-label-time .label-icon{font-size:.5rem}.timeline-moon-times{flex-direction:column;align-items:center;gap:.25rem;font-size:.6rem}.timeline-marker.transit{width:14px;height:14px}}