* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #1a1a2e;
  --surface: #16213e;
  --surface2: #0f3460;
  --accent: #e94560;
  --text: #e0e0e0;
  --text-dim: #8899aa;
  --green: #00c853;
  --yellow: #ffd600;
  --red: #ff1744;
  --orange: #ff9100;
  --border: #2a3a5e;
  --bg-secondary: #1a1a2e;
  --bg-tertiary: #252540;
  --surface3: #1a4a7a;
}

html, body {
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: var(--bg);
  color: var(--text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- Splash screen ---- */

.splash-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.splash-overlay.hidden {
  display: none;
}

.splash-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px 40px;
  text-align: center;
  min-width: 280px;
  width: 100%;
  max-width: min(90vw, 400px);
  max-height: min(90vh, 80vh);
  overflow-y: auto;
}

/* -- Config modal tab layout -- */

.config-box {
  max-height: min(90vh, 80vh);
  max-width: min(92vw, 420px);
  display: flex;
  flex-direction: column;
}

.config-tabs {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
  gap: 4px 8px;
  justify-content: center;
}

.config-box .config-tab {
  background: transparent;
  color: var(--text-dim);
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 12px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border-radius: 0;
}

.config-box .config-tab:hover {
  color: var(--text);
  opacity: 1;
}

.config-box .config-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.config-panels {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

.config-panel {
  display: none;
}

.config-panel.active {
  display: block;
}

.splash-box h2 {
  color: var(--accent);
  font-size: 1.4rem;
  margin-bottom: 20px;
}

.splash-box label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 6px;
  text-align: left;
}

.splash-box input {
  width: 100%;
  padding: 8px 12px;
  font-size: 1.1rem;
  font-family: monospace;
  text-transform: uppercase;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
  margin-bottom: 16px;
}

.splash-box input:focus {
  border-color: var(--accent);
}

.splash-box button {
  padding: 8px 32px;
  font-size: 0.9rem;
  border: none;
  border-radius: 4px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  font-weight: 600;
}

.splash-box button:hover {
  opacity: 0.9;
}

.splash-version {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-top: 12px;
}

/* -- Location override section -- */

.splash-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 12px 0;
}

.splash-loc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.splash-loc-btns {
  display: flex;
  gap: 6px;
}

.splash-loc-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-dim);
}

.splash-gps-btn {
  padding: 3px 10px;
  font-size: 0.72rem;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  font-weight: 600;
}

.splash-gps-btn:hover {
  background: var(--accent);
  color: #fff;
}

.splash-gps-btn.active {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.splash-loc-fields {
  margin-bottom: 8px;
}

.splash-loc-row {
  display: flex;
  gap: 10px;
}

.splash-field {
  flex: 1;
}

.splash-field label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 4px;
  text-align: left;
}

.splash-field input,
.splash-grid-wrap input {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.95rem;
  font-family: monospace;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  outline: none;
  margin-bottom: 0;
}

.splash-field input:focus,
.splash-grid-wrap input:focus {
  border-color: var(--accent);
}

#splashLat,
#splashLon {
  text-transform: none;
}

.splash-grid-wrap {
  position: relative;
  margin-bottom: 8px;
  text-align: left;
}

.splash-grid-wrap label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.splash-grid-dropdown {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  max-height: 160px;
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 0 0 4px 4px;
  z-index: 100;
  display: none;
}

.splash-grid-dropdown.open {
  display: block;
}

.grid-option {
  padding: 5px 10px;
  font-size: 0.85rem;
  font-family: monospace;
  color: var(--text);
  cursor: pointer;
}

.grid-option:hover,
.grid-option.highlighted {
  background: var(--surface2);
  color: #fff;
}

.splash-loc-status {
  font-size: 0.75rem;
  color: var(--green);
  margin-bottom: 10px;
  min-height: 1.2em;
  text-align: left;
}

.splash-loc-status.error {
  color: var(--red);
}

/* -- Time format section -- */

.splash-time-format {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.splash-time-options {
  display: flex;
  gap: 12px;
}

.splash-time-options label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}

.splash-time-options input[type="radio"] {
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

/* -- Units section -- */

.splash-units-section {
  margin-bottom: 12px;
}

.splash-units-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}

.splash-units-label {
  font-size: 0.82rem;
  color: var(--text-dim);
}

.splash-units-options {
  display: flex;
  gap: 12px;
}

.splash-units-options label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}

.splash-units-options input[type="radio"] {
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

/* -- Widget visibility section -- */

.splash-widgets-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  text-align: left;
}

.splash-widget-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.splash-widget-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}

.splash-widget-list input[type="checkbox"] {
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

/* ---- Widget slot counter ---- */
.widget-slot-counter {
  font-size: 0.75rem;
  color: var(--text-dim);
  margin-left: 8px;
}
.widget-slot-counter.over-limit {
  color: #e8a838;
  font-weight: 600;
}
.splash-widget-list label.cb-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.splash-widget-list label.cb-disabled input[type="checkbox"] {
  cursor: not-allowed;
}

/* ---- Header ---- */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 16px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
  gap: 16px;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 500px;
  container-type: inline-size;
  container-name: header-left;
  overflow: hidden;
}

.op-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.op-call {
  /* Scale from 2.1rem to 3.3rem based on container width */
  font-size: clamp(2.1rem, 12cqw, 3.3rem);
  font-weight: 700;
  font-family: monospace;
  color: var(--accent);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-call a {
  color: var(--accent);
  text-decoration: none;
}

.op-call a:hover {
  text-decoration: underline;
}

.op-class {
  display: block;
  font-size: clamp(0.7rem, 3.5cqw, 0.95rem);
  color: var(--yellow);
  font-weight: 600;
  margin-top: -2px;
}

.op-name {
  /* Scale from 1.1rem to 1.65rem */
  font-size: clamp(1.1rem, 6cqw, 1.65rem);
  color: var(--text);
  font-weight: 500;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-name:empty {
  display: none;
}

.op-loc {
  /* Scale from 1rem to 1.5rem */
  font-size: clamp(1rem, 5cqw, 1.5rem);
  color: var(--text-dim);
  font-family: monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.op-btn {
  /* Scale button size with container */
  padding: clamp(5px, 2cqw, 9px) clamp(12px, 6cqw, 20px);
  font-size: clamp(0.95rem, 4.5cqw, 1.25rem);
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.op-btn:hover {
  background: var(--accent);
  color: #fff;
}

.header-right {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 5px 8px;
  align-items: center;
  justify-items: center;
  flex-shrink: 0;
}

/* Shared base for header-right buttons */
#refreshBtn,
#fullscreenBtn {
  padding: 4px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

#refreshBtn:hover,
#fullscreenBtn:hover {
  background: var(--accent);
}

/* ---- Layout Dropdown ---- */

.layout-dropdown {
  position: relative;
}

.layout-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}

.layout-btn:hover {
  background: var(--accent);
}

.layout-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  min-width: 220px;
  max-height: 360px;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 9999;
  padding: 4px 0;
}

.layout-menu.open {
  display: block;
}

.layout-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}

.layout-menu-item:hover {
  background: var(--surface2);
}

.layout-menu-item .layout-delete-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.layout-menu-item:hover .layout-delete-btn {
  opacity: 1;
}

.layout-menu-item .layout-delete-btn:hover {
  color: var(--red);
}

.layout-menu-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 8px;
}

.layout-save-row {
  display: flex;
  gap: 6px;
  padding: 6px 12px;
  align-items: center;
}

.layout-save-row input {
  flex: 1;
  padding: 4px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 4px;
  outline: none;
}

.layout-save-row input:focus {
  border-color: var(--accent);
}

.layout-save-row button {
  padding: 4px 10px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
}

.layout-save-row button:hover {
  background: var(--accent);
  color: #fff;
}

.layout-menu-action {
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--accent);
  cursor: pointer;
  transition: background 0.1s;
}

.layout-menu-action:hover {
  background: var(--surface2);
}

/* ---- Buy Me a Coffee button ---- */

.coffee-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
  border: 1px solid #ffdd00;
  background: linear-gradient(135deg, #ffdd00 0%, #ffc800 100%);
  color: #000;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
}

.coffee-btn:hover {
  background: linear-gradient(135deg, #ffe033 0%, #ffd633 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(255, 221, 0, 0.3);
}

/* ---- Discord button ---- */

.discord-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border: 1px solid #5865F2;
  background: #5865F2;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.discord-btn:hover {
  background: #4752C4;
  border-color: #4752C4;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(88, 101, 242, 0.3);
}

.discord-icon {
  width: 18px;
  height: 18px;
  color: #fff;
}

.feedback-discord {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin-bottom: 12px;
  line-height: 1.4;
}

.feedback-discord a {
  color: #5865F2;
  text-decoration: none;
  font-weight: 500;
}

.feedback-discord a:hover {
  text-decoration: underline;
}

.feedback-discord .discord-icon {
  width: 14px;
  height: 14px;
  color: #5865F2;
  vertical-align: -2px;
  margin-right: 2px;
}

.feedback-btn {
  padding: 4px 10px;
  font-size: 0.8rem;
  border: 1px solid var(--accent);
  background: linear-gradient(135deg, var(--accent) 0%, #0099ff 100%);
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
  white-space: nowrap;
}

.feedback-btn:hover {
  background: linear-gradient(135deg, #00b8ff 0%, #00a8ff 100%);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 170, 255, 0.3);
}

/* ---- Update indicator ---- */

.update-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: default;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 0.78rem;
  color: var(--text-dim);
  border: 1px solid var(--border);
  background: var(--surface2);
}

.update-indicator:hover {
  background: var(--surface);
}

.update-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.update-dot.gray { background: var(--text-dim); }
.update-dot.green { background: var(--green); cursor: pointer; }
.update-dot.yellow { background: var(--yellow); }
.update-dot.red { background: var(--red); }

.update-dot.green ~ .update-label { cursor: pointer; }

.update-label {
  white-space: nowrap;
}

.restart-btn {
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid var(--yellow);
  background: transparent;
  color: var(--yellow);
  border-radius: 3px;
  cursor: pointer;
  margin-left: 4px;
}

.restart-btn:hover {
  background: var(--yellow);
  color: #111;
}

.restart-btn.hidden {
  display: none;
}

/* ---- Splash update interval ---- */

.splash-update-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.splash-update-section select {
  padding: 4px 8px;
  font-size: 0.82rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

/* ---- Layout section in splash ---- */

.splash-layout-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
  text-align: left;
}

.splash-layout-actions {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}

.splash-layout-btn {
  padding: 4px 12px;
  font-size: 0.78rem;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text);
  border-radius: 4px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}

.splash-layout-btn:hover:not(:disabled) {
  background: var(--accent);
  color: #fff;
}

.splash-layout-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.splash-layout-status {
  font-size: 0.75rem;
  color: var(--green);
  min-height: 1.2em;
}

.splash-layout-list {
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 6px;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.splash-layout-empty {
  padding: 8px 12px;
  font-size: 0.78rem;
  color: var(--text-dim);
  text-align: center;
}

.splash-layout-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-bottom: 1px solid var(--border);
}

.splash-layout-item:last-child {
  border-bottom: none;
}

.splash-layout-item-name {
  font-size: 0.8rem;
  cursor: pointer;
  flex: 1;
  color: var(--text);
}

.splash-layout-item-name:hover {
  color: var(--accent);
}

.splash-layout-item-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.splash-layout-item-del:hover {
  color: var(--red);
}

.splash-layout-save-row {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}

.splash-layout-save-row input {
  flex: 1;
  padding: 4px 8px;
  font-size: 0.8rem;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 4px;
  outline: none;
}

.splash-layout-save-row input:focus {
  border-color: var(--accent);
}

/* -- Auto-refresh toggle in config modal -- */

.splash-autorefresh-section {
  text-align: left;
  margin-bottom: 4px;
}

.config-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

.config-toggle input[type="checkbox"] {
  width: auto;
  margin: 0;
}

/* ---- Band Color Picker ---- */

.band-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 4px 8px;
  margin-top: 6px;
}

.band-color-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.band-color-row label {
  font-size: 0.8rem;
  color: var(--text);
  min-width: 40px;
}

.band-color-row input[type="color"] {
  width: 28px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
}

.band-color-reset {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--accent);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
}

.band-color-reset:hover {
  background: var(--surface2);
}

/* ---- Widget system ---- */

.widget-area {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
  background: var(--bg);
}

/* ---- Snap-to-Grid Visual Overlay ---- */
/* Shown while dragging/resizing in free-float mode with snap enabled */
.widget-area.snap-grid-visible {
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 20px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 20px);
}

.widget {
  position: absolute;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  min-width: 150px;
  min-height: 80px;
}

.widget-header {
  padding: 5px 10px;
  background: var(--surface2);
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: move;
  user-select: none;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
}

.widget-cfg-btn {
  float: right;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
}

.widget-cfg-btn:hover {
  opacity: 1;
  color: var(--text);
}

.widget-help-btn {
  float: right;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.6;
  transition: opacity 0.15s, color 0.15s;
  margin-left: 4px;
}

.widget-help-btn:hover {
  opacity: 1;
  color: var(--accent);
}

.widget-close-btn {
  float: right;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.9rem;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
  opacity: 0.4;
  transition: opacity 0.15s, color 0.15s;
  margin-left: 4px;
}

.widget-close-btn:hover {
  opacity: 1;
  color: #e55;
}

.solar-cfg-box .splash-widget-list,
.lunar-cfg-box .splash-widget-list {
  max-height: 400px;
  overflow-y: auto;
}

/* ---- Band reference (inside Reference widget) ---- */

.band-ref-inline-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  color: var(--text);
  margin-bottom: 8px;
  cursor: pointer;
}

.band-ref-inline-filter input[type="checkbox"] {
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

#referenceContent h3 {
  font-size: 0.85rem;
  color: var(--yellow);
  margin: 8px 0 4px;
}

.band-ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.band-ref-table th {
  background: var(--surface2);
  padding: 4px 6px;
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

.band-ref-table td {
  padding: 3px 6px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.band-ref-table td:first-child {
  font-weight: 600;
  color: var(--accent);
}

.band-ref-table td:nth-child(2) {
  font-family: monospace;
  color: var(--yellow);
}

.widget-body {
  flex: 1;
  overflow: auto;
  position: relative;
}

.widget-resize {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--text-dim) 50%);
  opacity: 0.4;
  z-index: 10000;
}

.widget-resize:hover {
  opacity: 0.8;
}

.spot-count {
  font-size: 0.75rem;
  color: var(--text-dim);
  font-weight: normal;
}

/* ---- Activations widget ---- */

#widget-activations .widget-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.source-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.source-tab {
  flex: 1;
  padding: 5px 8px;
  font-size: 0.72rem;
  font-weight: 600;
  border: none;
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-bottom: 2px solid transparent;
}
.source-tab:hover {
  background: var(--surface2);
  color: var(--text);
}
.source-tab.active {
  background: var(--surface2);
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.widget-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.filter-row-range {
  gap: 12px;
}

.distance-filter,
.age-filter {
  display: flex;
  align-items: center;
  gap: 4px;
}

.filter-label {
  font-size: 0.7rem;
  color: var(--text-dim);
}

#distanceFilter {
  width: 60px;
  padding: 2px 4px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 3px;
}

#distanceUnit,
#ageFilter {
  padding: 2px 4px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
}

.filter-row-presets {
  border-top: 1px solid var(--border);
  padding-top: 6px;
  margin-top: 2px;
}

#presetFilter {
  flex: 1;
  min-width: 100px;
  padding: 2px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
}

