.storm-modal-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.82);
    display: none; align-items: center; justify-content: center;
    z-index: 9999; padding: 16px;
    opacity: 0; transition: opacity 0.2s ease;
}
.storm-modal-backdrop.visible { opacity: 1; }
.storm-modal {
    background: #0d0d0d; border: 1px solid #2a2a2a;
    border-radius: 12px; width: 100%; max-width: 720px;
    max-height: 88vh; display: flex; flex-direction: column;
    transform: translateY(12px); transition: transform 0.2s ease;
    overflow: hidden;
}
.storm-modal-backdrop.visible .storm-modal { transform: translateY(0); }
.storm-modal-header {
    padding: 16px 20px; border-bottom: 1px solid #222;
    display: flex; align-items: center; justify-content: space-between;
    background: #666; flex-shrink: 0;
}
.storm-modal-title { display: flex; align-items: center; gap: 10px; }
.storm-modal-title h2 { font-size: 20px; font-weight: 500; color: #e8e8e8; margin: 0; }
.storm-modal-title span { font-size: 14px; color: #666; font-family: monospace; }
.btn-close {
    background: none; border: none; color: #fff; cursor: pointer;
    font-size: 26px; line-height: 1; padding: 4px 8px; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.btn-close:hover { color: #ccc; background: #1e1e1e; }
.storm-summary {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 1px; background: #1a1a1a; border-bottom: 1px solid #222;
    flex-shrink: 0;
}
.summary-cell { background: #555; padding: 12px 16px; text-align: center; }
.summary-cell .val { font-size: 26px; font-weight: 500; color: #e8e8e8; line-height: 1.1; }
.summary-cell .lbl { font-size: 14px; color: #fff; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.8px; }
.storm-body { overflow-y: auto; padding: 14px; flex: 1; }
.storm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.storm-card {
    background: #ffffff; border-radius: 8px; padding: 12px 14px;
    border: 1px solid #222; position: relative; overflow: hidden;
    transition: border-color 0.15s;
}
.storm-card:hover { border-color: #3a3a3a; }
.storm-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.storm-card.strong::before  { background: #c0392b; }
.storm-card.moderate::before { background: #e67e22; }
.storm-card.weak::before    { background: #2980b9; }
.card-id { font-size: 16px; font-weight: 500; color: #1a1a1a; margin-bottom: 8px; font-family: monospace; }
.card-badge {
    display: inline-block; font-size: 12px; padding: 2px 7px;
    border-radius: 4px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; margin-left: 6px;
}
.badge-strong   { background: #3d1a1a; color: #e57373; }
.badge-moderate { background: #3d2a10; color: #ffb74d; }
.badge-weak     { background: #0d2035; color: #64b5f6; }
.card-row { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.card-row .key { font-size: 14px; color: #555; }
.card-row .val { font-size: 16px; color: #1a1a1a; }
.card-row .val.accent { color: #1a1a1a; font-weight: 500; }
.trend-up { color: #ef5350; }
.trend-dn { color: #42a5f5; }
.trend-nc { color: #1a1a1a; }
.card-discharges { margin-top: 10px; padding-top: 8px; border-top: 1px solid #1e1e1e; font-size: 12px; color: #000; }
.card-discharges span { font-size: 16px; color: #c0392b; font-weight: 500; }
.storm-body .loading { color: #555; text-align: center; padding: 40px; font-size: 16px; }
.storm-body .error   { color: #c0392b; text-align: center; padding: 40px; font-size: 16px; }
#imgNexStorm { cursor: pointer; transition: opacity 0.15s; }
#imgNexStorm:hover { opacity: 0.88; }