/* eHamLog v2 — "shack console" theme. Dark by default, light via [data-bs-theme="light"]. */

:root,
[data-bs-theme="dark"] {
  --eh-bg: #0b1117;
  --eh-bg-2: #0f1720;
  --eh-surface: #121c26;
  --eh-surface-2: #172431;
  --eh-surface-3: #1d2d3c;
  --eh-border: #223344;
  --eh-border-strong: #33485d;
  --eh-text: #e3ebf2;
  --eh-muted: #8da0b3;
  --eh-primary: #2dd4bf;
  --eh-primary-strong: #14b8a6;
  --eh-primary-soft: rgba(45, 212, 191, 0.12);
  --eh-on-primary: #04201c;
  --eh-accent: #fbbf24;
  --eh-accent-soft: rgba(251, 191, 36, 0.14);
  --eh-success: #34d399;
  --eh-warning: #fbbf24;
  --eh-danger: #f87171;
  --eh-glow: 0 0 0 1px rgba(45, 212, 191, 0.25), 0 0 24px rgba(45, 212, 191, 0.08);
  --eh-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  --eh-grid-line: rgba(141, 160, 179, 0.06);

  --bs-body-bg: var(--eh-bg);
  --bs-body-color: var(--eh-text);
  --bs-secondary-color: var(--eh-muted);
  --bs-tertiary-bg: var(--eh-surface-2);
  --bs-border-color: var(--eh-border);
  --bs-emphasis-color: #fff;
  --bs-link-color: var(--eh-primary);
  --bs-link-color-rgb: 45, 212, 191;
  --bs-link-hover-color: #5eead4;
  --bs-link-hover-color-rgb: 94, 234, 212;
  --bs-primary: var(--eh-primary);
  --bs-primary-rgb: 45, 212, 191;
}

[data-bs-theme="light"] {
  --eh-bg: #f3f6f8;
  --eh-bg-2: #eaf0f3;
  --eh-surface: #ffffff;
  --eh-surface-2: #f6f9fa;
  --eh-surface-3: #edf3f5;
  --eh-border: #d6e0e6;
  --eh-border-strong: #b5c5cf;
  --eh-text: #122029;
  --eh-muted: #5b6f7c;
  --eh-primary: #0b7f78;
  --eh-primary-strong: #075d58;
  --eh-primary-soft: rgba(11, 127, 120, 0.1);
  --eh-on-primary: #ffffff;
  --eh-accent: #b7791f;
  --eh-accent-soft: rgba(217, 155, 40, 0.16);
  --eh-success: #138a63;
  --eh-warning: #b7791f;
  --eh-danger: #bf3f32;
  --eh-glow: 0 0 0 1px rgba(11, 127, 120, 0.18);
  --eh-shadow: 0 10px 28px rgba(18, 32, 41, 0.08);
  --eh-grid-line: rgba(18, 32, 41, 0.035);

  --bs-body-bg: var(--eh-bg);
  --bs-body-color: var(--eh-text);
  --bs-secondary-color: var(--eh-muted);
  --bs-tertiary-bg: var(--eh-surface-2);
  --bs-border-color: var(--eh-border);
  --bs-link-color: var(--eh-primary);
  --bs-link-color-rgb: 11, 127, 120;
  --bs-link-hover-color: var(--eh-primary-strong);
  --bs-link-hover-color-rgb: 7, 93, 88;
  --bs-primary: var(--eh-primary);
  --bs-primary-rgb: 11, 127, 120;
}

:root {
  --eh-font: "Inter", "Segoe UI", system-ui, sans-serif;
  --eh-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;
  --eh-radius: 10px;
  --eh-radius-sm: 6px;
  --eh-nav-h: 60px;
  --bs-body-font-family: var(--eh-font);
  --bs-border-radius: var(--eh-radius-sm);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; }

body.app-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--eh-bg);
  background-image:
    linear-gradient(var(--eh-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--eh-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--eh-text);
  font-family: var(--eh-font);
  font-size: 0.95rem;
}

