.ht-wrapper {
--ht-primary: #1a3a6b;
--ht-secondary: #e8a020;
--ht-bg: #f4f6f9;
--ht-surface: #ffffff;
--ht-border: #dde3ec;
--ht-text: #1c2b3a;
--ht-muted: #6b7c93;
--ht-radius: 10px;
--ht-shadow: 0 4px 20px rgba(0,0,0,0.10);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-size: 14px;
color: var(--ht-text);
background: var(--ht-bg);
border: 1px solid var(--ht-border);
border-radius: var(--ht-radius);
box-shadow: var(--ht-shadow);
overflow: hidden;
max-width: 100%;
} .ht-wrapper .ht-header {
display: flex;
align-items: center;
gap: 8px;
background: var(--ht-primary) !important;
color: #fff !important;
padding: 12px 16px;
font-weight: 600;
font-size: 15px;
flex-wrap: wrap;
}
.ht-header-icon { font-size: 20px; }
.ht-header-title { flex: 1; letter-spacing: .3px; }
.ht-updated {
font-size: 11px;
opacity: .7;
font-weight: 400;
margin-left: auto;
} .ht-badge {
font-size: 11px;
font-weight: 700;
padding: 2px 8px;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: .5px;
}
.ht-badge--loading  { background: rgba(255,255,255,.2); }
.ht-badge--active   { background: var(--ht-secondary); color: #1a1a1a; }
.ht-badge--quiet    { background: rgba(255,255,255,.15); } .ht-body {
display: flex;
flex-direction: row;
align-items: stretch;
} .ht-panel {
width: 260px;
min-width: 220px;
flex-shrink: 0;
background: var(--ht-surface);
border-right: 1px solid var(--ht-border);
display: flex;
flex-direction: column;
overflow: hidden;
}
.ht-storms {
flex: 1;
overflow-y: auto;
padding: 12px;
} .ht-storm-card {
background: var(--ht-bg);
border: 1px solid var(--ht-border);
border-left: 4px solid var(--ht-secondary);
border-radius: 7px;
padding: 10px 12px;
margin-bottom: 10px;
cursor: pointer;
transition: box-shadow .2s, transform .15s;
}
.ht-storm-card:hover {
box-shadow: 0 2px 10px rgba(0,0,0,.12);
transform: translateY(-1px);
}
.ht-storm-card.ht-storm--active {
border-left-color: var(--ht-primary);
background: #eef2f8;
}
.ht-storm-name {
font-weight: 700;
font-size: 15px;
color: var(--ht-primary);
margin-bottom: 2px;
}
.ht-storm-type {
font-size: 11px;
text-transform: uppercase;
color: var(--ht-muted);
letter-spacing: .4px;
margin-bottom: 6px;
}
.ht-storm-stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px 8px;
font-size: 12px;
}
.ht-stat-label { color: var(--ht-muted); }
.ht-stat-value { font-weight: 600; color: var(--ht-text); }
.ht-storm-movement {
margin-top: 6px;
font-size: 12px;
color: var(--ht-muted);
font-style: italic;
} .ht-no-storms {
text-align: center;
padding: 24px 16px;
color: var(--ht-muted);
}
.ht-no-storms .ht-icon { font-size: 36px; margin-bottom: 8px; } .ht-outlook-wrap {
border-top: 1px solid var(--ht-border);
padding: 12px;
background: var(--ht-surface);
}
.ht-section-label {
font-size: 11px;
text-transform: uppercase;
letter-spacing: .5px;
color: var(--ht-muted);
margin: 0 0 6px;
font-weight: 700;
}
.ht-outlook-text {
font-size: 12px;
color: var(--ht-text);
line-height: 1.5;
} .ht-map-wrap {
position: relative;
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.ht-map-wrap .ht-map {
flex: 1;
min-height: 0;
}
.ht-map { width: 100%; } .ht-logo-watermark {
position: absolute;
z-index: 500;
pointer-events: none;
user-select: none;
padding: 8px;
}
.ht-logo-watermark img {
max-height: 60px;
max-width: 200px;
display: block;
}
.ht-logo--topleft     { top: 0;    left: 0; }
.ht-logo--topright    { top: 0;    right: 0; }
.ht-logo--bottomleft  { bottom: 30px; left: 0; }
.ht-logo--bottomright { bottom: 30px; right: 0; } .ht-share-bar {
display: flex;
align-items: center;
gap: 10px;
background: var(--ht-surface);
border-top: 1px solid var(--ht-border);
padding: 10px 16px;
flex-wrap: wrap;
}
.ht-share-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .4px;
color: var(--ht-muted);
}
.ht-share-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.ht-share-btn {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 12px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
border: none;
cursor: pointer;
text-decoration: none;
transition: opacity .15s, transform .1s;
white-space: nowrap;
}
.ht-share-btn:hover { opacity: .85; transform: translateY(-1px); }
.ht-share-btn:active { transform: translateY(0); }
.ht-share-btn--facebook  { background: #1877f2; color: #fff; }
.ht-share-btn--twitter   { background: #000;    color: #fff; }
.ht-share-btn--sms       { background: #34c759; color: #fff; }
.ht-share-btn--email     { background: var(--ht-primary); color: #fff; }
.ht-share-btn--copylink  { background: var(--ht-bg); color: var(--ht-text); border: 1px solid var(--ht-border); }
.ht-share-btn--copylink.ht-copied { background: #d4edda; color: #155724; border-color: #c3e6cb; } .ht-footer {
font-size: 11px;
color: var(--ht-muted);
padding: 8px 16px;
background: var(--ht-surface);
border-top: 1px solid var(--ht-border);
text-align: right;
}
.ht-footer a { color: var(--ht-muted); text-decoration: underline; } .ht-loading-spinner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 30px 10px;
color: var(--ht-muted);
}
.ht-spinner {
width: 28px; height: 28px;
border: 3px solid var(--ht-border);
border-top-color: var(--ht-primary);
border-radius: 50%;
animation: ht-spin .7s linear infinite;
margin-bottom: 10px;
}
@keyframes ht-spin { to { transform: rotate(360deg); } } .ht-popup-header { font-weight: 700; font-size: 15px; margin-bottom: 6px; }
.ht-popup-cat {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
margin-bottom: 8px;
}
.ht-popup-stats { font-size: 13px; line-height: 1.7; }
.ht-popup-stats strong { display: inline-block; min-width: 90px; color: #555; } @media (max-width: 640px) {
.ht-body { flex-direction: column; }
.ht-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--ht-border); }
.ht-logo--bottomleft,
.ht-logo--bottomright { bottom: 10px; }
} .ht-map-wrap .leaflet-control-zoom { z-index: 400; }
.ht-map-wrap .leaflet-control-attribution { z-index: 400; } .ht-map-wrap .leaflet-container { height: 100% !important; width: 100% !important; }