.skytime-settings { display: grid; gap: 22px; }
.skytime-settings .logbook-panel { margin: 0; }
.skytime-settings h2 { margin-top: 0; font-size: 20px; }
.skytime-settings h3 { margin-top: 24px; }
.skytime-settings p { line-height: 1.6; }
.skytime-settings form { margin-top: 16px; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.skytime-settings select { width: 100%; padding: 10px 12px; border: 1px solid #bac7d3; border-radius: 6px; background: white; color: #172f47; font: inherit; min-height: 44px; }
.settings-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.settings-preview { margin-top: 20px; border: 1px solid #92b1c7; border-radius: 10px; background: #f0f7fc; padding: 20px; }
.settings-preview h3 { margin-top: 0; }
.settings-preview dl { display: flex; flex-wrap: wrap; gap: 24px; }
.settings-preview dd { margin: 5px 0 0; font-size: 24px; font-weight: 650; }
.settings-events { margin: 0; padding: 0; list-style: none; }
.settings-events li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #dce3e9; }
.settings-events li > span:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.settings-events small { display: block; color: #50657b; margin-top: 4px; }
:root[data-theme="dark"] { color-scheme: dark; background: #101a27; color: #e0eaf3; }
[data-theme="dark"] .skytime-settings .logbook-panel { background: #172738; color: #e0eaf3; border-color: #395067; }
[data-theme="dark"] .skytime-settings input,
[data-theme="dark"] .skytime-settings select,
[data-theme="dark"] .skytime-settings .secondary { background: #203348; color: #e0eaf3; border-color: #597087; }
[data-theme="dark"] .skytime-settings .settings-preview { background: #203348; border-color: #597087; }
[data-theme="dark"] .skytime-settings .muted,
[data-theme="dark"] .skytime-settings small { color: #b1c3d4; }
[data-theme="dark"] .skytime-settings a { color: #8ed0ff; }
@media (max-width: 600px) {
  .settings-grid { grid-template-columns: 1fr; }
  .settings-events li { align-items: flex-start; flex-direction: column; }
  .settings-actions > button { flex: 1 1 180px; }
}