:root{
  --bg:#0f172a;
  --panel:#111827;
  --card:#0b1220;
  --card2:#0d1629;
  --border:#23314a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --brand:#38bdf8;
  --good:#22c55e;
  --bad:#ef4444;
  --warn:#fbbf24;

  --radius:16px;

  /* New (non-breaking) tokens */
  --radius-sm:12px;
  --radius-lg:22px;
  --ring: rgba(56,189,248,.55);
  --ring2: rgba(56,189,248,.18);

  --shadow-sm: 0 10px 26px rgba(0,0,0,.25);
  --shadow-md: 0 18px 50px rgba(0,0,0,.40);

  --surface-1: rgba(255,255,255,.05);
  --surface-2: rgba(255,255,255,.035);
  --stroke-1: rgba(255,255,255,.10);
  --stroke-2: rgba(255,255,255,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}

/* IMPORTANT: make hidden always win */
.modal[hidden]{display:none !important;}
.sheet[hidden]{display:none !important;}

/* Improve selection + scrollbar feel slightly (harmless) */
::selection{background:rgba(56,189,248,.25)}
/* HEADER */
.appHeader{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(2,6,23,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.appHeader h1{
  margin:0;
  font-size:15px;
  font-weight:850;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.headerActions{display:flex; gap:8px; align-items:center}
.headerBtn{
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--text);
  padding:7px 9px;
  border-radius:12px;
  font-weight:800;
  font-size:13px;
  transition: transform .06s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.headerBtn:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14)}
.headerBtn:active{transform:scale(.98)}
.headerBtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--ring2);
  border-color: var(--ring);
}

/* AUTH SCREEN */
.screen{padding:18px 14px}
.authScreen{
  max-width:520px;
  margin:0 auto;
  padding-top:18px;
}

/* Turn auth screen into a “card” without changing HTML */
.authScreen{
  position:relative;
}
.authScreen::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:10px;
  bottom:10px;
  margin:auto;
  max-width:520px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-sm);
  z-index:-1;
}
.authScreen > *{position:relative}

.authScreen h2{
  margin:8px 0 14px;
  font-size:18px;
  font-weight:900;
  color:var(--text);
  letter-spacing:.2px;
}

/* Add comfortable spacing between auth controls */
.authScreen input{
  margin-bottom:10px;
}
.authScreen button{
  margin-top:8px;
}

/* ✅ Fix: make SELECT readable (options were inheriting dark theme, but OS dropdown stayed light) */
select{
  width:100%;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  border-radius:14px;
  padding:11px 12px;
  font-size:14px;
  outline:none;
  appearance:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* Most browsers render the dropdown list using these option styles */
select option{
  background:#0b1220;
  color:var(--text);
}

/* iOS/Android sometimes ignore option background; this at least forces readable text */
select:focus{border-color:rgba(56,189,248,.55); box-shadow:0 0 0 3px rgba(56,189,248,.16)}

/* Inputs */
input,textarea{
  width:100%;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  border-radius:14px;
  padding:11px 12px;
  font-size:14px;
  outline:none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
textarea{min-height:92px; resize:none}
input::placeholder,textarea::placeholder{color:rgba(229,231,235,.55)}
input:focus,textarea:focus{
  border-color: var(--ring);
  box-shadow: 0 0 0 3px var(--ring2);
  background: rgba(255,255,255,.07);
}

/* Buttons */
.primaryBtn,.secondaryBtn,.googleBtn,.linkBtn,button{font-family:inherit}
.primaryBtn{
  width:100%;
  background:var(--brand);
  color:#001018;
  border:0;
  border-radius:14px;
  padding:11px;
  font-weight:900;
  font-size:14px;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 10px 22px rgba(56,189,248,.10);
}
.primaryBtn:hover{filter:brightness(1.02)}
.primaryBtn:active{transform:scale(.99)}
.primaryBtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--ring2), 0 10px 22px rgba(56,189,248,.12);
}

.secondaryBtn{
  width:100%;
  background:rgba(255,255,255,.08);
  color:var(--text);
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  padding:11px;
  font-weight:850;
  font-size:14px;
  transition: transform .06s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.secondaryBtn:hover{background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.14)}
.secondaryBtn:active{transform:scale(.99)}
.secondaryBtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--ring2);
  border-color: var(--ring);
}