h1, h2, h3, h4, h5, h6 { color: var(--eh-text); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
h2 { font-size: 1.15rem; }
a { text-decoration: none; }
::selection { background: var(--eh-primary); color: var(--eh-on-primary); }

.mono, .callsign, .uppercase { font-family: var(--eh-mono); }
.uppercase { text-transform: uppercase; }
.text-muted { color: var(--eh-muted) !important; }

.skip-link {
  position: absolute; left: -999px; top: 8px; z-index: 2000;
  padding: 8px 12px; background: var(--eh-primary); color: var(--eh-on-primary); border-radius: var(--eh-radius-sm);
}
.skip-link:focus { left: 8px; }

.app-container { max-width: 1320px; margin: 0 auto; padding-inline: 16px; }
.app-main { flex: 1; padding: 20px 0 48px; }
.app-main:focus { outline: none; }

/* ---------- Bootstrap components ---------- */
.btn { font-weight: 600; border-radius: var(--eh-radius-sm); }
.btn-primary {
  --bs-btn-bg: var(--eh-primary); --bs-btn-border-color: var(--eh-primary); --bs-btn-color: var(--eh-on-primary);
  --bs-btn-hover-bg: var(--eh-primary-strong); --bs-btn-hover-border-color: var(--eh-primary-strong); --bs-btn-hover-color: var(--eh-on-primary);
  --bs-btn-active-bg: var(--eh-primary-strong); --bs-btn-active-border-color: var(--eh-primary-strong); --bs-btn-active-color: var(--eh-on-primary);
  --bs-btn-disabled-bg: var(--eh-primary); --bs-btn-disabled-border-color: var(--eh-primary); --bs-btn-disabled-color: var(--eh-on-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--eh-primary); --bs-btn-border-color: var(--eh-border-strong);
  --bs-btn-hover-bg: var(--eh-primary-soft); --bs-btn-hover-border-color: var(--eh-primary); --bs-btn-hover-color: var(--eh-primary);
  --bs-btn-active-bg: var(--eh-primary-soft); --bs-btn-active-border-color: var(--eh-primary); --bs-btn-active-color: var(--eh-primary);
}
.btn-outline-secondary, .btn-outline-light, .btn-outline-dark, .btn-light {
  --bs-btn-color: var(--eh-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--eh-border-strong);
  --bs-btn-hover-bg: var(--eh-surface-3); --bs-btn-hover-border-color: var(--eh-border-strong); --bs-btn-hover-color: var(--eh-text);
  --bs-btn-active-bg: var(--eh-surface-3); --bs-btn-active-color: var(--eh-text);
}
.btn-accent {
  --bs-btn-bg: var(--eh-accent); --bs-btn-border-color: var(--eh-accent); --bs-btn-color: #1b1300;
  --bs-btn-hover-bg: #f59e0b; --bs-btn-hover-border-color: #f59e0b; --bs-btn-hover-color: #1b1300;
}
.btn.is-active { background: var(--eh-primary-soft); border-color: var(--eh-primary); color: var(--eh-primary); }

.form-control, .form-select {
  background-color: var(--eh-bg-2);
  border-color: var(--eh-border);
  color: var(--eh-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--eh-bg-2);
  color: var(--eh-text);
  border-color: var(--eh-primary);
  box-shadow: 0 0 0 3px var(--eh-primary-soft);
}
.form-control::placeholder { color: var(--eh-muted); opacity: 0.8; }
.form-control[readonly] { background-color: var(--eh-surface-2); }
.form-label { font-size: 0.8rem; font-weight: 600; color: var(--eh-muted); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.form-text { color: var(--eh-muted); }
.input-group-text { background: var(--eh-surface-2); border-color: var(--eh-border); color: var(--eh-muted); }
.form-check-input { background-color: var(--eh-bg-2); border-color: var(--eh-border-strong); }
.form-check-input:checked { background-color: var(--eh-primary); border-color: var(--eh-primary); }
/* legacy bootstrap4 markup still used by some pages */
.form-group { margin-bottom: 1rem; }

.modal-content, .dropdown-menu, .card, .offcanvas, .list-group-item {
  background-color: var(--eh-surface);
  border-color: var(--eh-border);
  color: var(--eh-text);
}
.modal-header, .modal-footer, .card-header, .card-footer { border-color: var(--eh-border); background: transparent; }
.dropdown-item { color: var(--eh-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--eh-surface-3); color: var(--eh-text); }

.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--eh-text);
  --bs-table-border-color: var(--eh-border);
  --bs-table-hover-bg: var(--eh-surface-2);
  --bs-table-hover-color: var(--eh-text);
  --bs-table-striped-bg: var(--eh-surface-2);
  margin-bottom: 0;
}
.table thead th {
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--eh-muted); background: transparent; border-bottom-color: var(--eh-border-strong); white-space: nowrap;
}
.table-eham td { vertical-align: middle; }
.table-eham tbody tr:hover > * { background: var(--eh-surface-2); }

