:root{--field-surface:#16242bf2;--field-border:#79929965;--field-divider:#79929940;--field-text:#e0edf0;--field-muted:#a9bec5;--field-accent:#63e1d5;--field-input:#1d3038;--field-hover:#30474f}
.dropdown,.panel,.session-panel{background:var(--field-surface);border:1px solid var(--field-border);border-radius:3px;color:var(--field-text);box-shadow:0 4px 12px #07101330;font:13px/1.6 system-ui}
.dropdown h2,.panel h2,.session-panel h2{color:var(--field-accent);font:500 11px/1.6 system-ui;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--field-divider);margin:0 0 10px;padding:0 0 10px}
.dropdown h2,.settings h2{padding:12px;margin:0}
.dropdown .choice{padding:12px;gap:12px;min-height:48px;color:var(--field-text);border-bottom:1px solid var(--field-divider)}
.dropdown .choice:last-child{border-bottom:0}
.dropdown .choice:hover{background:#30474f50}
.dropdown .choice strong{font-weight:500}
.dropdown .choice small,.panel p,.session-panel p,.terrain-settings small{color:var(--field-muted);font-size:12px;letter-spacing:0;line-height:1.6}
.dropdown button,.panel button,.session-panel button,.leaflet-popup-content button,.maplibregl-popup-content button{background:var(--field-input);color:var(--field-text);border:1px solid var(--field-border);border-radius:3px;min-height:44px;padding:10px 12px;font:13px/1.4 system-ui;box-shadow:none}
.dropdown button:hover,.panel button:hover,.session-panel button:hover,.leaflet-popup-content button:hover,.maplibregl-popup-content button:hover{background:var(--field-hover);border-color:var(--field-accent)}
.dropdown button:disabled,.panel button:disabled,.session-panel button:disabled{opacity:.45;cursor:default}
.dropdown input:not([type=checkbox]):not([type=radio]):not([type=range]),.dropdown textarea,.session-panel input,.session-panel textarea,.dropdown select,.session-panel select{background:var(--field-input)!important;color:var(--field-text)!important;border:1px solid var(--field-border)!important;border-radius:3px;min-height:44px;padding:10px;font:13px system-ui;box-sizing:border-box}
.dropdown input[type=range],.dropdown input[type=checkbox],.dropdown input[type=radio],.session-panel input[type=checkbox]{accent-color:var(--field-accent)}
.dropdown input[type=range]{min-height:24px;cursor:pointer}
.dropdown :is(button,input,select,textarea):focus-visible,.session-panel :is(button,input,select,textarea):focus-visible,.leaflet-popup-content button:focus-visible,.maplibregl-popup-content button:focus-visible{outline:2px solid var(--field-accent);outline-offset:2px}
.dropdown output,.session-panel output{color:var(--field-accent)}
#callsignform,.settings>div[style]{border-color:var(--field-divider)!important}
.terrain-settings{padding-bottom:12px;border-bottom:1px solid var(--field-divider)}
.terrain-settings small{display:block}.session-panel form{margin:8px 0}.session-panel label{font-size:12px;color:var(--field-muted)}
.leaflet-popup-content-wrapper,.maplibregl-popup-content{background:var(--field-surface);color:var(--field-text);border:1px solid var(--field-border);border-radius:3px;box-shadow:0 4px 12px #07101330}
.leaflet-popup-content strong,.maplibregl-popup-content strong{color:var(--field-accent);font-weight:500;border-bottom-color:var(--field-divider)}
.leaflet-popup-content p,.maplibregl-popup-content p{color:var(--field-muted)}
.leaflet-popup-content p+p{color:var(--field-accent)}
.leaflet-popup-tip{background:#16242b;border-color:var(--field-border)}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip{border-top-color:#16242b}.maplibregl-popup-anchor-top .maplibregl-popup-tip{border-bottom-color:#16242b}.maplibregl-popup-anchor-left .maplibregl-popup-tip{border-right-color:#16242b}.maplibregl-popup-anchor-right .maplibregl-popup-tip{border-left-color:#16242b}
.leaflet-container a.leaflet-popup-close-button,.maplibregl-popup-close-button{color:var(--field-text);border-radius:3px}
.leaflet-container a.leaflet-popup-close-button:hover,.maplibregl-popup-close-button:hover{color:var(--field-accent);background:var(--field-hover)}

#mapsmenu{max-height:calc(100dvh - 80px);overflow:auto;overscroll-behavior:contain}#mapsmenu section[hidden]{display:none}#mapsmenu section{border-bottom:1px solid var(--field-divider)}#mapsmenu .opacity-controls{padding:8px 12px 12px}#mapsmenu .opacity-controls label{display:flex;justify-content:space-between}#mapsmenu small{display:block}

#mapsmenu .opacity-controls[hidden]{display:none}#mapsmenu .overlay-choice{min-height:48px;border:0}#mapsmenu .overlay-choice span{font-size:13px}#mapsmenu .overlay-show{display:flex;align-items:center;justify-content:flex-start;gap:10px;margin-bottom:12px}#mapsmenu .layer-order-hint{margin:8px 12px;font-size:11px;color:var(--field-muted)}.overlay-order-actions{display:flex;gap:6px;margin-top:8px}.overlay-order-actions button{flex:1;font-size:12px;padding:8px}

.layer-visibility-toggle{border-radius:50%!important}.overlay-show[hidden]{display:none!important}

.dropdown .campaign-invitation {
 padding-inline-start: 45px;
}
.dropdown .campaign-invitation:hover { background: transparent; }

.help-overview {
 position: fixed;
 inset: 0;
 box-sizing: border-box;
 width: 100%;
 height: 100%;
 max-width: none;
 max-height: none;
 margin: 0;
 padding: 0;
 border: 0;
 background: transparent;
 overflow: hidden;
}
.help-overview::backdrop { background: transparent; }
.help-overview:has(.help-spotlight[hidden])::backdrop { background: #071013ba; }
.help-spotlight {
 position: fixed;
 box-sizing: border-box;
 border: 3px solid var(--field-accent);
 border-radius: 8px;
 box-shadow: 0 0 0 200vmax #071013cf, inset 0 0 9px #63e1d58a;
 pointer-events: none;
}
.help-overview .help-card {
 position: absolute;
 inset: 50% auto auto 50%;
 transform: translate(-50%, -50%);
 width: min(540px, calc(100vw - 32px));
 max-height: calc(100dvh - 160px);
 padding: clamp(16px, 4vw, 28px);
 overflow: auto;
}
.help-card h2 { font-size: clamp(18px, 4vw, 24px); padding: 0 0 10px; }
.help-copy p { font-size: 15px; }
.help-tour-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.help-tour-actions button:disabled { opacity: .45; }
.help-tour-actions [data-help="next"] { border-color: var(--field-accent); }
.help-disclaimer summary { cursor: pointer; color: var(--field-accent); }
.help-disclaimer[hidden] { display: none; }
@media (max-width: 365px) {
 .atak-toolbar { gap: 2px; }
 .atak-toolbar button { width: 42px; padding-inline: 5px; }
}

.atak-toolbar #routetool { font: 30px/1 system-ui; }
.route-panel { z-index: 1050; }
.route-panel > p.route-status { display: block; margin: 0 0 10px; }
.route-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.route-actions button:disabled { opacity: .5; }
.route-actions [hidden] { display: none; }
.route-editing, .route-editing #terrain-inline .maplibregl-canvas { cursor: crosshair; }
@media (max-width: 425px) {
 .atak-toolbar { gap: 2px; }
 .atak-toolbar button { width: min(46px, calc((100vw - 26px) / 8)); padding-inline: 3px; }
 .atak-toolbar button svg { width: min(30px, calc((100vw - 74px) / 8)); }
}

.help-disclaimer {
 margin: 0 0 12px;
 padding: 12px;
 border: 1px solid var(--field-border);
 background: var(--field-input);
}
.help-disclaimer h3 { margin: 0; color: var(--field-accent); font-size: 13px; }
.help-disclaimer p { margin: 6px 0; }
.help-disclaimer strong, .route-panel .route-safety { color: var(--field-text); }
.help-disclaimer a { color: var(--field-accent); text-decoration: underline; }


.offline-panel #offlinedetail {
 display: block;
 width: 100%;
 max-width: 100%;
 margin: 4px 0 8px;
}
.offline-panel p, .offline-panel button {
 white-space: normal;
 overflow-wrap: anywhere;
}

#joined h3 { color: var(--field-accent); margin: 10px 0 4px; font-size: 13px; }
#sessionmembers { margin: 0 0 6px; padding-inline-start: 20px; overflow-wrap: anywhere; }

.session-menu #sessionid { font-size: 16px; }
@media (max-width: 600px), (pointer: coarse) and (max-height: 600px) {
 .session-menu {
  top: calc(60px + env(safe-area-inset-top));
  bottom: auto;
  max-height: calc(100dvh - 72px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
 }
}

.panel.first-visit-notice {
 position: fixed;
 inset: 0;
 width: min(560px, calc(100vw - 24px));
 max-height: calc(100dvh - 24px);
 margin: auto;
 padding: 16px;
 overflow: auto;
}
.first-visit-notice::backdrop { background: #071013cf; }
.first-visit-notice .help-disclaimer { margin: 12px 0; }
.first-visit-notice .help-disclaimer h3 { margin-top: 14px; }