
<!-- ============================================ -->
<!-- CSS SECTION                                  -->
<!-- ============================================ -->
<!--
PASTE EVERYTHING BELOW INTO YOUR CSS PANEL:
 
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif&display=swap');
 
.rf-wrap { font-family:'DM Sans',sans-serif;color:#2c2c2a;max-width:1200px;margin:0 auto;padding:20px; }
.rf-wrap * { box-sizing:border-box;margin:0;padding:0; }
 
.rf-header { text-align:center;margin-bottom:20px; }
.rf-header h2 { font-family:'Instrument Serif',serif;font-size:30px;font-weight:400;color:#1a1a18;margin-bottom:4px; }
.rf-header p { font-size:11px;color:#aaa;line-height:1.5; }
 
.rf-toolbar { display:flex;gap:12px;margin-bottom:12px;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px 16px;background:#fff;border:1px solid #e8e6e1;border-radius:10px; }
.rf-toolbar-group { display:flex;align-items:center;gap:6px; }
.rf-toolbar-label { font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:0.8px;color:#bbb;margin-right:2px; }
 
.rf-btn { font-family:'DM Sans',sans-serif;font-size:11px;font-weight:500;padding:6px 14px;border-radius:20px;border:1px solid #e5e3de;background:#fff;color:#888;cursor:pointer;transition:all 0.15s;white-space:nowrap; }
.rf-btn:hover { border-color:#ccc;color:#555;background:#fafaf8; }
.rf-btn.active { background:#1a1a18;color:#fff;border-color:#1a1a18; }
.rf-btn.rf-toggle.active { background:#1a8f5c;color:#fff;border-color:#1a8f5c; }
 
.rf-search { font-family:'DM Sans',sans-serif;font-size:11px;padding:6px 14px;border-radius:20px;border:1px solid #e5e3de;background:#fff;color:#333;width:160px;outline:none; }
.rf-search:focus { border-color:#999; }
 
.rf-month-bar { display:flex;gap:4px;justify-content:center;margin-bottom:12px; }
.rf-month-selector { display:flex;gap:4px;flex-wrap:wrap;justify-content:center; }
.month-btn { font-family:'DM Sans',sans-serif;font-size:10px;font-weight:500;padding:5px 12px;border-radius:16px;border:1px solid #e5e3de;background:#fff;color:#888;cursor:pointer;transition:all 0.15s; }
.month-btn:hover { border-color:#ccc;color:#555; }
.month-btn.active { background:#2171b5;color:#fff;border-color:#2171b5; }
 
.rf-map-container { border:1px solid #e8e6e1;border-radius:12px;overflow:hidden;background:#faf9f6; }
#rainfall-map { height:620px;width:100%;background:#faf9f6; }
 
.town-marker { border:none;background:none; }
.marker-dot { border-radius:50%;cursor:pointer;transition:transform 0.15s; }
.marker-dot:hover { transform:scale(1.5); }
 
.leaflet-popup-content-wrapper { border-radius:12px!important;box-shadow:0 6px 24px rgba(0,0,0,0.12)!important;padding:0!important; }
.leaflet-popup-content { margin:0!important;min-width:300px;font-family:'DM Sans',sans-serif; }
.popup-card { padding:16px 20px; }
.popup-name { font-family:'Instrument Serif',serif;font-size:20px;color:#1a1a18;margin-bottom:2px; }
.popup-state { font-size:11px;color:#999;margin-bottom:8px; }
.popup-section { margin-bottom:10px; }
.popup-section-title { font-size:9px;text-transform:uppercase;letter-spacing:0.8px;color:#bbb;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #f0eee8; }
.popup-row { display:flex;justify-content:space-between;padding:2px 0;font-size:12px; }
.popup-row .popup-label { color:#999; }
.popup-row .popup-val { font-weight:600;color:#333; }
 
.rf-footer { text-align:center;margin-top:12px;padding:10px 20px;background:#fff;border:1px solid #e8e6e1;border-radius:10px; }
.rf-decile-scale { display:flex;align-items:center;justify-content:center;gap:2px; }
.rf-scale-label { font-size:10px;color:#bbb;margin:0 6px; }
.rf-dec { width:22px;height:18px;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:600;color:#fff; }
.rf-desc { font-size:11px;color:#aaa;margin-top:6px; }
 
@media (max-width:768px) {
  #rainfall-map { height:400px; }
  .rf-header h2 { font-size:24px; }
  .rf-toolbar { padding:8px 10px;gap:8px; }
  .rf-btn { font-size:10px;padding:5px 10px; }
}