.pagination { --bs-pagination-bg: var(--eh-surface); --bs-pagination-border-color: var(--eh-border); --bs-pagination-color: var(--eh-text);
  --bs-pagination-hover-bg: var(--eh-surface-3); --bs-pagination-hover-color: var(--eh-text); --bs-pagination-hover-border-color: var(--eh-border);
  --bs-pagination-active-bg: var(--eh-primary); --bs-pagination-active-border-color: var(--eh-primary); --bs-pagination-active-color: var(--eh-on-primary);
  --bs-pagination-disabled-bg: var(--eh-surface); --bs-pagination-disabled-border-color: var(--eh-border); }

.alert { border-radius: var(--eh-radius-sm); border-width: 1px; }
.badge.text-bg-light { background: var(--eh-surface-3) !important; color: var(--eh-muted) !important; }

/* ---------- Navbar ---------- */
.app-navbar {
  height: var(--eh-nav-h);
  background: color-mix(in srgb, var(--eh-bg) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--eh-border);
  z-index: 1030;
}
.app-navbar .app-container { display: flex; align-items: center; gap: 16px; width: 100%; height: 100%; }
.app-brand { display: flex; align-items: center; gap: 10px; color: var(--eh-text); font-weight: 800; font-size: 1.1rem; }
.app-brand:hover { color: var(--eh-text); }
.app-brand img { width: 32px; height: 32px; border-radius: 8px; }
.app-brand small { font-family: var(--eh-mono); font-weight: 600; font-size: 0.68rem; color: var(--eh-primary); letter-spacing: 0.08em; }

.utc-clock {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--eh-mono); font-size: 0.8rem; font-weight: 600;
  color: var(--eh-accent); background: var(--eh-accent-soft);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
}

.app-navlinks { display: flex; gap: 4px; margin: 0 auto 0 8px; padding: 0; list-style: none; }
.app-navlinks .nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--eh-radius-sm);
  color: var(--eh-muted); font-weight: 600; font-size: 0.9rem;
}
.app-navlinks .nav-link:hover { color: var(--eh-text); background: var(--eh-surface-2); }
.app-navlinks .nav-link.is-active { color: var(--eh-primary); background: var(--eh-primary-soft); }

.nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.theme-toggle { width: 36px; height: 36px; padding: 0; display: inline-grid; place-items: center; }
[data-bs-theme="dark"] .theme-toggle .bi-moon-stars { display: none; }
[data-bs-theme="light"] .theme-toggle .bi-sun { display: none; }
.user-menu-btn { font-family: var(--eh-mono); }

/* ---------- Mobile bottom bar ---------- */
.mobile-tabbar { display: none; }