.googleBtn{
  width:100%;
  background:#fff;
  color:#111;
  border:0;
  border-radius:14px;
  padding:11px 12px;
  font-weight:900;
  font-size:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease, opacity .15s ease;
  box-shadow: 0 12px 26px rgba(0,0,0,.18);
}
.googleBtn::before{
  content:"";
  width:18px;
  height:18px;
  background-size:contain;
  background-repeat:no-repeat;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2048%2048%27%3E%3Cpath%20fill%3D%27%23EA4335%27%20d%3D%27M24%209.5c3.54%200%206.72%201.22%209.22%203.62l6.9-6.9C36.36%202.55%2030.7%200%2024%200%2014.62%200%206.51%205.38%202.56%2013.22l8.04%206.24C12.51%2013.29%2017.81%209.5%2024%209.5z%27/%3E%3Cpath%20fill%3D%27%234285F4%27%20d%3D%27M46.98%2024.55c0-1.57-.14-3.09-.4-4.55H24v9.02h12.94c-.56%203.02-2.26%205.58-4.82%207.3l7.78%206.04c4.55-4.2%207.08-10.38%207.08-17.81z%27/%3E%3Cpath%20fill%3D%27%23FBBC05%27%20d%3D%27M10.6%2028.9c-.48-1.45-.76-2.99-.76-4.9s.27-3.45.76-4.9l-8.04-6.24C.92%2016.46%200%2020.12%200%2024c0%203.88.92%207.54%202.56%2010.14l8.04-6.24z%27/%3E%3Cpath%20fill%3D%27%2334A853%27%20d%3D%27M24%2048c6.48%200%2011.92-2.14%2015.9-5.82l-7.78-6.04c-2.16%201.45-4.92%202.3-8.12%202.3-6.19%200-11.49-3.79-13.4-9.14l-8.04%206.24C6.51%2042.62%2014.62%2048%2024%2048z%27/%3E%3C/svg%3E");
}
.googleBtn:hover{filter:brightness(0.99)}
.googleBtn:active{transform:scale(.99)}
.googleBtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px rgba(56,189,248,.18), 0 12px 26px rgba(0,0,0,.18);
}

.linkBtn{
  background:transparent;
  color:var(--brand);
  border:0;
  font-weight:850;
  padding:6px 8px;
  border-radius:10px;
}
.linkBtn:hover{background:rgba(56,189,248,.10)}
.linkBtn:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--ring2);
}

/* USER BAR */
.userBar{
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  background:rgba(2,6,23,.60);
}
#userEmail{
  font-weight:850;
  font-size:13px;
  color: rgba(229,231,235,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* FEED */
.feed{
  padding:12px 10px 84px;
  max-width:760px;
  margin:0 auto;
}
.dayHeader{
  margin:16px 0 8px;
  color:rgba(229,231,235,.72);
  font-weight:900;
  font-size:11px;
  letter-spacing:.5px;
  text-transform:uppercase;
}

/* POST CARD */
.post{
  background: linear-gradient(180deg, var(--surface-1), var(--surface-2));
  border:1px solid var(--stroke-2);
  border-radius: var(--radius);
  padding:12px 12px 10px;
  margin-bottom:10px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

/* Tighter, clearer header layout */
.postHeader{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.avatar{
  width:34px;
  height:34px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  object-fit:cover;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.10);
}

/* Improve hierarchy */
.postMeta strong{
  font-size:14px;
  line-height:1.2;
  letter-spacing:.15px;
}
.postMeta small{
  display:block;
  margin-top:3px;
  color:rgba(229,231,235,.62);
  font-size:12px;
  line-height:1.25;
}
.postType{
  margin-left:auto;
  font-size:11px;
  font-weight:950;
  letter-spacing:.2px;
  padding:5px 10px;
  border-radius:999px;
  background:rgba(56,189,248,.14);
  border:1px solid rgba(56,189,248,.28);
  color:rgba(184,235,255,.95);
  white-space:nowrap;
}

.postText{
  margin-top:10px;
  font-size:14px;
  line-height:1.55;
  color:rgba(229,231,235,.96);
  white-space:pre-wrap;
}

/* ACTIONS — professional chips */
.actionsRow{
  display:flex;
  gap:8px;
  margin-top:12px;
  align-items:center;
}
.reactBtn,.commentToggle{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  color:rgba(229,231,235,.92);
  transition: transform .06s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.reactBtn:hover,.commentToggle:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.14)}
.commentToggle{margin-left:auto}
.reactBtn:active,.commentToggle:active{transform:scale(.98)}
.reactBtn:focus-visible,.commentToggle:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--ring2);
  border-color: var(--ring);
}

/* MOD ROW */
.modRow{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.modBtn{
  flex:1;
  padding:10px 11px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.06);
  color:var(--text);
  font-weight:900;
  font-size:12px;
  transition: transform .06s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.modBtn:hover{background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14)}
