* { box-sizing:border-box; } html,body { width:100%; height:100%; margin:0; overflow:hidden;
    font-family:Inter,Arial,sans-serif; color:#e2e8f0; background:#020617; }
.history-shell { display:grid; grid-template-rows:auto 1fr auto; width:100%; height:100%; }
.history-header { display:flex; align-items:center; gap:1rem; padding:.8rem 1rem; border-bottom:1px solid #1e293b;
    background:#0f172a; box-shadow:0 10px 30px rgba(0,0,0,.3); z-index:1100; }
.history-title { min-width:240px; } .history-title h1 { margin:0; font-size:.9rem; letter-spacing:.08em; }
.history-title p { margin:.2rem 0 0; color:#94a3b8; font-size:.68rem; }
.history-filters { display:flex; flex:1; gap:.55rem; align-items:center; }
select,input,button,a { min-height:2.25rem; border:1px solid #334155; border-radius:.65rem;
    color:#e2e8f0; background:#111827; padding:.45rem .7rem; font-weight:700; font-size:.7rem; }
select { min-width:200px; } button,a { cursor:pointer; text-decoration:none; }
button:hover,a:hover { border-color:#3b82f6; background:#1e293b; }
#load-button { border-color:#2563eb; background:#1d4ed8; }
.history-map-wrap { position:relative; min-height:0; } #history-map { width:100%; height:100%; }
.history-status { position:absolute; left:1rem; bottom:1rem; z-index:1000; max-width:70%; padding:.55rem .75rem;
    border:1px solid rgba(52,211,153,.35); border-radius:.7rem; color:#6ee7b7; background:rgba(2,6,23,.88);
    font-size:.65rem; font-weight:800; letter-spacing:.04em; }
.history-status.error { color:#fca5a5; border-color:rgba(248,113,113,.4); }
.history-controls { display:flex; align-items:center; gap:.5rem; padding:.75rem 1rem; border-top:1px solid #1e293b;
    background:#0f172a; z-index:1100; } #history-range { flex:1; accent-color:#2563eb; }
.frame-data { min-width:280px; text-align:right; } #frame-counter { color:#60a5fa; font-weight:900; }
#frame-info { margin-top:.15rem; color:#94a3b8; font-size:.62rem; white-space:nowrap; }
.history-marker-shell { background:transparent; border:0; } .history-marker { width:44px; height:44px; overflow:hidden;
    display:grid; place-items:center; border:3px solid #22c55e; border-radius:50%; color:#fff; background:#17365d;
    box-shadow:0 0 0 5px rgba(34,197,94,.2),0 8px 18px rgba(0,0,0,.4); font-weight:900; }
.history-marker img { width:100%; height:100%; object-fit:cover; }
.leaflet-container { background:#020617; } .leaflet-popup-content-wrapper,.leaflet-popup-tip { color:#e2e8f0; background:#0f172a; }
@media(max-width:850px){ .history-header { align-items:stretch; flex-direction:column; } .history-filters { flex-wrap:wrap; }
    select,input { flex:1; min-width:150px; } .history-controls { flex-wrap:wrap; } .frame-data { width:100%; text-align:left; } }