:root{
  --bg: #0b0c10;
  --panel: #121318;
  --card: #161822;
  --text: #e6e7eb;
  --muted: #a6a8ad;
  --accent: #7c5cff;
  --open: #1fcf7c;
  --closed: #ff5c7a;
  --holiday: #ffb02e;
  --border: #262a35;
}

/* light theme removed */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{background:var(--bg);color-scheme: dark}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: linear-gradient(180deg, var(--bg), #0d1117 40%);
  color: var(--text);
  -webkit-tap-highlight-color: transparent;
}

.container{max-width:1100px;margin:0 auto;padding:20px}
/* ticker restored */
.ticker{width:100%;overflow:hidden;white-space:nowrap;border:1px solid var(--border);background:var(--panel);border-radius:10px;margin:8px 0;padding:0;height:36px;display:flex;align-items:center}
.ticker .track{display:flex;will-change:transform;animation:ticker 60s linear infinite;white-space:nowrap;height:100%;align-items:center}
.ticker .item{display:inline-flex;gap:8px;align-items:center;padding:0 16px;border-right:1px solid var(--border);font-size:12px;line-height:1;height:100%}
.chg-pos{color:#1fcf7c}
.chg-neg{color:#ff5c7a}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.site-header{
  position:sticky;top:0;background:rgba(11,12,16,0.75);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10
}
.site-header h1{margin:0;font-size:18px;letter-spacing:0.3px}
.brand{font-weight:800;letter-spacing:0.4px;color:var(--text);display:flex;flex-direction:column;gap:6px;max-width:280px}
.tagline{font-size:12px;color:var(--muted);margin:0;line-height:1.25;font-weight:500;overflow:hidden;white-space:nowrap;max-width:100%}
.tagline .scroll{display:inline-block;padding-left:12px;animation:tag-scroll 12s linear infinite}
@keyframes tag-scroll{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}
@media(max-width:600px){.tagline{font-size:11px}}
@media(max-width:600px){.brand{max-width:200px}}
.header-bar{display:flex;justify-content:space-between;align-items:center;padding-top:6px}
.clock{display:flex;gap:10px;align-items:center;color:var(--muted);margin:6px 0}
.digital{display:flex;flex-direction:column;gap:2px;align-items:flex-end}
.clock #local-time{font-variant-numeric:tabular-nums;color:var(--text);font-weight:700;font-size:17px}
.clock #local-tz{opacity:0.85;font-size:12px}


.controls-row{display:flex;gap:10px;align-items:center;margin:8px 0 14px 0}
.controls{display:flex;justify-content:space-between;align-items:center;margin:14px 0}
.controls-right{display:flex;align-items:center}
.search{background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23a6a8ad" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>');background-repeat:no-repeat;background-position:10px center;padding-left:32px}
input[type="search"]{width:320px;max-width:100%;padding:10px 12px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text)}
input[type="search"]::placeholder{color:var(--muted)}
.btn{margin-left:8px;padding:8px 10px;border-radius:12px;border:1px solid var(--border);background:var(--panel);color:var(--text);cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:8px;line-height:1;min-height:34px;font-size:12px;font-family:inherit;font-weight:400;letter-spacing:0;font-variant-numeric:tabular-nums;transition:background .15s ease,border-color .15s ease,color .15s ease, box-shadow .15s ease}
.link{background:transparent;border:none;padding:0;margin:0;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:13px}
.link:hover{color:var(--text);text-decoration:underline}
.fav-toggle{font-variant-numeric:tabular-nums}
.fav-toggle.small{font-size:12px;opacity:0.9}
.fav-toggle.favorited{color:#ffd700;-webkit-text-shadow:0 0 8px rgba(255,215,0,0.3);text-shadow:0 0 8px rgba(255,215,0,0.3)}
.fav-toggle.favorited:hover{color:#ffed4e;-webkit-text-shadow:0 0 12px rgba(255,215,0,0.5);text-shadow:0 0 12px rgba(255,215,0,0.5)}
.btn-fav{padding:6px 10px;min-height:32px;font-size:14px}
.btn-fav .fav-label{font-size:12px;color:var(--muted)}
.btn:hover{border-color:#2f3442}
.btn.pair{margin-left:8px}
.btn[aria-pressed="true"],
#country-filter-btn[data-active="true"],
#country-filter-btn[aria-expanded="true"],
#toggle-favs[aria-pressed="true"],
#toggle-notifs[aria-pressed="true"]{
  border-color: rgba(124,92,255,0.6);
  background: rgba(124,92,255,0.12);
  color: var(--text);
  box-shadow: 0 0 0 3px rgba(124,92,255,0.12) inset;
}
.hint{margin-left:6px;color:var(--muted);font-size:12px}
.filter{position:relative}
.filter-panel{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,0.45);padding:10px;min-width:280px;z-index:20;font-size:12px}
.filter-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:var(--muted);font-size:11px}
.filter-options{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;max-height:220px;overflow:auto}
@media(max-width:600px){.filter-options{grid-template-columns:1fr}}
.filter-options .opt{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:6px;cursor:pointer;font-size:12px}
.filter-options .opt span{font-size:12px}
.filter-options .opt input{accent-color:var(--accent)}
.filter-actions{display:flex;justify-content:flex-end;margin-top:8px}
#country-filter-btn{font-size:12px;padding:8px 10px}

/* Tooltip for notifications */
.tooltip-wrap{position:relative;display:inline-block}
.tooltip{position:absolute;right:0;top:calc(100% + 8px);background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,0.45);padding:10px;min-width:260px;max-width:320px;font-size:12px;line-height:1.4;color:var(--text);z-index:30}
.tooltip::before{content:"";position:absolute;right:16px;top:-6px;border-width:6px;border-style:solid;border-color:transparent transparent var(--border) transparent}
.tooltip::after{content:"";position:absolute;right:16px;top:-5px;border-width:6px;border-style:solid;border-color:transparent transparent var(--panel) transparent}
.tooltip-wrap:hover .tooltip,.tooltip-wrap:focus-within .tooltip{display:block}
.tooltip[hidden]{display:none}