#savePresetBtn,
#deletePresetBtn,
#clearFiltersBtn {
  padding: 2px 8px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

#savePresetBtn:hover,
#deletePresetBtn:hover,
#clearFiltersBtn:hover {
  background: var(--surface2);
  color: var(--text);
}

#clearFiltersBtn {
  margin-left: auto;
}

#clearFiltersBtn.filters-active {
  background: var(--accent, #e74c3c);
  color: #fff;
  border-color: var(--accent, #e74c3c);
}

/* Badge dot on Filters header when any filter is non-default */
.filter-active-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #e74c3c);
  margin-left: 6px;
  vertical-align: middle;
}

#distanceFilterWrap[style*="display: none"],
#ageFilterWrap[style*="display: none"] {
  display: none;
}

.band-filters,
.mode-filters {
  display: flex;
  gap: 3px;
}

.band-filters button,
.mode-filters button {
  padding: 2px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.band-filters button.active,
.mode-filters button.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.band-filters button:hover,
.mode-filters button:hover {
  background: var(--surface2);
  color: var(--text);
}

#countryFilter,
#stateFilter,
#gridFilter,
#continentFilter {
  padding: 2px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  appearance: auto;
}

/* ---- Propagation filter toggle ---- */

.prop-filter-btn {
  font-size: 0.7rem;
  padding: 2px 8px;
  border: 1px solid var(--border);
  background: var(--bg-widget);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
}
.prop-filter-btn.active {
  background: var(--green);
  color: #000;
  border-color: var(--green);
}

/* ---- Privilege filter checkbox ---- */

.priv-filter-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-dim);
  cursor: pointer;
  white-space: nowrap;
}

.priv-filter-label input[type="checkbox"] {
  width: auto;
  margin: 0;
  cursor: pointer;
}

.priv-filter-label.hidden {
  display: none;
}

/* ---- Callsign hover tooltip ---- */

.call-tooltip {
  position: fixed;
  z-index: 99999;
  background: var(--surface2);
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 8px 12px;
  pointer-events: none;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  max-width: 260px;
}

.call-tooltip.visible {
  display: block;
}

.call-tooltip-name {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text);
  margin-bottom: 2px;
}

.call-tooltip-loc {
  font-size: 0.78rem;
  color: var(--text-dim);
}

.call-tooltip-class {
  font-size: 0.75rem;
  color: var(--yellow);
  margin-top: 2px;
}

.call-tooltip-grid {
  font-size: 0.72rem;
  color: var(--text-dim);
  font-family: monospace;
}

.call-tooltip-loading {
  font-size: 0.78rem;
  color: var(--text-dim);
  font-style: italic;
}

.table-wrap {
  flex: 1;
  overflow-y: auto;
}

#spotsTable {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

#spotsTable thead {
  position: sticky;
  top: 0;
  z-index: 1;
}

#spotsTable th {
  background: var(--surface2);
  padding: 5px 6px;
  text-align: left;
  font-weight: 600;
  color: var(--text-dim);
  border-bottom: 1px solid var(--border);
}

/* Sortable column headers */
#spotsTable th.sortable {
  cursor: pointer;
  user-select: none;
}

#spotsTable th.sortable:hover {
  background: var(--surface3);
  color: var(--text);
}

#spotsTable th.sortable::after {
  content: '';
  margin-left: 4px;
  opacity: 0.3;
}

#spotsTable th.sort-asc::after {
  content: ' ▲';
  opacity: 1;
}

#spotsTable th.sort-desc::after {
  content: ' ▼';
  opacity: 1;
}

#spotsTable td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 110px;
}

#spotsTable tbody tr {
  cursor: pointer;
  transition: background 0.1s;
}

#spotsTable tbody tr:hover {
  background: var(--surface2);
}

#spotsTable tbody tr.selected {
  background: var(--surface2);
  border-left: 3px solid var(--accent);
}

#spotsTable tbody tr.my-spot {
  background: rgba(255, 215, 0, 0.15);
  border-left: 3px solid #ffd700;
}

#spotsTable tbody tr.my-spot.selected {
  background: rgba(255, 215, 0, 0.25);
}

/* ---- Watch list red highlight ---- */
#spotsTable tbody tr.spot-watch-red {
  background: rgba(233, 69, 96, 0.15);
  border-left: 3px solid var(--accent);
}
#spotsTable tbody tr.spot-watch-red.selected {
  background: rgba(233, 69, 96, 0.25);
}
/* my-spot (gold) takes visual precedence over watch-red */
#spotsTable tbody tr.spot-watch-red.my-spot {
  background: rgba(255, 215, 0, 0.15);
  border-left: 3px solid #ffd700;
}

#spotsTable td a {
  color: inherit;
  text-decoration: underline;
}

.callsign {
  font-weight: 600;
  color: #fff;
}

.freq {
  color: var(--yellow);
  font-family: monospace;
}

.mode {
  color: var(--green);
}

/* ---- Map widget ---- */

#widget-map .widget-body {
  overflow: hidden;
}

#map {
  width: 100%;
  height: 100%;
}

.leaflet-container {
  background: #1a1a2e;
}

.leaflet-popup-content-wrapper {
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.leaflet-popup-tip {
  background: var(--surface);
}

.leaflet-popup-content {
  margin: 10px 14px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.leaflet-popup-content .popup-call {
  font-weight: 700;
  font-size: 1rem;
}

.leaflet-popup-content .popup-call a {
  color: var(--accent);
  text-decoration: none;
}

.leaflet-popup-content .popup-call a:hover {
  text-decoration: underline;
}

.leaflet-popup-content .popup-freq {
  color: var(--yellow);
  font-family: monospace;
}

.leaflet-popup-content .popup-park {
  color: var(--text-dim);
  font-size: 0.8rem;
}

.leaflet-popup-content .popup-dir,
.leaflet-popup-content .popup-dist,
.leaflet-popup-content .popup-time {
  color: var(--text-dim);
  font-size: 0.78rem;
}

/* ---- SDO solar image ---- */

.solar-image-container {
  text-align: center;
  padding: 8px 10px 0;
}

.solar-image-container select {
  display: block;
  margin: 0 auto;
  padding: 3px 8px;
  font-size: 0.75rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.solar-canvas-wrap {
  position: relative;
  display: block;
  margin: 6px auto 0;
  width: fit-content;
}

#solarCanvas {
  display: block;
  border-radius: 6px;
  background: #000;
  max-width: 200px;
}

.solar-play-btn {
  position: absolute;
  bottom: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.65rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s;
  line-height: 1;
  padding: 0;
}

.solar-play-btn:hover {
  opacity: 1;
}


/* ---- Moon phase canvas ---- */

#moonCanvas {
  display: block;
  margin: 10px auto 4px;
}

/* ---- Solar widget ---- */

.solar-indices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

.solar-card {
  background: var(--surface2);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}

.solar-card .label {
  font-size: 0.65rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.solar-card .value {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: 2px;
}

/* ---- Space Weather History ---- */

.spacewx-tabs {
  display: flex;
  gap: 2px;
  margin-left: auto;
}

.spacewx-tab {
  padding: 2px 8px;
  font-size: 0.75rem;
  background: var(--surface2);
  color: var(--text-dim);
  border: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
}

.spacewx-tab.active {
  background: var(--accent);
  color: var(--bg);
}

.spacewx-tab:hover:not(.active) {
  background: var(--surface3);
  color: var(--text);
}

#spacewxCanvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- Propagation Widget ---- */

/* day-night-toggle removed — band conditions now shows side-by-side Day/Night */

.day-night-toggle .toggle-btn {
  padding: 2px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
}

.day-night-toggle .toggle-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

.day-night-toggle .toggle-btn.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

.prop-summary {
  display: flex;
  justify-content: space-around;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 6px;
  margin: 6px 10px;
}

.prop-summary-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}

.prop-summary-label {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.prop-summary-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
}

/* ---- Band Conditions HF/VHF Tabs ---- */

.band-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  margin: 0 10px;
}

.band-tab {
  flex: 1;
  padding: 3px 8px;
  font-size: 0.65rem;
  font-weight: 600;
  border: none;
  background: var(--surface);
  color: var(--text-dim);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border-bottom: 2px solid transparent;
}

.band-tab:hover {
  background: var(--surface2);
  color: var(--text);
}

.band-tab.active {
  background: var(--surface2);
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ---- Per-Band Conditions (side-by-side Day/Night) ---- */

.band-conditions-grid {
  padding: 2px 10px 4px;
}

/* Compact color-coded band conditions table */
.band-table {
  border-collapse: separate;
  border-spacing: 1px 1px;
  width: 100%;
  table-layout: fixed;
}

.band-table td,
.band-table th {
  padding: 1px 4px;
  text-align: center;
  line-height: 1.1;
}

.band-table-label {
  text-align: right;
  font-weight: 600;
  font-size: 0.6rem;
  padding-right: 4px;
  width: 34px;
  color: var(--text);
}

.band-table-cell {
  font-weight: 700;
  font-size: 0.6rem;
  border-radius: 2px;
}

.band-table-header {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-bottom: 2px;
}

.band-table-header-day {
  color: #ffa726;
}

.band-table-header-night {
  color: #5c6bc0;
}

/* ---- VHF Conditions ---- */

.vhf-conditions {
  padding: 4px 10px 8px;
}

.vhf-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
}

.vhf-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px 6px;
  background: var(--surface2);
  border-radius: 3px;
  font-size: 0.6rem;
  flex: 1 1 45%;
  min-width: 120px;
}

.vhf-label {
  color: var(--text);
  font-weight: 500;
}

.vhf-value {
  font-weight: 600;
  text-align: right;
}

/* ---- Header center clocks ---- */

.header-center {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  flex-shrink: 1;
  min-width: 0;
}

.header-clock-group {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.header-clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 24px;
  border-radius: 10px;
  background: rgba(15, 52, 96, 0.4);
  transition: all 0.4s ease;
  position: relative;
  min-width: 200px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.header-clock-label {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
}

.header-clock-time {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text);
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.header-clock-weather {
  font-size: 0.78rem;
  color: var(--text);
  text-align: center;
  max-width: 280px;
  line-height: 1.3;
  margin-top: 4px;
  white-space: nowrap;
}

/* Weather icon display */
.header-clock-wx-icon {
  font-size: 1.8rem;
  line-height: 1;
  margin-bottom: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Weather backgrounds for header clock - Day conditions */
#headerClockLocal.wx-clear-day {
  background: linear-gradient(180deg, #4a90d9 0%, #87ceeb 50%, #ffd700 100%);
  border-color: rgba(255, 215, 0, 0.4);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.1);
}

#headerClockLocal.wx-partly-cloudy-day {
  background: linear-gradient(180deg, #5a9fd4 0%, #87ceeb 40%, #b8c6d6 70%, #ffecd2 100%);
  border-color: rgba(176, 196, 222, 0.4);
  box-shadow: 0 0 15px rgba(135, 206, 235, 0.3);
}

/* Weather backgrounds for header clock - Night conditions */
#headerClockLocal.wx-clear-night {
  background: linear-gradient(180deg, #0a0a20 0%, #1a1a3e 40%, #2d2d5a 70%, #3a3a6a 100%);
  border-color: rgba(100, 100, 180, 0.4);
  box-shadow: 0 0 20px rgba(100, 100, 180, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.05);
}

#headerClockLocal.wx-partly-cloudy-night {
  background: linear-gradient(180deg, #151530 0%, #252545 40%, #3a3a5a 70%, #4a4a6a 100%);
  border-color: rgba(80, 80, 120, 0.4);
  box-shadow: 0 0 15px rgba(80, 80, 120, 0.3);
}

/* Weather backgrounds - All conditions */
#headerClockLocal.wx-cloudy {
  background: linear-gradient(180deg, #4a5568 0%, #6b7280 40%, #9ca3af 70%, #d1d5db 100%);
  border-color: rgba(156, 163, 175, 0.4);
  box-shadow: 0 0 15px rgba(107, 114, 128, 0.3);
}

#headerClockLocal.wx-rain {
  background: linear-gradient(180deg, #1e3a5f 0%, #2c5282 40%, #3182ce 70%, #63b3ed 100%);
  border-color: rgba(49, 130, 206, 0.5);
  box-shadow: 0 0 20px rgba(49, 130, 206, 0.4);
}

#headerClockLocal.wx-thunderstorm {
  background: linear-gradient(180deg, #1a1a2e 0%, #2d1f47 30%, #4a2c6a 60%, #6b3fa0 100%);
  border-color: rgba(138, 43, 226, 0.5);
  box-shadow: 0 0 25px rgba(138, 43, 226, 0.4), inset 0 0 20px rgba(255, 255, 0, 0.05);
}

#headerClockLocal.wx-snow {
  background: linear-gradient(180deg, #e2e8f0 0%, #cbd5e1 40%, #94a3b8 70%, #64748b 100%);
  border-color: rgba(203, 213, 225, 0.5);
  box-shadow: 0 0 20px rgba(226, 232, 240, 0.4);
}

#headerClockLocal.wx-fog {
  background: linear-gradient(180deg, #6b7280 0%, #9ca3af 40%, #d1d5db 70%, #e5e7eb 100%);
  border-color: rgba(156, 163, 175, 0.4);
  box-shadow: 0 0 15px rgba(156, 163, 175, 0.3);
}

/* Weather text colors for contrast — stronger shadows for low-contrast displays */
#headerClockLocal.wx-clear-day .header-clock-time,
#headerClockLocal.wx-partly-cloudy-day .header-clock-time,
#headerClockLocal.wx-rain .header-clock-time,
#headerClockLocal.wx-thunderstorm .header-clock-time,
#headerClockLocal.wx-clear-night .header-clock-time,
#headerClockLocal.wx-partly-cloudy-night .header-clock-time {
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.5);
}

#headerClockLocal.wx-cloudy .header-clock-time {
  color: #1f2937;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5), 0 0 4px rgba(255, 255, 255, 0.3);
}

#headerClockLocal.wx-snow .header-clock-time,
#headerClockLocal.wx-fog .header-clock-time {
  color: #1f2937;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6), 0 0 4px rgba(255, 255, 255, 0.3);
}

#headerClockLocal[class*="wx-"] .header-clock-label {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

#headerClockLocal.wx-cloudy .header-clock-label,
#headerClockLocal.wx-snow .header-clock-label,
#headerClockLocal.wx-fog .header-clock-label {
  color: rgba(31, 41, 55, 0.9);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.4);
}

#headerClockLocal[class*="wx-"] .header-clock-weather {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 0 6px rgba(0, 0, 0, 0.4);
}

#headerClockLocal.wx-cloudy .header-clock-weather,
#headerClockLocal.wx-snow .header-clock-weather,
#headerClockLocal.wx-fog .header-clock-weather {
  color: rgba(31, 41, 55, 0.95);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.wx-source-logo {
  position: absolute;
  bottom: 4px;
  right: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 3px;
  background: rgba(0,0,0,0.4);
  opacity: 0.7;
}

.wx-source-logo.wx-src-wu {
  color: #ff6b35;
}

.wx-source-logo.wx-src-nws {
  color: #4a90e2;
}

/* ---- Band condition color classes (used in propagation widget) ---- */

.cond-good { color: var(--green); font-weight: 600; }
.cond-fair { color: var(--yellow); font-weight: 600; }
.cond-poor { color: var(--red); font-weight: 600; }

/* ---- Lunar widget ---- */

.lunar-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 10px;
}

/* ---- User location marker ---- */

