:root {
  --bg: #161616;
  --surface: #1e1e1e;
  --surface2: #262626;
  --surface-hover: #2a2a2a;
  --border: #303030;
  --border-light: #3a3a3a;
  --text: #e4e0d8;
  --text-muted: #807b73;
  --accent: #c4a35a;
  --accent-dim: #8a7340;
  --accent-bg: rgba(196,163,90,0.08);

  --elg: #e07a4f;
  --hjort: #6ba368;
  --villrein: #5b8ecf;
  --storvilt: #b07cc1;

  --rype: #d4a057;
  --hare: #8bb8d0;
  --rev: #cf6b4e;
  --smaavilt: #7eb88a;

  --tag-bg: rgba(255,255,255,0.05);
  --radius: 8px;
  --radius-lg: 12px;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);height:100vh;display:flex;flex-direction:column;overflow:hidden;}
a{color:var(--accent);text-decoration:none;}
a:hover{text-decoration:underline;}

/* ─── Header ─── */
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;height:48px;display:flex;align-items:center;gap:12px;flex-shrink:0;z-index:1000;}
.logo{font-family:'Fraunces',serif;font-size:18px;font-weight:700;color:var(--accent);letter-spacing:-.5px;text-decoration:none !important;margin-right:4px;}

.type-toggle{display:flex;background:var(--bg);border:1px solid var(--border);border-radius:6px;overflow:hidden;}
.type-btn{background:none;border:none;color:var(--text-muted);padding:5px 14px;font-size:12px;font-family:inherit;cursor:pointer;transition:all .15s;}
.type-btn:hover{color:var(--text);}
.type-btn.active{background:var(--accent-bg);color:var(--accent);font-weight:600;}

.header-filters{display:flex;gap:5px;flex:1;flex-wrap:wrap;align-items:center;}
.sp-btn{background:var(--tag-bg);border:1px solid var(--border);color:var(--text-muted);padding:4px 10px;border-radius:14px;font-size:11px;font-family:inherit;cursor:pointer;transition:all .15s;display:flex;align-items:center;gap:4px;}
.sp-btn:hover{border-color:var(--accent-dim);color:var(--text);}
.sp-btn.active{border-color:var(--accent);color:var(--accent);background:var(--accent-bg);}
.sp-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

