html, body { height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; }
    #app { display:grid; grid-template-rows:auto 1fr auto; height:100%; background:#fff; color:#111; }
    header { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:.6rem .8rem; background:#f5f5f7; color:#111; border-bottom:1px solid #ddd; }
    header h1 { font-size:1rem; margin:0 .6rem 0 0; }
    .btn { border:1px solid #ccc; background:#f0f0f2; color:#111; padding:.35rem .6rem; border-radius:.5rem; cursor:pointer; font-size:.85rem; }
    .btn:hover { background:#e4e4e8; }
    .btn.active { outline:2px solid #22d3ee; }
    a.btn { text-decoration:none; display:inline-block; }
    .btn.ghost { background:transparent; border-color:#ccc; }
    #map { width:100%; height:100%; position:relative; }
    #map .leaflet-interactive { transition: fill var(--frame-transition,.35s) ease, fill-opacity var(--frame-transition,.35s) ease; }
    .legend { background:#f5f5f7; color:#111; padding:.6rem .7rem; border-radius:.6rem; font-size:.82rem; box-shadow:0 2px 10px rgba(0,0,0,.1); border:1px solid #ddd; position:relative; }
    .legend-close { position:absolute; top:2px; right:6px; background:none; border:none; color:#888; font-size:1.1rem; cursor:pointer; line-height:1; padding:2px; }
    .legend-close:hover { color:#111; }
    .legend-show { position:fixed; bottom:24px; left:10px; z-index:800; background:#f5f5f7; color:#111; border:1px solid #ddd; border-radius:.5rem; width:32px; height:32px; font-size:1rem; cursor:pointer; display:none; box-shadow:0 2px 10px rgba(0,0,0,.1); }
    .legend .row { margin:.2rem 0 .2rem 0; padding-right:1.2rem; }
    .sw { display:inline-block; width:13px; height:13px; margin-right:.4rem; vertical-align:middle; border:1px solid #0006; }
    .map-spinner{position:absolute;top:50%;left:50%;z-index:1000;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:.5rem}
    .map-spinner .dot{width:40px;height:40px;border:4px solid #ddd;border-top:4px solid #2563eb;border-radius:50%;animation:spin 1s linear infinite}
    .map-spinner span{font-size:.85rem;color:#888}
    @keyframes spin{to{transform:rotate(360deg)}}
    .date-badge { position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:900; background:rgba(20,20,20,.82); color:#fff; padding:.4rem 1rem; border-radius:.6rem; font-size:1.2rem; font-weight:600; letter-spacing:.02em; pointer-events:none; box-shadow:0 2px 10px rgba(0,0,0,.25); }
    .stats-badge { position:absolute; top:60px; left:50%; transform:translateX(-50%); z-index:900; background:rgba(245,245,247,.92); color:#111; padding:.3rem .8rem; border-radius:.5rem; font-size:.82rem; border:1px solid #ddd; pointer-events:none; display:flex; gap:.9rem; }
    .stats-badge b { font-weight:600; }
    .controls { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; padding:.55rem .8rem; background:#f5f5f7; border-top:1px solid #ddd; }
    .controls .grow { flex:1 1 220px; display:flex; align-items:center; gap:.5rem; min-width:220px; }
    #scrub { flex:1; }
    .icon-btn { border:1px solid #ccc; background:#f0f0f2; color:#111; width:2.2rem; height:2.2rem; border-radius:.5rem; cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; }
    .icon-btn:hover { background:#e4e4e8; }
    select.btn { font-size:.82rem; padding:.3rem .45rem; }
    .frame-count { font-size:.78rem; color:#666; min-width:5.5rem; text-align:right; }
    .error-banner { position:absolute; left:10px; top:12px; z-index:1000; background:#ffe8e8; color:#5a0000; padding:.45rem .6rem; border:1px solid #f5b1b1; border-radius:.4rem; display:none; max-width:70ch; white-space:pre-wrap; font-size:.85rem; }
    .load-note { font-size:.8rem; color:#666; }
    .popup b { color:#111 }
    label.chk { display:flex; align-items:center; gap:.3rem; font-size:.82rem; cursor:pointer; }