.user-icon {
  display: flex;
  align-items: center;
  gap: 3px;
  background: #1e88e5;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 0 10px rgba(30, 136, 229, 0.7);
  width: auto !important;
  height: auto !important;
  transform: translate(-50%, -50%);
}

.user-icon-diamond {
  font-size: 0.85rem;
  line-height: 1;
}

.user-icon-call {
  font-family: monospace;
  letter-spacing: 0.5px;
}

.user-popup-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--accent);
  margin-bottom: 4px;
}

.user-popup-row {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
}

/* ---- ISS ---- */

.iss-icon {
  background: #00bcd4;
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(0, 188, 212, 0.7);
}

.iss-popup-title {
  font-weight: 700;
  font-size: 1rem;
  color: #00bcd4;
  margin-bottom: 4px;
}

.iss-popup-row {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.iss-radio-header {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--yellow);
  margin-top: 8px;
  margin-bottom: 4px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.iss-freq-table {
  width: 100%;
  font-size: 0.75rem;
  border-collapse: collapse;
}

.iss-freq-table td {
  padding: 2px 4px;
  border-bottom: 1px solid var(--border);
}

.iss-freq-table td:first-child {
  color: var(--text-dim);
}

.iss-freq-table td:last-child {
  font-family: monospace;
  color: var(--yellow);
  text-align: right;
}

.iss-radio-note {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 4px;
  line-height: 1.3;
  font-style: italic;
}

/* ---- Marker clusters ---- */

.marker-cluster-small { background-color: rgba(0, 200, 83, 0.4); }
.marker-cluster-small div { background-color: rgba(0, 200, 83, 0.7); color: #fff; }
.marker-cluster-medium { background-color: rgba(255, 214, 0, 0.4); }
.marker-cluster-medium div { background-color: rgba(255, 214, 0, 0.7); color: #111; }
.marker-cluster-large { background-color: rgba(233, 69, 96, 0.4); }
.marker-cluster-large div { background-color: rgba(233, 69, 96, 0.7); color: #fff; }
.marker-cluster-selected { background-color: rgba(255, 152, 0, 0.4) !important; }
.marker-cluster-selected div { background-color: rgba(255, 152, 0, 0.7) !important; color: #fff !important; }

/* ---- Clock widget ---- */

.clock-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-family: monospace;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
  position: relative;
}

.clock-time {
  font-size: 1.6rem;
}

.clock-day-date {
  font-size: 1.6rem;
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0;
}

.clock-analog-canvas {
  display: none;
  max-width: 100%;
  max-height: calc(100% - 24px);
}

.clock-display.analog .clock-time {
  display: none;
}

.clock-display.analog .clock-day-date {
  font-size: 0.85rem;
  margin-top: 2px;
}

.clock-display.analog .clock-analog-canvas {
  display: block;
  flex-shrink: 0;
}

/* ---- Day/Night indicator (emoji prepended to clock time text) ---- */

.daynight-emoji {
  font-style: normal;
  text-shadow: none;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
}

/* ---- Weather in local clock ---- */

.clock-weather {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--text-dim);
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0;
  margin-top: 2px;
}

/* ---- Propagation widget ---- */

.prop-controls {
  float: right;
  display: inline-flex;
  gap: 3px;
}

.prop-metric-btn {
  padding: 2px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.prop-metric-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.prop-metric-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ---- Map center toggle ---- */

.map-center-controls {
  float: right;
  display: inline-flex;
  gap: 3px;
  margin-right: 6px;
}

.map-center-btn {
  padding: 2px 6px;
  font-size: 0.7rem;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-dim);
  border-radius: 3px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.map-center-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.map-center-btn:hover {
  background: var(--surface2);
  color: var(--text);
}

/* ---- Propagation contour labels ---- */

.prop-label {
  background: none !important;
  border: none !important;
  white-space: nowrap;
  font-size: 0.65rem;
  font-weight: 700;
  font-family: monospace;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8), -1px -1px 2px rgba(0, 0, 0, 0.8);
  pointer-events: none;
}

/* ---- Weather background classes ---- */

#widget-clock-local .widget-body {
  transition: background 1s ease;
}

#widget-clock-local .widget-body.wx-clear-day {
  background: linear-gradient(180deg, #1e88e5 0%, #64b5f6 100%);
}
#widget-clock-local .widget-body.wx-clear-night {
  background: linear-gradient(180deg, #0d1b2a 0%, #1b2838 100%);
}
#widget-clock-local .widget-body.wx-partly-cloudy-day {
  background: linear-gradient(180deg, #4a7fac 0%, #8eafc4 100%);
}
#widget-clock-local .widget-body.wx-partly-cloudy-night {
  background: linear-gradient(180deg, #1a2636 0%, #2a3a4e 100%);
}
#widget-clock-local .widget-body.wx-cloudy {
  background: linear-gradient(180deg, #546e7a 0%, #78909c 100%);
}
#widget-clock-local .widget-body.wx-rain {
  background: linear-gradient(180deg, #37474f 0%, #455a64 100%);
}
#widget-clock-local .widget-body.wx-thunderstorm {
  background: linear-gradient(180deg, #2a1a3e 0%, #3e2756 100%);
}
#widget-clock-local .widget-body.wx-snow {
  background: linear-gradient(180deg, #90a4ae 0%, #cfd8dc 100%);
}
#widget-clock-local .widget-body.wx-fog {
  background: linear-gradient(180deg, #607d8b 0%, #90a4ae 100%);
}

/* Text colors per weather background — ensure contrast */
#widget-clock-local .widget-body[class*="wx-"] .clock-time,
#widget-clock-local .widget-body[class*="wx-"] .clock-day-date,
#widget-clock-local .widget-body[class*="wx-"] .clock-weather {
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

/* Dark backgrounds — light text (already default, just reinforce) */
#widget-clock-local .widget-body.wx-clear-night .clock-time,
#widget-clock-local .widget-body.wx-partly-cloudy-night .clock-time,
#widget-clock-local .widget-body.wx-rain .clock-time,
#widget-clock-local .widget-body.wx-thunderstorm .clock-time {
  color: #fff;
}

/* Light/mid backgrounds — dark text */
#widget-clock-local .widget-body.wx-snow .clock-time,
#widget-clock-local .widget-body.wx-snow .clock-day-date,
#widget-clock-local .widget-body.wx-snow .clock-weather {
  color: #1a1a2e;
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

#widget-clock-local .widget-body.wx-fog .clock-time,
#widget-clock-local .widget-body.wx-fog .clock-day-date,
#widget-clock-local .widget-body.wx-fog .clock-weather {
  color: #1a1a2e;
  text-shadow: 0 1px 2px rgba(255,255,255,0.3);
}

#widget-clock-local .widget-body.wx-cloudy .clock-time,
#widget-clock-local .widget-body.wx-cloudy .clock-day-date,
#widget-clock-local .widget-body.wx-cloudy .clock-weather {
  color: #fff;
}

#widget-clock-local .widget-body.wx-clear-day .clock-time,
#widget-clock-local .widget-body.wx-clear-day .clock-day-date,
#widget-clock-local .widget-body.wx-clear-day .clock-weather {
  color: #fff;
}

#widget-clock-local .widget-body.wx-partly-cloudy-day .clock-time,
#widget-clock-local .widget-body.wx-partly-cloudy-day .clock-day-date,
#widget-clock-local .widget-body.wx-partly-cloudy-day .clock-weather {
  color: #fff;
}

/* ---- Weather source logo ---- */

.wx-source-logo {
  position: absolute;
  bottom: 4px;
  right: 6px;
  font-size: 0.6rem;
  font-weight: 700;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 3px;
  opacity: 0.7;
  pointer-events: none;
  z-index: 10;
}

.wx-source-logo.hidden {
  display: none;
}

.wx-source-logo.wx-src-wu {
  background: #1a8b1a;
  color: #fff;
}

.wx-source-logo.wx-src-nws {
  background: #003366;
  color: #fff;
}

/* ---- Weather alert badge ---- */

.wx-alert-badge {
  position: absolute;
  top: 6px;
  left: 8px;
  font-size: 1.1rem;
  cursor: pointer;
  z-index: 10;
  line-height: 1;
  text-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.wx-alert-badge.hidden {
  display: none;
}

.wx-alert-badge.wx-alert-extreme,
.wx-alert-badge.wx-alert-severe {
  color: var(--red);
  animation: wx-pulse 1.2s ease-in-out infinite;
}

.wx-alert-badge.wx-alert-moderate {
  color: var(--yellow);
}

.wx-alert-badge.wx-alert-minor {
  color: var(--text-dim);
}

@keyframes wx-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ---- Weather alert popup ---- */

.wx-alert-splash .splash-box {
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  text-align: left;
}

.wx-alert-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.wx-alert-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
  background: var(--bg);
}

.wx-alert-event {
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 4px;
}

.wx-alert-event.wx-sev-Extreme,
.wx-alert-event.wx-sev-Severe { color: var(--red); }
.wx-alert-event.wx-sev-Moderate { color: var(--yellow); }
.wx-alert-event.wx-sev-Minor { color: var(--text-dim); }

.wx-alert-headline {
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 6px;
}

.wx-alert-desc {
  font-size: 0.75rem;
  color: var(--text-dim);
  white-space: pre-wrap;
  max-height: 160px;
  overflow-y: auto;
  margin-bottom: 6px;
}

.wx-alert-link {
  font-size: 0.78rem;
}

.wx-alert-link a {
  color: var(--accent);
  text-decoration: none;
}

.wx-alert-link a:hover {
  text-decoration: underline;
}

/* ---- Map overlay grid labels ---- */

.leaflet-mapOverlays-pane,
.leaflet-mapOverlays-pane * {
  pointer-events: none !important;
}

.grid-label {
  background: none !important;
  border: none !important;
  pointer-events: none !important;
  white-space: nowrap;
  font-family: monospace;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.9), -1px -1px 2px rgba(0,0,0,0.9);
}

.latlon-label {
  color: #4a90e2;
  font-size: 0.65rem;
}

.latlon-equator {
  font-size: 0.75rem;
  font-weight: 700;
  color: #64b5f6;
}

.maidenhead-label {
  color: #ff6b35;
  font-size: 0.85rem;
  font-weight: 700;
}

.maidenhead-label-sm {
  color: #ff6b35;
  font-size: 0.7rem;
  font-weight: 600;
}

.maidenhead-label-xs {
  color: #ff6b35;
  font-size: 0.55rem;
  font-weight: 600;
}

.timezone-label {
  color: #9b59b6;
  font-size: 0.7rem;
  font-weight: 600;
}

/* ---- Tropics & Arctic Lines ---- */

.tropics-label {
  color: #f0a050;
  font-size: 0.6rem;
  font-weight: 700;
}

.tropics-arctic {
  color: #6ec6ff;
}

/* ---- Map Legend ---- */

.map-legend {
  background: rgba(30, 30, 30, 0.85);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 0.7rem;
  color: var(--text);
  line-height: 1.6;
  pointer-events: auto;
}

.legend-title {
  font-weight: 700;
  margin-bottom: 2px;
  font-size: 0.75rem;
}

.legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.legend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.legend-circle {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid;
  background: transparent;
  flex-shrink: 0;
}

.legend-line {
  display: inline-block;
  width: 14px;
  height: 0;
  border-top: 2px solid;
  flex-shrink: 0;
}

.legend-sun {
  background: radial-gradient(circle, #ffeb3b, #ff9800);
}

.legend-moon {
  background: radial-gradient(circle, #e0e0e0, #9e9e9e);
}

.legend-beacon {
  background: #ff4444;
  width: 6px;
  height: 6px;
}

.legend-label {
  color: var(--text);
}

/* ---- Scrollbar ---- */

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--surface2); }

/* ---- Reference Widget ---- */

.rst-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.reference-tabs {
  display: flex;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.reference-tab {
  padding: 4px 12px;
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-dim);
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.15s;
}

.reference-tab:hover {
  background: var(--surface2);
  color: var(--text);
}

.reference-tab.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}

#referenceContent {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

.ref-description {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-bottom: 8px;
  line-height: 1.3;
}

.ref-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}

.ref-table th {
  text-align: left;
  color: var(--text-dim);
  font-weight: 600;
  padding: 3px 4px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.ref-table td {
  padding: 2px 4px;
  border-bottom: 1px solid rgba(42, 58, 94, 0.4);
}

.ref-table td:first-child,
.ref-table td:nth-child(3) {
  text-align: center;
  font-weight: 700;
  color: var(--accent);
  width: 1.5em;
}

.ref-note {
  margin-top: 8px;
  font-size: 0.72rem;
  color: var(--text-dim);
  text-align: center;
}

.ref-note a {
  color: var(--accent);
  text-decoration: none;
}

.ref-note a:hover {
  text-decoration: underline;
}

/* ---- Help Modal ---- */

.help-box {
  max-width: min(92vw, 600px);
  max-height: min(90vh, 80vh);
}

#helpContent {
  max-height: 60vh;
  overflow-y: auto;
  margin-bottom: 12px;
}

.help-description {
  font-size: 0.9rem;
  color: var(--text-dim);
  margin-bottom: 12px;
  line-height: 1.4;
}

.help-section {
  margin-bottom: 10px;
}

.help-section h3 {
  font-size: 0.85rem;
  color: var(--accent);
  margin: 0 0 4px 0;
  font-weight: 600;
}

.help-section p {
  font-size: 0.8rem;
  color: var(--text);
  margin: 0;
  line-height: 1.4;
}

.help-links {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.help-links h3 {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin: 0 0 6px 0;
  font-weight: 600;
}

.help-links a {
  display: block;
  color: var(--accent);
  text-decoration: none;
  font-size: 0.8rem;
  margin-bottom: 4px;
}

.help-links a:hover {
  text-decoration: underline;
}

/* ---- Feedback Modal ---- */

.feedback-box {
  max-width: min(92vw, 500px);
  max-height: min(92vh, 90vh);
}

.feedback-description {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-bottom: 16px;
  line-height: 1.4;
}

.feedback-field {
  margin-bottom: 12px;
}

.feedback-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text);
  margin-bottom: 4px;
  font-weight: 500;
}

.feedback-field label .required {
  color: var(--accent);
}

.feedback-field input[type="text"],
.feedback-field input[type="email"],
.feedback-field textarea {
  width: 100%;
  padding: 8px;
  font-size: 0.85rem;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  font-family: inherit;
  box-sizing: border-box;
}

.feedback-field textarea {
  resize: vertical;
  min-height: 120px;
}

.feedback-field input:focus,
.feedback-field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.feedback-char-count {
  font-size: 0.7rem;
  color: var(--text-dim);
  text-align: right;
  margin-top: 4px;
}

.feedback-privacy-notice {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 6px;
  margin-bottom: 0;
  line-height: 1.4;
  padding: 6px 8px;
  background: rgba(0, 255, 255, 0.05);
  border-left: 2px solid var(--accent);
  border-radius: 2px;
}

.feedback-status {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  margin-bottom: 12px;
}

.feedback-status.hidden {
  display: none;
}

.feedback-status.success {
  background: rgba(0, 200, 100, 0.2);
  border: 1px solid rgba(0, 200, 100, 0.5);
  color: #00ff80;
}

.feedback-status.error {
  background: rgba(255, 80, 80, 0.2);
  border: 1px solid rgba(255, 80, 80, 0.5);
  color: #ff8080;
}

.feedback-buttons {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.feedback-buttons button {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-secondary);
  color: var(--text);
  transition: all 0.15s;
}

