:root{--panel:rgba(8,25,43,.86);--panel-strong:rgba(6,18,31,.94);--line:rgba(174,219,255,.24);--line-soft:rgba(174,219,255,.14);--text:#f4fbff;--muted:#a9c2d4;--accent:#36bffa;--accent-2:#8be7ff;--shadow:0 22px 70px rgba(0,16,38,.32)}*{box-sizing:border-box}html,body{height:100%;margin:0}body{overflow:hidden;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:#071526}a{color:inherit}button{font:inherit}#map{position:fixed;inset:0;z-index:1;width:100vw;height:100vh;background:#b9d7e6}.top-card{position:fixed;left:max(14px,env(safe-area-inset-left));top:max(14px,env(safe-area-inset-top));z-index:20;display:flex;align-items:center;gap:10px;max-width:min(440px,calc(100vw - 96px));padding:12px 14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(255,255,255,.13),rgba(255,255,255,.055)),var(--panel);box-shadow:var(--shadow);backdrop-filter:blur(20px)}.mark{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:12px;color:var(--accent-2);background:rgba(54,191,250,.16);border:1px solid rgba(139,231,255,.22)}.top-card strong{display:block;font-size:.98rem;line-height:1.1;letter-spacing:-.025em}.top-card span{display:block;margin-top:3px;color:var(--muted);font-size:.78rem;line-height:1.25}.zoom-controls{position:fixed;right:max(14px,env(safe-area-inset-right));top:max(14px,env(safe-area-inset-top));z-index:22;display:grid;gap:8px}.zoom-btn,.locate-btn,.copy-link-btn{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--line);border-radius:14px;color:var(--text);background:var(--panel);box-shadow:0 14px 36px rgba(0,16,38,.26);backdrop-filter:blur(18px);font-size:22px;font-weight:780;line-height:1;cursor:pointer;transition:background .16s ease,border-color .16s ease}.locate-btn,.copy-link-btn{font-size:16px}.zoom-btn:hover,.locate-btn:hover,.copy-link-btn:hover{border-color:rgba(54,191,250,.48);background:rgba(8,25,43,.90)}.windrose-overlay{position:fixed;left:50%;top:50%;z-index:10;width:min(62vmin,690px);height:min(62vmin,690px);transform:translate(-50%,-50%);pointer-events:none;filter:drop-shadow(0 18px 48px rgba(0,30,60,.16))}.windrose-overlay svg{display:block;width:100%;height:100%}.spot-pin{width:18px!important;height:18px!important;margin-left:-9px!important;margin-top:-9px!important;border:3px solid #fff;border-radius:999px;background:#e50083;box-shadow:0 4px 18px rgba(0,0,0,.35),0 0 0 5px rgba(229,0,131,.16)}.tile-error{display:none;position:fixed;left:50%;top:76px;z-index:30;transform:translateX(-50%);width:min(520px,calc(100vw - 28px));padding:11px 14px;border:1px solid rgba(255,227,138,.35);border-radius:16px;color:#fff7d2;background:rgba(53,37,6,.75);box-shadow:var(--shadow);backdrop-filter:blur(18px);font-size:.86rem;line-height:1.35}.tile-error.show{display:block}.bottom-tab-bar{position:fixed;left:50%;bottom:max(0px,env(safe-area-inset-bottom));z-index:25;display:flex;align-items:flex-end;gap:8px;transform:translateX(-50%);pointer-events:none}.bottom-tab{pointer-events:auto;min-width:124px;height:42px;padding:0 16px;border:1px solid var(--line);border-bottom:0;border-radius:16px 16px 0 0;color:var(--text);background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),var(--panel-strong);box-shadow:0 -10px 34px rgba(0,16,38,.22);backdrop-filter:blur(18px);font-weight:820;cursor:pointer;transition:background .16s ease,border-color .16s ease}.bottom-tab:hover{border-color:rgba(54,191,250,.48);background:rgba(8,25,43,.94)}.bottom-tab:disabled{opacity:.42;cursor:not-allowed}.bottom-tab.is-hidden{visibility:hidden;pointer-events:none}.drawer{position:fixed;left:50%;bottom:max(0px,env(safe-area-inset-bottom));z-index:26;width:min(430px,calc(100vw - 28px));max-height:min(70vh,650px);display:grid;grid-template-rows:44px 1fr;border:1px solid var(--line);border-bottom:0;border-radius:18px 18px 0 0;background:linear-gradient(135deg,rgba(255,255,255,.12),rgba(255,255,255,.045)),var(--panel-strong);box-shadow:var(--shadow);backdrop-filter:blur(22px);overflow:hidden;transform:translate(-50%,0);transition:transform .22s ease,opacity .18s ease}.drawer.is-collapsed{transform:translate(-50%,calc(100% + 4px));opacity:0;pointer-events:none}.drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:44px;padding:0 14px;border:0;border-bottom:1px solid var(--line-soft);color:var(--text);background:rgba(255,255,255,.055);font-weight:850;cursor:pointer}.drawer-arrow{font-weight:950;color:var(--accent-2)}.drawer-panel{display:none;min-height:0;overflow:hidden}.drawer-panel.is-open{display:grid;grid-template-rows:auto 1fr}.drawer-subtitle{display:grid;gap:2px;padding:10px 14px;color:var(--muted);border-bottom:1px solid rgba(174,219,255,.10);font-size:.82rem}.drawer-subtitle strong{color:var(--text);font-size:.98rem}.panel-content{overflow:auto;padding:10px 12px 16px;scrollbar-width:thin;scrollbar-color:rgba(139,231,255,.35) transparent}.spot-group+.spot-group{margin-top:12px}.spot-group h2{margin:0 0 5px;padding:0 4px;color:rgba(215,237,251,.82);font-size:.76rem;line-height:1.4;text-transform:uppercase;letter-spacing:.08em}.spot-list,.link-list{overflow:hidden;border:1px solid var(--line-soft);border-radius:15px;background:rgba(255,255,255,.045)}.spot-row,.link-row{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;width:100%;min-height:43px;padding:9px 9px 9px 12px;color:var(--text);border:0;border-bottom:1px solid rgba(174,219,255,.10);background:transparent;text-align:left;text-decoration:none;cursor:pointer}.spot-row:last-child,.link-row:last-child{border-bottom:0}.spot-row:hover,.spot-row.is-active,.link-row:hover{background:rgba(54,191,250,.11)}.name{min-width:0;font-size:.91rem;font-weight:700;line-height:1.25}.meta{display:block;margin-top:2px;color:var(--muted);font-size:.72rem;font-weight:500;overflow:hidden;text-overflow:ellipsis}.spot-link{display:grid;place-items:center;width:30px;height:30px;border:1px solid rgba(174,219,255,.14);border-radius:10px;color:var(--accent-2);background:rgba(255,255,255,.055);text-decoration:none;font-weight:800}.spot-info-tabs{display:flex;gap:8px;padding:10px 12px 0}.spot-info-tab{flex:1;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.055);color:var(--text);padding:9px 12px;font-weight:820;cursor:pointer}.spot-info-tab.is-active{border-color:rgba(54,191,250,.55);background:rgba(54,191,250,.16);color:#e8faff}.spot-info-page{display:none;min-height:0;overflow:hidden}.spot-info-page.is-active{display:block}.spot-description{padding:14px 14px 16px;color:#d7edfb;line-height:1.55;font-size:.92rem}.muted,.empty{color:var(--muted)}.empty{padding:4px 2px;margin:0}.link-tools{display:flex;justify-content:flex-end;margin:0 0 10px}.link-tools button{border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.055);color:var(--text);padding:7px 10px;font-size:.78rem;font-weight:800;cursor:pointer}.link-type+.link-type{margin-top:12px}.link-type-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 5px;padding:0 4px}.link-type-head h2{margin:0;color:rgba(215,237,251,.86);font-size:.76rem;line-height:1.4;text-transform:uppercase;letter-spacing:.08em}.move-group-up{display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.055);color:var(--accent-2);font-weight:950;cursor:pointer}.move-group-up:disabled{opacity:.28;cursor:default}.link-row{min-height:46px}.link-row .name{font-size:.9rem}@media(max-width:720px){.top-card{max-width:calc(100vw - 84px);padding:10px 12px;border-radius:16px}.mark{width:30px;height:30px;border-radius:10px}.top-card strong{font-size:.91rem}.top-card span{display:none}.zoom-btn,.locate-btn,.copy-link-btn{width:40px;height:40px;border-radius:13px}.windrose-overlay{width:min(86vmin,560px);height:min(86vmin,560px)}.drawer{width:calc(100vw - 20px);max-height:72vh;border-radius:18px 18px 0 0}.bottom-tab{min-width:0;width:calc((100vw - 28px)/2);height:42px;padding:0 10px}.spot-row{min-height:42px;padding:8px 8px 8px 11px}.name{font-size:.95rem}.spot-row .meta{display:none}}@media(min-width:960px){.drawer{left:24px;bottom:0;transform:translate(0,0);width:430px}.drawer.is-collapsed{transform:translate(0,calc(100% + 4px))}.bottom-tab-bar{left:24px;transform:none}.bottom-tab{min-width:132px}.windrose-overlay{width:min(56vmin,640px);height:min(56vmin,640px)}}

/* Update: vaste Spot-info hoogte + lokale linkvolgorde per groep */
#linksPanel{--spot-info-page-height:80px;}
#linksPanel.drawer-panel.is-open{grid-template-rows:auto auto 1fr;}
#linksPanel .spot-info-page{height:min(var(--spot-info-page-height),calc(70vh - 150px));overflow:auto;scrollbar-width:thin;scrollbar-color:rgba(139,231,255,.35) transparent;}
#linksPanel .spot-info-page.is-active{display:block;}
#spotLinksPage .panel-content{overflow:visible;padding:10px 12px 16px;}
.link-row-shell{display:grid;grid-template-columns:minmax(0,1fr) 42px;border-bottom:1px solid rgba(174,219,255,.10);}
.link-row-shell:last-child{border-bottom:0;}
.link-row-shell .link-row{border-bottom:0;border-radius:0;}
.move-link-up{display:grid;place-items:center;width:100%;min-height:46px;border:0;border-left:1px solid rgba(174,219,255,.10);background:transparent;color:var(--accent-2);font-weight:950;cursor:pointer;}
.move-link-up:hover{background:rgba(54,191,250,.11);}
.move-link-up:disabled{opacity:.28;cursor:default;background:transparent;}
.link-group-tools{display:flex;justify-content:flex-end;margin:6px 2px 0;}
.link-group-tools button{border:1px solid var(--line-soft);border-radius:999px;background:rgba(255,255,255,.045);color:var(--muted);padding:5px 8px;font-size:.72rem;font-weight:800;cursor:pointer;}
.link-group-tools button:hover{color:var(--text);border-color:rgba(54,191,250,.38);}
@media(max-width:720px){#linksPanel .spot-info-page{height:min(var(--spot-info-page-height),calc(72vh - 150px));}.move-link-up{min-height:44px;}}

.drawer-close-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:20px;
	height:20px;
	border-radius:18%;
	background:rgba(255,255,255,.15);
	border:1px solid rgba(255,255,255,.25);
	padding: 0px 0px 2px 0px;
	font-size:16px;
	font-weight:700;
	line-height:1;
	transition:all .15s ease;
}

.drawer-head:hover .drawer-close-btn{
	background:rgba(255,255,255,.25);
}

.drawer-head:active .drawer-close-btn{
	transform:scale(.95);
}