.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:16px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .2s ease, transform .08s ease;
}
.card{position:relative}
.live-dot{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,0.6);animation:pulse 1.6s ease-out infinite;display:inline-block}
.live-badge{position:absolute;top:10px;right:10px;display:inline-flex;gap:6px;align-items:center;background:transparent;color:var(--open);font-weight:600;font-size:12px}
.live-badge .live-text{color:var(--open)}
.static-badge{position:absolute;top:10px;right:10px;display:inline-flex;gap:6px;align-items:center;background:transparent;font-weight:600;font-size:12px}
.static-dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.static-badge.closed .static-dot{background:#ff5c7a}
.static-badge.closed .static-text{color:var(--closed)}
.static-badge.holiday .static-dot{background:#ffb02e}
.static-badge.holiday .static-text{color:var(--holiday)}
@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0.6)}70%{transform:scale(1.1);box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.card.compact{padding:12px}
.card:hover{border-color:#2f3442;transform:translateY(-1px)}
.card .title{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:2px}
.card .actions{display:flex;gap:10px;align-items:center}
.name{font-weight:600;font-size:14px;line-height:1.2}
.mic{color:var(--muted);font-size:12px;margin-top:1px}
.fav-slot{margin-top:6px}

.pill{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--border);display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.15}
.pill.open{background: rgba(31,207,124,0.12);border-color:rgba(31,207,124,0.25);color:var(--open)}
.pill.closed{background: rgba(255,92,122,0.12);border-color:rgba(255,92,122,0.35);color:var(--closed)}
.pill.holiday{background: rgba(255,176,46,0.15);border-color:rgba(255,176,46,0.35);color:var(--holiday)}

.row{display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:13px}
.row.primary{font-size:14px;color:var(--text);margin-bottom:2px}
.row.primary.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:center}
.row.primary.duo .col{display:flex;flex-direction:column;gap:2px;justify-content:flex-start}
.row.primary.duo .col.right{align-items:flex-end;text-align:right}
.row.primary.duo .col strong{font-size:16px}
.row.primary.duo .col .countdown.placeholder{visibility:hidden}
.row.primary span{color:var(--muted);font-size:12px}
.row.secondary{font-size:11px;opacity:0.8;margin-bottom:1px}
.row.secondary.duo{display:grid !important;grid-template-columns:1fr 1fr !important;gap:14px !important;align-items:center !important;font-size:11px;opacity:0.8;margin-bottom:1px}
.row.secondary.duo .col{display:flex !important;flex-direction:column !important;gap:2px !important;justify-content:flex-start !important}
.row.secondary.duo .col.right{align-items:flex-end !important;text-align:right !important}
.row strong{color:var(--text);font-variant-numeric:tabular-nums;word-wrap:break-word;line-height:1.3}
.row.primary strong{font-size:15px;font-weight:700}
.row.secondary strong{font-size:11px;font-weight:500}