.feedback-buttons button[type="submit"] {
  background: var(--accent);
  border-color: var(--accent);
  color: #000;
  font-weight: 500;
}

.feedback-buttons button:hover {
  background: var(--bg-tertiary);
}

.feedback-buttons button[type="submit"]:hover {
  background: #00b8ff;
  border-color: #00b8ff;
}

.feedback-buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Spot Detail Widget ---- */

.spot-detail-empty {
  text-align: center;
  color: var(--text-dim);
  padding: 2em 0;
  font-style: italic;
}

.spot-detail-call {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 2px;
}

.spot-detail-call a {
  color: var(--accent);
  text-decoration: none;
}

.spot-detail-call a:hover {
  text-decoration: underline;
}

.spot-detail-name {
  color: var(--text-dim);
  font-size: 0.8rem;
  margin-bottom: 6px;
  min-height: 1em;
}

.spot-detail-row {
  font-size: 0.82rem;
  padding: 1px 0;
}

.spot-detail-label {
  color: var(--text-dim);
  margin-right: 4px;
}

.spot-detail-row a {
  color: var(--accent);
  text-decoration: none;
}

.spot-detail-row a:hover {
  text-decoration: underline;
}

.spot-detail-comments {
  color: var(--text-dim);
  font-size: 0.78rem;
  margin-top: 4px;
}

.spot-detail-wx {
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.spot-detail-wx:empty {
  display: none;
}

.spot-detail-wx.wx-storm { background: rgba(255, 23, 68, 0.15); }
.spot-detail-wx.wx-rain { background: rgba(41, 121, 255, 0.15); }
.spot-detail-wx.wx-snow { background: rgba(144, 202, 249, 0.15); }
.spot-detail-wx.wx-cloudy { background: rgba(136, 153, 170, 0.12); }
.spot-detail-wx.wx-fog { background: rgba(136, 153, 170, 0.08); }
.spot-detail-wx.wx-clear { background: rgba(0, 200, 83, 0.1); }

#widget-spot-detail .widget-body {
  padding: 8px 10px;
  overflow-y: auto;
}

/* ---- Satellite Widget ---- */

#widget-satellites .widget-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sat-list {
  flex-shrink: 0;
  max-height: 200px;
  overflow-y: auto;
  border-bottom: 1px solid var(--border);
}

.sat-row {
  display: flex;
  align-items: center;
  padding: 5px 8px;
  font-size: 0.78rem;
  border-bottom: 1px solid rgba(42, 58, 94, 0.4);
  cursor: pointer;
  transition: background 0.1s;
}

.sat-row:hover {
  background: var(--surface2);
}

.sat-row.selected {
  background: var(--surface2);
  border-left: 3px solid var(--accent);
}

.sat-row.below-horizon {
  opacity: 0.5;
}

.sat-name {
  flex: 1;
  font-weight: 600;
  color: var(--text);
}

.sat-azel {
  width: 100px;
  text-align: right;
  color: var(--text-dim);
  font-size: 0.72rem;
}

.sat-doppler {
  width: 65px;
  text-align: right;
  color: var(--yellow);
  font-size: 0.72rem;
  font-family: monospace;
}

.sat-tle-age {
  font-size: 0.6rem;
  margin-left: 4px;
  padding: 0 3px;
  border-radius: 2px;
  font-family: monospace;
}
.sat-tle-age.tle-fresh { color: var(--green); }
.sat-tle-age.tle-aging { color: var(--yellow); }
.sat-tle-age.tle-stale { color: var(--red); }

.sat-no-key,
.sat-no-data {
  padding: 16px;
  text-align: center;
  color: var(--text-dim);
  font-style: italic;
  font-size: 0.8rem;
}

/* Satellite passes section */
.sat-passes {
  flex: 1;
  padding: 8px;
  overflow-y: auto;
}

.sat-passes-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sat-no-passes {
  color: var(--text-dim);
  font-size: 0.78rem;
  font-style: italic;
}

.pass-item {
  padding: 6px 8px;
  margin-bottom: 6px;
  background: var(--bg);
  border-radius: 4px;
  border-left: 3px solid var(--accent);
}

.pass-time {
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--text);
}

.pass-details {
  font-size: 0.75rem;
  color: var(--yellow);
}

.pass-azimuth {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Satellite map markers */
.sat-icon {
  background: #4caf50;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  border: 2px solid #fff;
  box-shadow: 0 0 8px rgba(76, 175, 80, 0.6);
}

.sat-icon.below-horizon {
  background: #666;
  box-shadow: none;
}

/* Satellite popup */
.sat-popup-title {
  font-weight: 700;
  font-size: 1rem;
  color: #4caf50;
  margin-bottom: 4px;
}

.sat-popup-row {
  font-size: 0.8rem;
  color: var(--text-dim);
  line-height: 1.5;
}

.sat-radio-header {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--yellow);
  margin-top: 8px;
  margin-bottom: 4px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.sat-freq-table {
  width: 100%;
  font-size: 0.75rem;
  border-collapse: collapse;
}

.sat-freq-table td {
  padding: 2px 4px;
  border-bottom: 1px solid var(--border);
}

.sat-freq-table td:first-child {
  color: var(--text-dim);
}

.sat-freq-table td:last-child {
  font-family: monospace;
  color: var(--yellow);
  text-align: right;
}

/* Satellite config modal */
.sat-cfg-box {
  max-width: min(92vw, 400px);
}

.sat-select-list {
  max-height: 250px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 16px;
  text-align: left;
}

.sat-select-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--text);
  margin-bottom: 0;
  cursor: pointer;
}

.sat-select-item input[type="checkbox"] {
  width: auto;
  margin-bottom: 0;
  cursor: pointer;
}

/* ---- Live Spots Widget ---- */

#widget-live-spots .widget-body {
  padding: 8px;
  overflow-y: auto;
}

.live-spots-status {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 8px;
  font-style: italic;
}

.live-spots-status:not(.visible) {
  display: none;
}

.live-spots-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}

.live-spots-band-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: var(--surface2);
  border-radius: 4px;
  border-left: 3px solid var(--text-dim);
  cursor: pointer;
  transition: all 0.2s;
  min-width: 50px;
}

.live-spots-band-card:hover {
  background: var(--bg);
}

.live-spots-band-card.active {
  background: var(--bg);
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.live-spots-band-name {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
}

.live-spots-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent);
}

.live-spots-farthest {
  font-size: 0.6rem;
  color: var(--text-dim);
  font-family: monospace;
}

/* Live Spots map markers */
.live-spots-rx-marker {
  background: transparent !important;
  border: none !important;
}

.live-spots-rx-icon {
  font-size: 12px;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.8);
}

.live-spots-popup {
  font-size: 0.85rem;
}

.live-spots-popup-call {
  font-weight: 700;
  color: var(--accent);
}

.live-spots-popup-grid {
  font-family: monospace;
  color: var(--text-dim);
  font-size: 0.8rem;
}

.live-spots-popup-details {
  color: var(--yellow);
  font-size: 0.8rem;
}

.live-spots-popup-mode {
  color: var(--text-dim);
  font-size: 0.75rem;
}

/* Live Spots config modal */
.live-spots-cfg-box {
  max-width: min(92vw, 350px);
}

.live-spots-cfg-field {
  margin-bottom: 12px;
  text-align: left;
}

.live-spots-cfg-field label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dim);
  margin-bottom: 4px;
}

.live-spots-cfg-field select {
  width: 100%;
  padding: 6px 10px;
  font-size: 0.85rem;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}

.live-spots-cfg-note {
  font-size: 0.75rem;
  color: var(--text-dim);
  text-align: left;
  line-height: 1.4;
  margin-bottom: 12px;
}

/* ---- VOACAP DE→DX Widget ---- */

#widget-voacap .widget-body {
  padding: 4px 6px;
  overflow: auto;
}

.voacap-matrix {
  overflow-x: auto;
}

.voacap-no-data {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-dim);
  padding: 16px;
  font-style: italic;
}

.voacap-no-prop {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-dim);
  padding: 4px 0;
  font-style: italic;
}

.voacap-table {
  border-collapse: separate;
  border-spacing: 1px;
  table-layout: fixed;
  font-size: 0.55rem;
  width: 100%;
  background: #0d1117; /* dark gap color between cells */
}

.voacap-table td {
  padding: 0;
  text-align: center;
}

.voacap-band-label {
  width: 30px;
  min-width: 30px;
  font-size: 0.55rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  padding-right: 4px !important;
  white-space: nowrap;
}

.voacap-row {
  cursor: pointer;
  transition: background 0.1s;
}

.voacap-row:hover {
  background: rgba(255, 255, 255, 0.05);
}

.voacap-row-active {
  background: rgba(233, 69, 96, 0.15);
}

.voacap-row-active:hover {
  background: rgba(233, 69, 96, 0.2);
}

.voacap-cell {
  height: 14px;
  transition: transform 0.1s;
  border-radius: 1px;
}

.voacap-cell:hover {
  transform: scale(1.3);
  z-index: 10;
  position: relative;
}

.voacap-cell-now {
  outline: 1.5px solid var(--accent);
  outline-offset: -1px;
}

/* Hour labels row at bottom */
.voacap-hour-row td {
  padding: 0;
}

.voacap-hour-label {
  font-size: 0.5rem;
  color: var(--text-dim);
  text-align: left;
  padding-left: 1px !important;
}

.voacap-hour-now {
  color: var(--accent);
  font-weight: 700;
}

/* Parameter bar */
.voacap-params {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 3px;
  border-top: 1px solid var(--border);
}

.voacap-param {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  padding: 1px 5px;
  border-radius: 3px;
  transition: background 0.15s;
  user-select: none;
}

.voacap-param:hover {
  background: rgba(233, 69, 96, 0.15);
}

.voacap-param-active {
  background: var(--green);
  color: #000;
  border-radius: 3px;
}

.voacap-param-active:hover {
  background: var(--green);
  opacity: 0.85;
}

.voacap-param-static {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-dim);
  padding: 1px 5px;
}

/* K-index storm warning — highlights SSN when K>=4 causes degradation */
.voacap-k-warning {
  color: var(--yellow);
  font-weight: 700;
}

/* Engine badge — green for real VOACAP, gray for simplified */
.voacap-engine-badge {
  font-size: 0.55rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  letter-spacing: 0.03em;
  user-select: none;
}

.voacap-engine-real {
  background: var(--green);
  color: #000;
}

.voacap-engine-sim {
  background: var(--text-dim);
  color: #000;
}

/* VOACAP color legend */
.voacap-legend {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 2px;
  font-size: 0.55rem;
  color: var(--text-dim);
}

.voacap-legend-item {
  display: flex;
  align-items: center;
  gap: 3px;
}

.voacap-legend-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid var(--text-dim);
}

/* VOACAP map overlay */
.voacap-center-marker {
  background: transparent !important;
  border: none !important;
}

.voacap-center-label {
  background: rgba(0, 0, 0, 0.7);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
  white-space: nowrap;
}



/* ---- Responsive adjustments for small screens ---- */

@media (max-width: 480px) {
  .splash-box {
    padding: 20px 24px;
    border-radius: 6px;
  }

  .splash-box h2 {
    font-size: 1.2rem;
    margin-bottom: 16px;
  }

  .splash-box input {
    font-size: 1rem;
    padding: 6px 10px;
    margin-bottom: 12px;
  }

  .splash-box button {
    padding: 6px 24px;
    font-size: 0.85rem;
  }

  .config-tabs {
    flex-wrap: wrap;
    gap: 2px;
  }

  .config-box .config-tab {
    padding: 5px 10px;
    font-size: 0.75rem;
  }

  .help-section h3 {
    font-size: 0.8rem;
  }

  .help-section p {
    font-size: 0.75rem;
  }

  .feedback-field input,
  .feedback-field textarea {
    font-size: 0.8rem;
    padding: 6px;
  }
}

/* ---- NCDXF Beacons Widget ---- */

.beacon-table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.beacon-table th { text-align: left; color: var(--text-dim); font-weight: 600; padding: 2px 6px; border-bottom: 1px solid var(--border); }
.beacon-table td { padding: 3px 6px; border-bottom: 1px solid var(--border); }
.beacon-call { font-weight: 700; color: var(--green); }
.beacon-loc { color: var(--text-dim); font-size: 0.7rem; }
.beacon-time { color: var(--text-dim); font-size: 0.7rem; text-align: right; }

/* ---- DE/DX Info Widget ---- */
.dedx-container { display: flex; gap: 0; height: 100%; }
.dedx-panel { flex: 1; padding: 4px 8px; overflow-y: auto; }
.dedx-de { border-right: 1px solid var(--border); }
.dedx-title { text-align: center; font-weight: 700; font-size: 0.8rem; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 1px; }
.dedx-de .dedx-title { color: var(--de-color, var(--accent)); }
.dedx-dx .dedx-title { color: var(--dx-color, var(--accent)); }
.dedx-row { display: flex; justify-content: space-between; align-items: baseline; padding: 1px 0; font-size: 0.72rem; }
.dedx-label-sm { color: var(--text-dim); font-size: 0.68rem; text-transform: uppercase; min-width: 32px; }
.dedx-value { color: var(--text); font-weight: 600; text-align: right; }
.dedx-callsign { font-weight: 700; font-size: 0.85rem; }
.dedx-de .dedx-callsign { color: var(--de-color, var(--text)); }
.dedx-dx .dedx-callsign { color: var(--dx-color, var(--text)); }
.dedx-sunrise { color: var(--yellow); }
.dedx-sunset { color: var(--orange); }
.dedx-compact { letter-spacing: -0.3px; }
.dedx-utc-badge { font-size: 0.65rem; color: var(--text-dim); background: rgba(255,255,255,0.06); padding: 0 4px; border-radius: 3px; }
.dedx-clock { font-size: 1.5rem; font-weight: 700; font-family: 'Consolas', 'Courier New', monospace; letter-spacing: 1px; line-height: 1.2; text-align: center; margin-bottom: 2px; }
.dedx-de .dedx-clock { color: var(--de-color, var(--text)); }
.dedx-dx .dedx-clock { color: var(--dx-color, var(--text)); }
.dedx-utc-label { font-size: 0.65rem; color: var(--text-dim); text-align: center; font-weight: 600; margin-bottom: 3px; }
.dedx-empty { color: var(--text-dim); font-style: italic; font-size: 0.7rem; text-align: center; padding: 8px 0; }

@media (max-width: 1199px) {
  .dedx-container { flex-direction: column; }
  .dedx-de { border-right: none; border-bottom: 1px solid var(--border); }
}

