@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@500;700;800&family=Work+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- THEME TOKENS ---------- */
:root{
  --bg:#F2ECDA; --surface:#EAE2CB; --surface-2:#EFE4D2;
  --text:#2A241C; --heading:#1E3A2E; --muted:#8A9683; --line:#C9C2AA;
  --accent:#BF5B33; --accent-2:#B08B44; --header:#1E3A2E; --header-2:#16281F; --on-header:#F2ECDA;
  --map-land:#F2ECDA; --map-visited:#BF5B33; --grain:rgba(42,36,28,0.025);
}
/* Dark palette — warm dark field-journal feel, true to the original identity */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#16130F; --surface:#211B15; --surface-2:#2C241C;
    --text:#EDE4CF; --heading:#EADFC6; --muted:#9A9384; --line:#3A3128;
    --accent:#D2703F; --accent-2:#C99C50; --header:#14261D; --header-2:#0E1B14; --on-header:#EDE4CF;
    --map-land:#2A2219; --map-visited:#D2703F; --grain:rgba(255,248,235,0.020);
  }
}
:root[data-theme="dark"]{
  --bg:#16130F; --surface:#211B15; --surface-2:#2C241C;
  --text:#EDE4CF; --heading:#EADFC6; --muted:#9A9384; --line:#3A3128;
  --accent:#D2703F; --accent-2:#C99C50; --header:#14261D; --header-2:#0E1B14; --on-header:#EDE4CF;
  --map-land:#2A2219; --map-visited:#D2703F; --grain:rgba(255,248,235,0.020);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  background-image:repeating-linear-gradient(0deg, var(--grain) 0px, var(--grain) 1px, transparent 1px, transparent 3px);
  color:var(--text); font-family:'Work Sans', sans-serif; min-height:100vh; -webkit-font-smoothing:antialiased;
  transition:background-color .2s ease, color .2s ease;
}
.app{max-width:960px; margin:0 auto; padding:20px 20px 80px;}

/* ---------- TOP BAR ---------- */
.topbar{display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap;}
.topbar .right{display:flex; align-items:center; gap:8px;}
.pill-btn{
  font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; letter-spacing:.3px;
  background:var(--surface); color:var(--heading); border:1px solid var(--line); padding:7px 11px; cursor:pointer; border-radius:14px;
}
.pill-btn:hover{border-color:var(--accent); color:var(--accent);}
#userBar{display:none; align-items:center; gap:8px;}
#userEmail{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
#syncStatus{font-family:'JetBrains Mono', monospace; font-size:10px; color:var(--muted);}

/* ---------- GUEST BANNER ---------- */
.guest-banner{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  background:var(--surface); border:1px solid var(--line); padding:10px 14px; margin-bottom:16px;
}
.guest-banner p{margin:0; font-size:13px; color:var(--text);}
.guest-banner .accent{color:var(--accent); font-weight:600;}

/* ---------- HERO ---------- */
.hero{border-bottom:3px solid var(--header); padding-bottom:18px; margin-bottom:22px;}
.eyebrow{font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:2.5px; color:var(--accent); text-transform:uppercase; margin:0 0 6px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
h1.title{font-family:'Bitter', serif; font-weight:800; font-size:40px; color:var(--heading); margin:0 0 18px; letter-spacing:-0.5px;}
.country-toggle{display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:12px; overflow:hidden; height:22px;}
.country-toggle button{font-family:'JetBrains Mono', monospace; font-size:10px; font-weight:700; padding:0 9px; height:100%; border:none; background:var(--surface); color:var(--muted); cursor:pointer; letter-spacing:.5px;}
.country-toggle button.active{background:var(--header); color:var(--on-header);}

.stats-row{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:640px){ .stats-row{grid-template-columns:repeat(2,1fr);} }
.stat{border-left:2px solid var(--line); padding-left:12px;}
.stat .num{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:20px; color:var(--text);}
.stat .num small{font-size:12px; color:var(--muted); font-weight:400;}
.stat .lbl{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--heading); margin-top:2px; font-weight:600;}
.track{position:relative; height:4px; background:var(--line); margin-top:8px;}
.track .fill{position:absolute; top:0; left:0; height:4px; background:var(--accent);}
.track .tick{position:absolute; top:-2px; width:1px; height:8px; background:var(--line);}

/* ---------- TABS ---------- */
.tabs{display:flex; gap:4px; border-bottom:1px solid var(--line); margin-bottom:16px; overflow-x:auto;}
.tab{font-family:'Bitter', serif; font-weight:700; font-size:14px; background:none; border:none; cursor:pointer; padding:10px 13px 12px; color:var(--muted); white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-1px;}
.tab.active{color:var(--heading); border-bottom-color:var(--accent);}

