:root {
  /* ===== LIGHT THEME (default) ===== */
  --bg:#f1f5f9;          /* app background (light slate) */
  --panel:#ffffff;        /* cards / panels */
  --panel-2:#f8fafc;      /* subtle alt panel */
  --border:rgba(15,23,42,.10);
  --text:#0f172a;         /* primary text */
  --text-muted:#64748b;   /* secondary text */
  --accent:#f97316;
  /* surfaces that were hardcoded for light */
  --chip-bg:rgba(255,255,255,.9);
  --panel-glass:rgba(255,255,255,.95);
  --panel-glass-strong:rgba(255,255,255,.98);
  --nav-bg:rgba(255,255,255,.97);
  --round-bg:rgba(255,255,255,.95);
  --tab-bg:#e2e8f0;
  --chat-bubble:#e2e8f0;
  --chat-mine:#ffedd5;
  --input-bg:#f1f5f9;
  --map-bg:#e5e7eb;
  --shadow-color:rgba(15,23,42,.08);
}
[data-theme="dark"] {
  /* ===== DARK THEME ===== */
  --bg:#0a0e1a;
  --panel:#0f172a;
  --panel-2:#111c33;
  --border:rgba(255,255,255,.10);
  --text:#f1f5f9;
  --text-muted:#94a3b8;
  --accent:#f97316;
  --chip-bg:rgba(15,23,42,.85);
  --panel-glass:rgba(15,23,42,.9);
  --panel-glass-strong:rgba(15,23,42,.96);
  --nav-bg:rgba(15,23,42,.97);
  --round-bg:rgba(15,23,42,.9);
  --tab-bg:#1e293b;
  --chat-bubble:#1e293b;
  --chat-mine:#7c2d12;
  --input-bg:#111c33;
  --map-bg:#0a0e1a;
  --shadow-color:rgba(0,0,0,.4);
}
* { -webkit-tap-highlight-color: transparent; }
html,body { margin:0; height:100%; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; }

/* ===== Views ===== */
.view { display:none; position:fixed; inset:0 0 0 0; padding-bottom:64px; background:var(--bg); color:var(--text); overflow-y:auto; }
.view.active { display:block; }
#view-map { padding-bottom:0; }
#map { position:absolute; inset:0; z-index:0; background:var(--map-bg); }

/* ===== HUD ===== */
.hud-top { position:absolute; top:0; left:0; right:0; z-index:500; display:flex; justify-content:space-between;
  padding:calc(env(safe-area-inset-top) + 10px) 12px 10px; pointer-events:none; }
.chip { background:var(--chip-bg); backdrop-filter:blur(8px); border:1px solid var(--border); color:var(--text);
  box-shadow:0 2px 8px var(--shadow-color);
  padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:6px; pointer-events:auto; }

