:root {
  --bg: #030b16;
  --bg-soft: #071428;
  --panel: #0a1a2f;
  --panel-2: #0d2138;
  --line: #17324f;
  --text: #e2e8f0;
  --muted: #8fa3bb;
  --cyan: #22d3ee;
  --cyan-soft: rgba(34, 211, 238, 0.12);
  --red: #f43f5e;
  --gold: #facc15;
  --green: #34d399;
  --radius: 14px;
  --body-bg: radial-gradient(1200px 600px at 15% -10%, #0d2d4d 0%, var(--bg) 60%);
  --topbar-bg: rgba(3, 11, 22, 0.85);
  --hero-bg: linear-gradient(135deg, #061a30 0%, #0b2c4f 60%, #08233d 100%);
  --hero-glow: rgba(34, 211, 238, 0.25);
  --panel-bg: linear-gradient(180deg, rgba(13, 33, 56, 0.9), rgba(8, 20, 35, 0.9));
  --field-bg: #04121e;
  --table-head-bg: #07182b;
  --row-line: rgba(23, 50, 79, 0.7);
  --soft-cell: rgba(255, 255, 255, 0.035);
  --on-accent: #04121e;
  --prose-text: #c7d5e5;
  --hero-scrim-a: rgba(3, 10, 20, 0.66);
  --hero-scrim-b: rgba(3, 10, 20, 0.9);
  --hero-image-tint: 3, 10, 20;
  --hero-image-muted: #c7d5e5;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-text-shadow: 0 2px 20px rgba(0, 0, 0, 0.55);
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--text);
  font-family: "Segoe UI", Roboto, system-ui, -apple-system, sans-serif;
  line-height: 1.55;
  min-height: 100vh;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 14px 24px;
  border-bottom: 1px solid var(--line);
  background: var(--topbar-bg);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 1000;
  flex-wrap: wrap;
}

.logo { font-weight: 800; letter-spacing: 1px; color: var(--text); font-size: 18px; }
.logo span { color: var(--cyan); }
.logo small { color: var(--muted); font-weight: 500; letter-spacing: 0; margin-left: 6px; }
.logo:hover { text-decoration: none; }

.topbar nav { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.topbar nav a {
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
}
.topbar nav a:hover { background: var(--panel); color: var(--text); text-decoration: none; }
.topbar nav a.on { background: var(--cyan-soft); color: var(--cyan); }
.topbar-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pills { display: flex; gap: 6px; flex-wrap: wrap; }

/* Pemilih bahasa: tetap terlihat di topbar pada layar kecil. */
.lang-picker { position: relative; }
.lang-picker summary {
  display: flex;
  align-items: center;
  gap: 7px;
  list-style: none;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  max-width: 210px;
}
.lang-picker summary::-webkit-details-marker { display: none; }
.lang-picker summary:hover { border-color: var(--cyan); }
.lang-picker summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.lang-picker summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-picker[open] summary { border-color: var(--cyan); }
.lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 1200;
  margin: 0;
  padding: 6px;
  min-width: 218px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 14px 34px rgba(2, 8, 18, 0.45);
}
.lang-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.lang-menu a:hover { background: var(--cyan-soft); color: var(--cyan); text-decoration: none; }
.lang-menu a.on { background: var(--cyan-soft); color: var(--cyan); }
/* Di layar sempit pemilih bahasa ada di kiri, jadi menu dibuka ke kanan. */
@media (max-width: 720px) {
  .lang-menu { left: 0; right: auto; max-width: calc(100vw - 32px); }
}

/* Bendera SVG lokal: tampil sama di HP maupun PC (emoji bendera tidak ada di Windows). */
.lang-flag, .flag-icon {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: -2px;
  border-radius: 2px;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35);
}
.lang-flag { width: 22px; height: 16px; }
.lang-globe { width: auto; text-align: center; font-size: 14px; box-shadow: none; }
.flag-icon { width: 20px; height: 14px; }

.pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  white-space: nowrap;
}
.pill-ok { color: var(--green); border-color: rgba(52, 211, 153, 0.35); }
.pill-warn { color: var(--gold); border-color: rgba(250, 204, 21, 0.35); }
.pill-bad, .pill-off { color: #fda4af; border-color: rgba(244, 63, 94, 0.3); }

.pill-lama { color: #a855f7; border-color: rgba(168, 85, 247, 0.3); }
.pill-live { background: var(--red); color: #fff; border-color: var(--red); }

main {
  max-width: 1240px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 44px 36px;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: var(--hero-bg);
  text-align: center;
}
.hero-glow {
  position: absolute;
  z-index: 0;
  inset: -40% -10% auto;
  height: 420px;
  background: radial-gradient(closest-side, var(--hero-glow), transparent 70%);
  pointer-events: none;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 920px;
  margin: 0 auto;
}
.hero-content > h1,
.hero-content > .tagline,
.hero-content > .meta { width: 100%; }
.hero .tag {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
}
.hero h1 {
  margin: 18px 0 8px;
  font-size: clamp(30px, 5vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  text-shadow: 0 6px 30px var(--hero-glow);
}
.hero .tagline { color: var(--muted); font-style: italic; margin: 0 0 18px; }
.hero .meta {
  display: flex;
  gap: 10px 26px;
  justify-content: center;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 14px;
  margin-bottom: 24px;
}
.hero .meta b { color: var(--text); }

.btn {
  display: inline-block;
  border: 1px solid var(--cyan);
  background: var(--cyan);
  color: var(--on-accent);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.6px;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.btn:hover { filter: brightness(1.08); text-decoration: none; transform: translateY(-1px); }
.btn-red { background: var(--red); border-color: var(--red); color: #fff; padding: 12px 28px; }
.btn-ghost { background: transparent; color: var(--cyan); }
.btn-tiny { padding: 4px 10px; font-size: 11px; }

.panel {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
}
.panel.narrow { max-width: 900px; margin: 0 auto; width: 100%; }
.panel.center { text-align: center; }
.panel h2 { margin: 0 0 14px; font-size: 19px; letter-spacing: 0.2px; }
.panel h3 { margin: 18px 0 10px; font-size: 15px; color: var(--cyan); text-transform: uppercase; letter-spacing: 0.8px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.panel-head h2 { margin: 0; }

.grid { display: grid; gap: 22px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.grid.three { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.prose p { margin: 0 0 10px; color: var(--prose-text); }
.prose ul { margin: 8px 0 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.prose li { margin-bottom: 4px; }

.howto { margin-top: 16px; border-top: 1px dashed var(--line); padding-top: 8px; }
.step { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 7px 0; flex-wrap: wrap; }
.step span { color: var(--muted); font-size: 13px; }
code {
  background: var(--field-bg);
  border: 1px solid var(--line);
  color: var(--gold);
  padding: 3px 9px;
  border-radius: 7px;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 13px;
}

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stat-label { font-size: 11px; letter-spacing: 1px; color: var(--muted); font-weight: 700; }
.stat-value { font-size: 34px; line-height: 1.15; color: var(--cyan); font-weight: 800; }
.stat-sub { font-size: 12px; color: var(--muted); }
.small-stats .stat-value { font-size: 20px; color: var(--text); word-break: break-word; }

.cal { display: flex; flex-direction: column; gap: 10px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; font-weight: 700; }
.cal-nav { padding: 2px 12px; border-radius: 8px; border: 1px solid var(--line); font-size: 18px; }
.cal-nav:hover { background: var(--panel-2); text-decoration: none; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-dow { text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: 0.5px; }
.cal-cell {
  min-height: 46px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--muted);
}
.cal-cell.has { background: rgba(34, 211, 238, 0.14); border-color: rgba(34, 211, 238, 0.35); color: var(--text); }
.cal-cell.today { outline: 1px solid var(--gold); }
.cal-cell .d { font-weight: 700; }
.cal-cell .c { font-size: 11px; color: var(--cyan); }
.cal-cell.empty { background: transparent; }

.event-feature { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.8fr); gap: 18px; overflow: hidden; }
.event-banner { min-height: 230px; position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(135deg, #082f49, #164e63 55%, #713f12); }
.event-banner > img { width: 100%; height: 100%; min-height: 230px; display: block; object-fit: cover; }
.event-banner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2, 6, 23, .9), rgba(2, 6, 23, .18) 75%); pointer-events: none; }
.event-banner-overlay { position: absolute; z-index: 1; inset: auto 24px 22px; color: #f8fafc; }
.event-banner-overlay h2 { margin: 8px 0 5px; font-size: clamp(24px, 4vw, 42px); }
.event-banner-overlay p { margin: 0; color: #cbd5e1; font-size: 13px; }
.event-banner-art { min-height: 230px; height: 100%; padding: 28px; display: flex; flex-direction: column; justify-content: flex-end; color: #f8fafc; background: radial-gradient(circle at 80% 15%, rgba(34, 211, 238, .7), transparent 30%), linear-gradient(135deg, #082f49, #164e63 55%, #713f12); }
.event-banner-art span { color: #67e8f9; font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.event-banner-art strong { margin: 8px 0; font-size: clamp(24px, 4vw, 42px); }
.event-banner-art small { color: #cbd5e1; }
.event-schedule { padding: 3px 3px 3px 0; }
.event-schedule ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.event-schedule-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 10px; align-items: center; padding: 10px; border-radius: 10px; background: rgba(255,255,255,.025); border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease, transform .15s ease; }
.event-schedule-row:hover, .event-schedule-row:focus-visible { background: rgba(255,255,255,.08); border-color: var(--line); outline: none; transform: translateX(2px); }
.event-schedule-row.selected { box-shadow: inset 3px 0 0 currentColor; }
.event-row-berlangsung { color: #4ade80; background: rgba(74, 222, 128, .12); border-color: rgba(74, 222, 128, .36); }
.event-row-akan-datang { color: #fbbf24; background: rgba(251, 191, 36, .11); border-color: rgba(251, 191, 36, .3); }
.event-row-selesai { color: #f87171; background: rgba(248, 113, 113, .11); border-color: rgba(248, 113, 113, .3); }
.event-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.event-schedule-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.event-schedule-main b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event-schedule-main small { color: var(--muted); font-size: 11px; }
.event-status { color: currentColor; font-size: 10px; white-space: nowrap; font-weight: 700; }
.event-status-aktif { color: #4ade80; }
.event-status-akan-datang { color: #fbbf24; }
.event-status-selesai { color: #f87171; }
.event-trigger-list { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.event-trigger { font-size: 11px; padding: 2px 7px; line-height: 1.5; }
.event-trigger-missing { color: var(--muted); border-style: dashed; }
.event-checkin-howto { margin-top: 16px; }
.event-checkin-howto h3 { margin: 0 0 4px; font-size: 13px; }
.event-checkin-howto p { margin: 8px 0 0; }
.event-howto-trigger { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }

@media (max-width: 760px) {
  .event-feature { grid-template-columns: 1fr; }
}

.map { height: 380px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; z-index: 0; }
.leaflet-container { background: var(--bg-soft); }
.aprs-pin {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
}
.aprs-pin b {
  font-size: 20px; line-height: 1;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.8));
}

.searchbar { display: flex; gap: 10px; flex-wrap: wrap; }
.searchbar input {
  flex: 1;
  min-width: 220px;
  background: var(--field-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  padding: 11px 14px;
  font-size: 15px;
  text-transform: uppercase;
}
.searchbar input:focus { outline: 2px solid var(--cyan-soft); border-color: var(--cyan); }

.table-tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font-size: 13px; color: var(--muted); }
.table-tools select, .table-tools input {
  background: var(--field-bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 8px; font-size: 13px;
}
.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 12px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}
.table-wrap::-webkit-scrollbar { height: 8px; width: 8px; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--line); border-radius: 8px; }
table.data { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 14px; }
table.data td { white-space: nowrap; }
table.data td:nth-child(3) { white-space: normal; min-width: 200px; max-width: 340px; }
table.data td:last-child { white-space: nowrap; }
table.data th {
  text-align: left;
  padding: 11px 12px;
  background: var(--table-head-bg);
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
}
table.data td { padding: 10px 12px; border-top: 1px solid var(--row-line); vertical-align: top; }
table.data tbody tr:hover { background: rgba(34, 211, 238, 0.04); }
.table-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--muted); }
.pager button {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--line);
  border-radius: 8px; padding: 5px 12px; margin-left: 6px; cursor: pointer;
}
.pager button:disabled { opacity: 0.4; cursor: default; }

.call { font-weight: 800; letter-spacing: 0.5px; }
.flag { font-size: 14px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }
.small { font-size: 12px; }
.muted { color: var(--muted); }
.empty { color: var(--muted); padding: 18px 0; text-align: center; }
.chip {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  background: var(--cyan-soft); color: var(--cyan); font-size: 11px; font-weight: 700;
}
.chip-out { background: rgba(52, 211, 153, 0.14); color: var(--green); }

.rank { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rank li {
  counter-increment: r;
  display: grid; grid-template-columns: 26px 1fr auto; align-items: center;
  gap: 8px;
  padding: 9px 0; border-bottom: 1px solid var(--row-line);
  font-size: 14px;
}
.rank li:last-child { border-bottom: none; }
.rank li::before { content: counter(r) "."; color: var(--muted); }
.rank.plain { grid-template-columns: 1fr auto; }
.rank.plain li { grid-template-columns: 1fr auto; }
.rank.plain li::before { display: none; }
.rank li span:last-child, .rank li a + span { color: var(--cyan); font-weight: 700; text-align: right; }

.eqsl-card {
  width: 100%;
  max-width: 880px;
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  margin: 10px 0 18px;
}
.actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.detail-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; text-align: left; margin-top: 16px;
}
.detail-grid div { background: var(--panel-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.detail-grid span { display: block; font-size: 11px; letter-spacing: 0.8px; color: var(--muted); text-transform: uppercase; }
.detail-grid b { font-size: 14px; word-break: break-word; }

.qso-list { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.qso {
  display: grid; grid-template-columns: 170px 1fr auto; gap: 10px; align-items: center;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
}
.qso > div:first-child { display: flex; flex-direction: column; }
.qso .btn { justify-self: end; }

.site-footer {
  border-top: 1px solid var(--line);
  padding: 22px 20px 40px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
}
.site-footer p { margin: 4px 0; }

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 5000;
  background: var(--panel-2); border: 1px solid var(--cyan); color: var(--text);
  padding: 12px 18px; border-radius: 12px; font-size: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: pop 0.2s ease;
}
@keyframes pop { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (max-width: 640px) {
  .hero { padding: 30px 18px; }
  .qso { grid-template-columns: 1fr; }
  .panel { padding: 16px; }
}

.hero-event {
  display: inline-block;
  margin: -6px 0 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(250, 204, 21, 0.12);
  border: 1px solid rgba(250, 204, 21, 0.35);
  color: #fde68a;
  font-size: 13px;
}
.hero-event b { color: #fef3c7; }

.clock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.clock-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--soft-cell);
  border: 1px solid rgba(148, 163, 184, 0.22);
}
.clock-label {
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.clock-time {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 30px;
  line-height: 1.1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.clock-cell select {
  background: var(--field-bg);
  color: var(--text);
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13px;
  margin-bottom: 4px;
}
.clock-date { font-size: 12px; }
@media (max-width: 640px) { .clock-time { font-size: 24px; } }


/* ---------- Gambar hero kustom (upload dari admin) ----------
   Gambar tetap terlihat di sisi kanan; scrim hanya pekat di area teks.
   Tint mengikuti tema: gelap untuk tema malam, terang untuk tema siang. */
.hero.has-image {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 380px;
  padding: 52px 44px;
  border-color: var(--line);
  text-align: left;
}
.hero-media {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: var(--panel);
  background-size: cover;
  background-position: var(--hero-image-position);
  background-repeat: no-repeat;
  filter: brightness(var(--hero-image-brightness));
  pointer-events: none;
}
.hero.has-image::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(var(--hero-image-tint), 0.22) 0%, rgba(var(--hero-image-tint), 0.04) 40%, rgba(var(--hero-image-tint), 0.58) 100%),
    linear-gradient(100deg, rgba(var(--hero-image-tint), 0.86) 0%, rgba(var(--hero-image-tint), 0.7) 42%, rgba(var(--hero-image-tint), 0.3) 72%, rgba(var(--hero-image-tint), 0.1) 100%);
  pointer-events: none;
}
.hero.has-image .hero-glow { z-index: 1; opacity: 0.3; }
.hero.has-image .hero-content {
  align-items: flex-start;
  max-width: 720px;
  margin: 0;
}
.hero.has-image .meta { justify-content: flex-start; }
.hero.has-image .tagline,
.hero.has-image .meta { color: var(--hero-image-muted); }
.hero.has-image h1,
.hero.has-image .tagline,
.hero.has-image .meta { text-shadow: var(--hero-image-text-shadow); }

@media (max-width: 760px) {
  .hero.has-image {
    min-height: 340px;
    padding: 36px 22px;
  }
  .hero.has-image::after {
    background: linear-gradient(
      180deg,
      rgba(var(--hero-image-tint), 0.84) 0%,
      rgba(var(--hero-image-tint), 0.66) 44%,
      rgba(var(--hero-image-tint), 0.9) 100%
    );
  }
  .hero.has-image .hero-content { max-width: 100%; }
}

/* ---------- Tema dashboard publik ----------
   Setiap tema hanya menimpa variabel warna; tata letak tetap sama.
   Tema "aurora" adalah nilai bawaan di :root. */
body[data-theme="graphite"] {
  --hero-image-tint: 10, 14, 20;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #cfd8e5;
  --bg: #0b0e14;
  --bg-soft: #10141c;
  --panel: #141922;
  --panel-2: #1a2029;
  --line: #29313d;
  --text: #e8edf5;
  --muted: #98a4b6;
  --cyan: #93c5fd;
  --cyan-soft: rgba(147, 197, 253, 0.14);
  --red: #fb7185;
  --gold: #fbbf24;
  --green: #34d399;
  --body-bg: radial-gradient(1200px 600px at 15% -10%, #1a2233 0%, var(--bg) 60%);
  --topbar-bg: rgba(11, 14, 20, 0.85);
  --hero-bg: linear-gradient(135deg, #111827 0%, #1e293b 60%, #0f172a 100%);
  --hero-glow: rgba(147, 197, 253, 0.2);
  --panel-bg: linear-gradient(180deg, rgba(20, 25, 34, 0.94), rgba(13, 17, 24, 0.94));
  --field-bg: #0f131a;
  --table-head-bg: #12171f;
  --row-line: rgba(41, 49, 61, 0.75);
  --soft-cell: rgba(255, 255, 255, 0.04);
  --on-accent: #0b1220;
  --prose-text: #cbd5e1;
}

body[data-theme="emerald"] {
  --hero-image-tint: 3, 15, 12;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #c7e2d5;
  --bg: #04120d;
  --bg-soft: #071a14;
  --panel: #0a231b;
  --panel-2: #0e2b21;
  --line: #1c4033;
  --text: #e6f6ee;
  --muted: #8fb8a6;
  --cyan: #4ade80;
  --cyan-soft: rgba(74, 222, 128, 0.14);
  --red: #fb7185;
  --gold: #fbbf24;
  --green: #34d399;
  --body-bg: radial-gradient(1200px 600px at 15% -10%, #0b3a2a 0%, var(--bg) 60%);
  --topbar-bg: rgba(4, 18, 13, 0.85);
  --hero-bg: linear-gradient(135deg, #06281d 0%, #0a4030 60%, #052018 100%);
  --hero-glow: rgba(74, 222, 128, 0.22);
  --panel-bg: linear-gradient(180deg, rgba(10, 35, 27, 0.92), rgba(5, 22, 17, 0.92));
  --field-bg: #051a13;
  --table-head-bg: #082018;
  --row-line: rgba(28, 64, 51, 0.75);
  --soft-cell: rgba(255, 255, 255, 0.04);
  --on-accent: #04120d;
  --prose-text: #c3e2d3;
}

body[data-theme="violet"] {
  --hero-image-tint: 9, 6, 22;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #ded7f0;
  --bg: #0a0716;
  --bg-soft: #110c22;
  --panel: #161029;
  --panel-2: #1c1434;
  --line: #332659;
  --text: #ece9f8;
  --muted: #a99fc4;
  --cyan: #c4b5fd;
  --cyan-soft: rgba(196, 181, 253, 0.16);
  --red: #fb7185;
  --gold: #fcd34d;
  --green: #4ade80;
  --body-bg: radial-gradient(1200px 600px at 15% -10%, #2a1b52 0%, var(--bg) 60%);
  --topbar-bg: rgba(10, 7, 22, 0.85);
  --hero-bg: linear-gradient(135deg, #1b1138 0%, #2c1b5c 60%, #150e2e 100%);
  --hero-glow: rgba(196, 181, 253, 0.2);
  --panel-bg: linear-gradient(180deg, rgba(22, 16, 41, 0.92), rgba(13, 9, 26, 0.92));
  --field-bg: #0f0a1e;
  --table-head-bg: #130e26;
  --row-line: rgba(51, 38, 89, 0.75);
  --soft-cell: rgba(255, 255, 255, 0.04);
  --on-accent: #100a22;
  --prose-text: #d8d2ec;
}

body[data-theme="daylight"] {
  --hero-image-tint: 255, 255, 255;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #2c3e55;
  --hero-image-text-shadow: 0 1px 14px rgba(255, 255, 255, 0.7);
  --bg: #f1f5f9;
  --bg-soft: #e8eef6;
  --panel: #ffffff;
  --panel-2: #f5f8fc;
  --line: #d5dfeb;
  --text: #0f1b2d;
  --muted: #5b6b80;
  --cyan: #0e7490;
  --cyan-soft: rgba(14, 116, 144, 0.12);
  --red: #dc2626;
  --gold: #b45309;
  --green: #047857;
  --body-bg: radial-gradient(1200px 600px at 15% -10%, #e0f2fe 0%, #f8fafc 55%, var(--bg) 100%);
  --topbar-bg: rgba(255, 255, 255, 0.9);
  --hero-bg: linear-gradient(135deg, #e6f2fb 0%, #d7e9f7 60%, #eaf4fb 100%);
  --hero-glow: rgba(14, 116, 144, 0.14);
  --panel-bg: linear-gradient(180deg, #ffffff, #f8fbfe);
  --field-bg: #ffffff;
  --table-head-bg: #eef4fa;
  --row-line: #e2eaf4;
  --soft-cell: rgba(15, 27, 45, 0.03);
  --on-accent: #ffffff;
  --prose-text: #33465c;
  --hero-scrim-a: rgba(255, 255, 255, 0.8);
  --hero-scrim-b: rgba(255, 255, 255, 0.95);
}

body[data-theme="sand"] {
  --hero-image-tint: 255, 250, 242;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #4a3a26;
  --hero-image-text-shadow: 0 1px 14px rgba(255, 252, 245, 0.72);
  --bg: #f7f3ea;
  --bg-soft: #f1ebdf;
  --panel: #fffdf8;
  --panel-2: #f8f3e8;
  --line: #e2d7c3;
  --text: #2b2418;
  --muted: #7a6a52;
  --cyan: #b45309;
  --cyan-soft: rgba(180, 83, 9, 0.12);
  --red: #b91c1c;
  --gold: #a16207;
  --green: #15803d;
  --body-bg: radial-gradient(1200px 600px at 15% -10%, #fbf1dd 0%, var(--bg) 60%);
  --topbar-bg: rgba(255, 253, 248, 0.9);
  --hero-bg: linear-gradient(135deg, #fdf3e0 0%, #f3e6cd 60%, #fbf7ee 100%);
  --hero-glow: rgba(180, 83, 9, 0.15);
  --panel-bg: linear-gradient(180deg, #fffdf8, #faf5ea);
  --field-bg: #fffdf8;
  --table-head-bg: #f5eddf;
  --row-line: #ece1ce;
  --soft-cell: rgba(43, 36, 24, 0.03);
  --on-accent: #ffffff;
  --prose-text: #4a3f2e;
  --hero-scrim-a: rgba(255, 252, 245, 0.8);
  --hero-scrim-b: rgba(255, 252, 245, 0.95);
}

/* ==========================================================================
   Glassbox themes — panel kaca transparan dengan blur, elegan & profesional.
   Ketiganya hanya menimpa variabel + efek kaca pada .topbar/.panel/.stat.
   ========================================================================== */

/* ---------- Glass — kaca gelap bernuansa biru malam ---------- */
body[data-theme="glass"] {
  --hero-image-tint: 4, 9, 18;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #ccdaee;
  --bg: #070c16;
  --bg-soft: #0d1524;
  --panel: #0f1a2b;
  --panel-2: #122033;
  --line: rgba(148, 197, 255, 0.16);
  --text: #e6eefb;
  --muted: #93a6c2;
  --cyan: #6ee7f9;
  --cyan-soft: rgba(110, 231, 249, 0.14);
  --red: #fb7185;
  --gold: #fcd34d;
  --green: #34d399;
  --body-bg:
    radial-gradient(900px 520px at 12% -8%, rgba(56, 189, 248, 0.16), transparent 62%),
    radial-gradient(760px 480px at 88% 4%, rgba(167, 139, 250, 0.14), transparent 60%),
    linear-gradient(160deg, #050a13 0%, #08111f 55%, #050a13 100%);
  --topbar-bg: rgba(9, 17, 30, 0.55);
  --hero-bg: linear-gradient(150deg, rgba(18, 38, 64, 0.55), rgba(9, 20, 36, 0.4) 55%, rgba(14, 30, 52, 0.55));
  --hero-glow: rgba(110, 231, 249, 0.22);
  --panel-bg: linear-gradient(165deg, rgba(24, 44, 72, 0.55), rgba(11, 22, 38, 0.48));
  --field-bg: rgba(6, 14, 26, 0.6);
  --table-head-bg: rgba(18, 34, 55, 0.6);
  --row-line: rgba(148, 197, 255, 0.12);
  --soft-cell: rgba(255, 255, 255, 0.045);
  --on-accent: #04121e;
  --prose-text: #c3d4ea;
  --hero-scrim-a: rgba(5, 11, 21, 0.55);
  --hero-scrim-b: rgba(5, 11, 21, 0.88);
}

/* ---------- Frost — kaca terang sejuk, bersih dan elegan ---------- */
body[data-theme="frost"] {
  --hero-image-tint: 244, 250, 255;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #2c3e55;
  --hero-image-text-shadow: 0 1px 14px rgba(255, 255, 255, 0.72);
  --bg: #eef4fb;
  --bg-soft: #e4edf8;
  --panel: rgba(255, 255, 255, 0.66);
  --panel-2: rgba(255, 255, 255, 0.6);
  --line: rgba(96, 130, 178, 0.22);
  --text: #10203a;
  --muted: #536a8a;
  --cyan: #0e7490;
  --cyan-soft: rgba(14, 116, 144, 0.12);
  --red: #dc2626;
  --gold: #b45309;
  --green: #047857;
  --body-bg:
    radial-gradient(900px 520px at 8% -10%, rgba(125, 211, 252, 0.45), transparent 60%),
    radial-gradient(780px 480px at 92% 0%, rgba(196, 181, 253, 0.4), transparent 62%),
    linear-gradient(165deg, #f4f9ff 0%, #e8f1fb 55%, #f7fbff 100%);
  --topbar-bg: rgba(255, 255, 255, 0.6);
  --hero-bg: linear-gradient(150deg, rgba(255, 255, 255, 0.7), rgba(226, 240, 253, 0.55) 55%, rgba(244, 250, 255, 0.7));
  --hero-glow: rgba(14, 116, 144, 0.14);
  --panel-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.78), rgba(240, 247, 255, 0.66));
  --field-bg: rgba(255, 255, 255, 0.8);
  --table-head-bg: rgba(232, 242, 253, 0.85);
  --row-line: rgba(96, 130, 178, 0.18);
  --soft-cell: rgba(16, 32, 58, 0.035);
  --on-accent: #ffffff;
  --prose-text: #33465c;
  --hero-scrim-a: rgba(255, 255, 255, 0.82);
  --hero-scrim-b: rgba(255, 255, 255, 0.95);
}

/* ---------- Obsidian — kaca hitam hangat dengan aksen amber ---------- */
body[data-theme="obsidian"] {
  --hero-image-tint: 12, 10, 8;
  --hero-image-position: center;
  --hero-image-brightness: 100;
  --hero-image-muted: #e1d6c6;
  --bg: #0b0a0d;
  --bg-soft: #121016;
  --panel: #16141c;
  --panel-2: #1b181f;
  --line: rgba(255, 220, 170, 0.14);
  --text: #f1ece3;
  --muted: #a99e8e;
  --cyan: #f5c66b;
  --cyan-soft: rgba(245, 198, 107, 0.14);
  --red: #fb7185;
  --gold: #fbbf24;
  --green: #6ee7b7;
  --body-bg:
    radial-gradient(900px 520px at 10% -8%, rgba(245, 198, 107, 0.14), transparent 62%),
    radial-gradient(720px 460px at 90% 6%, rgba(129, 140, 248, 0.12), transparent 60%),
    linear-gradient(160deg, #0a090c 0%, #121016 55%, #0a090c 100%);
  --topbar-bg: rgba(14, 12, 17, 0.6);
  --hero-bg: linear-gradient(150deg, rgba(44, 36, 26, 0.6), rgba(20, 17, 22, 0.45) 55%, rgba(38, 31, 23, 0.6));
  --hero-glow: rgba(245, 198, 107, 0.2);
  --panel-bg: linear-gradient(165deg, rgba(38, 33, 28, 0.6), rgba(18, 15, 20, 0.5));
  --field-bg: rgba(9, 8, 11, 0.65);
  --table-head-bg: rgba(32, 27, 23, 0.65);
  --row-line: rgba(255, 220, 170, 0.1);
  --soft-cell: rgba(255, 255, 255, 0.04);
  --on-accent: #16110a;
  --prose-text: #ded4c4;
  --hero-scrim-a: rgba(9, 8, 11, 0.6);
  --hero-scrim-b: rgba(9, 8, 11, 0.9);
}

.backup-item { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.backup-item span { flex: 1; }

.hero-settings .hero-preview img { width: 100%; max-height: 220px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.hero-controls { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel-2); }
.hero-controls-head { display: flex; flex-direction: column; gap: 4px; }
.hero-controls-head h3 { margin: 0; font-size: 15px; letter-spacing: 0.01em; }
.hero-controls .fields { margin: 0; }
.hero-controls .field { display: flex; flex-direction: column; gap: 8px; }
.hero-controls input[type="range"] { accent-color: var(--cyan); }
.hero-controls input[type="range"]:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.hero-preview-inline { margin-top: 2px; }
.hero-preview-inline img { width: 100%; max-height: 180px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); transition: filter 0.15s ease; }

/* ---------- Efek kaca (glassbox) untuk ketiga tema di atas ---------- */
body[data-theme="glass"] .topbar,
body[data-theme="frost"] .topbar,
body[data-theme="obsidian"] .topbar {
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  border-bottom-color: var(--line);
  box-shadow: 0 8px 32px rgba(2, 6, 16, 0.16);
}

body[data-theme="glass"] .panel,
body[data-theme="frost"] .panel,
body[data-theme="obsidian"] .panel {
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 18px 44px rgba(2, 6, 16, 0.28);
}

body[data-theme="frost"] .panel {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 18px 44px rgba(58, 96, 148, 0.14);
}

body[data-theme="glass"] .stat,
body[data-theme="frost"] .stat,
body[data-theme="obsidian"] .stat {
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

body[data-theme="glass"] .hero,
body[data-theme="frost"] .hero,
body[data-theme="obsidian"] .hero {
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 24px 60px rgba(2, 6, 16, 0.32);
}

body[data-theme="frost"] .hero {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 24px 60px rgba(58, 96, 148, 0.16);
}

/* Penyesuaian kontras teks pada tema kaca */
body[data-theme="glass"] .hero .tag,
body[data-theme="obsidian"] .hero .tag { color: var(--on-accent); }
body[data-theme="frost"] .hero .tag { color: #ffffff; }
body[data-theme="glass"] .hero-event,
body[data-theme="obsidian"] .hero-event,
body[data-theme="frost"] .hero-event {
  background: var(--cyan-soft);
  border-color: var(--line);
}
body[data-theme="glass"] .hero-event b,
body[data-theme="obsidian"] .hero-event b,
body[data-theme="frost"] .hero-event b { color: var(--cyan); }

/* Tema terang: perbaiki warna teks status yang terlalu pucat. */
body[data-theme="daylight"] .pill-bad,
body[data-theme="daylight"] .pill-off,
body[data-theme="sand"] .pill-bad,
body[data-theme="sand"] .pill-off { color: #b91c1c; border-color: rgba(185, 28, 28, 0.3); }
body[data-theme="daylight"] .hero-event,
body[data-theme="sand"] .hero-event { color: #92400e; border-color: rgba(180, 83, 9, 0.35); background: rgba(180, 83, 9, 0.1); }
body[data-theme="daylight"] .hero-event b,
body[data-theme="sand"] .hero-event b { color: #78350f; }
body[data-theme="daylight"] .hero .tag,
body[data-theme="sand"] .hero .tag { color: #ffffff; }

/* Legenda simbol APRS di bawah peta dashboard. */
.map-legend {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  margin-top: 10px; font-size: 13px; color: var(--muted);
}
.map-legend[hidden] { display: none; }
.map-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.map-legend-item b { font-size: 15px; line-height: 1; }