@media (max-width: 991.98px) {
  .app-navlinks, .nav-actions .nav-publish, .nav-actions .nav-guest, .utc-clock-nav { display: none !important; }
  .mobile-tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    display: grid; grid-template-columns: repeat(4, 1fr); align-items: end;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--eh-surface) 92%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid var(--eh-border);
  }
  .mobile-tabbar a {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: var(--eh-muted); font-size: 0.7rem; font-weight: 600; padding: 4px 0;
  }
  .mobile-tabbar a i { font-size: 1.25rem; }
  .mobile-tabbar a.is-active { color: var(--eh-primary); }
  .mobile-tabbar .tab-publish i {
    display: grid; place-items: center; width: 48px; height: 48px; margin-top: -22px;
    border-radius: 50%; background: var(--eh-accent); color: #1b1300; font-size: 1.4rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  }
  .mobile-tabbar .tab-publish { color: var(--eh-text); }
  .app-main { padding-bottom: 96px; }
  .app-footer { padding-bottom: 88px !important; }
  .back-to-top { bottom: 88px !important; }
}

/* ---------- Footer ---------- */
.app-footer { border-top: 1px solid var(--eh-border); background: var(--eh-bg-2); padding: 24px 0; color: var(--eh-muted); font-size: 0.85rem; }
.footer-grid { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; }
.footer-brand strong { color: var(--eh-text); }
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.footer-links a { color: var(--eh-muted); }
.footer-links a:hover { color: var(--eh-primary); }

.back-to-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 1020;
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--eh-border-strong); background: var(--eh-surface); color: var(--eh-text);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.back-to-top.is-visible { opacity: 1; pointer-events: auto; }

/* ---------- Messages & toasts ---------- */
.app-messages { display: grid; gap: 8px; margin-bottom: 16px; }
.cluster-toast, .app-toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1100;
  background: var(--eh-surface-3); color: var(--eh-text); border: 1px solid var(--eh-primary);
  box-shadow: var(--eh-shadow); padding: 10px 16px; border-radius: var(--eh-radius-sm);
  font-weight: 600; font-size: 0.9rem; animation: eh-toast-in .2s ease-out;
}
@media (max-width: 991.98px) { .cluster-toast, .app-toast { bottom: 96px; } }
@keyframes eh-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } }

/* ---------- Generic building blocks ---------- */
.eyebrow {
  margin: 0 0 4px; font-family: var(--eh-mono); font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--eh-primary);
}

.panel, .home-community-panel {
  background: var(--eh-surface); border: 1px solid var(--eh-border); border-radius: var(--eh-radius);
  padding: 18px; margin-bottom: 16px;
}
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel-header h2 { margin: 0; }

.page-heading { margin-bottom: 18px; }
.page-heading h1 { margin-bottom: 4px; }
.page-heading p:not(.eyebrow) { color: var(--eh-muted); margin: 0; max-width: 70ch; }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 16px; }
.metric-card {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--eh-surface); border: 1px solid var(--eh-border); border-radius: var(--eh-radius); padding: 14px 16px;
}
.metric-card span, .metric-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eh-muted); }
.metric-card strong { font-family: var(--eh-mono); font-size: 1.6rem; color: var(--eh-text); }

.status-pill, .soft-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700;
  background: var(--eh-surface-3); color: var(--eh-muted); border: 1px solid var(--eh-border);
}
.status-pill-live, .status-success { color: var(--eh-success); background: color-mix(in srgb, var(--eh-success) 12%, transparent); border-color: transparent; }
.status-pill-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: eh-pulse 1.6s infinite; }
.status-warning, .soft-badge-warning { color: var(--eh-warning); background: var(--eh-accent-soft); border-color: transparent; }
.status-danger { color: var(--eh-danger); background: color-mix(in srgb, var(--eh-danger) 12%, transparent); border-color: transparent; }
@keyframes eh-pulse { 50% { opacity: 0.3; } }

.empty-state { text-align: center; padding: 40px 16px; color: var(--eh-muted); }
.empty-state i { font-size: 2rem; color: var(--eh-primary); }
.empty-state h2 { margin: 10px 0 4px; font-size: 1rem; }