/* ---- Stopwatch / Timer Widget ---- */
.sw-container { display: flex; flex-direction: column; align-items: center; padding: 4px 8px; height: 100%; overflow-y: auto; }
.sw-mode-tabs { display: flex; gap: 2px; margin-bottom: 6px; }
.sw-tab { background: var(--surface2, #1e1e1e); color: var(--text-dim); border: 1px solid var(--border); padding: 2px 10px; font-size: 0.7rem; cursor: pointer; border-radius: 3px; }
.sw-tab.active { background: var(--accent); color: var(--bg, #000); font-weight: 700; }
.sw-display { font-size: 2rem; font-weight: 700; font-family: 'Consolas', 'Courier New', monospace; letter-spacing: 2px; color: var(--text); padding: 4px 0; line-height: 1.2; }
.sw-display.sw-flash { animation: sw-blink 0.5s ease-in-out 6; }
@keyframes sw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; color: var(--red, #f44336); } }
.sw-controls { display: flex; gap: 4px; margin: 4px 0; }
.sw-btn { padding: 3px 10px; font-size: 0.7rem; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; background: var(--surface2, #1e1e1e); color: var(--text); }
.sw-btn:hover { background: var(--accent); color: var(--bg, #000); }
.sw-btn-start { border-color: var(--green, #4caf50); color: var(--green, #4caf50); }
.sw-btn-stop { border-color: var(--red, #f44336); color: var(--red, #f44336); }
.sw-btn-reset { border-color: var(--yellow, #ffc107); color: var(--yellow, #ffc107); }
.sw-btn-lap { border-color: var(--accent); color: var(--accent); }
.sw-btn-lap.hidden { display: none; }
.sw-countdown-set { display: flex; gap: 4px; margin: 4px 0; flex-wrap: wrap; justify-content: center; }
.sw-countdown-set.hidden { display: none; }
.sw-preset { padding: 3px 8px; font-size: 0.65rem; border: 1px solid var(--border); border-radius: 3px; cursor: pointer; background: var(--surface2, #1e1e1e); color: var(--text-dim); }
.sw-preset:hover { background: var(--accent); color: var(--bg, #000); }
.sw-laps { width: 100%; max-height: 80px; overflow-y: auto; font-size: 0.65rem; }
.sw-lap-row { display: flex; justify-content: space-between; padding: 1px 4px; border-bottom: 1px solid var(--border); }
.sw-lap-num { color: var(--text-dim); min-width: 20px; }
.sw-lap-time { color: var(--text); font-family: 'Consolas', 'Courier New', monospace; }

/* ---- Sun / Moon Map Markers ---- */
.sun-marker-icon { background: transparent; border: none; }
.sun-marker-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, #ffe066 40%, #ffaa00 100%); box-shadow: 0 0 8px 2px rgba(255, 200, 0, 0.6); }
.moon-marker-icon { background: transparent; border: none; }
.moon-marker-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #e8e8f0 40%, #aaaacc 100%); box-shadow: 0 0 6px 1px rgba(200, 200, 230, 0.5); }

/* ---- DXpeditions Widget ---- */

.widget-header-select {
  font-size: 0.65rem;
  padding: 1px 4px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
  margin-left: auto;
}

#widget-dxpeditions .widget-body { padding: 6px; overflow-y: auto; display: flex; flex-direction: column; }

.dxped-list { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }

.dxped-empty { text-align: center; color: var(--text-dim); font-size: 0.8rem; padding: 12px; font-style: italic; }

.dxped-card {
  padding: 6px 8px;
  background: var(--surface2);
  border-radius: 4px;
  border-left: 3px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.dxped-card:hover { background: var(--bg); }

.dxped-active-card { border-left-color: var(--green); }

.dxped-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.dxped-call { font-weight: 700; font-size: 0.82rem; color: var(--text); }

.dxped-entity { color: var(--text-dim); font-size: 0.75rem; }

.dxped-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #000;
  background: var(--green);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}

.dxped-detail { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }

.dxped-hide-btn {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}
.dxped-card:hover .dxped-hide-btn { opacity: 1; }
.dxped-hide-btn:hover { color: var(--red, #f44336); }

/* When badge is present, badge takes margin-left:auto and hide btn sits after it */
.dxped-badge + .dxped-hide-btn { margin-left: 0; }

.dxped-unhide-row {
  text-align: center;
  padding: 4px 0;
}
.dxped-unhide-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 3px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.dxped-unhide-btn:hover {
  color: var(--text);
  border-color: var(--text-dim);
}

/* ---- Contests Widget ---- */

#widget-contests .widget-body { padding: 6px; overflow-y: auto; display: flex; flex-direction: column; }

.contest-list { display: flex; flex-direction: column; gap: 4px; flex: 1; overflow-y: auto; }

.contest-empty { text-align: center; color: var(--text-dim); font-size: 0.8rem; padding: 12px; font-style: italic; }

.contest-card {
  padding: 6px 8px;
  background: var(--surface2);
  border-radius: 4px;
  border-left: 3px solid var(--border);
  cursor: pointer;
  transition: background 0.15s;
}

.contest-card:hover { background: var(--bg); }

.contest-active-card { border-left-color: var(--green); }

.contest-header { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.contest-name { font-weight: 700; font-size: 0.78rem; color: var(--text); }

.contest-mode {
  font-size: 0.58rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 3px;
  text-transform: uppercase;
}

.contest-mode-cw      { background: #ff9800; color: #000; }
.contest-mode-phone   { background: #2196f3; color: #fff; }
.contest-mode-digital { background: #9c27b0; color: #fff; }
.contest-mode-mixed   { background: var(--text-dim); color: #000; }

.contest-now-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: #000;
  background: var(--green);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}

.contest-detail { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; }

.contest-attribution {
  font-size: 0.6rem;
  color: var(--text-dim);
  text-align: center;
  padding: 4px 0 2px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}

.contest-attribution a { color: var(--accent); text-decoration: none; }
.contest-attribution a:hover { text-decoration: underline; }

/* ---- Theme: LCARS (Star Trek TNG) ---- */
/* Shape, font, and layout overrides applied via body.theme-lcars class.
   Colors are handled by CSS variable swapping in themes.js. */

.theme-lcars {
  font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Widget shape — rounded pill-style corners */
.theme-lcars .widget {
  border-radius: 16px;
  border-width: 2px;
}

.theme-lcars .widget-header {
  font-family: 'Arial Narrow', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: 0.82rem;
  padding: 5px 14px;
  border-radius: 14px 14px 0 0;
  color: #000;
}

/* Ensure header buttons/controls stay readable against colored header */
.theme-lcars .widget-header .widget-help-btn,
.theme-lcars .widget-header .widget-cfg-btn,
.theme-lcars .widget-header .spot-count {
  color: #000;
}

.theme-lcars .widget-body {
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .spacewx-tab {
  border-radius: 8px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Header — LCARS structural frame: left elbow + thin bars
   Technique from joernweissenborn/lcars: colored rectangle + black ::after
   cutout with border-radius creates the characteristic inner curve. */
.theme-lcars header {
  background: #000;
  padding: 0;
  gap: 3px;                      /* 3px black notch between segments */
  border-bottom: none;
  align-items: stretch;
  letter-spacing: 1px;
  color: var(--accent);
  position: relative;
}

/* Left elbow — colored vertical arm with inner curve cutout.
   The top 18px is the horizontal arm (matches bar height in center/right).
   Below that, a black ::after creates the inner curve. */
.theme-lcars .header-left {
  background: var(--surface2);   /* #9999CC blue-bell */
  border-radius: 0;             /* rectangular — cutout creates the curve */
  padding: 8px 44px 8px 20px;   /* 44px right clears the 36px cutout */
  position: relative;
  min-width: 280px;             /* firm floor — container-type prevents auto-sizing from children */
  max-width: 360px;
  flex: 0 0 auto;               /* don't grow, don't shrink */
  flex-direction: column;        /* stack info + buttons vertically */
  align-items: flex-start;       /* left-align — keeps content away from right cutout */
  gap: 4px;
}

/* Buttons row inside the column layout */
.theme-lcars .header-left .op-buttons {
  display: flex;
  flex-direction: row;
  gap: 6px;
}

/* Black cutout — creates the LCARS inner curve */
.theme-lcars .header-left::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  width: 36px;
  height: calc(100% - 18px);    /* 18px top = horizontal arm of elbow */
  background: #000;
  border-top-left-radius: 24px; /* characteristic LCARS inner curve */
}

/* Text on blue-bell background */
.theme-lcars .header-left .op-call,
.theme-lcars .header-left .op-call a {
  color: var(--accent);          /* gold callsign — stands out on blue-bell */
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}
.theme-lcars .header-left .op-name   { color: #000; }
.theme-lcars .header-left .op-loc    { color: rgba(0, 0, 0, 0.6); white-space: nowrap; }

.theme-lcars .header-left .op-btn {
  background: var(--accent);     /* gold pills on blue-bell */
  border-color: transparent;
}

/* Center — dark content area with thin bar at top */
.theme-lcars .header-center {
  background: #000;
  border-bottom: none;
  padding: 18px 20px 6px;       /* 18px top clears the 18px bar */
  flex: 1;
  position: relative;
}

/* Thin horizontal bar — visual continuation of elbow's horizontal arm */
.theme-lcars .header-center::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background: var(--accent);    /* gold bar */
}

/* Right — dark content area with thin bar + end cap */
.theme-lcars .header-right {
  background: #000;
  border-radius: 0;
  padding: 24px 16px 6px;       /* 24px top clears the 18px bar */
  position: relative;
  gap: 5px 8px;
  max-width: none;
  display: grid;
  grid-template-columns: repeat(4, auto);
  align-items: center;
  justify-items: center;
}

/* Lilac bar segment */
.theme-lcars .header-right::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 22px;                  /* room for end cap + gap */
  height: 18px;
  background: var(--surface3);  /* #CC99CC lilac */
}

/* End cap — rounded pill terminator */
.theme-lcars .header-right::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 18px;
  height: 18px;
  background: var(--surface3);  /* lilac pill cap */
  border-radius: 0 0 9px 9px;  /* rounded bottom = semicircle end cap */
}

/* Buttons on black — need visible colored backgrounds */
.theme-lcars #refreshBtn,
.theme-lcars #fullscreenBtn,
.theme-lcars .layout-btn {
  background: var(--accent);
  border-color: transparent;
}

.theme-lcars .feedback-btn {
  background: var(--surface2);
  color: #000;
}
.theme-lcars .coffee-btn {
  background: var(--accent);
  color: #000;
}
.theme-lcars .discord-btn {
  background: var(--surface3);
  border-color: transparent;
}
.theme-lcars .discord-btn .discord-icon {
  color: #000;
}

/* Header buttons readable on colored backgrounds */
.theme-lcars .op-btn,
.theme-lcars #refreshBtn,
.theme-lcars #fullscreenBtn,
.theme-lcars .layout-btn {
  color: #000;
}

/* Day/Night toggle, prop metric, map center buttons inside widget headers
   base has background:none which shows dark body through — needs explicit bg */
.theme-lcars .toggle-btn,
.theme-lcars .prop-metric-btn,
.theme-lcars .map-center-btn {
  color: #000;
  background: var(--surface2); /* blue-bell so black text is readable */
}

.theme-lcars .op-call a {
  letter-spacing: 2px;
}

/* Clock panels — LCARS colored panels with gold framing */
.theme-lcars .header-clock {
  border-radius: 0 0 16px 16px;
  letter-spacing: 1px;
  background: var(--surface2); /* blue-bell panel */
  border-color: var(--accent); /* gold frame */
  border-width: 2px;
}

.theme-lcars .header-clock-label {
  font-family: 'Arial Narrow', Arial, sans-serif;
  color: #000;
  letter-spacing: 2px;
}

.theme-lcars .header-clock-time {
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
  color: #000;
  text-shadow: none;
}

/* Override weather-themed backgrounds — LCARS keeps uniform blue-bell panels */
.theme-lcars #headerClockLocal[class*="wx-"] {
  background: var(--surface2);
  border-color: var(--accent);
  box-shadow: none;
}

.theme-lcars #headerClockLocal[class*="wx-"] .header-clock-label,
.theme-lcars #headerClockLocal[class*="wx-"] .header-clock-time,
.theme-lcars #headerClockLocal[class*="wx-"] .header-clock-weather {
  color: #000;
  text-shadow: none;
}

/* Buttons — pill shaped */
.theme-lcars .op-btn,
.theme-lcars #refreshBtn,
.theme-lcars #fullscreenBtn,
.theme-lcars .layout-btn,
.theme-lcars .feedback-btn,
.theme-lcars .coffee-btn,
.theme-lcars .discord-btn {
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Source tabs — rounded top, surface2 bg so black text is readable */
.theme-lcars .source-tab {
  border-radius: 10px 10px 0 0;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Arial Narrow', Arial, sans-serif;
  color: #000;
  background: var(--surface2);
}

.theme-lcars .source-tab.active {
  background: var(--accent);
  color: #000;
}

/* Band/mode filter buttons */
.theme-lcars .band-btn,
.theme-lcars .mode-btn {
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .band-btn.active,
.theme-lcars .mode-btn.active {
  color: #000;
}

/* Filter hover — black text on surface2 bg for contrast */
.theme-lcars .band-filters button:hover,
.theme-lcars .mode-filters button:hover {
  background: var(--surface2);
  color: #000;
}

/* Spot table — gold headers for contrast (base uses surface2 bg + text-dim = ~1.2:1) */
.theme-lcars #spotsTable th {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
  font-size: 0.7rem;
  background: var(--accent);
  color: #000;
  border-bottom-color: #000;
}

.theme-lcars #spotsTable th.sortable:hover {
  background: #FFDD88; /* lighter gold */
  color: #000;
}

.theme-lcars #spotsTable td {
  font-family: 'Arial Narrow', Arial, sans-serif;
  letter-spacing: 0.5px;
}

/* Row hover/selected — subtle tint instead of solid surface2 (text goes invisible) */
.theme-lcars #spotsTable tbody tr:hover {
  background: rgba(153, 153, 204, 0.15); /* subtle blue-bell tint */
}

.theme-lcars #spotsTable tbody tr.selected {
  background: rgba(153, 153, 204, 0.25);
}

/* Solar indices — black text on surface2 cards for contrast */
.theme-lcars .solar-card-label {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .solar-card .label { color: #000; }
.theme-lcars .solar-card .value { color: #000; font-weight: 700; }

/* Propagation summary — dark bg so labels/values stay readable */
.theme-lcars .prop-summary {
  background: var(--surface);
  border: 1px solid var(--surface2);
}

.theme-lcars .prop-summary-label {
  color: var(--surface2); /* blue-bell labels on dark bg */
}

/* Propagation widget */
.theme-lcars .toggle-btn {
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .prop-metric-btn {
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .map-center-btn {
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Reference tabs */
.theme-lcars .reference-tab {
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .reference-tab:hover {
  background: #FFFF99; /* pale-canary */
  color: #000;
}

.theme-lcars .reference-tab.active { color: #000; }

/* Config/splash modal */
.theme-lcars .splash-box {
  border-radius: 20px;
  border-width: 2px;
}

.theme-lcars .splash-box h2 {
  text-transform: uppercase;
  letter-spacing: 3px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .config-tab {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars #splashOk,
.theme-lcars #solarCfgOk,
.theme-lcars #lunarCfgOk,
.theme-lcars #spotColCfgOk,
.theme-lcars #mapOverlayCfgOk,
.theme-lcars #liveSpotsCfgOk,
.theme-lcars #satCfgOk,
.theme-lcars #helpOk,
.theme-lcars #wxAlertClose,
.theme-lcars #feedbackCancel,
.theme-lcars #feedbackSubmit {
  border-radius: 12px;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Presets and dropdowns */
.theme-lcars select {
  border-radius: 10px;
  font-family: 'Arial Narrow', Arial, sans-serif;
  letter-spacing: 1px;
}

.theme-lcars input[type="text"],
.theme-lcars input[type="number"],
.theme-lcars input[type="email"],
.theme-lcars textarea {
  border-radius: 10px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

/* Filter preset buttons */
.theme-lcars #savePresetBtn,
.theme-lcars #deletePresetBtn,
.theme-lcars #clearFiltersBtn {
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars #savePresetBtn:hover,
.theme-lcars #deletePresetBtn:hover,
.theme-lcars #clearFiltersBtn:hover {
  background: var(--surface2);
  color: #000;
}

/* Widget help and config buttons */
.theme-lcars .widget-help-btn {
  border-radius: 50%;
  font-family: 'Arial Narrow', Arial, sans-serif;
}

.theme-lcars .widget-cfg-btn {
  border-radius: 50%;
}

/* Thin bottom bar — completes the LCARS frame under the header */
.theme-lcars header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--surface2);  /* blue-bell bottom frame line */
}

/* Scrollbar theming */
.theme-lcars ::-webkit-scrollbar { width: 10px; }
.theme-lcars ::-webkit-scrollbar-track { background: #000; }
.theme-lcars ::-webkit-scrollbar-thumb { background: #444; border-radius: 5px; }
.theme-lcars ::-webkit-scrollbar-thumb:hover { background: #666; }

/* Button active state — hopbush pink flash (canonical LCARS click feedback) */
.theme-lcars .op-btn:active,
.theme-lcars .source-tab:active,
.theme-lcars .toggle-btn:active,
.theme-lcars .band-btn:active,
.theme-lcars .mode-btn:active,
.theme-lcars .prop-metric-btn:active,
.theme-lcars .map-center-btn:active,
.theme-lcars #refreshBtn:active,
.theme-lcars #fullscreenBtn:active,
.theme-lcars .layout-btn:active {
  background: #CC6699 !important; /* hopbush — canonical LCARS click color */
}

/* Button hover — brighten to pale-canary */
.theme-lcars .op-btn:hover,
.theme-lcars .source-tab:hover,
.theme-lcars #refreshBtn:hover,
.theme-lcars #fullscreenBtn:hover,
.theme-lcars .layout-btn:hover {
  background: #FFFF99; /* pale-canary */
  color: #000;
}

/* Toggle/metric/map-center hover — pale-canary for contrast on surface2 */
.theme-lcars .toggle-btn:hover,
.theme-lcars .prop-metric-btn:hover,
.theme-lcars .map-center-btn:hover {
  background: #FFFF99; /* pale-canary */
  color: #000;
}

/* Active metric/reference buttons — black on gold for contrast */
.theme-lcars .prop-metric-btn.active { color: #000; }

/* Callsign — gold for LCARS feel */
.theme-lcars .callsign { color: var(--accent); }

/* Source tab black notch separator (LCARS "decorated bar" pattern) */
.theme-lcars .source-tab + .source-tab {
  border-left: 2px solid #000;
}

/* Active button distinct palette colors per group */
.theme-lcars .band-btn.active {
  background: #FF9933; /* neon-carrot */
}

.theme-lcars .mode-btn.active {
  background: #CC99CC; /* lilac */
}

/* Spot table row-scan animation — subtle LCARS data display effect */
@keyframes lcars-rowscan {
  0%   { filter: brightness(1.0); }
  3%   { filter: brightness(1.4); }
  10%  { filter: brightness(1.4); }
  14%  { filter: brightness(1.0); }
  100% { filter: brightness(1.0); }
}

.theme-lcars #spotsTable tbody tr {
  animation: lcars-rowscan 10s infinite;
}

/* Stagger each row by 0.5s for cascading scan effect */
.theme-lcars #spotsTable tbody tr:nth-child(1)  { animation-delay: 0s; }
.theme-lcars #spotsTable tbody tr:nth-child(2)  { animation-delay: 0.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(3)  { animation-delay: 1.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(4)  { animation-delay: 1.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(5)  { animation-delay: 2.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(6)  { animation-delay: 2.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(7)  { animation-delay: 3.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(8)  { animation-delay: 3.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(9)  { animation-delay: 4.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(10) { animation-delay: 4.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(11) { animation-delay: 5.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(12) { animation-delay: 5.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(13) { animation-delay: 6.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(14) { animation-delay: 6.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(15) { animation-delay: 7.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(16) { animation-delay: 7.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(17) { animation-delay: 8.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(18) { animation-delay: 8.5s; }
.theme-lcars #spotsTable tbody tr:nth-child(19) { animation-delay: 9.0s; }
.theme-lcars #spotsTable tbody tr:nth-child(20) { animation-delay: 9.5s; }

/* LCARS mobile/tablet: disable elbow cutout, simplify to stacked layout */
@media (max-width: 1199px) {
  .theme-lcars .header-left {
    min-width: 0;
    max-width: none;
    padding: 8px 12px;
  }

  .theme-lcars .header-left::after {
    display: none;
  }

  .theme-lcars .header-center {
    padding: 6px 12px;
  }

  .theme-lcars .header-right {
    padding: 4px 12px;
  }
}

/* ---- Theme: Terminal ---- */
/* Monospace terminal feel, green-on-black, tighter spacing.
   Colors are handled by CSS variable swapping in themes.js. */

.theme-terminal {
  font-family: 'Courier New', 'Lucida Console', monospace;
}

/* Widget — sharp corners, thin borders, terminal feel */
.theme-terminal .widget {
  border-radius: 2px;
  border-width: 1px;
}

.theme-terminal .widget-header {
  font-family: 'Courier New', 'Lucida Console', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: 1px 1px 0 0;
}

.theme-terminal .widget-body {
  font-family: 'Courier New', 'Lucida Console', monospace;
}

/* Header — minimal, terminal-like */
.theme-terminal header {
  padding: 4px 12px;
}

.theme-terminal .op-call a {
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}

/* Clock — monospace, smaller, denser */
.theme-terminal .header-clock {
  border-radius: 3px;
  padding: 8px 20px;
}

.theme-terminal .header-clock-time {
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

.theme-terminal .header-clock-label {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Buttons — squared off, utilitarian */
.theme-terminal .op-btn,
.theme-terminal #refreshBtn,
.theme-terminal #fullscreenBtn,
.theme-terminal .layout-btn,
.theme-terminal .feedback-btn,
.theme-terminal .coffee-btn,
.theme-terminal .discord-btn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Source tabs — very square */
.theme-terminal .source-tab {
  border-radius: 2px 2px 0 0;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-terminal .source-tab.active {
  background: var(--accent);
  color: #000;
}

/* Band/mode buttons */
.theme-terminal .band-btn,
.theme-terminal .mode-btn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
}

.theme-terminal .band-btn.active,
.theme-terminal .mode-btn.active {
  color: #000;
}

/* Spot table — monospace data */
.theme-terminal #spotsTable th {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
}

.theme-terminal #spotsTable td {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
}

/* Solar card labels */
.theme-terminal .solar-card-label {
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
}

/* Toggle/control buttons */
.theme-terminal .toggle-btn,
.theme-terminal .prop-metric-btn,
.theme-terminal .map-center-btn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

/* Reference tabs */
.theme-terminal .reference-tab {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

/* Modal */
.theme-terminal .splash-box {
  border-radius: 4px;
}

.theme-terminal .splash-box h2 {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.theme-terminal .config-tab {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

.theme-terminal #splashOk,
.theme-terminal #solarCfgOk,
.theme-terminal #lunarCfgOk,
.theme-terminal #spotColCfgOk,
.theme-terminal #mapOverlayCfgOk,
.theme-terminal #liveSpotsCfgOk,
.theme-terminal #satCfgOk,
.theme-terminal #helpOk,
.theme-terminal #wxAlertClose,
.theme-terminal #feedbackCancel,
.theme-terminal #feedbackSubmit {
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Inputs */
.theme-terminal select {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
}

.theme-terminal input[type="text"],
.theme-terminal input[type="number"],
.theme-terminal input[type="email"],
.theme-terminal textarea {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
}

/* Filter buttons */
.theme-terminal #savePresetBtn,
.theme-terminal #deletePresetBtn,
.theme-terminal #clearFiltersBtn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

/* ---- Theme: HamClock ---- */
/* Inspired by HamClock by WB0OEW — dark navy/black with cyan headings and colored data.
   Shares structural overrides with Terminal (monospace, sharp corners) but uses
   a cyan/blue color palette instead of green. */

.theme-hamclock {
  font-family: 'Courier New', 'Lucida Console', monospace;
}

.theme-hamclock .widget {
  border-radius: 2px;
  border-width: 1px;
}

.theme-hamclock .widget-header {
  font-family: 'Courier New', 'Lucida Console', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.74rem;
  padding: 3px 8px;
  border-radius: 1px 1px 0 0;
}

.theme-hamclock .widget-body {
  font-family: 'Courier New', 'Lucida Console', monospace;
}

.theme-hamclock header {
  padding: 4px 12px;
}

.theme-hamclock .op-call a {
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
}

.theme-hamclock .header-clock {
  border-radius: 3px;
  padding: 8px 20px;
}

.theme-hamclock .header-clock-time {
  font-family: 'Courier New', monospace;
  letter-spacing: 2px;
}

.theme-hamclock .header-clock-label {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-hamclock .op-btn,
.theme-hamclock #refreshBtn,
.theme-hamclock #fullscreenBtn,
.theme-hamclock .feedback-btn,
.theme-hamclock .coffee-btn,
.theme-hamclock .discord-btn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-hamclock .source-tab {
  border-radius: 2px 2px 0 0;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-hamclock .source-tab.active {
  background: var(--accent);
  color: #000;
}

.theme-hamclock .band-btn,
.theme-hamclock .mode-btn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
}

.theme-hamclock .band-btn.active,
.theme-hamclock .mode-btn.active {
  color: #000;
}

.theme-hamclock #spotsTable th {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Courier New', monospace;
  font-size: 0.68rem;
}

.theme-hamclock #spotsTable td {
  font-family: 'Courier New', monospace;
  font-size: 0.72rem;
}

.theme-hamclock .solar-card-label {
  text-transform: uppercase;
  font-family: 'Courier New', monospace;
}

.theme-hamclock .toggle-btn,
.theme-hamclock .prop-metric-btn,
.theme-hamclock .map-center-btn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

.theme-hamclock .reference-tab {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

.theme-hamclock .splash-box {
  border-radius: 4px;
}

.theme-hamclock .splash-box h2 {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.theme-hamclock .config-tab {
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

.theme-hamclock #splashOk,
.theme-hamclock #solarCfgOk,
.theme-hamclock #lunarCfgOk,
.theme-hamclock #spotColCfgOk,
.theme-hamclock #mapOverlayCfgOk,
.theme-hamclock #liveSpotsCfgOk,
.theme-hamclock #satCfgOk,
.theme-hamclock #helpOk,
.theme-hamclock #wxAlertClose,
.theme-hamclock #feedbackCancel,
.theme-hamclock #feedbackSubmit {
  border-radius: 3px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.theme-hamclock select {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
}

.theme-hamclock input[type="text"],
.theme-hamclock input[type="number"],
.theme-hamclock input[type="email"],
.theme-hamclock textarea {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
}

.theme-hamclock #savePresetBtn,
.theme-hamclock #deletePresetBtn,
.theme-hamclock #clearFiltersBtn {
  border-radius: 2px;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

/* ---- HamClock DE/DX Panel Overrides ---- */

/* DE panel — orange theme (matches real HamClock DE box) */
.theme-hamclock .dedx-de { border-right: none; border-left: 3px solid var(--de-color); }
.theme-hamclock .dedx-de .dedx-title { color: var(--de-color); }
.theme-hamclock .dedx-de .dedx-value { color: var(--de-color); }
.theme-hamclock .dedx-de .dedx-callsign { color: var(--de-color); font-size: 1rem; }
.theme-hamclock .dedx-de .dedx-label-sm { color: #b07000; }

/* DX panel — green theme (matches real HamClock DX box) */
.theme-hamclock .dedx-dx { border-left: 3px solid var(--dx-color); }
.theme-hamclock .dedx-dx .dedx-title { color: var(--dx-color); }
.theme-hamclock .dedx-dx .dedx-value { color: var(--dx-color); }
.theme-hamclock .dedx-dx .dedx-callsign { color: var(--dx-color); font-size: 1rem; }
.theme-hamclock .dedx-dx .dedx-label-sm { color: #008800; }

/* Sunrise yellow, sunset orange for both panels */
.theme-hamclock .dedx-sunrise { color: #ffff00; }
.theme-hamclock .dedx-sunset { color: #ff8800; }

/* Dense stacked layout */
.theme-hamclock .dedx-container { flex-direction: column; }
.theme-hamclock .dedx-panel { border-right: none; border-bottom: 1px solid #333; }
.theme-hamclock .dedx-row { font-size: 0.82rem; padding: 1px 4px; }

/* Pure black widget bodies */
.theme-hamclock .widget-body { background: #000000; padding: 2px; }
.theme-hamclock .widget { border-color: #333; border-width: 1px; border-radius: 0; }
.theme-hamclock .widget-header { font-size: 0.7rem; padding: 2px 6px; text-transform: uppercase; border-radius: 0; }

/* UTC badge in HamClock theme */
.theme-hamclock .dedx-utc-badge { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* DE/DX Info clocks in HamClock theme */
.theme-hamclock .dedx-de .dedx-clock { color: var(--de-color); }
.theme-hamclock .dedx-dx .dedx-clock { color: var(--dx-color); }

/* Stopwatch in HamClock theme */
.theme-hamclock .sw-display { color: var(--accent); }

/* ---- Theme: Neon (digital grid glow) ---- */
/* Glow effects on widgets and interactive elements */

.theme-neon .widget {
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow: 0 0 8px rgba(0, 229, 255, 0.15), inset 0 0 8px rgba(0, 229, 255, 0.05);
}

.theme-neon .widget-header {
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.5);
}

.theme-neon .widget:hover {
  box-shadow: 0 0 14px rgba(0, 229, 255, 0.25), inset 0 0 10px rgba(0, 229, 255, 0.08);
}

.theme-neon header {
  border-bottom: 1px solid rgba(0, 229, 255, 0.2);
  box-shadow: 0 2px 12px rgba(0, 229, 255, 0.1);
}

.theme-neon .header-clock-time {
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

.theme-neon .op-call a {
  text-shadow: 0 0 6px rgba(0, 229, 255, 0.4);
}

.theme-neon .source-tab.active {
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.theme-neon .band-btn.active,
.theme-neon .mode-btn.active {
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.3);
}

.theme-neon .toggle-btn,
.theme-neon .prop-metric-btn,
.theme-neon .map-center-btn {
  border-color: rgba(0, 229, 255, 0.3);
}

.theme-neon .solar-card {
  box-shadow: 0 0 6px rgba(0, 229, 255, 0.1);
}

/* ---- Theme: Steampunk (brass & gaslight) ---- */
/* Warm metallic borders and aged styling */

.theme-steampunk .widget {
  border-color: rgba(212, 160, 74, 0.4);
  border-width: 2px;
  border-radius: 2px;
}

.theme-steampunk .widget-header {
  font-variant: small-caps;
  letter-spacing: 1px;
}

.theme-steampunk .widget:hover {
  border-color: rgba(212, 160, 74, 0.6);
}

.theme-steampunk header {
  border-bottom: 2px solid rgba(212, 160, 74, 0.3);
}

.theme-steampunk .source-tab.active {
  border-bottom: 2px solid var(--accent);
}

.theme-steampunk .band-btn.active,
.theme-steampunk .mode-btn.active {
  border: 1px solid rgba(212, 160, 74, 0.5);
}

.theme-steampunk .toggle-btn,
.theme-steampunk .prop-metric-btn,
.theme-steampunk .map-center-btn {
  border-color: rgba(212, 160, 74, 0.4);
  border-radius: 2px;
}

.theme-steampunk .solar-card {
  border: 1px solid rgba(212, 160, 74, 0.2);
  border-radius: 2px;
}

.theme-steampunk .header-clock-time {
  font-variant-numeric: tabular-nums;
}

/* ---- Theme Selector (Config Modal Appearance Tab) ---- */

.theme-selector {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 8px 0;
}

.theme-swatch {
  width: 100px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  transition: border-color 0.15s, transform 0.15s;
  background: rgba(255, 255, 255, 0.03);
}

.theme-swatch:hover {
  transform: translateY(-2px);
  border-color: var(--text-dim);
}

.theme-swatch.active {
  border-color: var(--accent);
  box-shadow: 0 0 10px rgba(233, 69, 96, 0.25);
}

.theme-swatch-colors {
  display: flex;
  gap: 2px;
  height: 32px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 6px;
}

.theme-swatch-colors span {
  flex: 1;
}

.theme-swatch-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}

.theme-swatch-desc {
  font-size: 0.65rem;
  color: var(--text-dim);
  margin-top: 2px;
}

/* ---- Grid Layout Mode ---- */

.widget-area.grid-active {
  display: grid;
  gap: 6px;
  padding: 6px;
}

/* Neutralize free-float inline styles when grid is active */
.grid-active .widget {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  min-width: 0;
  min-height: 80px;
  z-index: auto !important;
  /* Fill flex slot so widgets stretch to match their flex-grow allocation */
  overflow: hidden;
}

/* Widget body must fill available height in grid flex wrappers */
.grid-active .widget .widget-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
}

/* Map widget is always in the "map" grid area */
.grid-active #widget-map {
  grid-area: map;
}

/* Hide close button on map in grid mode — map is permanently visible */
.grid-active #widget-map .widget-close-btn {
  display: none;
}

/* Map header is not draggable in grid mode */
.grid-active #widget-map .widget-header {
  cursor: default;
}

/* Hide manual resize handles in grid mode — CSS Grid sizes cells */
.grid-active .widget-resize {
  display: none;
}

/* Drag feedback */
.grid-active .widget.grid-dragging {
  opacity: 0.5;
  z-index: 9999 !important;
}

.grid-active .widget.grid-drop-target {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}

/* Resize handles for grid track boundaries */
.grid-track-handle {
  position: absolute;
  z-index: 100;
  background: transparent;
  transition: background 0.15s;
}

.grid-track-handle:hover {
  background: var(--accent);
  opacity: 0.4;
}

.grid-track-handle:active {
  background: var(--accent);
  opacity: 0.7;
}

.grid-track-handle--col {
  width: 6px;
  cursor: col-resize;
  top: 0;
  bottom: 0;
}

.grid-track-handle--row {
  height: 6px;
  cursor: row-resize;
  left: 0;
  right: 0;
}

/* Visual grab indicator */
.grid-track-handle--col::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 40px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.15s;
}

.grid-track-handle--row::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 40px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.15s;
}

.grid-track-handle:hover::after {
  opacity: 0.8;
}

/* Placeholder cells for unoccupied grid slots */
.grid-cell-placeholder {
  background: var(--bg-tertiary);
  border: 1px dashed var(--border);
  border-radius: 6px;
  opacity: 0.4;
  min-height: 60px;
}

/* ---- Flex Column/Bar Wrappers (grid+flex hybrid) ---- */

.grid-col-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 0;
  overflow: hidden;
}

.grid-bar-wrapper {
  display: flex;
  flex-direction: row;
  gap: 6px;
  min-height: 0;
  overflow: hidden;
}

/* When bar has flex handles between items, remove gap (handles replace it) */
.grid-bar-wrapper:has(.grid-flex-handle) {
  gap: 0;
}

/* Widgets and placeholders inside flex wrappers */
.grid-col-wrapper > .widget,
.grid-bar-wrapper > .widget,
.grid-col-wrapper > .grid-cell-placeholder,
.grid-bar-wrapper > .grid-cell-placeholder {
  flex: 1 1 0%;
  min-height: 80px;
  min-width: 0;
}

/* Column widgets: override height:auto→0 so flex-grow gives a definite height,
   enabling widget-body overflow:auto to produce scrollbars */
.grid-col-wrapper > .widget {
  height: 0 !important;
}

/* ---- Grid mode: compact layouts for image+data widgets ---- */

/* Lunar: moon left, data cards right */
.grid-active #widget-lunar .widget-body {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 6px;
}

.grid-active #moonCanvas {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  margin: 0;
}

.grid-active .lunar-cards {
  flex: 1 1 0%;
  min-width: 0;
  gap: 4px;
  padding: 0;
  overflow-y: auto;
}

/* Solar: image left, indices right */
.grid-active #widget-solar .widget-body {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 6px;
  padding: 6px;
}

.grid-active .solar-image-container {
  flex-shrink: 0;
  width: 120px;
  padding: 4px 0 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
}

/* Move select below the sun image */
.grid-active .solar-image-container select {
  order: 1;
  margin: 4px 0 0;
}

.grid-active .solar-canvas-wrap {
  margin: 4px auto 0;
}

.grid-active #solarCanvas {
  width: 100%;
  height: auto;
  max-width: none;
  aspect-ratio: 1;
}

.grid-active .solar-indices {
  flex: 1 1 0%;
  min-width: 0;
  gap: 4px;
  padding: 4px 0;
  overflow-y: auto;
}

/* ---- Flex Resize Handles (between widgets in wrappers) ---- */

.grid-flex-handle {
  flex: 0 0 6px;
  background: transparent;
  transition: background 0.15s;
  z-index: 100;
}

.grid-flex-handle--col {
  cursor: row-resize;
  width: 100%;
}

.grid-flex-handle--row {
  cursor: col-resize;
  height: 100%;
}

.grid-flex-handle:hover {
  background: var(--accent);
  opacity: 0.4;
}

.grid-flex-handle:active {
  background: var(--accent);
  opacity: 0.7;
}

/* Visual grab indicator for flex handles */
.grid-flex-handle--col::after {
  content: '';
  position: relative;
  display: block;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 40px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.15s;
}

.grid-flex-handle--row::after {
  content: '';
  position: relative;
  display: block;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 40px;
  background: var(--accent);
  border-radius: 1px;
  opacity: 0;
  transition: opacity 0.15s;
}

.grid-flex-handle:hover::after {
  opacity: 0.8;
}

/* Grid preview in config modal */
.grid-perm-preview {
  display: grid;
  gap: 3px;
  padding: 8px 0;
  max-width: 220px;
  margin: 0 auto;
}

.grid-perm-preview .grid-preview-cell {
  background: var(--surface2);
  border-radius: 3px;
  padding: 3px 4px;
  font-size: 0.6rem;
  text-align: center;
  color: var(--text-dim);
  min-height: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}

.grid-perm-preview .grid-preview-cell.grid-preview-map {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.grid-perm-preview .grid-preview-cell.grid-preview-spanned {
  background: var(--accent);
  color: #fff;
  opacity: 0.7;
  font-weight: 600;
}

.grid-perm-preview .grid-preview-cell.grid-preview-assignable {
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
.grid-perm-preview .grid-preview-cell.grid-preview-assignable:hover {
  border-color: var(--accent);
}
.grid-perm-preview .grid-preview-cell.grid-preview-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 25%, var(--surface2));
}
.grid-preview-cell .cell-name {
  font-size: 0.5rem;
  opacity: 0.6;
  line-height: 1;
}
.grid-preview-cell .cell-widget {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1;
}

/* Grid assignment picker dropdown */
.grid-assign-picker {
  display: none;
  max-height: 180px;
  overflow-y: auto;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 4px;
  margin: 4px auto 0;
  max-width: 220px;
}
.grid-assign-picker.open {
  display: block;
}
.grid-assign-picker .assign-option {
  padding: 4px 8px;
  font-size: 0.7rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text);
}
.grid-assign-picker .assign-option:hover {
  background: var(--surface3);
}
.grid-assign-picker .assign-option.assign-current {
  background: color-mix(in srgb, var(--accent) 20%, var(--surface2));
}
.grid-assign-picker .assign-option .assign-hint {
  font-size: 0.6rem;
  color: var(--text-dim);
  margin-left: 8px;
}

/* Widget cell badge in checkbox list */
.widget-cell-badge {
  font-size: 0.6rem;
  color: var(--accent);
  margin-left: 4px;
  font-weight: 600;
}

.splash-reset-grid-btn {
  margin-top: 4px;
  padding: 4px 12px;
  font-size: 0.7rem;
  background: var(--surface2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  align-self: center;
}
.splash-reset-grid-btn:hover {
  background: var(--surface3);
  color: var(--text);
}

/* Grid mode section in config modal */
.splash-grid-mode-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.splash-layout-mode-toggle {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
}

.splash-layout-mode-toggle label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text);
}

.splash-float-options {
  display: flex;
  gap: 16px;
  font-size: 0.8rem;
  margin-top: 4px;
}

.splash-float-options label {
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  color: var(--text);
}

.splash-grid-perm-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.splash-grid-perm-section label {
  font-size: 0.75rem;
  color: var(--text-dim);
}

.splash-grid-perm-section select {
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 0.8rem;
}

/* ---- About Tab ---- */
.about-content h3 {
  margin: 0 0 4px 0;
  font-size: 1.25rem;
}

.about-version {
  color: var(--text-dim);
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.about-content h4 {
  margin: 16px 0 8px 0;
  font-size: 0.9rem;
  color: var(--accent);
}

.about-content p {
  margin: 0 0 8px 0;
  font-size: 0.85rem;
  line-height: 1.5;
}

.about-content a {
  color: var(--accent);
  text-decoration: none;
}

.about-content a:hover {
  text-decoration: underline;
}

.about-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.about-links li {
  margin-bottom: 6px;
  font-size: 0.85rem;
}

.about-links a {
  color: var(--text);
}

.about-links a:hover {
  color: var(--accent);
}

/* ---- Progressive Responsive Scaling ---- */

/* Zone B: Scaling active — dim resize handles, disable drag cursor */
.scaling-active .widget-resize {
  opacity: 0.3;
  pointer-events: none;
}
.scaling-active .widget-header {
  cursor: default;
}

/* Zone C: Reflow layout — scrollable columnar grid */
.reflow-layout {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 6px;
  padding: 6px;
  overflow-y: auto !important;
  overflow-x: hidden;
}

.reflow-layout .widget {
  position: static !important;
  width: auto !important;
  height: auto !important;
  left: auto !important;
  top: auto !important;
  min-height: 120px;
  z-index: auto !important;
}

.reflow-layout .widget-header {
  cursor: default;
}

.reflow-layout .widget-resize {
  display: none;
}

.reflow-layout #widget-map {
  min-height: 300px;
}

.reflow-layout #widget-map .widget-body,
.reflow-layout #widget-map #map {
  height: 280px;
}

.reflow-layout #widget-activations .widget-body {
  max-height: 300px;
}

/* ==== Responsive — Tablet (< 1024px) ==== */

@media (max-width: 1023px) {
  /* Enlarge touch targets for tappability (Apple HIG: 44px minimum) */
  button, .op-btn, .source-tab, .toggle-btn,
  .widget-help-btn, .widget-cfg-btn, .widget-close-btn {
    min-height: 44px;
    min-width: 44px;
  }

  .band-btn, .mode-btn {
    min-height: 36px;
    padding: 6px 10px;
  }

  /* 16px font prevents iOS zoom on focus */
  select {
    min-height: 44px;
    font-size: 16px;
  }

  input[type="text"], input[type="number"], input[type="email"], input[type="password"] {
    font-size: 16px;
    min-height: 44px;
  }

  /* Shrink header clocks so they don't cover fullscreen button on iPad (#113) */
  .header-center {
    gap: 16px;
  }

  .header-clock {
    min-width: 140px;
    padding: 6px 12px;
  }

  .header-clock-time {
    font-size: 1.4rem;
    letter-spacing: 1px;
  }

  .header-right {
    position: relative;
    z-index: 2;
  }
}

/* ---- Mobile Tab Bar (hidden on desktop, shown via media query) ---- */
.tab-bar { display: none; }

/* ---- Mobile Menu (hamburger + drawer) ---- */

/* Hamburger button — hidden on desktop, shown on mobile via media query */
.mobile-menu-btn {
  display: none;
  background: none;
  border: 1px solid var(--border);
  color: var(--text-color);
  font-size: 1.5rem;
  line-height: 1;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-menu-btn:active {
  background: var(--accent-bg, rgba(255,255,255,0.1));
}

/* Backdrop overlay */
.mobile-menu-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
}

.mobile-menu-backdrop.open {
  display: block;
}

/* Slide-out drawer */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: -280px;
  width: 260px;
  height: 100%;
  background: var(--widget-bg, #1a1a1a);
  border-left: 1px solid var(--border);
  z-index: 9999;
  transition: right 0.25s ease;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow-y: auto;
}

.mobile-menu-drawer.open {
  right: 0;
}

.mobile-menu-header {
  padding: 16px 20px;
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--text-color);
  border-bottom: 1px solid var(--border);
}

.mobile-menu-item {
  display: block;
  width: 100%;
  padding: 14px 20px;
  font-size: 0.95rem;
  color: var(--text-color);
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  text-align: left;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
}

.mobile-menu-item:active {
  background: var(--accent-bg, rgba(255,255,255,0.08));
}

.mobile-menu-update {
  padding: 14px 20px;
  font-size: 0.8rem;
  color: var(--text-dim, #888);
}

/* ---- Full-screen map mode ---- */

.map-fullscreen-btn {
  background: none;
  border: 1px solid var(--border);
  color: var(--text-color);
  font-size: 1rem;
  padding: 2px 6px;
  border-radius: 3px;
  cursor: pointer;
  margin-left: auto;
}

.map-fullscreen-btn:active {
  background: var(--accent-bg, rgba(255,255,255,0.1));
}

#widget-map.map-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  z-index: 5000;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 100vh;
  border-radius: 0;
}

#widget-map.map-fullscreen .widget-body,
#widget-map.map-fullscreen #map {
  height: calc(100vh - 36px) !important;
}

/* Don't show collapse chevron on map when fullscreen */
#widget-map.map-fullscreen .widget-header::after {
  display: none;
}

/* Neutralize parent transform + overflow so position:fixed reaches the viewport */
body.map-fullscreen-active .widget-area {
  overflow: visible !important;
  transform: none !important;
  width: auto !important;
}

body.map-fullscreen-active .widget-area.scaling-active {
  transform: none !important;
  width: auto !important;
}

/* ==== Responsive — Mobile & Tablet (≤ 1199px) ==== */

@media (max-width: 1199px) {

  /* --- Header: stack vertically --- */

  header {
    flex-direction: column;
    align-items: stretch;
    padding: 4px 8px;
    gap: 4px;
    height: auto;
    min-height: auto;
  }

  .header-left {
    min-width: 0;
    max-width: none;
    gap: 8px;
  }

  .op-call { font-size: 1.6rem; }
  .op-name { font-size: 1rem; }
  .op-loc  { font-size: 0.85rem; }
  .op-class { font-size: 0.75rem; }

  .op-btn {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .header-center {
    display: flex;
    justify-content: center;
    gap: 12px;
  }

  .header-clock {
    min-width: 0;
  }

  .header-clock-time {
    font-size: 1rem;
  }

  .header-right {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
    position: absolute;
    top: 6px;
    right: 8px;
    z-index: 10;
  }

  header {
    position: relative;
    padding-right: 56px; /* space for hamburger button */
  }

  /* --- Widget area: vertical scroll stack (override grid/reflow) --- */

  .widget-area,
  .widget-area.reflow-layout,
  .widget-area.grid-active {
    display: flex !important;
    flex-direction: column !important;
    grid-template-areas: none !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    gap: 4px;
    padding: 4px;
    overflow-y: hidden;
    overflow-x: hidden;
    height: calc(100vh - 44px - 48px - env(safe-area-inset-bottom, 0px));
  }

  .widget {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    min-height: 0;
    z-index: auto !important;
  }

  /* Active widget fills remaining space */
  .widget.mobile-active-widget {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .widget.mobile-active-widget > .widget-body {
    flex: 1;
    overflow-y: auto;
    max-height: none;
  }

  /* Secondary widget shares remaining space */
  .widget.mobile-secondary-widget {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
  }

  .widget.mobile-secondary-widget > .widget-body {
    flex: 1;
    overflow-y: auto;
    max-height: none;
  }

  /* "+ Add widget" picker */
  .mobile-secondary-picker {
    flex-shrink: 0;
    padding: 4px 8px;
    text-align: center;
  }

  .mobile-secondary-select {
    font-size: 0.72rem;
    padding: 4px 8px;
    border: 1px dashed var(--border, #333);
    border-radius: 4px;
    background: var(--surface2, #1e1e1e);
    color: var(--text-dim, #888);
    cursor: pointer;
    width: 100%;
  }

  .widget-header {
    cursor: default;
  }

  /* Hide resize handles — no drag/resize on mobile */
  .widget-resize {
    display: none;
  }

  /* --- Collapsible widgets on mobile --- */

  .widget-header {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 28px;
  }

  .widget-header::after {
    content: '\25BC'; /* ▼ */
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.65rem;
    color: var(--text-dim, #888);
    transition: transform 0.2s;
  }

  .widget.collapsed .widget-header::after {
    transform: translateY(-50%) rotate(-90deg);
  }

  .widget.collapsed .widget-body {
    display: none;
  }

  .widget.collapsed {
    min-height: auto;
  }

  /* --- Per-widget default heights --- */

  #widget-map {
    min-height: 0;
  }

  #widget-map .widget-body {
    display: flex;
    flex-direction: column;
  }

  #widget-map #map {
    flex: 1;
    min-height: 200px;
  }

  /* --- Mobile map controls: larger touch targets, thumb-friendly position --- */
  .leaflet-control-zoom a {
    width: 44px !important;
    height: 44px !important;
    line-height: 44px !important;
    font-size: 22px !important;
  }

  .leaflet-control-zoom {
    border-radius: 8px !important;
    margin-bottom: 12px !important;
    margin-right: 8px !important;
  }

  #widget-activations {
    min-height: 0;
  }

  #widget-activations .widget-body {
    max-height: none;
  }

  #widget-filters {
    min-height: auto;
    flex-shrink: 0;
  }

  #widget-filters .widget-body {
    max-height: 40vh;
    overflow-y: auto;
  }

  #widget-solar {
    min-height: 200px;
  }

  #widget-spacewx {
    min-height: 200px;
  }

  #widget-spacewx .widget-body {
    height: 180px;
  }

  /* --- Table: horizontal scroll on mobile --- */

  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  #spotsTable {
    font-size: 0.72rem;
  }

  #spotsTable th, #spotsTable td {
    padding: 6px 4px;
    white-space: nowrap;
  }

  /* --- Source tabs: wrap nicely --- */

  .source-tabs {
    flex-wrap: wrap;
    gap: 2px;
  }

  .source-tab {
    font-size: 0.75rem;
    padding: 4px 8px;
  }

  /* --- Filter row: wrap on narrow screens --- */

  .filter-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .band-filters, .mode-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }

  .band-btn, .mode-btn {
    flex: 0 0 auto;
    font-size: 0.72rem;
    padding: 4px 6px;
  }

  .filter-row-range {
    flex-direction: column;
  }

  #countryFilter, #stateFilter, #gridFilter, #continentFilter {
    width: 100%;
  }

  /* --- Modals: fit small screens --- */

  .splash-box {
    min-width: 0;
    width: 95vw;
    max-width: 95vw;
    padding: 16px 12px;
    max-height: 90vh;
  }

  .config-box {
    max-width: 95vw;
    width: 95vw;
  }

  .help-box {
    max-width: 95vw;
  }

  .feedback-box {
    max-width: 95vw;
  }

  /* --- VOACAP widget: readable on mobile --- */

  .voacap-param-bar {
    flex-wrap: wrap;
    gap: 2px;
    font-size: 0.65rem;
  }

  /* --- Spacewx tabs: smaller on mobile --- */

  .spacewx-tab {
    padding: 4px 6px;
    font-size: 0.65rem;
  }

  /* --- New widgets: cap height on mobile --- */

  #widget-beacons .widget-body,
  #widget-contests .widget-body,
  #widget-dxpeditions .widget-body { max-height: 250px; }

  /* --- Mobile Tab Bar (dynamic per-widget tabs) --- */

  .tab-bar {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 48px;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface, #1a1a1a);
    border-top: 1px solid var(--border, #333);
    z-index: 6000;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    align-items: stretch;
    gap: 0;
  }

  .tab-bar::-webkit-scrollbar { display: none; } /* Chrome/Safari */

  .tab-bar-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text-dim, #888);
    font-size: 0.65rem;
    padding: 4px 10px;
    min-width: 48px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
    white-space: nowrap;
  }

  .tab-bar-btn.active {
    color: var(--accent, #4fc3f7);
    border-top: 2px solid var(--accent, #4fc3f7);
  }

  .tab-bar-btn svg {
    flex-shrink: 0;
  }

  /* --- Filters always pinned at top on mobile --- */

  #widget-filters {
    order: -1;
  }

  /* --- Hide grid config UI and grid wrappers on mobile --- */

  #gridModeSection { display: none; }
  .widget-slot-counter { display: none; }
  .grid-col-wrapper,
  .grid-bar-wrapper,
  .grid-flex-handle,
  .grid-cell-placeholder,
  .grid-track-handle { display: none !important; }

  /* Widget area: add bottom padding to clear the tab bar */
  .widget-area {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }

  /* --- Header compaction for mobile tabs --- */

  header {
    flex-direction: row;
    align-items: center;
    padding: 4px 8px;
    gap: 4px;
    flex-wrap: nowrap;
  }

  .header-left {
    flex: 0 0 auto;
  }

  .op-name, .op-loc, .op-btn {
    display: none;
  }

  .op-call {
    font-size: 1.1rem;
  }

  .header-center {
    flex: 1;
    justify-content: center;
    gap: 8px;
  }

  .header-clock {
    padding: 2px 6px;
  }

  .header-clock-label {
    font-size: 0.55rem;
  }

  .header-clock-time {
    font-size: 0.85rem;
  }

  .header-clock-weather,
  .header-clock-wx-icon,
  .wx-source-logo {
    display: none;
  }

  .mobile-menu-btn {
    position: static;
    flex: 0 0 auto;
  }

  header {
    padding-right: 8px;
  }

  /* --- Map tab: map fills remaining space via flex --- */

  body.tab-map-active #widget-map .widget-body,
  body.tab-map-active #widget-map #map {
    flex: 1;
    height: 100%;
  }

  /* Fullscreen map z-index: above tab bar */
  #widget-map.map-fullscreen {
    z-index: 7000 !important;
  }
}

/* ---- Grayscale Mode ---- */
/* Toggled via body.grayscale — desaturates entire UI for e-ink displays or reduced distraction. */

body.grayscale {
  filter: grayscale(1);
}

/* ---- Compact Header Mode ---- */
/* Toggled via body.slim-header — shrinks header to ~28-30px,
   hides weather/name, switches clocks to single-line row layout. */

.slim-header header {
  padding: 3px 12px;
  gap: 10px;
}

.slim-header .op-info {
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.slim-header .op-call {
  font-size: clamp(1rem, 8cqw, 1.4rem);
  line-height: 1;
}

.slim-header .op-class {
  font-size: clamp(0.6rem, 3cqw, 0.8rem);
  margin-top: -1px;
}

.slim-header .op-name {
  display: none;
}

.slim-header .op-loc {
  font-size: clamp(0.7rem, 3.5cqw, 0.9rem);
}

.slim-header .op-btn {
  padding: 2px 8px;
  font-size: 0.75rem;
}

/* Clocks — single-line row layout */
.slim-header .header-clock {
  flex-direction: row;
  padding: 3px 10px;
  gap: 6px;
  min-width: auto;
}

.slim-header .header-clock-label {
  font-size: 0.65rem;
}

.slim-header .header-clock-time {
  font-size: 1rem;
  letter-spacing: 1px;
}

/* Hide weather text, weather icon, and weather source logo */
.slim-header .header-clock-weather,
.slim-header .header-clock-wx-icon,
.slim-header .wx-source-logo {
  display: none;
}

.slim-header .header-center {
  gap: 20px;
}

/* Weather alert badge — reposition for row layout */
.slim-header .wx-alert-badge {
  top: 2px;
  left: 4px;
  font-size: 0.9rem;
}

/* Right buttons — smaller */
.slim-header #refreshBtn,
.slim-header #fullscreenBtn {
  padding: 2px 6px;
  font-size: 0.7rem;
}

.slim-header .feedback-btn {
  padding: 2px 6px;
  font-size: 0.7rem;
}

.slim-header .coffee-btn {
  padding: 2px 6px;
  font-size: 0.7rem;
}

.slim-header .discord-btn {
  padding: 2px 6px;
}

.slim-header .discord-icon {
  width: 14px;
  height: 14px;
}

.slim-header .update-indicator {
  font-size: 0.65rem;
}

/* --- LCARS theme slim overrides --- */
.slim-header.theme-lcars .header-left {
  padding: 4px 36px 4px 12px;
  min-width: 200px;
  max-width: 280px;
}

.slim-header.theme-lcars .header-left::after {
  width: 28px;
  height: calc(100% - 12px);
}

.slim-header.theme-lcars .header-center {
  padding: 14px 12px 3px;
}

.slim-header.theme-lcars .header-center::before {
  height: 12px;
}

.slim-header.theme-lcars .header-right {
  padding: 16px 12px 3px;
}

.slim-header.theme-lcars .header-right::before {
  height: 12px;
}

.slim-header.theme-lcars .header-right::after {
  width: 12px;
  height: 12px;
  border-radius: 0 0 6px 6px;
}

.slim-header.theme-lcars header::after {
  height: 3px;
}

/* --- Terminal theme slim overrides --- */
.slim-header.theme-terminal header {
  padding: 2px 10px;
}

.slim-header.theme-terminal .header-clock {
  padding: 2px 10px;
}

/* --- HamClock theme slim overrides --- */
.slim-header.theme-hamclock header {
  padding: 2px 10px;
}

.slim-header.theme-hamclock .header-clock {
  padding: 2px 10px;
}

/* ---- Watch list accordion ---- */
.wl-accordion { margin-top: 6px; border-top: 1px solid var(--border); padding-top: 4px; }
.wl-accordion-toggle {
  background: none; border: none; color: var(--text); cursor: pointer;
  font-size: 0.75rem; font-weight: 600; padding: 2px 0; width: 100%; text-align: left;
  display: flex; align-items: center; gap: 4px;
}
.wl-accordion-toggle:hover { color: var(--accent); }
.wl-accordion-arrow { font-size: 0.6rem; transition: transform 0.15s; display: inline-block; }
.wl-accordion-toggle.open .wl-accordion-arrow { transform: rotate(90deg); }
.wl-accordion-body { display: none; padding-top: 4px; }
.wl-accordion-body.open { display: block; }

/* ---- Watch list editor ---- */
.wl-rule-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 4px; }
.wl-rule { display: flex; align-items: center; gap: 6px; font-size: 0.75rem;
           padding: 2px 6px; background: var(--surface); border-radius: 3px; }
.wl-rule-mode { font-weight: 600; min-width: 32px; text-transform: uppercase; font-size: 0.65rem; }
.wl-rule-mode.red { color: #e94560; }
.wl-rule-mode.only { color: #4CAF50; }
.wl-rule-mode.not { color: #888; }
.wl-rule-value { font-family: monospace; }
.wl-rule-type { color: var(--text-dim); font-size: 0.65rem; }
.wl-rule-delete { cursor: pointer; color: var(--text-dim); margin-left: auto; font-size: 0.8rem; }
.wl-rule-delete:hover { color: var(--accent); }
.wl-add-form { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.wl-add-form label { font-size: 0.7rem; cursor: pointer; }
.wl-add-form input[type="radio"] { margin: 0 1px 0 4px; }
.wl-add-form select { font-size: 0.7rem; padding: 2px 4px;
                       background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.wl-add-form input[type="text"] { width: 90px; font-size: 0.75rem; padding: 2px 4px;
                                    text-transform: uppercase; font-family: monospace;
                                    background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.wl-add-form button { font-size: 0.7rem; padding: 2px 8px;
                       background: var(--surface); color: var(--text); border: 1px solid var(--border);
                       border-radius: 3px; cursor: pointer; }
.wl-add-form button:hover { border-color: var(--accent); }

/* ---- Big Clock Overlay ---- */
.big-clock-overlay {
  position: fixed; inset: 0;
  z-index: 10001;
  background: rgba(0, 0, 0, 0.92);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.big-clock-overlay.hidden { display: none; }
.big-clock-inner {
  text-align: center;
  cursor: default;
}
.big-clock-section { margin-bottom: 2rem; }
.big-clock-label {
  font-size: 1.2rem;
  color: var(--text-dim, #888);
  text-transform: uppercase;
  letter-spacing: 4px;
  margin-bottom: 0.25rem;
}
.big-clock-time {
  font-size: 10rem;
  font-weight: 700;
  font-family: 'Courier New', monospace;
  color: var(--text, #e0e0e0);
  letter-spacing: 6px;
  line-height: 1.1;
}
.big-clock-date {
  font-size: 1.4rem;
  color: var(--text-dim, #888);
  margin-top: 0.25rem;
}
.big-clock-hint {
  font-size: 0.8rem;
  color: var(--text-dim, #555);
  margin-top: 2rem;
}
/* ---- Analog Clock Widget ---- */
#widget-analog-clock .widget-body {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  overflow: hidden;
}
#analogClockSvg {
  width: 100%;
  height: 100%;
  max-width: 300px;
  max-height: 300px;
}

/* ---- Clock Config Panel ---- */
.clock-cfg-box { max-width: 420px; }
.clock-cfg-box h3 { color: var(--text); font-size: 0.85rem; margin: 12px 0 6px; }
.clock-face-picker { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 8px; }
.clock-face-item { display: flex; flex-direction: column; align-items: center; }
.clock-face-thumb { width: 56px; height: 56px; border: 2px solid var(--border); border-radius: 50%; cursor: pointer; padding: 2px; background: var(--surface); display: flex; align-items: center; justify-content: center; }
.clock-face-thumb:hover { border-color: var(--text); }
.clock-face-thumb.active { border-color: var(--accent); }
.clock-face-thumb svg { width: 100%; height: 100%; }
.clock-face-label { text-align: center; font-size: 0.6rem; color: var(--text-dim); margin-top: 2px; }
.comp-desc { color: var(--text-dim); font-size: 0.75rem; }

/* Header clocks get pointer cursor to indicate clickability */
.header-clock { cursor: pointer; }

/* Responsive — shrink Big Clock on smaller screens */
@media (max-width: 900px) {
  .big-clock-time { font-size: 5rem; letter-spacing: 3px; }
  .big-clock-date { font-size: 1rem; }
}
@media (max-width: 500px) {
  .big-clock-time { font-size: 3rem; letter-spacing: 2px; }
  .big-clock-label { font-size: 0.9rem; }
}