.modBtn:active{transform:scale(.99)}
.modBtn.good{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.24);
  color:rgba(195,255,220,.95);
}
.modBtn.good:hover{
  background:rgba(34,197,94,.16);
  border-color:rgba(34,197,94,.30);
}

/* TAGS */
.rankTag{
  font-size:10px;
  font-weight:950;
  background:rgba(251,191,36,.16);
  border:1px solid rgba(251,191,36,.28);
  color:var(--warn);
  padding:3px 8px;
  border-radius:999px;
  margin-left:7px;
}
.resolvedTag{
  font-size:10px;
  font-weight:950;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.24);
  color:rgba(195,255,220,.95);
  padding:3px 8px;
  border-radius:999px;
  margin-left:7px;
}

/* Optional (if you’re using it) */
.outdatedTag{
  display:inline-block;
  margin-left:7px;
  padding:3px 8px;
  font-size:10px;
  font-weight:950;
  border-radius:999px;
  background:rgba(251,191,36,.14);
  border:1px solid rgba(251,191,36,.30);
  color:var(--warn);
}

/* COMMENTS */
.commentBox{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}
.comment{
  display:flex;
  gap:10px;
  padding:8px 0;
}
.commentBody{
  font-size:13px;
  line-height:1.4;
  color:rgba(229,231,235,.92);
}
.commentBody strong{font-size:13px}
.commentList{display:flex; flex-direction:column}

.commentForm{
  display:flex;
  gap:8px;
  margin-top:10px;
  align-items:center;
}
.commentInput{
  flex:1;
  padding:10px 12px;
  border-radius:999px;
}
.commentSend{
  width:auto;
  padding:10px 14px;
  border-radius:999px;
}

/* FAB */
.fab{
  position:fixed;
  right:14px;
  bottom:14px;
  width:56px;
  height:56px;
  border-radius:999px;
  border:0;
  background:var(--brand);
  color:#001018;
  font-size:28px;
  font-weight:950;
  display:grid;
  place-items:center;
  z-index:25;
  box-shadow: 0 18px 44px rgba(0,0,0,.40);
  transition: transform .06s ease, filter .15s ease, box-shadow .15s ease;
}
.fab:hover{filter:brightness(1.02)}
.fab:active{transform:scale(.98)}
.fab:focus-visible{
  outline:none;
  box-shadow: 0 0 0 3px var(--ring2), 0 18px 44px rgba(0,0,0,.40);
}

/* MODAL */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.62);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  z-index:30;
  padding:12px;
}
.modalContent{
  width:100%;
  max-width:560px;
  background:rgba(2,6,23,.98);
  border:1px solid rgba(255,255,255,.10);
  border-radius:22px;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  box-shadow: var(--shadow-md);
}
.modalContent h2{
  margin:4px 0 6px;
  font-size:16px;
  font-weight:950;
  letter-spacing:.2px;
}

/* CHECK ROW */
.checkRow{
  display:flex;
  gap:10px;
  align-items:center;
  color:rgba(229,231,235,.85);
  font-size:12px;
  font-weight:850;
}
.checkRow input{width:18px; height:18px}

/* LEADERBOARD */
#leaderboardList{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.lbRow{
  display:flex;
  gap:10px;
  align-items:center;
  border-radius:16px;
  padding:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.04);
}
.lbMeta strong{font-size:14px; font-weight:950}
.lbMeta small{color:rgba(229,231,235,.65); font-weight:800}

/* MAP VIEW */
.mapView{
  position:fixed;
  inset:50px 0 0 0;
  z-index:10;
}
.mapCanvas{
  position:absolute;
  inset:0;
}

/* MAP SHEET */
.sheet{
  position:fixed;
  left:10px;
  right:10px;
  bottom:10px;
  background:rgba(2,6,23,.96);
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:12px;
  z-index:31;
  box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.sheetHandle{
  width:46px;
  height:5px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  margin:2px auto 10px;
}
.sheetInner{display:flex; flex-direction:column; gap:10px}
.sheetActions{display:flex; gap:8px}
.sheetActions .primaryBtn,
.sheetActions .secondaryBtn{
  width:auto;
  flex:1;
}

.badge{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  font-size:10px;
  font-weight:950;
  border-radius:999px;
  background:rgba(56,189,248,.12);
  border:1px solid rgba(56,189,248,.20);
  color:rgba(176,235,255,.95);
}

/* Small-screen polish */
@media (max-width:420px){
  .appHeader h1{font-size:14px}
  .post{padding:11px}
  .postText{font-size:14px}
  .modalContent{padding:12px}
}