.callsign-link { font-family: var(--eh-mono); font-weight: 700; color: var(--eh-primary); display: inline-flex; align-items: center; gap: 6px; }
.callsign-link img { width: 20px; height: auto; border-radius: 2px; }

.definition-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin: 0; }
.definition-grid dt, .detail-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--eh-muted); font-weight: 600; }
.definition-grid dd, .detail-value { margin: 0; font-weight: 600; }
.detail-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--eh-border); }
.lead-copy { color: var(--eh-muted); }

.activity-list, .certificate-list, .home-cluster-list { display: grid; gap: 6px; }
.activity-row, .certificate-row {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--eh-radius-sm); background: var(--eh-surface-2); color: var(--eh-text);
  border: 1px solid transparent;
}
.activity-row:hover, .certificate-row:hover { border-color: var(--eh-primary); color: var(--eh-text); }
.activity-row strong, .certificate-row strong { font-size: 0.8rem; color: var(--eh-muted); }

.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.media-tile { display: grid; gap: 4px; color: var(--eh-muted); font-size: 0.8rem; }
.media-tile img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--eh-radius-sm); border: 1px solid var(--eh-border); }

.content-grid, .adif-layout, .calendar-layout, .activity-detail-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start;
}
.adif-layout, .calendar-layout, .activity-detail-layout { grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); }

.toolbar { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; }
.bulk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

/* Hero blocks used by several pages share one look */
.station-hero, .adif-hero, .calendar-hero, .activity-detail-hero, .ranking-hero, .qsl-hero, .ranking-country-hero {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between;
  background: linear-gradient(135deg, var(--eh-surface) 0%, var(--eh-surface-2) 100%);
  border: 1px solid var(--eh-border); border-radius: var(--eh-radius);
  padding: 22px; margin-bottom: 16px; position: relative; overflow: hidden;
}
.station-hero::after, .adif-hero::after, .calendar-hero::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%;
  border: 1px dashed var(--eh-border-strong); box-shadow: 0 0 0 30px var(--eh-grid-line), 0 0 0 60px var(--eh-grid-line);
  pointer-events: none;
}
.adif-hero-metrics, .calendar-hero-metrics, .activity-detail-metrics { display: flex; gap: 10px; flex-wrap: wrap; }
.adif-hero-metrics > *, .calendar-hero-metrics > * { background: var(--eh-surface-3); border-radius: var(--eh-radius-sm); padding: 8px 14px; display: grid; }
.adif-hero-metrics strong, .calendar-hero-metrics strong { font-family: var(--eh-mono); font-size: 1.2rem; }
.adif-hero-metrics span, .calendar-hero-metrics span { font-size: 0.72rem; color: var(--eh-muted); text-transform: uppercase; }
.adif-hero-actions, .calendar-hero-actions, .activity-detail-actions, .station-actions, .hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Community tiles ---------- */
.community-grid { display: grid; gap: 8px; }
.community-tile {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border-radius: var(--eh-radius-sm); background: var(--eh-surface-2); border: 1px solid var(--eh-border); color: var(--eh-text);
}
.community-tile:hover { border-color: var(--eh-primary); color: var(--eh-text); }
.community-tile img { width: 28px; height: 28px; }
.community-tile span { display: grid; flex: 1; line-height: 1.25; }
.community-tile small { color: var(--eh-muted); font-size: 0.78rem; }
.community-tile > i { color: var(--eh-muted); }
.community-tile.is-muted { opacity: 0.55; }