/* Index styling for .col.right structure */
.index-ticker {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-bottom: 2px;
  display: block;
}
.index-price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.index-price .price {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.index-price .change {
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.index-price .change-label {
  font-size: 9px;
  font-weight: 400;
  opacity: 0.7;
  margin-left: 2px;
}
.index-price.positive .change {
  color: #1fcf7c;
}
.index-price.negative .change {
  color: #ff5c7a;
}
.countdown{font-size:12px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.countdown::before{content:"in ";}

.empty{opacity:0.8;text-align:center;padding:40px;border:1px dashed var(--border);border-radius:14px}

.site-footer{opacity:0.7;font-size:12px}
.site-footer .sources{opacity:0.7;font-size:11px;margin:4px 0}

.section-title{display:flex;align-items:center;gap:8px;margin:14px 0 10px 0;color:var(--muted);font-size:12px;letter-spacing:0.35px;font-weight:700;text-transform:uppercase}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%}
.dot-open{background:#1fcf7c;box-shadow:0 0 0 0 rgba(34,197,94,0.6);animation:pulse 1.6s ease-out infinite}
.dot-closed{background:#ff5c7a}
.highlights{list-style:none;margin:10px 0 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.highlights li a{color:var(--text);text-decoration:none}
.highlights li a:hover{text-decoration:underline}
.highlights li{background:var(--panel);border:1px solid var(--border);border-radius:14px;min-height:120px;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .2s ease, transform .08s ease;overflow:hidden}
.highlights .img{height:92px;background:#0f1117 center/cover no-repeat;border-bottom:1px solid var(--border)}
.highlights .content{padding:12px}
.highlights li:hover{border-color:#2f3442;transform:translateY(-1px)}
.highlights .title{font-weight:600;line-height:1.25;font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.highlights .meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px}
.highlights .source{color:var(--muted);font-size:12px}
.highlights .ts{color:var(--muted);font-size:12px}
@media(max-width:900px){.highlights{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.highlights{grid-template-columns:repeat(1,1fr)}}
.highlights li{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px}
.highlights .ts{color:var(--muted);font-size:12px}
.highlights .title{font-weight:600;margin-bottom:6px;line-height:1.3}
.highlights .title-link{color:var(--text);text-decoration:none}
.highlights .title-link:hover{color:var(--accent);text-decoration:underline}
.highlights .summary{color:var(--muted);font-size:12px;line-height:1.4;margin-bottom:8px;opacity:0.9}
.highlights .meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}

.heatmap{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.heatmap .cell{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:6px;min-height:68px;transition:border-color .2s ease, transform .08s ease}
.heatmap .cell:hover{border-color:#2f3442;transform:translateY(-1px)}
.heatmap .cell .name{font-size:12px;font-weight:600;line-height:1.1;color:var(--text)}
.heatmap .cell .meta{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:var(--muted)}
.heatmap .cell .pct{font-variant-numeric:tabular-nums;font-weight:700}
.heatmap .cell.up{background:linear-gradient(180deg, rgba(31,207,124,0.12), transparent)}
.heatmap .cell.down{background:linear-gradient(180deg, rgba(255,92,122,0.12), transparent)}
.heatmap .cell .bar{height:6px;border-radius:999px;background:rgba(255,255,255,0.07);overflow:hidden}
.heatmap .cell .bar > span{display:block;height:100%;border-radius:999px}
.heatmap .cell.up .bar > span{background:#1fcf7c}
.heatmap .cell.down .bar > span{background:#ff5c7a}
.heatmap .cell .ticker{font-size:11px;color:var(--muted)}
.heatmap .legend{grid-column:1/-1;display:flex;justify-content:flex-end;gap:12px;font-size:11px;color:var(--muted)}

.leaflet-map{position:relative;width:100%;height:520px;border:1px solid var(--border);border-radius:12px;overflow:hidden}
.leaflet-container{background:var(--panel)}

/* Leaflet divIcon marker styling for index labels */
.map-label .marker{background:rgba(18,19,24,0.95);border:1px solid var(--border);border-radius:6px;padding:4px 6px;font-size:10px;line-height:1.2;box-shadow:0 4px 12px rgba(0,0,0,0.3);white-space:nowrap}
.map-label .marker .name{font-weight:600;color:var(--text)}
.map-label .marker .pct{font-variant-numeric:tabular-nums;font-weight:700;margin-left:4px}
.map-label .marker.up .pct{color:#1fcf7c}
.map-label .marker.down .pct{color:#ff5c7a}
.map .marker{position:absolute;transform:translate(-50%,-50%);background:rgba(18,19,24,0.95);border:1px solid var(--border);border-radius:6px;padding:4px 6px;font-size:10px;line-height:1.2;box-shadow:0 4px 12px rgba(0,0,0,0.3);white-space:nowrap}
.map .marker .name{font-weight:600;color:var(--text)}
.map .marker .pct{font-variant-numeric:tabular-nums;font-weight:700;margin-left:4px}
.map .marker.up .pct{color:#1fcf7c}
.map .marker.down .pct{color:#ff5c7a}

.privacy-banner{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:linear-gradient(180deg, #121318, #0f1117);border:1px solid var(--border);border-radius:14px;padding:0;color:var(--text);box-shadow:0 10px 40px rgba(0,0,0,0.45);max-width:840px;width:calc(100% - 32px)}
.privacy-banner .pb-wrap{display:flex;gap:16px;align-items:center;justify-content:space-between;padding:12px 14px}
.privacy-banner .pb-left{display:flex;gap:12px;align-items:center}
.privacy-banner .pb-icon{width:28px;height:28px;border-radius:8px;background:rgba(124,92,255,0.15);border:1px solid rgba(124,92,255,0.35);display:flex;align-items:center;justify-content:center;font-size:14px}
.privacy-banner .pb-title{font-weight:600;font-size:13px}
.privacy-banner .pb-desc{color:var(--muted);font-size:11px;line-height:1.3}
.privacy-banner .pb-actions{display:flex;gap:8px}
.privacy-banner .pb-actions .btn{min-width:100px;height:32px;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 12px;font-size:12px}
.btn-primary{background:var(--accent);border-color:transparent;color:white;min-width:120px;text-align:center}

.privacy-modal{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:50}
.privacy-modal[hidden]{display:none !important}
.privacy-dialog{background:var(--panel);border:1px solid var(--border);border-radius:16px;max-width:720px;width:calc(100% - 40px);box-shadow:0 20px 60px rgba(0,0,0,0.5)}
.privacy-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.privacy-head .btn{width:24px;height:24px;padding:0;font-size:12px;display:flex;align-items:center;justify-content:center;border-radius:4px;background:transparent;border:1px solid var(--border);color:var(--muted);transition:all 0.2s ease}
.privacy-head .btn:hover{background:var(--hover);color:var(--text);border-color:var(--accent)}
.privacy-head h3{font-size:16px;color:var(--text);font-weight:600}
.privacy-body{padding:16px;color:var(--text);font-size:14px;line-height:1.45}
.privacy-body ul{margin:8px 0 12px 18px;padding:0}
.privacy-body li{margin:4px 0}

/* Only switch to light if explicitly requested via data-theme="light" */
html[data-theme="light"]:root{--bg:#f7f8fa;--panel:#fff;--card:#fff;--text:#111;--muted:#555;--border:#e7e8ee}
html[data-theme="light"] .site-header{background:rgba(255,255,255,0.8)}

@media(max-width:900px){
  .controls-row{flex-direction:column;align-items:stretch}
  .controls-right{justify-content:flex-start}
  input[type="search"]{width:100%}
  .site-header h1{font-size:16px}
  .clock #local-time{font-size:16px}
  .digital{align-items:flex-start}
}

/* Mobile header improvements */
@media(max-width:600px){
  .header-bar{
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 8px;
  }
  
  .brand{
    max-width: 100%;
    width: 100%;
    text-align: center;
  }
  
  .brand h1{
    font-size: 20px;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
  }
  
  .tagline{
    font-size: 12px;
    margin-top: 4px;
    opacity: 0.8;
    text-align: center;
  }
  
  .clock{
    width: 100%;
    justify-content: center;
    margin: 0;
  }
  
  .digital{
    align-items: center;
    text-align: center;
  }
  
  .clock #local-time{
    font-size: 16px;
    font-weight: 700;
  }
  
  .clock #local-tz{
    font-size: 11px;
    opacity: 0.7;
  }
}

/* Mobile-first interaction refinements */
@media(max-width:600px){
  .controls-row{gap:8px;align-items:center}
  .controls-right{
    order:1; width:100%; margin:0 auto; display:grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap:4px; padding:0 4px;
    max-width:100%;
  }
  .controls-right .filter{
    display:contents;
  }
  .controls-right .btn{
    width:100%;
    margin-left:0;
    font-size:10px !important;
    line-height:1.2;
    white-space:normal;
    text-align:center;
    padding:6px 4px;
    min-height:auto;
    height:auto;
  }
  #country-filter-btn{
    font-size:10px !important;
    padding:6px 4px !important;
  }
  /* remove default left margin from buttons inside the centered group */
  .controls-right .btn{margin-left:0}
  /* remove asymmetric left margin on paired button for perfect centering */
  .btn.pair{margin-left:0}
  .controls-row.expanded .controls-right{display:grid !important}
  #controls-toggle{display:none !important}
  /* mobile search: always visible, centered under buttons */
  .controls-row{display:flex;flex-direction:column;align-items:center}
  #search-toggle{display:none !important}
  #search{order:2; width:100%; margin-top:10px; display:block !important; max-width:680px; margin-left:auto; margin-right:auto}
  /* notifications button visible again (JS will hide if unsupported) */
  .tooltip-wrap{display:none !important}
  /* Privacy banner mobile adjustments */
  .privacy-banner .pb-actions .btn{
    min-width:80px;
    height:28px;
    padding:0 8px;
    font-size:11px;
  }
  .privacy-banner .pb-actions{
    gap:6px;
  }
  .privacy-banner .pb-wrap{
    padding:10px 12px;
    gap:12px;
  }
  .privacy-banner .pb-title{
    font-size:12px;
  }
  .privacy-banner .pb-desc{
    font-size:10px;
  }
  /* place remaining buttons side-by-side */
  .controls-right .pair{width:auto; order:1; flex:initial; max-width:none}
  .controls-right .filter{order:1; width:auto; flex:initial; max-width:none}
  .btn{width:100%;min-height:40px;justify-content:center;padding:8px 12px;border-radius:12px;font-size:12px;font-weight:500}
  #country-filter-btn{width:100%}
  .filter{width:100%}
  input[type="search"]{width:100%}
  .filter-panel{left:0;right:0;min-width:unset;width:100%}
  .grid{gap:10px}
  .card{padding:12px;border-radius:12px}
  .card .title{gap:10px}
  .name{font-size:13px}
  .mic{font-size:11px}
  .pill{font-size:11px;padding:4px 8px}
  .row{font-size:12px}
  .row.secondary{font-size:10px}
}

/* iOS A2HS centered modal (invoked on click only) */
.a2hs-backdrop{position:fixed;inset:0;background:rgba(0,0,0,0.45);backdrop-filter:blur(2px);z-index:49;display:none}
.a2hs-backdrop:not([hidden]){display:block}
.a2hs-modal.center{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:50;pointer-events:none}
.a2hs-modal.center:not([hidden]){display:flex}
.a2hs-card{pointer-events:auto;background:rgba(18,19,24,0.98);border:1px solid var(--border);border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,0.6);max-width:360px;width:90%}
.a2hs-close{position:absolute;top:8px;right:8px;background:transparent;border:none;color:var(--text);font-size:18px;padding:4px;cursor:pointer;opacity:0.7}
.a2hs-close:hover{opacity:1}
.a2hs-card-body{padding:18px 16px 16px 16px;text-align:center}
.a2hs-emoji{font-size:28px;margin-bottom:6px}
.a2hs-title{font-weight:700;margin-bottom:6px}
.a2hs-desc{font-size:13px;color:var(--muted)}
.a2hs-shareicon{width:18px;height:18px;display:inline-block;background:var(--text);mask:url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8\"/><polyline points=\"16,6 12,2 8,6\"/><line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"15\"/></svg>') center/contain no-repeat}

/* Leaflet Map Styles */
.leaflet-map {
  position: relative;
  width: 100%;
  height: 520px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  z-index: 1; /* Stay behind header */
}

.leaflet-container {
  background: var(--panel);
}

/* Dark theme for Leaflet - matching site colors */
.leaflet-container {
  background: var(--panel) !important;
}

/* Apply dark filter to OpenStreetMap tiles if they're used as fallback */
.leaflet-tile[src*="openstreetmap"] {
  filter: brightness(0.4) invert(1) contrast(2.5) hue-rotate(200deg) saturate(0.2) brightness(0.6);
}

/* Ensure dark background even if tiles fail - matching site theme */
.leaflet-map {
  background: var(--panel) !important;
}

/* Map markers */
.map-label {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  min-width: 65px;
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: all 0.2s ease;
}

.marker:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

.marker.up {
  background: var(--card);
  color: #1fcf7c;
  border-color: rgba(31, 207, 124, 0.6);
  box-shadow: 0 4px 12px rgba(31, 207, 124, 0.15);
}

.marker.up:hover {
  border-color: rgba(31, 207, 124, 0.8);
  box-shadow: 0 6px 16px rgba(31, 207, 124, 0.25);
}

.marker.down {
  background: var(--card);
  color: #ff5c7a;
  border-color: rgba(255, 92, 122, 0.6);
  box-shadow: 0 4px 12px rgba(255, 92, 122, 0.15);
}

.marker.down:hover {
  border-color: rgba(255, 92, 122, 0.8);
  box-shadow: 0 6px 16px rgba(255, 92, 122, 0.25);
}

.marker .name {
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 2px;
}

.marker .pct {
  font-size: 9px;
  font-weight: 600;
}

/* Ensure header stays on top */
.site-header {
  z-index: 1000 !important;
}