:root{
  --bg:#f4f7fb;
  --card:#ffffff;
  --text:#071a33;
  --muted:#657b92;
  --line:#dfe8f2;
  --blue:#07529c;
  --blue-dark:#043b73;
  --cyan:#0f8fc2;
  --navy:#05264b;
  --green:#14995d;
  --shadow:0 10px 32px rgba(7,38,75,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Roboto",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fff 0,#f4f7fb 40%,#edf3f8 100%);
}
button,select,input{font-family:"Roboto",Arial,sans-serif}

.topbar{
  min-height:132px;
  padding:0 34px;
  display:grid;
  grid-template-columns:520px 1fr 360px;
  align-items:center;
  gap:26px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1000;
  backdrop-filter:blur(12px);
}
.brand{display:flex;align-items:center;padding-left:74px}
.logo{width:430px;height:118px;object-fit:contain;object-position:left center}
.nav-wrap{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0}
.nav-kicker{
  font-size:12px;
  font-weight:500;
  letter-spacing:.22em;
  color:#5b6f84;
  margin-bottom:11px;
  white-space:nowrap;
  text-transform:uppercase
}
.nav{display:flex;gap:26px;align-items:center;flex-wrap:wrap}
.nav a{
  color:#173653;text-decoration:none;font-size:22px;font-weight:900;padding:10px 0 12px;
  border-bottom:4px solid transparent;letter-spacing:.02em
}
.nav a:hover,.nav a.active{color:var(--blue-dark);border-bottom-color:var(--blue-dark)}
.account-zone{display:flex;justify-content:flex-end;align-items:center;gap:8px}
.ghost,.lang{
  border:1px solid #c6d6e6;background:#f6f9fc;color:#657b92;
  border-radius:0;height:38px;padding:0 12px;font-size:12px;font-weight:700
}
.disabled{opacity:.58;cursor:not-allowed}

main{padding:30px 32px 34px;max-width:1780px;margin:0 auto}
.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:28px;align-items:center;margin-bottom:22px}
.eyebrow{font-size:12px;color:var(--blue-dark);font-weight:900;letter-spacing:.12em;margin-bottom:8px}
h1{font-size:38px;line-height:1.05;margin:0 0 10px;letter-spacing:-.035em}
h1 span{color:var(--blue-dark)}
.hero p{color:#516c86;font-size:16px;margin:0;max-width:760px}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:16px 17px;box-shadow:var(--shadow)}
.stat-label{font-size:12px;color:var(--muted);font-weight:700;margin-bottom:6px}
.stat-value{font-size:27px;font-weight:900;letter-spacing:-.04em}
.stat-value.small{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat-value.live{color:var(--green);font-size:21px}
.stat-sub{font-size:11px;color:#8194a8;margin-top:3px}

.main-grid{display:grid;grid-template-columns:minmax(0,1.82fr) minmax(390px,.78fr);gap:18px;align-items:stretch}
.lower-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;padding:15px 17px;border-bottom:1px solid var(--line)}
.card-title{font-weight:900;font-size:18px}
.card-subtitle{font-size:11px;color:var(--muted);margin-top:2px}
.pill{font-size:11px;color:var(--blue-dark);background:#e6f0fa;padding:6px 9px;border-radius:0;font-weight:700}
.head-actions{display:flex;align-items:center;gap:14px}
.live-badge{display:flex;align-items:center;gap:7px;color:var(--green);font-size:12px;font-weight:800}
.live-badge i{width:8px;height:8px;background:var(--green);border-radius:50%;box-shadow:0 0 0 4px rgba(20,153,93,.12)}
.cqww-btn{
  border:1px solid #0e7b4a;background:#14995d;color:white;font-weight:900;border-radius:0;
  padding:9px 13px;cursor:pointer;font-size:12px;letter-spacing:.02em
}
.cqww-btn.active{background:var(--blue-dark);border-color:var(--blue-dark)}

.spot-toolbar{
  display:grid;grid-template-columns:minmax(220px,1.35fr) repeat(3,minmax(130px,.65fr));
  gap:9px;padding:12px;border-bottom:1px solid var(--line)
}
.spot-toolbar input,.spot-toolbar select{
  width:100%;padding:10px 11px;border:1px solid #cbd9e7;border-radius:0;background:#fff;
  color:#284764;font-size:12px;outline:none
}
.callsign-search input:focus{border-color:#77a9d8;box-shadow:0 0 0 3px rgba(7,82,156,.08)}

.continent-filter-wrap{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);
  background:#f9fbfd;flex-wrap:wrap
}
.continent-label{
  font-size:12px;
  font-weight:400;
  color:#455b72;
  letter-spacing:0;
  line-height:1.05;
  white-space:nowrap
}
.continent-buttons{display:grid;grid-template-columns:repeat(7,116px);gap:6px;flex-wrap:wrap}
.toggle{
  border:0;
  outline:0;
  box-shadow:none;
  background:#edf2f7;
  color:#455b72;
  border-radius:0;
  padding:7px 6px;
  font-size:12px;
  font-weight:400;
  cursor:pointer;
  width:116px;
  line-height:1.05
}
.toggle:focus,
.toggle:focus-visible{
  outline:0;
  box-shadow:none
}
.toggle.active{
  background:var(--blue-dark);
  color:white;
  border:0
}
.color-mode{
  font-size:12px;
  font-weight:400;
  background:#dfe7ef;
  color:#334b64
}

/* Colored continent mode */
body.colored-mode .toggle[data-continent="EU"]{
  background:#043b73;
  color:#fff
}
body.colored-mode .toggle[data-continent="AS"]{
  background:#7b4f2c;
  color:#fff
}
body.colored-mode .toggle[data-continent="AF"]{
  background:#b53333;
  color:#fff
}
body.colored-mode .toggle[data-continent="NA"]{
  background:#3f8a4b;
  color:#fff
}
body.colored-mode .toggle[data-continent="SA"]{
  background:#70459c;
  color:#fff
}
body.colored-mode .toggle[data-continent="OC"]{
  background:#d5791f;
  color:#fff
}
body.colored-mode .color-mode{
  background:#26384a;
  color:#fff
}

/* Keep inactive continent buttons slightly muted even in colored mode */
body.colored-mode .toggle[data-continent]:not(.active){
  filter:saturate(.45);
  opacity:.48
}

/* Spot row colors matching continent buttons */
body.colored-mode tr.continent-EU td{background:rgba(4,59,115,.24)}
body.colored-mode tr.continent-AS td{background:rgba(123,79,44,.24)}
body.colored-mode tr.continent-AF td{background:rgba(181,51,51,.23)}
body.colored-mode tr.continent-NA td{background:rgba(63,138,75,.23)}
body.colored-mode tr.continent-SA td{background:rgba(112,69,156,.23)}
body.colored-mode tr.continent-OC td{background:rgba(213,121,31,.25)}

body.colored-mode tr.continent-EU td:first-child{box-shadow:inset 5px 0 0 #043b73}
body.colored-mode tr.continent-AS td:first-child{box-shadow:inset 5px 0 0 #7b4f2c}
body.colored-mode tr.continent-AF td:first-child{box-shadow:inset 5px 0 0 #b53333}
body.colored-mode tr.continent-NA td:first-child{box-shadow:inset 5px 0 0 #3f8a4b}
body.colored-mode tr.continent-SA td:first-child{box-shadow:inset 5px 0 0 #70459c}
body.colored-mode tr.continent-OC td:first-child{box-shadow:inset 5px 0 0 #d5791f}

.table-wrap{height:595px;overflow:auto}
table{
  width:100%;
  border-collapse:collapse;
  font-size:12px;
  table-layout:fixed;
}
col.c-time{width:72px}
col.c-dx{width:118px}
col.c-freq{width:92px}
col.c-band{width:72px}
col.c-mode{width:72px}
col.c-spotter{width:118px}
col.c-source{width:100px}
col.c-snr{width:72px}
thead{position:sticky;top:0;background:#f6f9fc;z-index:2}
th,td{
  padding:9px 10px;border-bottom:1px solid #eaf0f6;text-align:left;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis
}
th{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:#657b92}
td.dx{font-weight:900;color:var(--blue-dark)}
td.spotter{font-weight:700;color:#355b80}
.badge{display:inline-block;padding:3px 7px;border-radius:0;background:#e6f0fa;color:#06447f;font-weight:900}
.loading{text-align:center;color:var(--muted);padding:34px}
.ssb-only .snr-col,
.ssb-only td.snr-cell,
.ssb-only col.c-snr{display:none}

.map-card{position:relative}
#propagationMap{height:595px;width:100%;background:#dce8f5}
.leaflet-container{font-family:"Roboto",Arial,sans-serif}
.map-legend{
  position:absolute;z-index:500;left:18px;bottom:44px;display:flex;align-items:center;gap:7px;
  padding:7px 10px;background:rgba(255,255,255,.92);border:1px solid rgba(205,220,235,.9);
  border-radius:0;font-size:10px;color:#5f7894;box-shadow:0 4px 18px rgba(15,46,85,.12)
}
.legend-gradient{
  width:120px;height:8px;border-radius:0;
  background:linear-gradient(90deg,#17458e,#0f8fc2,#3aae63,#e4c83a,#d37a2c,#b82727)
}
.map-note{
  position:absolute;left:18px;right:18px;bottom:10px;z-index:500;font-size:9px;color:#526b84;
  background:rgba(255,255,255,.9);border:1px solid #dbe6f0;border-radius:0;padding:6px 8px
}

.bars{display:flex;align-items:flex-end;gap:11px;height:220px;padding:28px 18px 20px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%;justify-content:flex-end}
.bar{width:100%;max-width:42px;background:linear-gradient(180deg,var(--cyan),var(--blue-dark));border-radius:0;min-height:4px}
.bar-label{font-size:10px;color:#657b92}
.bar-value{font-size:10px;color:#1d4c77;font-weight:750}
.rank-list{padding:12px 18px 18px}
.rank-row{display:grid;grid-template-columns:30px 1fr 80px;gap:10px;padding:11px 0;border-bottom:1px solid #edf2f8;align-items:center}
.rank-pos{font-size:12px;color:#8ca1b8}
.rank-call{font-weight:900;color:var(--blue-dark)}
.rank-count{text-align:right;font-size:12px;font-weight:800}

.contacts-page{max-width:1100px;padding-top:70px;padding-bottom:80px}
.contact-hero{margin-bottom:30px}
.contact-hero h1{font-size:54px;color:var(--blue-dark)}
.contact-lead{font-size:20px;line-height:1.55;color:#4f6782;max-width:900px}
.contact-card{
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);padding:34px;border-radius:0
}
.contact-card h2{font-size:28px;margin:0 0 18px;color:var(--blue-dark)}
.contact-card p{font-size:16px;line-height:1.7;color:#516c86}
.contact-email{
  margin-top:28px;padding-top:24px;border-top:1px solid var(--line);display:flex;gap:18px;align-items:center
}
.contact-email span{font-size:13px;font-weight:900;color:#657b92;text-transform:uppercase;letter-spacing:.08em}
.contact-email a{font-size:22px;font-weight:900;color:var(--blue-dark);text-decoration:none}

footer{
  max-width:1780px;margin:0 auto;padding:24px 32px 38px;color:#60758c;font-size:12px;
  display:flex;justify-content:space-between
}

@media(max-width:1450px){
  .topbar{grid-template-columns:430px 1fr 300px}
  .brand{padding-left:35px}
  .logo{width:370px;height:108px}
  .nav a{font-size:18px}
  .continent-buttons{grid-template-columns:repeat(4,116px)}
}
@media(max-width:1180px){
  .topbar{grid-template-columns:360px 1fr}
  .account-zone{display:none}
  .brand{padding-left:18px}
  .logo{width:330px}
  .main-grid{grid-template-columns:1.4fr .9fr}
}
@media(max-width:1050px){
  .hero,.main-grid,.lower-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .topbar{grid-template-columns:1fr}
  .nav-wrap{display:none}
  .brand{padding-left:0}
  .spot-toolbar{grid-template-columns:1fr 1fr}
  #propagationMap{height:480px}
}

button{
  outline:0;
  box-shadow:none;
}
button:focus,
button:focus-visible{
  outline:0;
  box-shadow:none;
}

/* Branded header background */
.topbar{
  background:
    linear-gradient(90deg, rgba(4,59,115,.055) 0%, rgba(4,59,115,.018) 42%, rgba(255,255,255,.96) 100%),
    repeating-linear-gradient(135deg, rgba(4,59,115,.022) 0, rgba(4,59,115,.022) 1px, transparent 1px, transparent 22px),
    #fff;
  box-shadow:0 8px 28px rgba(4,59,115,.07);
}
.topbar:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:3px;
  background:linear-gradient(90deg,#043b73 0%,#0f8fc2 42%,rgba(15,143,194,.08) 82%);
}

/* Analytics */
.analytics-section{margin-top:18px}
.analytics-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.analytics-head{gap:18px}
.time-filter{
  display:flex;
  gap:3px;
  flex-wrap:wrap;
  justify-content:flex-end
}
.time-btn{
  border:0;
  outline:0;
  background:#e7edf4;
  color:#455b72;
  height:28px;
  padding:0 9px;
  border-radius:0;
  font-size:10px;
  font-weight:500;
  cursor:pointer
}
.time-btn.active{
  background:#043b73;
  color:#fff
}
.time-btn:hover{background:#cfdbe7}
.time-btn.active:hover{background:#043b73}

.bars{height:250px;padding:28px 18px 20px}
.bar-label,.bar-value{font-size:15px}
.bar-value{font-weight:700}
.bar-col[data-band="160m"] .bar{background:#5b4a8c}
.bar-col[data-band="80m"] .bar{background:#2f5597}
.bar-col[data-band="40m"] .bar{background:#287b9f}
.bar-col[data-band="30m"] .bar{background:#338d72}
.bar-col[data-band="20m"] .bar{background:#4e9c4b}
.bar-col[data-band="17m"] .bar{background:#8b9f3b}
.bar-col[data-band="15m"] .bar{background:#c59b32}
.bar-col[data-band="12m"] .bar{background:#d4792f}
.bar-col[data-band="10m"] .bar{background:#b64646}

.mode-stats{padding:24px}
.unique-stations{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-bottom:20px;
  margin-bottom:20px;
  border-bottom:1px solid var(--line)
}
.metric-label{font-size:12px;font-weight:700;color:#657b92}
.metric-value{font-size:46px;line-height:1;font-weight:900;color:#043b73}
.mode-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.mode-box{
  background:#f5f8fb;
  padding:14px;
  min-height:86px
}
.mode-name{font-size:12px;color:#657b92;font-weight:700}
.mode-count{font-size:28px;font-weight:900;color:#173653;margin-top:6px}

.continent-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:24px
}
.continent-stat{
  padding:14px;
  background:#f5f8fb;
  border-left:5px solid #043b73
}
.continent-stat[data-continent="EU"]{border-left-color:#043b73}
.continent-stat[data-continent="AS"]{border-left-color:#7b4f2c}
.continent-stat[data-continent="AF"]{border-left-color:#b53333}
.continent-stat[data-continent="NA"]{border-left-color:#3f8a4b}
.continent-stat[data-continent="SA"]{border-left-color:#70459c}
.continent-stat[data-continent="OC"]{border-left-color:#d5791f}
.continent-stat .name{font-size:12px;color:#657b92}
.continent-stat .value{font-size:26px;font-weight:900;margin-top:4px;color:#173653}
.continent-stat .sub{font-size:11px;color:#8194a8;margin-top:3px}

/* Footer */
.site-footer{
  max-width:none;
  margin:28px 0 0;
  padding:0;
  background:#062b54;
  color:#dce9f5;
  display:block
}
.footer-main{
  max-width:1780px;
  margin:0 auto;
  padding:34px 32px;
  display:grid;
  grid-template-columns:1.25fr 1.35fr .9fr 1.05fr;
  gap:32px;
  align-items:center
}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-logo{
  width:165px;
  height:62px;
  object-fit:contain;
  background:#fff;
  padding:4px
}
.footer-project{font-size:18px;font-weight:900;color:#fff}
.footer-tagline{font-size:10px;letter-spacing:.12em;color:#9fb8d1;margin-top:4px}
.footer-nav{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.footer-nav a{
  color:#dce9f5;
  text-decoration:none;
  font-size:12px;
  font-weight:700
}
.footer-nav a:hover{color:#fff}
.footer-contact .footer-label{font-size:10px;letter-spacing:.12em;color:#8faac4;margin-bottom:6px}
.footer-contact a{color:#fff;text-decoration:none;font-size:15px;font-weight:700}
.footer-qr{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.footer-qr img{width:92px;height:92px;background:#fff;padding:5px}
.footer-qr div{display:flex;flex-direction:column;gap:3px}
.footer-qr strong{font-size:13px;color:#fff}
.footer-qr span{font-size:10px;color:#aac0d5}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);
  padding:14px 32px;
  text-align:center;
  font-size:11px;
  color:#8faac4
}

@media(max-width:1100px){
  .analytics-grid{grid-template-columns:1fr}
  .footer-main{grid-template-columns:1fr 1fr}
}
@media(max-width:700px){
  .footer-main{grid-template-columns:1fr}
  .footer-qr{justify-content:flex-start}
  .mode-grid{grid-template-columns:1fr 1fr}
  .continent-stats{grid-template-columns:1fr 1fr}
}


/* Personalized propagation controls */
.propagation-head{padding-bottom:12px}
.propagation-controls{
  display:grid;
  grid-template-columns:1.25fr .72fr .82fr auto auto;
  gap:7px;
  padding:10px 12px;
  background:#f7fafd;
  border-bottom:1px solid var(--line);
  align-items:end
}
.prop-field{display:flex;flex-direction:column;gap:4px}
.prop-field label{
  font-size:9px;
  font-weight:700;
  color:#6b7f93;
  letter-spacing:.08em
}
.prop-field input,
.prop-field select{
  height:34px;
  width:100%;
  border:1px solid #cbd9e7;
  border-radius:0;
  outline:0;
  background:#fff;
  color:#173653;
  padding:0 9px;
  font-size:12px;
  font-weight:500
}
.prop-field input:focus,
.prop-field select:focus{border-color:#587fa6}
.prop-action,
.prop-reset{
  height:34px;
  border:0;
  border-radius:0;
  outline:0;
  padding:0 12px;
  font-size:10px;
  font-weight:700;
  cursor:pointer;
  white-space:nowrap
}
.prop-action{background:#043b73;color:#fff}
.prop-action:hover{background:#052f59}
.prop-action:disabled{opacity:.55;cursor:wait}
.prop-reset{background:#e4ebf2;color:#405970}
.prop-reset:hover{background:#d7e1ea}
.propagation-summary{
  min-height:35px;
  padding:8px 12px;
  border-bottom:1px solid var(--line);
  background:#fff;
  color:#536c84;
  font-size:10px;
  line-height:1.45
}
.propagation-summary strong{color:#173653}
.qth-marker{
  width:14px!important;
  height:14px!important;
  border-radius:50%;
  border:3px solid #fff;
  background:#043b73;
  box-shadow:0 0 0 3px rgba(4,59,115,.30),0 3px 10px rgba(0,0,0,.25)
}

@media(max-width:1450px){
  .propagation-controls{grid-template-columns:1fr 1fr 1fr}
  .prop-action,.prop-reset{width:100%}
}
@media(max-width:1050px){
  .propagation-controls{grid-template-columns:1fr 1fr}
  .locator-field{grid-column:1 / -1}
}


/* Propagation calculation progress */
.prop-progress-wrap{
  padding:8px 12px 10px;
  border-bottom:1px solid var(--line);
  background:#f8fbfd
}
.prop-progress-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:6px;
  font-size:10px;
  color:#536c84
}
.prop-progress-track{
  width:100%;
  height:7px;
  background:#dce6ef;
  overflow:hidden
}
.prop-progress-bar{
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#043b73,#0f8fc2);
  transition:width .25s ease
}

/* Best-band recommendation */
.band-recommendation{
  padding:10px 12px 12px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(4,59,115,.06),rgba(15,143,194,.025))
}
.band-rec-title{
  font-size:9px;
  font-weight:700;
  letter-spacing:.09em;
  color:#6b7f93;
  margin-bottom:6px
}
.band-rec-main{
  display:flex;
  align-items:baseline;
  gap:10px
}
.band-rec-band{
  font-size:28px;
  font-weight:900;
  color:#043b73
}
.band-rec-score{
  font-size:11px;
  font-weight:700;
  color:#3d5872
}
.band-rec-text{
  margin-top:4px;
  font-size:10px;
  line-height:1.45;
  color:#526b84
}