/* ---------- CONTROLS ---------- */
.controls-row{display:flex; gap:10px; align-items:center; margin-bottom:16px; flex-wrap:wrap;}
.search-bar{flex:1; min-width:180px;}
.search-bar input, .filter-select{width:100%; font-family:'Work Sans', sans-serif; font-size:14px; padding:10px 12px; border:1px solid var(--line); background:var(--surface); color:var(--text); outline:none;}
.search-bar input:focus, .filter-select:focus{border-color:var(--accent);}
.filter-select{width:auto; min-width:150px; cursor:pointer;}
.view-toggle{display:flex; border:1px solid var(--line); flex-shrink:0;}
.view-toggle button{font-family:'JetBrains Mono', monospace; font-size:11.5px; font-weight:700; padding:9px 13px; border:none; background:var(--surface); color:var(--heading); cursor:pointer;}
.view-toggle button.active{background:var(--header); color:var(--on-header);}

/* filter chips */
.chip-row{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; align-items:center;}
.chip{font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:600; padding:6px 10px; border:1px solid var(--line); background:var(--surface); color:var(--muted); cursor:pointer; border-radius:14px;}
.chip.active{background:var(--accent); color:#fff; border-color:var(--accent);}
.nps-count{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); margin-left:auto;}

/* ---------- PANELS / GRID ---------- */
.panel{display:none;} .panel.active{display:block;}
.view{display:none;} .view.active{display:block;}
.group-heading{font-family:'Bitter', serif; font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--accent-2); border-bottom:1px solid var(--line); padding-bottom:6px; margin:26px 0 12px;}
.group-heading:first-child{margin-top:0;}
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px;}

.tile{position:relative; background:var(--surface); border:1px solid var(--line); padding:12px 12px 14px; cursor:pointer; min-height:64px; transition:background .15s ease, border-color .15s ease; overflow:hidden;}
.tile:hover{border-color:var(--accent-2);}
.tile.visited{background:var(--surface-2); border-color:var(--accent);}
.tile .name{font-family:'Work Sans', sans-serif; font-weight:600; font-size:14px; color:var(--text); line-height:1.25; padding-right:34px;}
.tile .sub{font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); margin-top:4px; letter-spacing:.4px;}
.tile .date{font-family:'JetBrains Mono', monospace; font-size:9.5px; color:var(--accent); margin-top:6px;}
.tile .del{position:absolute; bottom:6px; right:8px; font-size:11px; color:var(--muted); background:none; border:none; cursor:pointer; padding:2px 4px;}
.tile .del:hover{color:var(--accent);}
.stamp{position:absolute; top:6px; right:4px; width:46px; height:46px; border:2px solid var(--accent); border-radius:50%; transform:rotate(-14deg); display:flex; align-items:center; justify-content:center; color:var(--accent); font-family:'JetBrains Mono', monospace; font-size:7px; font-weight:700; text-align:center; line-height:1.15; box-shadow:0 0 0 2px var(--surface-2) inset; opacity:.9;}
.empty-state{font-family:'Bitter', serif; font-size:16px; color:var(--muted); padding:30px 10px; text-align:center; border:1px dashed var(--line);}

.add-form{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap;}
.add-form input{font-family:'Work Sans', sans-serif; font-size:13.5px; padding:9px 10px; border:1px solid var(--line); background:var(--surface); color:var(--text); outline:none;}
.add-form input:focus{border-color:var(--accent);}
.add-form input.name{flex:2; min-width:140px;} .add-form input.st{flex:1; min-width:70px;}
.add-form button{font-family:'Bitter', serif; font-weight:700; font-size:13.5px; background:var(--header); color:var(--on-header); border:none; padding:9px 16px; cursor:pointer;}
.add-form button:hover{background:var(--header-2);}