.header-right{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.freshness{font-size:10px;color:var(--text-muted);white-space:nowrap;}
.freshness.stale{color:var(--elg);}
.icon-btn{background:var(--tag-bg);border:1px solid var(--border);color:var(--text-muted);width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.icon-btn:hover{border-color:var(--accent);color:var(--accent);}
.icon-btn.open{background:var(--accent-bg);border-color:var(--accent);color:var(--accent);}

/* ─── Filter drawer ─── */
.filter-drawer{background:var(--surface);border-bottom:1px solid var(--border);padding:0 16px;max-height:0;overflow:hidden;transition:max-height .25s,padding .25s;display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.filter-drawer.open{max-height:60px;padding:8px 16px;}
.filter-group{display:flex;align-items:center;gap:6px;}
.filter-group label{font-size:11px;color:var(--text-muted);white-space:nowrap;}
.filter-group select{background:var(--bg);border:1px solid var(--border);color:var(--text);padding:4px 8px;border-radius:6px;font-size:11px;font-family:inherit;}
.filter-group select:focus{outline:none;border-color:var(--accent-dim);}
.filter-reset{background:none;border:none;color:var(--accent-dim);font-size:11px;cursor:pointer;font-family:inherit;padding:4px 8px;}
.filter-reset:hover{color:var(--accent);}

/* ─── Main ─── */
.main-wrap{flex:1;display:flex;position:relative;overflow:hidden;}
#map{flex:1;background:var(--bg);}

/* ─── Sidebar ─── */
.sidebar{width:360px;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:var(--border) transparent;}
.sidebar-header{padding:12px 16px 8px;border-bottom:1px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:10;}
.sidebar-header h2{font-family:'Fraunces',serif;font-size:14px;font-weight:700;margin-bottom:6px;}
.count{color:var(--text-muted);font-weight:400;font-family:'DM Sans',sans-serif;font-size:12px;}
.search-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:6px 10px;color:var(--text);font-size:12px;font-family:inherit;}
.search-input:focus{outline:none;border-color:var(--accent-dim);}
.search-input::placeholder{color:#484848;}

/* ─── Cards ─── */
.card{padding:12px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .12s;}
.card:hover{background:var(--surface-hover);}
.card.hl{background:var(--accent-bg);border-left:3px solid var(--accent);}
.card h3{font-size:12px;font-weight:500;line-height:1.4;margin-bottom:4px;}
.card-meta{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:4px;}
.tag{font-size:10px;padding:1px 7px;border-radius:10px;background:var(--tag-bg);color:var(--text-muted);border:1px solid var(--border);white-space:nowrap;}
.tag.sp{font-weight:500;}
.tag.sp-elg{color:var(--elg);border-color:rgba(224,122,79,.25);}
.tag.sp-hjort{color:var(--hjort);border-color:rgba(107,163,104,.25);}
.tag.sp-villrein{color:var(--villrein);border-color:rgba(91,142,207,.25);}
.tag.sp-storvilt{color:var(--storvilt);border-color:rgba(176,124,193,.25);}
.tag.sp-rype{color:var(--rype);border-color:rgba(212,160,87,.25);}
.tag.sp-hare{color:var(--hare);border-color:rgba(139,184,208,.25);}
.tag.sp-rev{color:var(--rev);border-color:rgba(207,107,78,.25);}
.tag.sp-smaavilt,.tag.sp-småvilt{color:var(--smaavilt);border-color:rgba(126,184,138,.25);}
.tag.sp-bever{color:#b89460;border-color:rgba(184,148,96,.25);}
.tag.sp-gås,.tag.sp-gjess{color:#7aab5e;border-color:rgba(122,171,94,.25);}
.tag.sp-and{color:#5ea0ab;border-color:rgba(94,160,171,.25);}
.card-desc{font-size:10px;color:var(--text-muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-foot{display:flex;justify-content:space-between;align-items:center;margin-top:5px;}
.card-price{font-size:11px;font-weight:700;color:var(--accent);}
.card-link{font-size:10px;color:var(--accent-dim);text-decoration:none;}
.card-link:hover{color:var(--accent);text-decoration:underline;}
.card-provider{font-size:10px;color:var(--text-muted);margin-top:1px;opacity:.7;}
.card-deadline{font-size:10px;font-weight:500;}
.card-deadline.open{color:var(--hjort);}
.card-deadline.closed{color:var(--text-muted);opacity:.5;}

/* ─── Popups ─── */
.leaflet-popup-content-wrapper{background:var(--surface)!important;color:var(--text)!important;border-radius:10px!important;border:1px solid var(--border)!important;box-shadow:0 8px 32px rgba(0,0,0,.5)!important;}
.leaflet-popup-tip{background:var(--surface)!important;}
.leaflet-popup-content{margin:12px 14px!important;font-family:'DM Sans',sans-serif!important;font-size:12px!important;line-height:1.5!important;}
.pop-title{font-weight:700;font-size:13px;margin-bottom:5px;line-height:1.3;}
.pop-tags{margin-bottom:3px;}
.pop-info{color:var(--text-muted);font-size:11px;margin-bottom:1px;}
.pop-link{display:inline-block;margin-top:6px;color:var(--accent);font-size:11px;font-weight:500;}

/* ─── Markers ─── */
.mk-hl div{animation:pulse 1s ease-in-out infinite;}
@keyframes pulse{0%,100%{box-shadow:0 2px 8px rgba(0,0,0,.5),0 0 12px currentColor;transform:scale(1);}50%{box-shadow:0 2px 16px rgba(0,0,0,.5),0 0 28px currentColor,0 0 48px currentColor;transform:scale(1.15);}}
.mk-dim div{opacity:.15!important;}

/* ─── Loading state ─── */
.loading-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:800;background:rgba(22,22,22,.88);transition:opacity .25s;}
.loading-state.hidden{opacity:0;pointer-events:none;}
.loading-box{text-align:center;}
.spinner{width:32px;height:32px;border:2.5px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;margin:0 auto 12px;}
@keyframes spin{to{transform:rotate(360deg);}}
.loading-box p{font-size:12px;color:var(--text-muted);}

/* ─── Empty state ─── */
.empty-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:900;background:rgba(22,22,22,.88);transition:opacity .35s;}
.empty-state.hidden{opacity:0;pointer-events:none;}
.empty-box{text-align:center;max-width:340px;}
.empty-icon{color:var(--accent-dim);margin-bottom:14px;}
.empty-box h2{font-family:'Fraunces',serif;font-size:20px;margin-bottom:6px;}
.empty-box p{color:var(--text-muted);font-size:13px;margin-bottom:18px;}

/* ─── Modal ─── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);display:flex;align-items:center;justify-content:center;z-index:3000;opacity:0;pointer-events:none;transition:opacity .2s;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;max-width:560px;width:92%;max-height:88vh;overflow-y:auto;position:relative;}
.modal-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--text-muted);font-size:20px;cursor:pointer;line-height:1;}
.modal-close:hover{color:var(--text);}
.modal h2{font-family:'Fraunces',serif;font-size:18px;color:var(--accent);margin-bottom:4px;}
.modal-sub{color:var(--text-muted);font-size:12px;margin-bottom:16px;}
.step{display:flex;gap:12px;margin-bottom:16px;}
.step-n{width:24px;height:24px;background:var(--accent);color:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;margin-top:1px;}
.step-body{flex:1;}
.step-body h3{font-size:13px;margin-bottom:4px;}
.step-body p{font-size:11px;color:var(--text-muted);margin-bottom:6px;line-height:1.5;}
.code-block{background:#0e0e0e;border:1px solid var(--border);border-radius:var(--radius);padding:10px;position:relative;margin-bottom:6px;}
.code-block code{font-family:'DM Mono',monospace;font-size:10px;color:#a8d8a8;white-space:pre-wrap;word-break:break-all;line-height:1.5;display:block;max-height:120px;overflow-y:auto;}
.copy-btn{position:absolute;top:6px;right:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text-muted);padding:2px 8px;border-radius:5px;font-size:10px;cursor:pointer;font-family:inherit;z-index:2;}
.copy-btn:hover{color:var(--accent);border-color:var(--accent-dim);}
details summary{font-size:10px;color:var(--accent-dim);cursor:pointer;margin-top:4px;}
details p{font-size:10px;margin-top:4px;}
details code{background:var(--tag-bg);padding:1px 4px;border-radius:3px;font-size:9px;color:var(--accent);}
.data-input{width:100%;height:90px;background:#0e0e0e;border:1px solid var(--border);border-radius:var(--radius);padding:10px;color:var(--text);font-family:monospace;font-size:11px;resize:vertical;}
.data-input:focus{outline:none;border-color:var(--accent-dim);}
.data-input::placeholder{color:#3a3a3a;}
.modal-error{background:rgba(207,91,91,.12);border:1px solid rgba(207,91,91,.25);color:#cf5b5b;padding:6px 8px;font-size:11px;border-radius:6px;margin-top:6px;display:none;}
.primary-btn{background:var(--accent);color:var(--bg);border:none;padding:10px 24px;border-radius:var(--radius);font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;width:100%;transition:background .15s;}
.primary-btn:hover{background:#d4b36a;}
.primary-btn:disabled{opacity:.35;cursor:not-allowed;}
.progress{height:3px;background:var(--border);border-radius:2px;margin-top:12px;overflow:hidden;display:none;}
.progress-fill{height:100%;background:var(--accent);border-radius:2px;width:0%;transition:width .3s;}
.progress-text{font-size:10px;color:var(--text-muted);margin-top:5px;display:none;}

@media(max-width:900px){.sidebar{width:300px;}}
@media(max-width:768px){
  .sidebar{display:none;}
  header{height:auto;padding:8px 12px;flex-wrap:wrap;gap:6px;}
  .header-filters{order:10;width:100%;}
  .filter-drawer.open{max-height:200px;}
  .filter-drawer{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
  .filter-group{flex-direction:column;align-items:flex-start;gap:3px;}
  .filter-group select{width:100%;}
  .filter-reset{grid-column:1/-1;}
}