/* ---------- Publish bar ---------- */
.publish-bar {
  background: var(--eh-surface); border: 1px solid var(--eh-primary); box-shadow: var(--eh-glow);
  border-radius: var(--eh-radius); padding: 14px; margin-bottom: 16px; scroll-margin-top: calc(var(--eh-nav-h) + 12px);
}
.publish-bar-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.publish-bar-head .publish-who { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.publish-bar-head .publish-who .callsign { color: var(--eh-accent); font-size: 1.05rem; }
.publish-grid { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(130px, 1fr) minmax(0, 3fr) auto; gap: 8px; align-items: start; }
.publish-grid .form-control { height: 42px; }
.publish-grid .btn-publish { height: 42px; white-space: nowrap; }
.publish-grid .form-label { display: none; }
.publish-meta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 8px; font-size: 0.8rem; color: var(--eh-muted); }
.publish-meta .char-count { font-family: var(--eh-mono); }
.publish-meta .char-count.is-near { color: var(--eh-warning); }
.publish-schedule { display: grid; grid-template-columns: repeat(2, minmax(0, 180px)); gap: 8px; margin-top: 10px; }
.publish-schedule[hidden] { display: none; }
.publish-schedule .form-label { display: block; }
.btn-link-muted { background: none; border: 0; padding: 0; color: var(--eh-primary); font-weight: 600; font-size: 0.8rem; }
.publish-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: var(--eh-surface); border: 1px dashed var(--eh-border-strong); border-radius: var(--eh-radius);
  padding: 14px 16px; margin-bottom: 16px;
}
.publish-cta p { margin: 0; color: var(--eh-muted); }
.publish-cta strong { color: var(--eh-text); }

@media (max-width: 767.98px) {
  .publish-grid { grid-template-columns: 1fr 1fr; }
  .publish-grid .publish-activity, .publish-grid .btn-publish { grid-column: 1 / -1; }
  .publish-grid .publish-activity textarea { min-height: 84px; }
}

/* ---------- Cluster page ---------- */
.cluster-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.cluster-side { position: sticky; top: calc(var(--eh-nav-h) + 16px); display: grid; gap: 16px; }
.cluster-side .panel { margin: 0; }
.cluster-title { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.cluster-title h1 { margin: 0; }
.cluster-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cluster-stats div { background: var(--eh-surface-2); border-radius: var(--eh-radius-sm); padding: 10px; text-align: center; }
.cluster-stats strong { display: block; font-family: var(--eh-mono); font-size: 1.3rem; }
.cluster-stats span { font-size: 0.7rem; color: var(--eh-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.cluster-filters { display: grid; gap: 10px; }
.cluster-filter-actions { display: flex; gap: 8px; }
.cluster-filter-actions .btn { flex: 1; }

.spot-panel { padding: 0; overflow: hidden; }
.spot-panel-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--eh-border); background: var(--eh-surface-2);
  font-size: 0.82rem; color: var(--eh-muted);
}
.spot-panel-head strong { font-family: var(--eh-mono); color: var(--eh-text); }
.spot-list { list-style: none; margin: 0; padding: 0; }
.spot {
  display: grid; grid-template-columns: 76px minmax(150px, 190px) minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--eh-border); transition: background .2s;
}
.spot:hover { background: var(--eh-surface-2); }
.spot.is-new { animation: eh-new-spot 6s ease-out; }
@keyframes eh-new-spot { 0%, 30% { background: var(--eh-accent-soft); box-shadow: inset 3px 0 0 var(--eh-accent); } 100% { background: transparent; box-shadow: none; } }
.spot-time { font-family: var(--eh-mono); line-height: 1.2; }
.spot-time strong { display: block; color: var(--eh-accent); font-size: 1rem; }
.spot-time span { font-size: 0.75rem; color: var(--eh-muted); }
.spot-station { display: flex; align-items: center; gap: 10px; min-width: 0; }
.spot-flag { width: 26px; height: auto; border-radius: 3px; flex-shrink: 0; box-shadow: 0 0 0 1px var(--eh-border); }
.spot-station > div { min-width: 0; display: grid; }
.spot-call { font-family: var(--eh-mono); font-weight: 700; font-size: 1.02rem; color: var(--eh-primary); letter-spacing: 0.02em; }
.spot-call:hover { color: var(--eh-text); }
.spot-name { font-size: 0.78rem; color: var(--eh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spot-body { min-width: 0; }
.spot-where { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; }
.spot-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--eh-primary-soft); color: var(--eh-primary);
}
.spot-room { font-family: var(--eh-mono); font-size: 0.85rem; font-weight: 600; }
.spot-text { margin: 0; color: var(--eh-text); font-size: 0.9rem; overflow-wrap: anywhere; }
.spot-actions { display: flex; gap: 4px; }
.spot-actions .btn { width: 32px; height: 32px; padding: 0; display: inline-grid; place-items: center; color: var(--eh-muted); border-color: var(--eh-border); }
.spot-actions .btn:hover { color: var(--eh-primary); border-color: var(--eh-primary); background: transparent; }
.spot-panel-foot { padding: 12px; text-align: center; }

