/* Offline map areas (static/pwa/offline-areas.js). Brand: navy #1F2A44, copper #B87333. */
.ofl-dialog{background:#1F2A44;border-color:#B87333}
.ofl-dialog header{background:#1F2A44;border-bottom-color:#B8733366}
.ofl-dialog header h3{color:#f3e3d3}
.ofl-dialog .ga-body{padding-bottom:18px}
.ofl-dialog .ga-btn.primary{background:#B87333;border-color:#B87333;color:#fff}
.ofl-dialog .ga-btn.primary:disabled{opacity:.45}
.ofl-dialog .ga-seg button.on{background:#B87333;border-color:#B87333;color:#fff}
.ofl-dialog .ga-progress i{background:linear-gradient(90deg,#B87333,#d9975a);transition:none;will-change:width} /* bar tracks the tile count exactly (no easing lag) */
.ofl-dialog fieldset.ofl-layers{border:1px solid #33456b;border-radius:10px;margin:10px 0;padding:6px 10px 8px}
.ofl-dialog fieldset.ofl-layers legend{color:#e3b689;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;padding:0 4px}
.ofl-dialog .ga-check{display:flex;gap:8px;align-items:flex-start;margin:6px 0;line-height:1.3}
.ofl-dialog .ga-check small{display:inline}
.ofl-dialog .ofl-lic{color:#9fb3c8;font-size:11px;margin-left:4px}
.ofl-dialog .ofl-blocked{opacity:.75}
.ofl-dialog .ofl-tabs{margin-bottom:10px}
.ofl-dialog .ofl-stat{margin:12px 0 6px}
.ofl-dialog .ofl-stat b{color:#f3c79c}
.ofl-dialog .ofl-actions{gap:8px;flex-wrap:wrap;margin-top:8px}
.ofl-dialog .ofl-quota{background:#16203a;border:1px solid #33456b;border-radius:10px;padding:10px;margin-bottom:10px;display:grid;gap:6px}
.ofl-dialog .ofl-quota small{color:#b6c4d6}
.ofl-dialog .ofl-item{flex-wrap:wrap;align-items:flex-start}
.ofl-dialog .ofl-item small{display:block}
.ofl-dialog .ofl-item .ga-progress{margin-top:6px}
.ofl-dialog .ofl-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;width:100%}
.ofl-draw-banner{position:fixed;left:50%;top:max(12px,env(safe-area-inset-top));transform:translateX(-50%);z-index:3000;background:#1F2A44;color:#fff;border:2px solid #B87333;
  border-radius:999px;padding:8px 10px 8px 16px;display:flex;gap:10px;align-items:center;box-shadow:0 8px 30px #0008;font-weight:600;max-width:94vw}
body.ofl-recording #oflFab{box-shadow:0 0 0 3px #e74c3c}
#oflFab{font-size:18px}
@media (max-width:760px){.ofl-dialog{width:100vw;max-width:100vw;max-height:100dvh;height:100dvh;border-radius:0;margin:0}}

.ofl-dialog .ofl-excl{border-left:3px solid #B87333;padding:4px 0 4px 8px;margin:8px 0}

/* Send to phone / computer, export / QR, import, "Sent to this device" (offline_send.py) */
.ofl-dialog .ofl-tabs{display:flex;flex-wrap:wrap}
.ofl-dialog .ofl-tabs button{position:relative;flex:1 1 auto;white-space:nowrap}
.ofl-badge{display:inline-block;min-width:18px;height:18px;line-height:18px;padding:0 5px;margin-left:6px;border-radius:9px;background:#B87333;color:#fff;font-size:11px;font-weight:800;text-align:center;vertical-align:middle;box-shadow:0 0 0 2px #1F2A44}
.ofl-badge[hidden]{display:none}
#oflFab,#gaPacksBtn{position:relative}
#oflFab .ofl-badge,#gaPacksBtn .ofl-badge{position:absolute;top:-6px;right:-6px;margin:0}
.ofl-dialog .ofl-sendbox{margin-top:14px;border:1px solid #B8733399;border-radius:12px;padding:10px;background:#16203a}
.ofl-dialog .ofl-send-h{color:#e3b689;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.ofl-dialog .ofl-sendbox select{flex:1 1 140px;min-width:0}
.ofl-dialog .ofl-sent-ok{border-left:3px solid #B87333;padding:6px 0 6px 10px;margin-top:8px;display:grid;gap:3px}
.ofl-dialog .ofl-sent-ok small,.ofl-dialog .ofl-share small{color:#b6c4d6;display:block}
.ofl-dialog .ofl-dropped{display:block;margin-top:4px}
.ofl-dialog .ofl-share{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-top:10px}
.ofl-dialog .ofl-share .grow{flex:1 1 200px;display:grid;gap:6px}
.ofl-dialog .ofl-qr{background:#fff;border-radius:10px;padding:8px;width:148px;height:148px;flex:0 0 auto;border:2px solid #B87333}
.ofl-dialog .ofl-qr svg{width:100%;height:100%;display:block}
.ofl-dialog .ofl-link{width:100%;font-size:12px}
.ofl-dialog .ofl-import-banner{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;background:#16203a;border:1px solid #B87333;border-radius:12px;padding:10px;margin-bottom:8px}
.ofl-dialog .ofl-import-banner .grow{flex:1 1 200px;display:grid;gap:3px}
.ofl-dialog .ofl-import-banner small{color:#b6c4d6}
.ofl-dialog .ofl-h{margin:16px 0 6px;color:#f3e3d3;display:flex;align-items:center;gap:8px}
.ofl-dialog .ofl-count{background:#B87333;color:#fff;border-radius:9px;padding:0 7px;font-size:12px}
.ofl-dialog .ofl-sent.pending{border-left:3px solid #B87333}
.ofl-dialog .ofl-new{color:#f3c79c;font-weight:700}
.ofl-dialog .ofl-share-slot:empty{display:none}
.ofl-dialog .ofl-share-slot{width:100%}
.ofl-dialog .ofl-wifi{margin:6px 0 2px}
.ofl-dialog .ofl-import-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ofl-dialog .ofl-import-row input[type=text]{flex:1 1 160px;min-width:0}
.ofl-toast{position:fixed;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3100;background:#1F2A44;color:#fff;border:2px solid #B87333;border-radius:14px;
  padding:10px 10px 10px 14px;display:flex;gap:8px;align-items:center;box-shadow:0 10px 30px #0009;width:min(440px,calc(100vw - 24px));box-sizing:border-box;font-size:14px}
.ofl-toast>span{flex:1;min-width:0;line-height:1.3}
@media (max-width:760px){.ofl-toast{bottom:calc(92px + env(safe-area-inset-bottom))}}
.ofl-toast .ga-btn.primary{background:#B87333;border-color:#B87333;color:#fff}
@media (max-width:760px){.ofl-dialog .ofl-tabs button{font-size:12px;padding-left:6px;padding-right:6px}}