/* Cabinet — minimal light theme, Inter font, #2563EB accent */

/* ══════════════════════════════════════════════════════════════════
   SOLID/CSS THEMES — no photo
   ══════════════════════════════════════════════════════════════════ */

/* ── None — default app background (no class needed) ── */
/* body with no bg-theme-* class uses var(--bg) = #f8fafc */

/* ── Light — clean white ── */
body.bg-theme-light {
  background: #ffffff;
}

/* ── Blue — soft sky blue ── */
body.bg-theme-blue {
  background: linear-gradient(140deg, #e0f0ff 0%, #c8e4ff 40%, #dbeafe 100%);
}

/* ── Dark — deep slate ── */
body.bg-theme-dark {
  background: #0f172a;
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --border: rgba(255,255,255,.1);
  --card:   #1e293b;
  --bg:     #0f172a;
  --card-bg: var(--card);
  --surface-subtle: #111c2f;
  --control-bg: #172033;
  --control-text: #e2e8f0;
  --row-highlight: rgba(217,119,6,.24);
}

/* ══════════════════════════════════════════════════════════════════
   PHOTO BACKGROUNDS — real JPG + overlay gradient.
   Four themes: neutral · forest · meadow · mountains
   ══════════════════════════════════════════════════════════════════ */

/* ── Neutral — warm parchment photo ── */
body.bg-theme-neutral {
  background:
    linear-gradient(rgba(40,20,0,.05), rgba(30,15,0,.08)),
    url("img/neutral.af5bab3f9774.jpg") center/cover fixed no-repeat;
}

/* ── Forest — pine forest photo ── */
body.bg-theme-forest {
  background:
    linear-gradient(rgba(6,25,19,.22), rgba(6,20,18,.36)),
    url("img/forest.24cccf69a1bd.jpg") center/cover fixed no-repeat;
}

/* ── Mountains — alpine photo ── */
body.bg-theme-mountains {
  background:
    linear-gradient(rgba(10,10,30,.14), rgba(5,5,20,.20)),
    url("img/mountains.df96e0a800ca.jpg") center/cover fixed no-repeat;
}

/* ── Meadow — golden hour photo ── */
body.bg-theme-meadow {
  background:
    linear-gradient(rgba(20,40,5,.08), rgba(10,25,0,.14)),
    url("img/meadow.62bed7db9ced.jpg") center/cover fixed no-repeat;
}

/* ── Sea — real ocean photo + world map overlay ── */
body.bg-theme-sea {
  background:
    url("img/world_map.817b9d2c224a.png") center/cover fixed no-repeat,
    linear-gradient(rgba(0,15,40,.35), rgba(0,10,30,.45)),
    url("img/sea.dc03a3a299ab.jpg") center/cover fixed no-repeat;
  background-blend-mode: soft-light, normal, normal;
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --border: rgba(255,255,255,.15);
  --card:   rgba(3,20,55,.80);
  --card-bg: var(--card);
  --surface-subtle: rgba(8,27,62,.92);
  --control-bg: #10284a;
  --control-text: #e2e8f0;
  --row-highlight: rgba(217,119,6,.24);
}

/* ── Lighthouse — coastal night with beacon glow ── */
body.bg-theme-lighthouse {
  background:
    radial-gradient(ellipse at 68% 18%, rgba(251,211,40,.28) 0%, rgba(245,158,11,.12) 20%, transparent 42%),
    linear-gradient(155deg, #0d2436 0%, #1a3a55 38%, #0f2232 68%, #080f18 100%);
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --border: rgba(255,255,255,.13);
  --card:   rgba(5,18,38,.82);
  --card-bg: var(--card);
  --surface-subtle: rgba(12,31,50,.94);
  --control-bg: #142b40;
  --control-text: #e2e8f0;
  --row-highlight: rgba(217,119,6,.24);
}

/* ── Sky — atmospheric photo ── */
body.bg-theme-sky {
  background:
    linear-gradient(rgba(5,10,30,.30), rgba(5,10,25,.45)),
    url("img/login_1.a90a87b32363.png") center/cover fixed no-repeat;
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --border: rgba(255,255,255,.14);
  --card:   rgba(5,12,38,.82);
  --card-bg: var(--card);
  --surface-subtle: rgba(12,21,52,.94);
  --control-bg: #16213f;
  --control-text: #e2e8f0;
  --row-highlight: rgba(217,119,6,.24);
}

/* ══════════════════════════════════════════════════════════════════
   DESIGN TOGGLE — body.design-glass → glassmorphism cards
   Default (no class / design-solid) → solid opaque cards
   ══════════════════════════════════════════════════════════════════ */

body.design-glass .card,
body.design-glass .beacon-card,
body.design-glass .stat-pill,
body.design-glass .beacon-hdr,
body.design-glass .cfg-pill,
body.design-glass .cfg-bitmask-block {
  background: rgba(255,255,255,.77) !important;
  backdrop-filter: blur(12px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(130%) !important;
  border: 1px solid rgba(255,255,255,.67) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.55) !important;
}
body.bg-theme-forest.design-glass .card,
body.bg-theme-forest.design-glass .beacon-card,
body.bg-theme-forest.design-glass .stat-pill,
body.bg-theme-forest.design-glass .beacon-hdr,
body.bg-theme-forest.design-glass .cfg-pill,
body.bg-theme-forest.design-glass .cfg-bitmask-block,
body.bg-theme-mountains.design-glass .card,
body.bg-theme-mountains.design-glass .beacon-card,
body.bg-theme-mountains.design-glass .stat-pill,
body.bg-theme-mountains.design-glass .beacon-hdr,
body.bg-theme-mountains.design-glass .cfg-pill,
body.bg-theme-mountains.design-glass .cfg-bitmask-block {
  background: rgba(8,18,12,.52) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.12) !important;
}
body.bg-theme-sea.design-glass .card,
body.bg-theme-sea.design-glass .beacon-card,
body.bg-theme-sea.design-glass .stat-pill,
body.bg-theme-sea.design-glass .beacon-hdr,
body.bg-theme-sea.design-glass .cfg-pill,
body.bg-theme-sea.design-glass .cfg-bitmask-block,
body.bg-theme-lighthouse.design-glass .card,
body.bg-theme-lighthouse.design-glass .beacon-card,
body.bg-theme-lighthouse.design-glass .stat-pill,
body.bg-theme-lighthouse.design-glass .beacon-hdr,
body.bg-theme-lighthouse.design-glass .cfg-pill,
body.bg-theme-lighthouse.design-glass .cfg-bitmask-block,
body.bg-theme-sky.design-glass .card,
body.bg-theme-sky.design-glass .beacon-card,
body.bg-theme-sky.design-glass .stat-pill,
body.bg-theme-sky.design-glass .beacon-hdr,
body.bg-theme-sky.design-glass .cfg-pill,
body.bg-theme-sky.design-glass .cfg-bitmask-block {
  background: rgba(3,18,48,.55) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body.bg-theme-dark.design-glass .card,
body.bg-theme-dark.design-glass .beacon-card,
body.bg-theme-dark.design-glass .stat-pill,
body.bg-theme-dark.design-glass .beacon-hdr,
body.bg-theme-dark.design-glass .cfg-pill,
body.bg-theme-dark.design-glass .cfg-bitmask-block {
  background: rgba(15,23,42,.55) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
body.bg-custom.design-glass .card,
body.bg-custom.design-glass .beacon-card,
body.bg-custom.design-glass .stat-pill,
body.bg-custom.design-glass .beacon-hdr,
body.bg-custom.design-glass .cfg-pill,
body.bg-custom.design-glass .cfg-bitmask-block {
  background: rgba(10,15,30,.52) !important;
  border: 1px solid rgba(255,255,255,.13) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.10) !important;
}
body.design-glass .nav {
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,.48);
}
body.bg-theme-forest.design-glass .nav,
body.bg-theme-mountains.design-glass .nav {
  background: rgba(5,12,8,.72);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
body.bg-theme-sea.design-glass .nav,
body.bg-theme-lighthouse.design-glass .nav {
  background: rgba(5,15,40,.75);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

/* ══ Swatch mini-previews ══════════════════════════════════════════ */
.theme-picker { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.theme-swatch {
  width:72px; height:48px; border-radius:8px; border:2px solid transparent;
  cursor:pointer; font-size:10px; font-weight:600; color:rgba(0,0,0,.5);
  display:flex; align-items:flex-end; justify-content:center;
  padding-bottom:4px; transition:border-color .15s, transform .1s;
  text-transform:uppercase; letter-spacing:.04em; line-height:1;
  position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.theme-swatch:hover { transform:translateY(-2px); border-color:rgba(0,0,0,.25); }
.theme-swatch[data-active] { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue); }

/* Solid swatches */
.theme-swatch.bg-theme-none     { background: #f8fafc; border-color: #e2e8f0; }
.theme-swatch.bg-theme-light    { background: #ffffff; border-color: #e2e8f0; }
.theme-swatch.bg-theme-blue     { background: linear-gradient(140deg, #e0f0ff 0%, #c8e4ff 60%, #dbeafe 100%); }
.theme-swatch.bg-theme-dark     { background: #0f172a; color: rgba(255,255,255,.7); }
/* Photo swatches */
.theme-swatch.bg-theme-neutral   { background-image: url("img/neutral.af5bab3f9774.jpg"); background-size:cover; }
.theme-swatch.bg-theme-forest    { background-image: url("img/forest.24cccf69a1bd.jpg");    background-size:cover; color:rgba(255,255,255,.85); }
.theme-swatch.bg-theme-mountains { background-image: url("img/mountains.df96e0a800ca.jpg"); background-size:cover; color:rgba(255,255,255,.85); }
.theme-swatch.bg-theme-meadow    { background-image: url("img/meadow.62bed7db9ced.jpg");    background-size:cover; }
.theme-swatch.bg-theme-sea        { background-image: url("img/sea.dc03a3a299ab.jpg"); background-size:cover; color:rgba(255,255,255,.9); }
.theme-swatch.bg-theme-lighthouse { background: linear-gradient(155deg, #0d2436 0%, #1a3a55 45%, #f59e0b 100%); color:rgba(255,255,255,.85); }
.theme-swatch.bg-theme-sky        { background-image: url("img/login_1.a90a87b32363.png"); background-size:cover; color:rgba(255,255,255,.9); }
.theme-swatch.bg-theme-dark[data-active],
.theme-swatch.bg-theme-forest[data-active],
.theme-swatch.bg-theme-mountains[data-active],
.theme-swatch.bg-theme-sea[data-active],
.theme-swatch.bg-theme-lighthouse[data-active],
.theme-swatch.bg-theme-sky[data-active] {
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 0 0 1px rgba(255,255,255,.85);
}

:root {
  --blue:    #2563EB;
  --blue-dk: #1d4ed8;
  --blue-lt: rgba(37,99,235,.08);
  --green:   #22c55e;
  --slate:   #94a3b8;
  --red:     #ef4444;
  --bg:      #f8fafc;
  --card:    #ffffff;
  --border:  #e2e8f0;
  --text:    #0f172a;
  --muted:   #64748b;
  --card-bg: var(--card);
  --surface-subtle: #f8fafc;
  --control-bg: #ffffff;
  --control-text: var(--text);
  --row-highlight: #fef3c7;
  --radius:  10px;
}

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

body {
  font-family: "Inter", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
}

/* Dark themes → light text */
body.bg-theme-forest,
body.bg-theme-mountains,
body.bg-theme-dark {
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --border: rgba(255,255,255,.12);
  --card:   rgba(15,23,35,.82);
  --card-bg: var(--card);
  --surface-subtle: rgba(18,30,42,.94);
  --control-bg: #172334;
  --control-text: #e2e8f0;
  --row-highlight: rgba(217,119,6,.24);
}
/* sea/lighthouse already set --text/--muted/--border/--card in their own rules above */

/* ── Nav — always frosted/opaque so it reads on any background ── */
.nav {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 56px;
  position: sticky;
  top: 0;
  z-index: 10;
}
/* Dark photo/solid themes — invert nav to dark */
body.bg-theme-forest .nav,
body.bg-theme-mountains .nav,
body.bg-theme-dark .nav {
  background: rgba(6,14,10,.90);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
body.bg-theme-sea .nav,
body.bg-theme-lighthouse .nav,
body.bg-theme-sky .nav,
body.bg-custom .nav {
  background: rgba(5,18,42,.92);
  border-bottom: 1px solid rgba(255,255,255,.09);
}
body.bg-theme-forest .nav-logo,
body.bg-theme-mountains .nav-logo,
body.bg-theme-dark .nav-logo,
body.bg-theme-sea .nav-logo,
body.bg-theme-lighthouse .nav-logo,
body.bg-theme-sky .nav-logo,
body.bg-custom .nav-logo { color: #93c5fd; }
body.bg-theme-forest .nav-link,
body.bg-theme-mountains .nav-link,
body.bg-theme-dark .nav-link,
body.bg-theme-sea .nav-link,
body.bg-theme-lighthouse .nav-link,
body.bg-theme-sky .nav-link,
body.bg-custom .nav-link { color: #94a3b8; }
body.bg-theme-forest .nav-link:hover,
body.bg-theme-mountains .nav-link:hover,
body.bg-theme-dark .nav-link:hover,
body.bg-theme-sea .nav-link:hover,
body.bg-theme-lighthouse .nav-link:hover,
body.bg-theme-sky .nav-link:hover,
body.bg-custom .nav-link:hover { color: #e2e8f0; background: rgba(255,255,255,.08); }
body.bg-theme-forest .nav-user,
body.bg-theme-mountains .nav-user,
body.bg-theme-dark .nav-user,
body.bg-theme-sea .nav-user,
body.bg-theme-lighthouse .nav-user,
body.bg-theme-sky .nav-user,
body.bg-custom .nav-user { color: #94a3b8; }
body.bg-theme-forest .nav-logout-btn,
body.bg-theme-mountains .nav-logout-btn,
body.bg-theme-dark .nav-logout-btn,
body.bg-theme-sea .nav-logout-btn,
body.bg-theme-lighthouse .nav-logout-btn,
body.bg-theme-sky .nav-logout-btn,
body.bg-custom .nav-logout-btn { color: #94a3b8; }
.nav-logo {
  font-weight: 700;
  font-size: 16px;
  color: var(--blue);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-link {
  padding: 6px 12px;
  border-radius: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.nav-link:hover { background: var(--blue-lt); color: var(--blue); }
.nav-user { font-size: 13px; color: var(--muted); margin-left: auto; }
.nav-logout-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  font-size: 13px; color: var(--muted); font-family: inherit;
  text-decoration: underline;
}
.nav-logout-btn:hover { color: var(--red); }

/* ── Layout ──────────────────────────────────────────────────── */
.container { max-width: 960px; margin: 0 auto; padding: 32px 20px; }
.page-title   { font-size: 22px; font-weight: 700; margin-bottom: 24px; }
.page-subtitle{ font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.page-desc    { color: var(--muted); margin-bottom: 24px; font-size: 14px; }

/* Page headings & loose text over photo backgrounds — add a frosted chip so
   they're always readable regardless of photo/dark/light theme. */
body[class*='bg-theme-'] .page-title,
body[class*='bg-theme-'] .page-subtitle,
body.bg-custom .page-title,
body.bg-custom .page-subtitle {
  display: inline-block;
  background: var(--card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 4px 14px;
  border-radius: 10px;
  margin-left: -14px;     /* compensate padding so text stays left-aligned */
}
body[class*='bg-theme-'] .page-desc,
body.bg-custom .page-desc {
  background: var(--card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-block;
  padding: 2px 14px;
  border-radius: 8px;
  margin-left: -14px;
}

/* ── Cards ───────────────────────────────────────────────────── */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 20px;
}
.card-title { font-weight: 600; font-size: 15px; margin-bottom: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }

/* ── Beacon grid ─────────────────────────────────────────────── */
.beacon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.beacon-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: box-shadow .15s, border-color .15s;
}
.beacon-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); border-color: var(--blue); }
.beacon-card-name { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.beacon-card-serial { font-size: 12px; color: var(--muted); margin-bottom: 12px; font-family: monospace; }
.beacon-card-stats { display: flex; gap: 16px; flex-wrap: wrap; }
.beacon-card-stat { font-size: 13px; color: var(--muted); }
.beacon-card-stat strong { color: var(--text); font-weight: 600; }

/* ── Status dot ──────────────────────────────────────────────── */
.status-dot {
  display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 5px; vertical-align: middle;
}
.status-dot.online  { background: var(--green); }
.status-dot.offline { background: var(--slate); }

/* ── Connection status pills ─────────────────────────────────── */
.conn-pills { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; }
.conn-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; padding: 2px 10px;
  border-radius: 12px; border: 1px solid;
}
.conn-pill::before { content: '●'; font-size: 8px; }
.conn-pill.pill-green { color: var(--green,#16a34a); border-color: rgba(22,163,74,.25); background: rgba(22,163,74,.08); }
.conn-pill.pill-grey  { color: var(--muted,#888);    border-color: var(--border);          background: var(--blue-lt,#f5f7fa); }
.conn-pill.pill-green::before { color: var(--green,#16a34a); }
.conn-pill.pill-grey::before  { color: var(--muted,#888); }

/* ── Live stats row ──────────────────────────────────────────── */
.stats-row { display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px; }
.stat-pill {
  background: var(--card,#fff);
  border: 1px solid var(--border,#e2e8f0);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 13px;
  flex: 1 1 140px;
  min-width: 0;
  overflow: hidden;
  transition: box-shadow .15s;
}
.stat-pill:hover { box-shadow: 0 2px 12px rgba(0,0,0,.07); }
.stat-pill-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.stat-pill-icon .material-symbols-rounded { font-size: 22px; }
.stat-pill-body { flex:1; min-width:0; display:flex; flex-direction:column; }
.stat-pill-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing:.06em; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-pill-value { font-size: 17px; font-weight: 700; color: var(--text); margin-top: 3px; line-height:1.1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.stat-pill-unit { font-size: 12px; color: var(--muted); font-weight:400; }

/* ── Tables ──────────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; padding: 8px 12px; background: var(--surface-subtle); border-bottom: 2px solid var(--border); font-weight: 600; color: var(--muted); white-space: nowrap; }
td { padding: 8px 12px; border-bottom: 1px solid var(--border); }
tbody tr { color: var(--text); }
tr:last-child td { border-bottom: none; }
td.mono { font-family: monospace; font-size: 12px; }

/* ── Forms ───────────────────────────────────────────────────── */
.form-card { max-width: 440px; margin: 60px auto 0; }
.form-group { margin-bottom: 16px; }
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=password] {
  width: 100%; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 7px; font-size: 14px; font-family: inherit;
  background: var(--control-bg); color: var(--control-text); transition: border-color .15s;
}
input[type=date], input[type=search], select, textarea {
  background: var(--control-bg) !important;
  color: var(--control-text) !important;
  border-color: var(--border) !important;
  color-scheme: light;
}
body.bg-theme-dark input, body.bg-theme-dark select, body.bg-theme-dark textarea,
body.bg-theme-forest input, body.bg-theme-forest select, body.bg-theme-forest textarea,
body.bg-theme-mountains input, body.bg-theme-mountains select, body.bg-theme-mountains textarea,
body.bg-theme-sea input, body.bg-theme-sea select, body.bg-theme-sea textarea,
body.bg-theme-lighthouse input, body.bg-theme-lighthouse select, body.bg-theme-lighthouse textarea,
body.bg-theme-sky input, body.bg-theme-sky select, body.bg-theme-sky textarea,
body.bg-custom input, body.bg-custom select, body.bg-custom textarea { color-scheme: dark; }
input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-lt); }

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 9px 20px; border-radius: 7px;
  font-size: 14px; font-weight: 500; font-family: inherit;
  cursor: pointer; text-decoration: none; border: none;
  transition: background .15s, box-shadow .15s;
}
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-dk); }
.btn-outline { background: var(--control-bg); color: var(--blue); border: 1px solid var(--blue); }
.btn-outline:hover { background: var(--blue-lt); }
.btn-danger { background: #fff; color: var(--red); border: 1px solid var(--red); }
.btn-danger:hover { background: #fef2f2; }
.btn-sm { padding: 5px 12px; font-size: 13px; }

/* ── Alerts / messages ───────────────────────────────────────── */
.alert { padding: 11px 16px; border-radius: 7px; margin-bottom: 16px; font-size: 14px; }
.alert-success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.alert-error   { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.alert-info    { background: var(--blue-lt); border: 1px solid #bfdbfe; color: #1e40af; }
.alert-warning { background: #fef9c3; border: 1px solid #d97706; color: #78350f; }
.errorlist { list-style: none; color: var(--red); font-size: 13px; margin-top: 4px; }

/* ── Misc ────────────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state h2 { margin-bottom: 8px; color: var(--text); }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title { font-weight: 600; font-size: 16px; }
.note { font-size: 12px; color: var(--muted); font-style: italic; }
a { color: var(--blue); }
a:hover { color: var(--blue-dk); }
canvas { max-width: 100%; }

/* ── Beacon detail: header — frosted glass card on any photo/dark theme ── */
body[class*='bg-theme-'] .beacon-hdr,
body.bg-custom .beacon-hdr {
  background: var(--card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius);
  padding: 16px 20px;
  border: 1px solid var(--border);
}
/* page-title inside the header already gets its own chip — cancel it so we
   don't get a chip-inside-card double treatment */
body[class*='bg-theme-'] .beacon-hdr .page-title,
body.bg-custom .beacon-hdr .page-title {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 0;
  border-radius: 0;
  margin-left: 0;
  display: block;
}

/* ── Beacon detail: stat category label — frosted pill on photo themes ── */
body[class*='bg-theme-'] .stat-cat-label,
body.bg-custom .stat-cat-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 2px 10px;
  border-radius: 8px;
}

/* ── Login / signup page — photo slideshow (JS manages actual images) ── */
body.page-login {
  background: #080d1a;
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --border: rgba(255,255,255,.12);
  --card:   rgba(10,15,40,.88);
}
body.page-login .nav { display: none; }

/* Slideshow background layers */
.login-slide-bg {
  position: fixed; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
  background-repeat: no-repeat;
  transition: opacity 1.4s ease;
  will-change: opacity;
}
.login-slide-overlay {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(150deg, rgba(5,10,40,.55) 0%, rgba(8,12,30,.65) 100%);
  pointer-events: none;
}

/* ── Custom user background ── */
body.bg-custom {
  background-size: cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  --text:   #e2e8f0;
  --muted:  #94a3b8;
  --border: rgba(255,255,255,.13);
  --card:   rgba(10,15,30,.82);
  --card-bg: var(--card);
  --surface-subtle: rgba(16,24,43,.94);
  --control-bg: #172033;
  --control-text: #e2e8f0;
  --row-highlight: rgba(217,119,6,.24);
}

/* Components that previously carried light-only inline colors. */
body.bg-theme-dark .cbadge-muted,
body.bg-theme-forest .cbadge-muted,
body.bg-theme-mountains .cbadge-muted,
body.bg-theme-sea .cbadge-muted,
body.bg-theme-lighthouse .cbadge-muted,
body.bg-theme-sky .cbadge-muted,
body.bg-custom .cbadge-muted { background: rgba(148,163,184,.16); color: #cbd5e1; }

.chart-empty, .note, .section-title, .cfg-pill-val { color: inherit; }