@media (max-width: 1199.98px) {
  .spot { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .spot-body { grid-column: 2 / -1; grid-row: 2; }
  .spot-actions { grid-column: 3; grid-row: 1; }
}
@media (max-width: 991.98px) {
  .cluster-layout { grid-template-columns: 1fr; }
  .cluster-side { position: static; }
  .cluster-stats { width: 100%; }
}
@media (max-width: 575.98px) {
  .spot { grid-template-columns: 1fr auto; gap: 8px 10px; padding: 12px; }
  .spot-time { grid-column: 1; grid-row: 1; display: flex; gap: 8px; align-items: baseline; }
  .spot-time strong { display: inline; }
  .spot-station { grid-column: 1 / -1; grid-row: 2; }
  .spot-body { grid-column: 1 / -1; grid-row: 3; }
  .spot-actions { grid-column: 2; grid-row: 1; }
}

/* ---------- Home ---------- */
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center;
  padding: 32px; margin-bottom: 16px; border-radius: var(--eh-radius);
  background:
    radial-gradient(circle at 85% 20%, var(--eh-primary-soft), transparent 55%),
    linear-gradient(135deg, var(--eh-surface), var(--eh-surface-2));
  border: 1px solid var(--eh-border);
}
.home-hero h1 { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; margin-bottom: 10px; }
.home-hero h1 em { font-style: normal; color: var(--eh-primary); }
.home-hero p.lead-copy { font-size: 1.05rem; max-width: 52ch; }
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.home-grid > aside { display: grid; gap: 16px; }
.home-grid > aside .panel { margin: 0; }
.mini-spot {
  display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: var(--eh-radius-sm); background: var(--eh-surface-2); color: var(--eh-text);
  border: 1px solid transparent;
}
.mini-spot:hover { border-color: var(--eh-primary); color: var(--eh-text); }
.mini-spot time { font-family: var(--eh-mono); color: var(--eh-accent); font-weight: 700; font-size: 0.9rem; }
.mini-spot div { min-width: 0; }
.mini-spot strong { font-family: var(--eh-mono); color: var(--eh-primary); margin-right: 6px; }
.mini-spot small { display: block; color: var(--eh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 991.98px) {
  .home-hero, .home-grid, .content-grid, .adif-layout, .calendar-layout, .activity-detail-layout { grid-template-columns: 1fr; }
  .home-hero { padding: 22px; }
}

/* ---------- Auth ---------- */
.auth-layout { display: grid; grid-template-columns: minmax(0, 460px); justify-content: center; gap: 20px; padding-top: 12px; }
.auth-layout-wide { grid-template-columns: minmax(0, 460px) minmax(0, 360px); align-items: start; }
.auth-card {
  background: var(--eh-surface); border: 1px solid var(--eh-border); border-radius: var(--eh-radius);
  padding: 28px; box-shadow: var(--eh-shadow);
}
.auth-card h1 { font-size: 1.6rem; margin-bottom: 8px; }
.auth-card .auth-logo { width: 44px; height: 44px; border-radius: 10px; margin-bottom: 14px; }
.auth-copy { color: var(--eh-muted); }
.auth-form { margin-top: 18px; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; font-size: 0.88rem; color: var(--eh-muted); }
.auth-side { margin: 0; }
.auth-steps { display: grid; gap: 10px; }
.auth-steps > div { display: flex; gap: 12px; align-items: flex-start; }
.auth-steps strong {
  flex-shrink: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--eh-mono); background: var(--eh-primary-soft); color: var(--eh-primary);
}
.auth-steps span { color: var(--eh-muted); font-size: 0.9rem; }
.auth-feature-list { display: grid; gap: 12px; }
.auth-feature { display: flex; gap: 12px; }
.auth-feature i { color: var(--eh-primary); font-size: 1.2rem; }
.auth-feature span { display: grid; }
.auth-feature small { color: var(--eh-muted); }
.auth-note { display: flex; gap: 10px; margin-top: 16px; padding: 12px; border-radius: var(--eh-radius-sm); background: var(--eh-surface-2); color: var(--eh-muted); font-size: 0.85rem; }
.auth-note p { margin: 0; }
.auth-note i { color: var(--eh-primary); }
@media (max-width: 991.98px) { .auth-layout-wide { grid-template-columns: minmax(0, 460px); } }

