:root {
  --sun-ink: #142033;
  --sun-muted: #61708a;
  --sun-line: #d8e2ee;
  --sun-soft: #f4f7fb;
  --sun-sky: #eaf4fa;
  --sun-teal: #087f6d;
  --sun-teal-soft: #e4f3ef;
  --sun-amber: #f2a51f;
  --sun-coral: #df6b50;
}

.sun-page { color: var(--sun-ink); }
.sun-page * { box-sizing: border-box; }
.sun-heading { margin: 0 0 30px; }
.sun-eyebrow { margin: 0 0 10px; color: var(--sun-teal); font-size: 15px; font-weight: 800; }
.sun-heading h1 { margin: 0; color: #111827; font-size: 46px; line-height: 1.18; }
.sun-heading > p:last-child { max-width: 760px; margin: 22px 0 0; color: var(--sun-muted); font-size: 20px; line-height: 1.8; }

.sun-tool { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.18fr); overflow: hidden; margin-bottom: 48px; border: 1px solid var(--sun-line); border-radius: 8px; background: #fff; }
.sun-controls, .sun-results { min-width: 0; padding: 26px; }
.sun-controls { border-right: 1px solid var(--sun-line); background: var(--sun-soft); }
.sun-controls > header, .result-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.sun-controls h2, .result-heading h2 { margin: 0; color: var(--sun-ink); font-size: 25px; line-height: 1.35; }
.browser-badge { flex: none; padding: 7px 10px; border-radius: 999px; background: var(--sun-teal-soft); color: var(--sun-teal); font-size: 12px; font-weight: 800; }

.source-tabs { display: grid; grid-template-columns: 1fr 1fr; margin: 24px 0 20px; border: 1px solid var(--sun-line); border-radius: 8px; background: #fff; }
.source-tabs button { min-height: 48px; margin: 0; padding: 10px 8px; border: 0; border-radius: 7px; background: transparent; color: #52617a; font-size: 14px; font-weight: 800; letter-spacing: 0; white-space: nowrap; box-shadow: none; }
.source-tabs button.is-active { background: var(--sun-teal); color: #fff; }
.source-panel { min-height: 114px; }
.source-panel label, .date-control label { display: block; margin: 0; }
.source-panel label > span, .date-control label > span { display: block; margin: 0 0 8px; color: #26344a; font-size: 14px; font-weight: 800; }
.source-panel select, .date-control input { width: 100%; height: 50px; margin: 0; padding: 0 14px; border: 1px solid var(--sun-line); border-radius: 8px; background-color: #fff; color: var(--sun-ink); font-size: 16px; }
.source-panel > p, .gps-panel p { margin: 9px 0 0; color: var(--sun-muted); font-size: 13px; line-height: 1.6; }
.gps-panel button { width: 100%; min-height: 50px; margin: 0; border: 1px solid #9dcfc3; border-radius: 8px; background: #fff; color: var(--sun-teal); font-weight: 800; box-shadow: none; }
.gps-panel button span { margin-right: 6px; font-size: 20px; }
.gps-panel button:disabled { cursor: wait; opacity: .65; }

.date-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; margin-top: 18px; }
.quiet-button, .copy-button { min-height: 50px; margin: 0; padding: 0 16px; border: 1px solid var(--sun-line); border-radius: 8px; background: #fff; color: #34445d; font-weight: 800; box-shadow: none; }
.location-preview { margin-top: 18px; padding: 16px; border: 1px solid var(--sun-line); border-radius: 8px; background: #fff; }
.location-preview span, .location-preview small { display: block; color: var(--sun-muted); }
.location-preview span { margin-bottom: 4px; font-size: 12px; font-weight: 700; }
.location-preview strong { display: block; margin-bottom: 5px; color: var(--sun-ink); font-size: 17px; }
.location-preview small { font-size: 12px; line-height: 1.5; }
.primary-button { width: 100%; min-height: 52px; margin: 16px 0 0; border: 0; border-radius: 8px; background: var(--sun-teal); color: #fff; font-size: 16px; font-weight: 900; box-shadow: none; }
.primary-button:hover, .source-tabs button.is-active:hover { background: #066b5c; }
.tool-status { min-height: 22px; margin: 10px 0 0; color: var(--sun-muted); font-size: 13px; line-height: 1.6; }
.tool-status.is-error { color: #b6432d; }
.tool-status.is-success { color: var(--sun-teal); }

.sun-results { background: #fff; }
.result-heading { padding-bottom: 20px; border-bottom: 1px solid var(--sun-line); }
.result-heading > div > span { display: block; margin-bottom: 4px; color: var(--sun-muted); font-size: 13px; }
.result-heading p { margin: 5px 0 0; color: var(--sun-muted); font-size: 12px; line-height: 1.5; }
.sun-state { flex: none; padding: 7px 10px; border-radius: 999px; background: var(--sun-teal-soft); color: var(--sun-teal); font-size: 12px; font-weight: 800; }
.sun-state.is-night { background: #e9edf4; color: #506078; }
.sun-state.is-twilight { background: #fff1df; color: #a95a1d; }

.primary-times { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.primary-times article { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px; border: 1px solid var(--sun-line); border-radius: 8px; }
.primary-times small, .primary-times span { display: block; }
.primary-times small { margin-bottom: 2px; color: var(--sun-muted); font-weight: 700; }
.primary-times strong { display: block; color: var(--sun-ink); font-size: 30px; line-height: 1.15; }
.primary-times div > span { margin-top: 4px; color: var(--sun-muted); font-size: 11px; }
.sun-disc { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--sun-amber); box-shadow: 0 0 0 7px #fff3d8; }
.set-time .sun-disc { background: var(--sun-coral); box-shadow: 0 0 0 7px #fae7e2; }

.sun-path { margin-top: 18px; padding: 14px 14px 10px; border: 1px solid #cfe1ec; border-radius: 8px; background: var(--sun-sky); }
.sun-arc-line { position: relative; height: 112px; overflow: hidden; }
.sun-arc-line::before { position: absolute; right: 8%; bottom: -50px; left: 8%; height: 130px; border: 2px solid #97b8ca; border-bottom: 0; border-radius: 50% 50% 0 0; content: ''; }
.sun-arc-line::after { position: absolute; right: 0; bottom: 8px; left: 0; height: 1px; background: #b9cfdb; content: ''; }
.sun-marker { position: absolute; z-index: 1; top: 92px; left: 8%; width: 24px; height: 24px; border-radius: 50%; background: var(--sun-amber); box-shadow: 0 0 0 6px rgba(242, 165, 31, .18); transform: translate(-50%, -50%); transition: left .35s ease, top .35s ease; }
.sun-path-labels { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; color: #51677a; font-size: 11px; font-weight: 700; }
.sun-path-labels span:nth-child(2) { text-align: center; }
.sun-path-labels span:last-child { text-align: right; }

.result-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.result-metrics > div { min-width: 0; padding: 13px; border: 1px solid var(--sun-line); border-radius: 8px; background: var(--sun-soft); }
.result-metrics span { display: block; margin-bottom: 5px; color: var(--sun-muted); font-size: 11px; }
.result-metrics strong { color: var(--sun-ink); font-size: 16px; }
.tomorrow-strip { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 14px; border-left: 3px solid var(--sun-amber); background: #fff8e9; }
.tomorrow-strip div span { display: block; color: #8c6b29; font-size: 11px; }
.tomorrow-strip div strong { color: var(--sun-ink); font-size: 14px; }
.tomorrow-strip p { display: flex; gap: 12px; margin: 0; color: #6d5a36; font-size: 12px; }
.tomorrow-strip b { color: var(--sun-ink); }
.copy-button { width: 100%; margin-top: 14px; }

.sun-guide { padding-top: 4px; }
.sun-guide > header { margin-bottom: 22px; }
.sun-guide h2 { margin: 0; color: var(--sun-ink); font-size: 30px; }
.sun-guide > header > p:last-child { margin: 12px 0 0; color: var(--sun-muted); font-size: 17px; line-height: 1.75; }
.guide-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.guide-steps article, .guide-grid section { border: 1px solid var(--sun-line); border-radius: 8px; background: #fff; }
.guide-steps article { padding: 18px; }
.guide-steps article > span { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 28px; margin-bottom: 13px; border-radius: 6px; background: var(--sun-teal-soft); color: var(--sun-teal); font-size: 12px; font-weight: 900; }
.guide-steps h3, .guide-grid h3, .sun-reference h3 { margin: 0 0 8px; color: var(--sun-ink); font-size: 17px; }
.guide-steps p, .guide-grid p { margin: 0; color: var(--sun-muted); font-size: 14px; line-height: 1.75; }
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guide-grid section { padding: 20px; background: var(--sun-soft); }
.sun-reference { margin-top: 18px; padding: 22px; border-top: 1px solid var(--sun-line); border-bottom: 1px solid var(--sun-line); }
.sun-reference > div { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; }
.sun-reference dl { display: grid; grid-template-columns: 90px 1fr; gap: 10px; margin: 0; padding: 12px 0; border-bottom: 1px solid #e6ecf3; }
.sun-reference dt { color: var(--sun-teal); font-weight: 800; }
.sun-reference dd { margin: 0; color: var(--sun-muted); font-size: 13px; line-height: 1.6; }
.privacy-note { margin-top: 18px; padding: 18px; border: 1px solid #c8e2da; border-radius: 8px; background: #f0f8f5; }
.privacy-note strong { color: var(--sun-teal); }
.privacy-note p { margin: 7px 0 0; color: #4e665f; font-size: 13px; line-height: 1.7; }
.source-note { margin: 14px 0 0; color: var(--sun-muted); font-size: 12px; line-height: 1.7; }
.source-note a { color: var(--sun-teal); }

@media (max-width: 980px) {
  .sun-tool { grid-template-columns: 1fr; }
  .sun-controls { border-right: 0; border-bottom: 1px solid var(--sun-line); }
}

@media (max-width: 640px) {
  .sun-heading h1 { font-size: 34px; }
  .sun-heading > p:last-child { margin-top: 16px; font-size: 17px; line-height: 1.7; }
  .sun-controls, .sun-results { padding: 20px; }
  .sun-controls > header { align-items: center; }
  .primary-times { grid-template-columns: 1fr; }
  .primary-times article { min-height: 92px; }
  .result-metrics { grid-template-columns: 1fr 1fr; }
  .tomorrow-strip { align-items: flex-start; flex-direction: column; }
  .guide-steps, .guide-grid, .sun-reference > div { grid-template-columns: 1fr; }
  .sun-guide h2 { font-size: 26px; }
  .sun-reference { padding: 18px 0; }
}

@media (max-width: 390px) {
  .source-tabs { grid-template-columns: 1fr; }
  .source-tabs button { min-height: 44px; }
  .date-control { grid-template-columns: 1fr; }
  .date-control .quiet-button { width: 100%; }
  .result-metrics { grid-template-columns: 1fr; }
  .sun-path-labels { font-size: 10px; }
  .tomorrow-strip p { flex-direction: column; gap: 4px; }
}