.live-stats { position:absolute; top:calc(env(safe-area-inset-top) + 60px); left:12px; right:12px; z-index:500;
  background:var(--panel-glass); backdrop-filter:blur(10px); border:1px solid var(--border); color:var(--text);
  box-shadow:0 4px 16px var(--shadow-color);
  border-radius:20px; padding:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.live-stats .stat { text-align:center; }
.stat-val { font-size:22px; font-weight:800; line-height:1; }
.stat-lbl { font-size:11px; color:var(--text-muted); margin-top:4px; text-transform:uppercase; letter-spacing:.05em; }

.hex-info { position:absolute; bottom:150px; left:12px; right:12px; z-index:500; background:var(--panel-glass-strong);
  backdrop-filter:blur(10px); border:1px solid var(--border); color:var(--text); box-shadow:0 6px 20px var(--shadow-color);
  border-radius:18px; padding:14px; font-size:14px; }

/* ===== Run controls ===== */
.run-controls { position:absolute; bottom:calc(64px + 16px); left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:center; gap:16px; padding:0 20px; }
.run-btn { background:linear-gradient(135deg,#f97316,#ec4899); color:#fff; border:none; font-weight:800;
  font-size:16px; padding:16px 32px; border-radius:999px; box-shadow:0 8px 24px rgba(236,72,153,.4); cursor:pointer; }
.run-btn.running { background:linear-gradient(135deg,#ef4444,#b91c1c); }
.round-btn { width:52px; height:52px; border-radius:50%; border:none; font-size:18px; cursor:pointer;
  background:var(--round-bg); color:var(--text); border:1px solid var(--border); backdrop-filter:blur(8px);
  box-shadow:0 4px 12px var(--shadow-color); }

/* ===== Activity category picker ===== */
.cat-picker { position:absolute; bottom:calc(64px + 84px); left:0; right:0; z-index:500;
  display:flex; align-items:center; justify-content:center; gap:8px; padding:0 20px; }
.cat-chip { background:var(--chip-bg); color:var(--text); border:1px solid var(--border); backdrop-filter:blur(8px);
  padding:8px 14px; border-radius:999px; font-weight:700; font-size:13px; cursor:pointer; display:inline-flex;
  align-items:center; gap:6px; box-shadow:0 4px 12px var(--shadow-color); transition:transform .1s, background .15s; }
.cat-chip span { font-size:16px; }
.cat-chip.active { background:var(--accent); color:#fff; border-color:var(--accent); transform:scale(1.05); }
.lb-cat-badge { font-size:14px; font-weight:700; margin-left:auto; opacity:.85; }

/* ===== Bottom nav ===== */
.bottom-nav { position:fixed; bottom:0; left:0; right:0; height:64px; z-index:1000; display:flex;
  background:var(--nav-bg); backdrop-filter:blur(12px); border-top:1px solid var(--border);
  box-shadow:0 -2px 12px var(--shadow-color);
  padding-bottom:env(safe-area-inset-bottom); }
.nav-btn { flex:1; background:none; border:none; color:var(--text-muted); font-size:11px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px; cursor:pointer; }
.nav-btn i { font-size:20px; }
.nav-btn.active { color:var(--accent); }
.nav-btn:active { transform:scale(0.92); }
/* Invite tab: an action, gently accented so it reads as the growth CTA */
.nav-invite { color:var(--accent); }
.nav-invite i {
  background:linear-gradient(90deg,#f97316,#ec4899);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ===== Pages ===== */
.page-head { padding:calc(env(safe-area-inset-top) + 16px) 16px 12px; }
.page-head h2 { font-size:24px; font-weight:800; display:flex; align-items:center; gap:8px; }

/* Username badge acts as the (only) entry to the Me area */
.chip-btn { cursor:pointer; font-family:inherit; }
.chip-btn:active { transform:scale(0.95); }

/* Me/profile header with a Back/close button */
.profile-head { display:flex; align-items:center; gap:10px; }
.profile-close {
  flex:none; width:38px; height:38px; border-radius:12px; border:1px solid var(--border);
  background:var(--chip-bg); color:var(--text); font-size:16px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.profile-close:active { transform:scale(0.92); }

.lb-tab,.ch-tab,.adm-tab,.tk-filter { background:var(--tab-bg); color:var(--text-muted); border:none; padding:8px 16px;
  border-radius:999px; font-weight:600; font-size:13px; cursor:pointer; }
.lb-tab.active,.ch-tab.active,.adm-tab.active,.tk-filter.active { background:var(--accent); color:#fff; }

.lb-row { display:flex; align-items:center; gap:12px; background:var(--panel); border:1px solid var(--border);
  box-shadow:0 1px 4px var(--shadow-color); padding:12px; border-radius:14px; }
.lb-rank { width:28px; font-weight:800; text-align:center; color:var(--text-muted); }

/* ===== Chat ===== */
#view-chat { display:none; flex-direction:column; }
#view-chat.active { display:flex; }
.chat-messages { flex:1; overflow-y:auto; padding:12px 16px 12px; display:flex; flex-direction:column; gap:8px; }
.chat-msg { max-width:80%; padding:8px 12px; border-radius:14px; background:var(--chat-bubble); color:var(--text); font-size:14px; }
.chat-msg.mine { align-self:flex-end; background:var(--chat-mine); }
.chat-msg .who { font-size:11px; font-weight:700; opacity:.85; margin-bottom:2px; }
.chat-input { display:flex; gap:8px; padding:10px 12px calc(env(safe-area-inset-bottom) + 10px); border-top:1px solid var(--border); background:var(--panel); }
.chat-input input { flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:999px; padding:12px 16px; color:var(--text); outline:none; }
.send-btn { width:46px; height:46px; border-radius:50%; border:none; background:var(--accent); color:#fff; cursor:pointer; }

/* ===== Modal ===== */
.modal { position:fixed; inset:0; z-index:2000; background:rgba(15,23,42,.4); display:flex; align-items:center; justify-content:center; padding:20px; }
.modal.hidden { display:none; }
.modal-card { background:var(--panel); border:1px solid var(--border); color:var(--text); box-shadow:0 20px 60px rgba(15,23,42,.25);
  border-radius:24px; padding:24px; width:100%; max-width:420px; max-height:85vh; overflow-y:auto; }

/* ===== Admin ===== */
.adm-panel.hidden { display:none; }
.stat-card { background:var(--panel); border:1px solid var(--border); box-shadow:0 1px 4px var(--shadow-color); border-radius:16px; padding:16px; }
.stat-card .n { font-size:28px; font-weight:800; }
.stat-card .l { font-size:12px; color:var(--text-muted); }
.ticket-item { background:var(--panel); border:1px solid var(--border); box-shadow:0 1px 4px var(--shadow-color); border-radius:12px; padding:12px; cursor:pointer; }
.ticket-item:hover { border-color:var(--accent); }
table { width:100%; border-collapse:collapse; font-size:13px; }
th,td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
th { color:var(--text-muted); font-weight:600; }
.leaflet-container { background:var(--map-bg); }

/* ===== Theme toggle button ===== */
.theme-toggle { display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px;
  border-radius:14px; border:1px solid var(--border); background:var(--panel); color:var(--text);
  font-weight:600; font-size:14px; cursor:pointer; box-shadow:0 1px 4px var(--shadow-color); }
.theme-toggle i { color:var(--accent); }
.theme-toggle-mini { width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--chip-bg); color:var(--text); cursor:pointer; backdrop-filter:blur(8px);
  box-shadow:0 2px 8px var(--shadow-color); pointer-events:auto; }
.theme-toggle-mini i { color:var(--accent); }

/* ===== Landing / Admin dark overrides for hardcoded Tailwind classes ===== */
[data-theme="dark"] .lp-body,
[data-theme="dark"] .adm-body { background:var(--bg) !important; color:var(--text) !important; }
[data-theme="dark"] .lp-body .bg-white,
[data-theme="dark"] .adm-body .bg-white { background:var(--panel) !important; }
[data-theme="dark"] .lp-body .bg-slate-100,
[data-theme="dark"] .lp-body .bg-slate-50,
[data-theme="dark"] .adm-body .bg-slate-100,
[data-theme="dark"] .adm-body .bg-slate-50 { background:var(--panel-2) !important; }
[data-theme="dark"] .lp-body .text-slate-900,
[data-theme="dark"] .adm-body .text-slate-900 { color:var(--text) !important; }
[data-theme="dark"] .lp-body .text-slate-600,
[data-theme="dark"] .lp-body .text-slate-700,
[data-theme="dark"] .lp-body .text-slate-500,
[data-theme="dark"] .adm-body .text-slate-600,
[data-theme="dark"] .adm-body .text-slate-700,
[data-theme="dark"] .adm-body .text-slate-500 { color:var(--text-muted) !important; }
[data-theme="dark"] .lp-body .border-slate-200,
[data-theme="dark"] .lp-body .border-slate-300,
[data-theme="dark"] .adm-body .border-slate-200,
[data-theme="dark"] .adm-body .border-slate-300 { border-color:var(--border) !important; }
[data-theme="dark"] .lp-body input { background:var(--input-bg) !important; color:var(--text) !important; }
.badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; }

/* Toast (share/invite confirmations) */
.tr-toast {
  position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%) translateY(20px);
  background: #0f172a; color: #fff; padding: 12px 18px; border-radius: 999px;
  font-size: 14px; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease;
  z-index: 9999; max-width: 88vw; text-align: center;
}
.tr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }