:root{
      --brand1:#218AC8; /* primary blue */
      --brand2:#05476E; /* deep blue */
      --brand3:#66BDE0; /* light blue */
      --accent1:#E0F2F9; /* soft red for weak/negative */
      --accent2:#AEE1F6; /* soft amber for neutral */
      --ink:#0f172a;
      --muted:#475569;
      --border:#e5e7eb;
      --bg:#ffffff;
    }
    *{box-sizing:border-box}
    #aolpro-map{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Apple Color Emoji,Segoe UI Emoji; background:var(--bg); color:var(--ink)}

    #aolpro-map .wrap{display:grid; grid-template-columns: 1fr 360px; gap:20px; padding:20px; min-height:calc(100vh - 180px)}
    @media (max-width: 1000px){ #aolpro-map .wrap{grid-template-columns:1fr} }

    #aolpro-map .panel{background:#fff; border:1px solid var(--border); border-radius:16px; box-shadow:0 8px 20px rgba(0,0,0,.04)}
    #aolpro-map .controls{padding:12px 16px; display:flex; flex-wrap:wrap; gap:10px; align-items:center}
    #aolpro-map .controls label{font-size:14px; color:var(--muted)}
   #aolpro-map .controls select, .controls button{
      background:#fff; color:var(--ink); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font:inherit
    }
    #aolpro-map .controls .pill{display:inline-flex; gap:6px; background:#fff; border:1px solid var(--border); border-radius:999px; padding:6px}
    #aolpro-map .controls .pill input{display:none}
    #aolpro-map .controls .pill label{cursor:pointer; padding:6px 10px; border-radius:999px; color:var(--muted)}
   #aolpro-map  .controls .pill input:checked + label{background:var(--brand1); color:#fff}

    #aolpro-map #map{width:100%; height:calc(100vh - 320px); min-height:540px}
   #aolpro-map  .legend{padding:10px 16px; border-top:1px solid var(--border)}

    #aolpro-map .sidebar{padding:18px; position: relative; display: flex;  flex-direction: column; justify-content: space-between;}
    #aolpro-map .sidebar h2{margin:0 0 12px;font-size:24px; padding-bottom:1rem; border-bottom: 1px solid var(--brand1); }
    #aolpro-map .sidebar .big{font-size:32px; font-weight:800; color:var(--brand2)}
    #aolpro-map .sidebar .muted{color:var(--muted)}
    #aolpro-map .sidebar .row{display:flex; justify-content:space-between; margin:8px 0; font-size:15px}

    #aolpro-map .sidebar .row.title-fees{border-top: 1px dotted var(--brand1); padding-top: 1rem; margin-top: 1rem;}
    #aolpro-map .sidebar .row.savings{background-color: #FFDE95; border-radius: 20px; margin: 0 -10px; padding: 5px 10px;}


    #aolpro-map .sidebar .note{font-size:13px; color:var(--muted); margin-top:20px}
    #aolpro-map .sidebar .aol-badge {max-width: 75%; margin: 0 auto 20px;}
     @media (max-width: 1000px){#aolpro-map .sidebar .aol-badge {max-width: 50%; margin: 50px auto 20px;}}

    #aolpro-map .tooltip{position:fixed; pointer-events:none; background:#fff; color:var(--ink); border:1px solid var(--border); padding:8px 10px; border-radius:10px; font-size:13px; box-shadow:0 6px 16px rgba(0,0,0,.08); opacity:0; transition:opacity .12s}
    #aolpro-map .state{stroke:#cbd5e1; stroke-width:.8px}
    #aolpro-map .state:hover{stroke:#111827; stroke-width:0px; paint-order: stroke;}
    #aolpro-map .state.selected{stroke:#111827; stroke-width:0px}
    #aolpro-map .state-overlay{ fill: url(#stripeWhite); pointer-events:none }


    #aolpro-map .legend-bar{height:10px; border-radius:999px; background:linear-gradient(90deg, var(--accent1), var(--accent2), var(--brand3), var(--brand1), var(--brand2)); border:1px solid var(--border)}
    #aolpro-map .legend-labels{display:flex; justify-content:space-between; font-size:12px; margin-top:6px; color:var(--muted)}

    #aolpro-map a.button{display:inline-block; text-decoration:none; color:#fff; background:var(--brand1); padding:8px 10px; border-radius:8px; border:1px solid #cfe7f7}
    #aolpro-map .small{font-size:12px; color:var(--muted)}