/* ---------- Station profile ---------- */
.station-identity { display: flex; align-items: center; gap: 16px; }
.station-flag { width: 64px; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px var(--eh-border-strong); }
.station-hero h1 { font-family: var(--eh-mono); font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.04em; margin: 0; color: var(--eh-accent); }
.station-subtitle { margin: 0; color: var(--eh-muted); }

/* ---------- Logbook / QSO entry / ADIF ---------- */
.qso-entry-form .row, .qso-field-grid { row-gap: 12px; }
.qso-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.qso-entry-actions, .adif-submit-row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }
.adif-dropzone {
  display: grid; place-items: center; gap: 6px; text-align: center; padding: 32px 16px;
  border: 2px dashed var(--eh-border-strong); border-radius: var(--eh-radius); background: var(--eh-surface-2); cursor: pointer;
}
.adif-dropzone:hover { border-color: var(--eh-primary); }
.adif-file-icon { font-size: 2rem; color: var(--eh-primary); }
.adif-step-list { padding-left: 18px; color: var(--eh-muted); }
.adif-recent-list { display: grid; gap: 6px; }
.adif-recent-item { padding: 8px 10px; border-radius: var(--eh-radius-sm); background: var(--eh-surface-2); font-size: 0.85rem; }

/* ---------- Legacy pages (activities / calendar / ranking) ---------- */
.activity-status, .station-chip, .operator-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 700; background: var(--eh-surface-3); color: var(--eh-muted);
}
.operator-chip, .station-chip { font-family: var(--eh-mono); }
.activity-operator-list { display: flex; flex-wrap: wrap; gap: 6px; }
.activity-detail-media img, .certificado-img { max-width: 100%; border-radius: var(--eh-radius-sm); }
.calendar-agenda-list { display: grid; gap: 6px; }
.calendar-agenda-item { padding: 10px 12px; border-radius: var(--eh-radius-sm); background: var(--eh-surface-2); display: block; color: var(--eh-text); }
.legend-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; background: var(--eh-muted); }
.legend-current { background: var(--eh-success); } .legend-upcoming { background: var(--eh-accent); } .legend-finished { background: var(--eh-muted); }
.ranking-callsign { font-family: var(--eh-mono); font-weight: 700; }
.medal-list { display: flex; gap: 4px; flex-wrap: wrap; }
.medalla-badge { font-size: 0.7rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--eh-surface-3); }
.medal-gold { color: #eab308; } .medal-silver { color: #94a3b8; } .medal-bronze { color: #c2773a; } .medal-platinum { color: #67e8f9; }
.fc { --fc-border-color: var(--eh-border); --fc-page-bg-color: var(--eh-surface); --fc-neutral-bg-color: var(--eh-surface-2); --fc-today-bg-color: var(--eh-primary-soft); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}