/* Scope tất cả style vào #stormSim để tránh xung đột với theme */
#stormSim {
  --bg:#0f172a; --panel:#111827; --muted:#94a3b8; --text:#e5e7eb;
  --brand:#38bdf8; --accent:#34d399; --warn:#f59e0b; --danger:#ef4444; --purple:#a855f7;
  color: var(--text);
  background: linear-gradient(180deg,#0b1220,#0f172a);
  padding: 0 0 32px;
}

#stormSim *{ box-sizing: border-box; }

/* Header/Footer riêng của mô phỏng */
#stormSim .storm-header{
  position: sticky; top: 0; z-index: 1000;
  background: rgba(15,23,42,.75);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(148,163,184,.15);
}
#stormSim .storm-footer{
  border: 0; color: var(--muted);
  max-width: 1180px; margin: 8px auto 0; padding: 0 14px;
}

/* Layout chung */
#stormSim .wrap{max-width:1180px;margin:0 auto;padding:10px 14px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
#stormSim .logo{font-weight:700}
#stormSim .tag{margin-left:6px;padding:2px 8px;border:1px solid rgba(148,163,184,.3);border-radius:999px;color:var(--muted)}

#stormSim .btn, #stormSim select, #stormSim input{font:inherit;color:inherit}
#stormSim .btn{padding:8px 10px;border-radius:10px;border:1px solid rgba(148,163,184,.25);background:rgba(2,6,23,.6);cursor:pointer}
#stormSim .btn:hover{border-color:rgba(148,163,184,.5)}

#stormSim .panel{max-width:1180px;margin:12px auto;padding:10px 14px;background:linear-gradient(180deg,rgba(17,24,39,.65),rgba(2,6,23,.6));border:1px solid rgba(148,163,184,.15);border-radius:14px}
#stormSim .grid{display:grid;grid-template-columns: 2fr 1fr;gap:12px}
@media (max-width: 980px){ #stormSim .grid{grid-template-columns: 1fr} }

#stormSim #map{height:62vh;min-height:460px;border-radius:12px;border:1px solid rgba(148,163,184,.2);overflow:hidden}
#stormSim .controls{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:10px}
#stormSim .pill{border:1px solid rgba(148,163,184,.3);border-radius:999px;padding:6px 10px}
#stormSim .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#stormSim label{color:var(--muted)}
#stormSim input[type="range"]{width:160px}
#stormSim .legend{display:grid;gap:6px;margin-top:8px}
#stormSim .badge{display:inline-block;padding:2px 8px;border-radius:999px;border:1px solid rgba(148,163,184,.3)}

/* FS helper */
#stormSim .fsBar{
  position:fixed;top:8px;right:8px;z-index:2000;display:none;
  background:rgba(2,6,23,.7);backdrop-filter:blur(6px);border:1px solid rgba(148,163,184,.25);
  border-radius:12px;padding:6px 8px
}
#stormSim .fsBar .closeBtn{cursor:pointer;padding:4px 8px;border-radius:8px;border:1px solid rgba(148,163,184,.25)}
#stormSim .fsBar .closeBtn:hover{border-color:rgba(148,163,184,.5)}
#stormSim .lock-gestures{overscroll-behavior:none; touch-action:none}
#stormSim .toolDot{display:inline-flex;align-items:center;gap:6px;margin-right:6px}
#stormSim .dot{width:10px;height:10px;border-radius:50%}
#stormSim .dot.orange{background:#f59e0b}
#stormSim .dot.red{background:#ef4444}
#stormSim .dot.purple{background:#a855f7}

#stormSim select.pill{
  background:#0f172a;
  color:#e5e7eb;
  border:1px solid rgba(148,163,184,.3);
}