
:root {
  --bg:#071019; --panel:#0c1723; --panel2:#101f2e; --line:#24364a; --text:#edf6ff; --muted:#8ca2b6;
  --accent:#64e3cf; --accent2:#76a9ff; --warn:#ffbe64; --bad:#ff6f7d; --good:#76e6a8;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:13px Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Arial,sans-serif;overflow:hidden}
button,input,select,textarea{font:inherit}
button{color:inherit}
.topbar{height:72px;display:flex;align-items:center;gap:14px;padding:0 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0d1927,#0a1420);position:relative;z-index:5000}
.brand{min-width:265px}
.brand h1{font-size:18px;letter-spacing:2px;margin:0 0 3px;font-weight:850}
.brand .sub{font-size:10px;color:var(--muted);letter-spacing:1.6px;text-transform:uppercase}
.badge{border:1px solid #2a675f;background:#10302e;color:#91f1df;border-radius:99px;padding:6px 10px;font-size:10px;font-weight:800;letter-spacing:.6px;white-space:nowrap}
.top-actions{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.btn{border:1px solid #33495e;background:#132233;color:#d9e7f5;border-radius:8px;padding:8px 10px;cursor:pointer;font-weight:700;font-size:11px}
.btn:hover{border-color:#52718f;background:#172a3e}
.btn.primary{background:#174a46;border-color:#2d8177;color:#cffff6}
.btn.warn{border-color:#7a5b2f;color:#ffd79a}
.btn.bad{border-color:#74404a;color:#ffb2bb}
.layout{height:calc(100vh - 72px);display:grid;grid-template-columns:360px minmax(0,1fr) 360px}
.sidebar{background:var(--panel);overflow:auto;position:relative;z-index:900}
.left{border-right:1px solid var(--line)} .right{border-left:1px solid var(--line)}
#map{height:100%;width:100%;background:#08131d}
.section{padding:14px 15px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:9px;color:#7f98ad;letter-spacing:1.7px;text-transform:uppercase;font-weight:850;margin-bottom:8px}
.searchrow{display:grid;grid-template-columns:1fr 105px;gap:7px}
input,select,textarea{width:100%;border:1px solid #2f455b;background:#08131f;color:#eaf4ff;border-radius:8px;padding:9px 10px;outline:none}
input:focus,select:focus,textarea:focus{border-color:#4f9b91;box-shadow:0 0 0 2px rgba(100,227,207,.08)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{border:1px solid #30465b;background:#101f30;color:#bacbda;border-radius:99px;padding:6px 9px;cursor:pointer;font-size:10px;font-weight:700}
.chip.active{border-color:#4aa497;background:#143b38;color:#cffff7}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
.stat{border:1px solid #213449;border-radius:8px;text-align:center;padding:9px 5px;background:#0a1622}
.stat b{display:block;font-size:18px;line-height:1.05} .stat span{font-size:8px;color:#7890a6;text-transform:uppercase;letter-spacing:1px}
.toolbar-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.list{padding:0 8px 14px}
.entry{padding:11px 10px;margin:6px 0;border:1px solid transparent;border-radius:9px;cursor:pointer;background:#0a1622}
.entry:hover{border-color:#29445d;background:#0d1b29}
.entry.selected{border-color:#3f8f86;background:#102925;box-shadow:inset 3px 0 #65dfca}
.entry .name{font-weight:800;line-height:1.25}
.entry .meta{font-size:10px;color:#87a0b6;margin-top:5px;line-height:1.4}
.pills{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.pill{border:1px solid #344a60;border-radius:99px;padding:3px 6px;font-size:9px;color:#adc0d2;background:#0d1a27}
.pill.exact{border-color:#2f7e70;color:#8ef0dc}
.pill.warn{border-color:#74582f;color:#ffd48c}
.marker{width:24px;height:24px;border-radius:7px;border:2px solid rgba(255,255,255,.82);box-shadow:0 2px 8px #0009;display:flex;align-items:center;justify-content:center;color:#061018;font-size:9px;font-weight:950}
.marker.dim{opacity:.62;transform:scale(.84)}
.leaflet-control-layers,.leaflet-bar a{background:#0e1b29!important;color:white!important;border-color:#34495e!important}
.leaflet-control-attribution{background:#071019cc!important;color:#8197aa!important} .leaflet-control-attribution a{color:#79b7ff!important}
.detail-head{padding:16px;border-bottom:1px solid var(--line);position:sticky;top:0;background:#0c1723f2;backdrop-filter:blur(8px);z-index:20}
.detail-head h2{font-size:17px;margin:0 0 5px;line-height:1.2}
.detail-head .sub{color:#8ba2b6;font-size:10px}
.card{padding:14px 15px;border-bottom:1px solid var(--line)}
.card h3{font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#7e97ad;margin:0 0 9px}
.card p{line-height:1.55;color:#c7d5e2;margin:8px 0}
.kv{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #1d3042;padding:7px 0;font-size:10px} .kv:first-of-type{border-top:0}
.kv span{color:#7f96aa} .kv b{text-align:right}
.note{border-left:3px solid #3f617b;background:#0a1724;padding:9px 10px;border-radius:5px;line-height:1.45;color:#c4d3df}
.note.warning{border-color:#a27539;background:#211a10;color:#efd2a7}
.metric{display:grid;grid-template-columns:98px 1fr 30px;gap:7px;align-items:center;margin:7px 0;font-size:10px}
.metric label{color:#91a6b8} .bar{height:7px;background:#1a2b3c;border-radius:9px;overflow:hidden} .fill{height:100%;background:linear-gradient(90deg,#4a96ff,#65dfca)}
.metric b{font-size:9px;text-align:right}
.source{display:block;border:1px solid #22384b;background:#091722;border-radius:7px;padding:8px 9px;margin:6px 0;text-decoration:none;color:#bcd2e5}
.source:hover{border-color:#4c718e} .source strong{display:block;color:#e2effa;font-size:10px} .source span{font-size:9px;color:#7e97aa}
.nearby{display:grid;gap:5px} .near{border:1px solid #22374a;border-radius:7px;padding:7px 8px;cursor:pointer;background:#091522} .near:hover{border-color:#46647e}
.routebox{background:#0b1b28;border:1px solid #294154;border-radius:9px;padding:10px}
.routeitem{display:flex;gap:7px;align-items:center;padding:6px 0;border-bottom:1px solid #1a2d3e} .routeitem:last-child{border-bottom:0}
.route-num{width:19px;height:19px;border-radius:99px;background:#5d4e90;color:#fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800}
.route-name{flex:1;font-size:10px}
.intel-card{border:1px solid #23384a;border-radius:8px;padding:10px;margin:7px 0;background:#091622;cursor:pointer}
.intel-card:hover{border-color:#49697f}
.intel-card strong{display:block;font-size:11px} .intel-card small{color:#7d95aa;line-height:1.4;display:block;margin-top:4px}
.modal{position:fixed;inset:0;background:#02070dcc;z-index:10000;display:none;align-items:center;justify-content:center;padding:20px}
.modal.show{display:flex}
.modalbox{width:min(920px,96vw);max-height:88vh;overflow:auto;background:#0c1824;border:1px solid #344b60;border-radius:14px;box-shadow:0 20px 80px #000}
.modalhead{position:sticky;top:0;background:#0c1824f2;backdrop-filter:blur(8px);padding:14px 16px;border-bottom:1px solid #26394d;display:flex;align-items:center;gap:10px;z-index:2}
.modalhead h2{margin:0;font-size:16px} .modalhead button{margin-left:auto}
.modalbody{padding:16px}
.matrix{width:100%;border-collapse:collapse;font-size:10px} .matrix th,.matrix td{padding:8px;border-bottom:1px solid #1d3041;text-align:left} .matrix th{color:#7e97aa;text-transform:uppercase;font-size:8px;letter-spacing:1px;position:sticky;top:50px;background:#0c1824}
.callout{border:1px solid #325a57;background:#0f2726;border-radius:9px;padding:10px 11px;color:#bdece5;line-height:1.45}
.coord{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:10px;color:#b5cbe0}
.empty{padding:20px 12px;color:#7890a4;text-align:center}
.mobiletab{display:none}
@media(max-width:1000px){
  .layout{grid-template-columns:310px minmax(0,1fr)} .right{position:fixed;right:0;top:72px;bottom:0;width:360px;transform:translateX(101%);transition:.2s;box-shadow:-15px 0 40px #0008} .right.show{transform:none}
}
@media(max-width:700px){
  body{overflow:hidden} .topbar{height:62px;padding:0 10px} .brand{min-width:0} .brand h1{font-size:14px} .brand .sub,.badge,.top-actions .desktop{display:none}
  .layout{height:calc(100vh - 62px);display:block} #map{height:100%} .left{position:fixed;left:0;top:62px;bottom:0;width:min(340px,92vw);transform:translateX(-101%);transition:.2s;z-index:6000;box-shadow:15px 0 40px #0008} .left.show{transform:none}
  .right{top:62px;width:min(360px,94vw);z-index:6000}
  .mobiletab{display:inline-block}
}
.route-editor{display:grid;gap:7px;margin-top:14px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.formgrid label{display:grid;gap:5px;color:#8ca2b6;font-size:11px}.formgrid .wide{grid-column:1/-1}.loginbox{max-width:560px}.loginbox h1{font-size:32px;letter-spacing:2px}.loginbox p{line-height:1.65;color:#a9bbce}.loginbox .btn{display:inline-block;text-decoration:none}.member{display:flex;justify-content:space-between;align-items:center;margin:10px 0;gap:12px}.member select{max-width:120px}.member small{display:block;color:#8ca2b6}.screenshots{display:grid;gap:12px;margin-top:12px}.screenshots img{display:block;width:100%;border-radius:8px;margin:6px 0}.screenshots strong{color:#64e3cf}pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:11px}#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#173c38;border:1px solid #64e3cf;color:#effffb;padding:12px 18px;border-radius:10px;z-index:20000;max-width:92vw;display:none}#toast.show{display:block}.btn:disabled{opacity:.45;cursor:not-allowed}input[type=file]{font-size:10px}#comments p,#testReports p{white-space:pre-wrap}a.btn{color:inherit}#loginModal{z-index:15000}#editorMessage{margin-top:12px;color:#ffbe64}.topbar{gap:8px}.brand{min-width:230px}.top-actions{flex-wrap:wrap;gap:5px}.top-actions .btn{font-size:10px;padding:7px 8px}@media(max-width:700px){.formgrid{grid-template-columns:1fr}.brand{min-width:0}.topbar{height:100px}.layout{height:calc(100vh - 100px)}.left,.right{top:100px}.top-actions{justify-content:flex-end}.loginbox h1{font-size:24px}}
[hidden]{display:none!important}.detail-head .mobiletab{margin-top:8px}
.tutorialbox{width:min(1040px,96vw)}.tutorial-layout{display:grid;grid-template-columns:220px 1fr;min-height:450px}.tutorial-layout nav{padding:18px 10px;border-right:1px solid #24364a;background:#09131e}.tutorial-tab{display:flex;gap:9px;align-items:center;width:100%;text-align:left;border:1px solid transparent;background:none;color:#8ca2b6;padding:13px 10px;border-radius:8px;cursor:pointer;font-size:12px}.tutorial-tab.active{background:#143b38;color:#cffff7;border-color:#35675e}.tutorial-tab span{color:#64e3cf}.tutorial-layout .modalbody{max-height:72vh;overflow:auto;font-size:14px;line-height:1.65;padding:26px 30px}.tutorial-layout h1{font-size:27px;line-height:1.2;margin:10px 0 20px}.tutorial-layout p,.tutorial-layout li{color:#bdd0e0}.tutorial-layout li{margin:9px 0}.tutorial-footer{display:flex;flex-wrap:wrap;gap:8px;border-top:1px solid #24364a;padding-top:20px;margin-top:25px}.tutorial-layout code{background:#16312d;padding:2px 5px;color:#97f1df;border-radius:4px}.tutorial-status{display:flex;gap:12px;flex-wrap:wrap;color:#64e3cf;margin:16px 0}.tutorial-layout .matrix{font-size:12px}.tutorial-layout .matrix td{vertical-align:top}.tutorial-layout .matrix th{position:static}#tutorialProgress{font-size:11px;color:#8ca2b6;margin-left:10px}@media(max-width:700px){.tutorial-layout{grid-template-columns:1fr}.tutorial-layout nav{display:flex;overflow:auto;gap:4px;padding:8px;border-right:0;border-bottom:1px solid #24364a}.tutorial-tab{width:auto;white-space:nowrap;flex-shrink:0;padding:9px}.tutorial-layout .modalbody{padding:18px;max-height:65vh}.tutorial-layout h1{font-size:23px}}
#crewPicker{width:150px;font-size:11px}.route-handle{display:flex;align-items:center;justify-content:center;width:24px;height:24px;border:2px solid white;border-radius:50%;background:#8253b2;font-weight:800;box-shadow:0 2px 6px #0008;color:white}.route-handle.editable{background:#e4bc65;color:#17212b;cursor:grab}.route-name small{display:block;color:#8ca2b6;margin-top:3px;font-size:9px}.point-buttons{display:flex;flex-wrap:wrap;gap:3px;max-width:105px}.point-buttons .btn{font-size:9px;padding:3px 5px}.invite-form{display:grid;gap:8px;grid-template-columns:1fr 1fr}.invite-form label{font-size:11px;color:#8ca2b6}.invite-form button{grid-column:1/-1}#crewLobbyModal form{margin:20px 0;padding-top:12px;border-top:1px solid #24364a}#crewLobbyModal form .btn{margin-top:10px}#availableCrews .btn{margin:5px}#inviteResult{margin:12px 0}.topbar .brand{min-width:190px}.topbar .brand h1{font-size:16px}@media(max-width:700px){#crewPicker{width:110px}.invite-form{grid-template-columns:1fr}}