/* ---------- MAP ---------- */
.map-wrap{border:1px solid var(--line); background:var(--surface); position:relative;}
.map-wrap svg{display:block; width:100%; height:auto;}
.map-feature{fill:var(--map-land); stroke:var(--line); stroke-width:0.6; cursor:pointer; transition:fill .15s ease;}
.map-feature:hover{stroke:var(--accent-2); stroke-width:1.1;}
.map-feature.visited{fill:var(--map-visited); fill-opacity:.8;}
.map-dot{fill:var(--surface); stroke:var(--header); stroke-width:1.3; cursor:pointer;}
.map-dot.visited{fill:var(--map-visited); stroke:var(--map-visited);}
.map-dot:hover{stroke:var(--accent-2);}
.map-status{font-family:'JetBrains Mono', monospace; font-size:11.5px; color:var(--muted); padding:16px; text-align:center;}
.map-tooltip{position:absolute; right:10px; bottom:10px; pointer-events:none; background:var(--header); color:var(--on-header); font-family:'JetBrains Mono', monospace; font-size:11px; padding:5px 9px; white-space:nowrap; max-width:75%; overflow:hidden; text-overflow:ellipsis; opacity:0; transition:opacity .4s ease; z-index:5;}
.map-tooltip.show{opacity:1;}
.legend{display:flex; gap:16px; align-items:center; margin-top:10px; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted);}
.legend span{display:inline-flex; align-items:center; gap:5px;}
.swatch{width:11px; height:11px; display:inline-block; border:1px solid var(--line);}
.swatch.on{background:var(--map-visited); border-color:var(--map-visited);}

/* ---------- IO ROW / FOOTER ---------- */
.io-row{display:flex; justify-content:center; gap:10px; margin-top:24px; flex-wrap:wrap;}
.io-btn{font-family:'JetBrains Mono', monospace; font-weight:700; font-size:11.5px; background:var(--surface); color:var(--heading); border:1px solid var(--line); padding:8px 14px; cursor:pointer;}
.io-btn:hover{border-color:var(--accent); color:var(--accent);}
.passport-btn{background:var(--header); color:var(--on-header); border-color:var(--header);}
.passport-btn:hover{background:var(--header-2); color:var(--on-header); border-color:var(--header-2);}
.io-btn:disabled{opacity:.5; cursor:default;}
.footnote{margin-top:20px; font-family:'JetBrains Mono', monospace; font-size:10.5px; color:var(--muted); text-align:center;}

/* ---------- MODAL (shared) ---------- */
.modal-overlay{display:none; position:fixed; inset:0; background:rgba(0,0,0,0.55); align-items:center; justify-content:center; z-index:50; padding:20px;}
.modal-overlay.active{display:flex;}
.modal-box{background:var(--bg); border:2px solid var(--header); max-width:400px; width:100%; padding:22px 20px; box-shadow:0 8px 24px rgba(0,0,0,.35); max-height:90vh; overflow-y:auto;}
.modal-box h3{font-family:'Bitter', serif; font-weight:800; font-size:18px; color:var(--heading); margin:0 0 16px;}
.modal-options{display:flex; flex-direction:column; gap:8px;}
.modal-option-btn{display:flex; flex-direction:column; align-items:flex-start; gap:2px; background:var(--surface); border:1px solid var(--line); padding:11px 14px; cursor:pointer; text-align:left;}
.modal-option-btn:hover{border-color:var(--accent);}
.modal-option-btn .opt-label{font-family:'Bitter', serif; font-weight:700; font-size:14.5px; color:var(--text);}
.modal-option-btn .opt-desc{font-family:'Work Sans', sans-serif; font-size:11.5px; color:var(--muted);}
.modal-option-btn-compact{flex-direction:row; align-items:center; justify-content:center;}
.modal-cancel{margin-top:14px; background:none; border:none; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted); cursor:pointer; text-decoration:underline; padding:0;}
.modal-cancel:hover{color:var(--accent);}

/* ---------- AUTH GATE ---------- */
.auth-fields{display:flex; flex-direction:column; gap:10px; margin-bottom:12px;}
.auth-fields input{font-family:'Work Sans', sans-serif; font-size:14px; padding:11px 12px; border:1px solid var(--line); background:var(--surface); color:var(--text); outline:none;}
.auth-fields input:focus{border-color:var(--accent);}
.auth-btn{font-family:'Bitter', serif; font-weight:700; font-size:14px; padding:11px; border:none; cursor:pointer;}
.auth-btn.primary{background:var(--header); color:var(--on-header);}
.auth-btn.secondary{background:var(--surface); color:var(--heading); border:1px solid var(--line);}
.auth-btn.google{background:#fff; color:#3c4043; border:1px solid #dadce0; display:flex; align-items:center; justify-content:center; gap:8px;}
.auth-row{display:flex; gap:8px;}
.auth-row .auth-btn{flex:1;}
.auth-divider{display:flex; align-items:center; gap:10px; margin:14px 0; color:var(--muted); font-family:'JetBrains Mono', monospace; font-size:10px; letter-spacing:1px;}
.auth-divider::before,.auth-divider::after{content:''; flex:1; height:1px; background:var(--line);}
.auth-msg{font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--accent); margin-top:10px; min-height:14px;}
.auth-skip{margin-top:8px;}