/* ===== MeteoVision - modern glass UI ===== */
:root {
    --bg1: #0b1d3a;
    --bg2: #0a2f63;
    --bg3: #073b73;
    --card: rgba(255, 255, 255, 0.08);
    --card-strong: rgba(255, 255, 255, 0.14);
    --border: rgba(255, 255, 255, 0.16);
    --text: #f3f7ff;
    --muted: rgba(233, 240, 255, 0.66);
    --accent: #4fc3f7;
    --accent-warm: #ffb74d;
    --geo: #22c55e;   /* πράσινο - μόνο για την «τρέχουσα τοποθεσία» */
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
    --radius: 18px;
}

* { box-sizing: border-box; }

body {
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));
    background-attachment: fixed;
    color: var(--text);
    margin: 0;
    padding: 0 16px 48px;
    min-height: 100vh;
    /* Δίχτυ ασφαλείας: ένα και μόνο πλατύ στοιχείο αρκεί για να αποκτήσει όλη
       η σελίδα πλάγια κύλιση, και τότε ΚΑΘΕ ενότητα φαίνεται μετατοπισμένη -
       δυσανάλογα άσχημο αποτέλεσμα για ένα μικρό λάθος. Οι πίνακες και οι
       χάρτες που όντως χρειάζονται οριζόντια κύλιση την ορίζουν οι ίδιοι. */
    overflow-x: hidden;
}

/* Εικόνες και ενσωματώσεις δεν ξεπερνούν ποτέ το πλάτος του γονέα. */
img, svg, iframe, video { max-width: 100%; }

/* ---- Header ---- */
.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: 1100px;
    margin: 0 auto;
    padding: 18px 4px;
    flex-wrap: wrap;
}
.brand-wrap { display: flex; align-items: center; gap: 12px; }
.brand {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
    letter-spacing: 0.3px;
}
.header-clock {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    line-height: 1;
    min-height: 36px;
    margin-top: 3px;
    padding: 0 15px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}
.header-clock .hc-date {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--muted);
    letter-spacing: 0.2px;
}
.header-clock .hc-time {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.4px;
    padding-left: 9px;
    border-left: 1px solid var(--border);
}
.brand-mark { font-size: 1.5rem; display: inline-block; }
/* Μόνο όταν επικρατεί καταιγίδα: διακριτικό «αστραπιαίο» σβήσιμο/άναμμα,
   ίδιο keyframe με τα εικονίδια καιρού των καρτών. */
.brand-mark.storm { animation: wxflash 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .brand-mark.storm { animation: none; }
}
.header-right { display: flex; align-items: center; gap: 10px; }
.updated { color: var(--muted); font-size: 0.85rem; }
.admin-link {
    text-decoration: none;
    color: var(--text);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px 11px;
    font-size: 1rem;
    transition: 0.2s;
}
.admin-link:hover { background: var(--card-strong); }

/* Σύνδεση: ευδιάκριτο κουμπί */
.admin-link.login {
    background: var(--accent);
    color: #06243a;
    font-weight: 600;
    border-color: var(--accent);
}
.admin-link.login:hover { filter: brightness(1.08); background: var(--accent); }
.update-form { margin: 0; }
.update-form button {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 12px;
    padding: 8px 12px;
    font-size: 1rem;
    cursor: pointer;
    transition: 0.2s;
}
.update-form button:hover { background: var(--card-strong); transform: rotate(180deg); }

.toast {
    max-width: 1100px;
    margin: 0 auto 10px;
    background: var(--card-strong);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 16px;
    text-align: center;
}

/* ---- Κύριο μενού (πάνω δεξιά) ---- */
.main-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;        /* σπρώχνει το μενού στη δεξιά άκρη του header */
    padding: 5px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
}
/* Κουμπί hamburger - κρυφό σε desktop, εμφανίζεται σε κινητά */
.nav-toggle {
    display: none;
    margin-left: auto;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 1.3rem;
    line-height: 1;
    border-radius: 12px;
    padding: 7px 12px;
    cursor: pointer;
}
.nav-toggle:hover { background: var(--card-strong); }
.nav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.97rem;
    font-weight: 600;
    /* Σταθερό ύψος + flex centering: το κείμενο κεντράρεται στο ύψος ανεξάρτητα
       από τόνους και ουρές γραμμάτων (ρ, χ), όχι με padding «στο μάτι». */
    padding: 0 16px;
    min-height: 38px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    border-radius: 10px;
    transition: background 0.2s, color 0.2s, transform 0.1s;
}
.nav-link:hover { color: var(--text); background: var(--card-strong); }
.nav-link:active { transform: scale(0.97); }
.nav-link.active {
    color: #06243a;
    background: var(--accent);
    box-shadow: 0 2px 10px rgba(79, 195, 247, 0.35);
}
/* Διακριτική ένδειξη: βρίσκεσαι σε υπο-προβολή (Χάρτης/Μπάνιο/Πανόραμα) αυτού του tab */
.nav-link.trail {
    color: var(--text);
    background: rgba(79, 195, 247, 0.14);
    box-shadow: inset 0 0 0 1px rgba(79, 195, 247, 0.35);
}
.caret { font-size: 0.7rem; opacity: 0.85; transition: transform 0.2s; }
.nav-item.open .caret { transform: rotate(180deg); }

/* Dropdown περιοχών */
.nav-item { position: relative; }
.nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 220px;
    background: linear-gradient(160deg, #133a6b, #0f2a52, #0b1f40);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    padding: 7px;
    display: none;
    flex-direction: column;
    gap: 2px;
    z-index: 60;
}
/* μικρό «βελάκι» που δείχνει στο κουμπί Περιοχές */
.nav-menu::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 22px;
    width: 12px;
    height: 12px;
    background: #0f2a52;
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    transform: rotate(45deg);
}
.nav-item:hover .nav-menu,
.nav-item.open .nav-menu {
    display: flex;
    animation: navMenuIn 0.16s ease-out;
}
@keyframes navMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.nav-loc {
    position: relative;
    background: transparent;
    border: none;
    color: var(--text);
    font-family: inherit;
    font-size: 0.95rem;
    text-align: left;
    padding: 10px 14px 10px 16px;
    border-radius: 11px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
}
.nav-loc:hover { background: var(--card-strong); }
.nav-loc.active {
    color: var(--accent);
    font-weight: 700;
    background: rgba(79, 195, 247, 0.12);
}
/* ενεργή περιοχή: λεπτή accent γραμμή αριστερά */
.nav-loc.active::before {
    content: "";
    position: absolute;
    left: 6px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 16px;
    background: var(--accent);
    border-radius: 2px;
}

/* Ώρα τελευταίας ενημέρωσης (admin) */
.admin-updated {
    max-width: 1100px;
    margin: 0 auto;
    text-align: right;
    color: var(--muted);
    font-size: 0.8rem;
    padding: 0 4px;
}

/* ---- Εναλλαγή προβολών ---- */
.view[hidden] { display: none; }

/* Το [hidden] του HTML είναι απλό `display:none` του browser - οποιοσδήποτε
   κανόνας μας με `display:flex/grid` το νικάει και το στοιχείο μένει ορατό.
   Καθολικός κανόνας ώστε το el.hidden = true να δουλεύει ΠΑΝΤΑ. */
[hidden] { display: none !important; }

/* ---- Θάλασσες / Παραλίες ---- */
.sea-intro { color: var(--muted); text-align: center; max-width: 560px; margin: 0 auto; font-size: 0.92rem; }
.sea-note { color: var(--muted); font-size: 0.8rem; text-align: center; margin-top: 16px; opacity: 0.85; }

/* Φίλτρα κατηγορίας (Όλες / Αττική / Εύβοια) */
.sea-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 16px; }
.sea-filters:empty { display: none; }
.sea-filter {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    border-radius: 10px;
    padding: 8px 18px;
    cursor: pointer;
    transition: 0.18s;
}
.sea-filter:hover { color: var(--text); background: var(--card-strong); }
.sea-filter.active {
    background: var(--accent);
    color: #06243a;
    border-color: var(--accent);
}
.sea-loading {
    grid-column: 1 / -1;
    text-align: center; color: var(--muted);
    padding: 36px; background: var(--card);
    border: 1px solid var(--border); border-radius: var(--radius);
}
.sea-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.beach-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.beach-card:hover { transform: translateY(-3px); background: var(--card-strong); }
.beach-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* χρώμα αριστερής μπάρας ανά σκορ */
.beach-card.score-0 { border-left-color: #34d399; }
.beach-card.score-1 { border-left-color: #ffd54f; }
.beach-card.score-2 { border-left-color: #ffb74d; }
.beach-card.score-3 { border-left-color: #ef5350; }

.beach-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.beach-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.beach-name { font-size: 1.12rem; font-weight: 700; }
.beach-face { font-size: 0.78rem; color: var(--muted); }
.beach-weather { text-align: right; color: var(--muted); font-size: 0.85rem; white-space: nowrap; flex-shrink: 0; margin-top: 4px; }

.swim-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    font-weight: 700;
    font-size: 1rem;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--card-strong);
    border: 1px solid var(--border);
}
.score-0 .swim-badge { background: rgba(52,211,153,0.16);  border-color: rgba(52,211,153,0.5); }
.score-1 .swim-badge { background: rgba(255,213,79,0.16);  border-color: rgba(255,213,79,0.5); }
.score-2 .swim-badge { background: rgba(255,183,77,0.16);  border-color: rgba(255,183,77,0.5); }
.score-3 .swim-badge { background: rgba(239,83,80,0.16);   border-color: rgba(239,83,80,0.5); }

.beach-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
.bm {
    background: rgba(0,0,0,0.16);
    border-radius: 12px;
    padding: 9px 11px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.bm-v { font-size: 1.08rem; font-weight: 650; display: flex; align-items: center; gap: 5px; }
.bm-l { font-size: 0.72rem; color: var(--muted); }
.wind-arrow {
    display: inline-block;
    font-size: 0.95rem;
    color: var(--accent);
    transition: transform 0.3s;
}
.beach-foot {
    font-size: 0.9rem;
    color: var(--muted);
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

/* ---- Αναλυτική προβολή παραλίας ---- */
.beach-detail.loading { color: var(--muted); text-align: center; padding: 30px; }
.beach-detail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.beach-detail .current-hero { margin-top: 0; }
.beach-detail .beach-face { font-size: 0.85rem; }
.beach-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: none;
    border: none;
    box-shadow: none;
    font-size: 1.45rem;
    line-height: 1;
    text-decoration: none;
}
.beach-nav-btn { cursor: pointer; }
.beach-nav-btn:hover { filter: brightness(1.08); }
.beach-nav-btn:active { transform: translateY(1px); }
/* Μενού επιλογής εφαρμογής πλοήγησης */
.nav-wrap { position: relative; display: inline-flex; flex: 0 0 auto; }
.nav-menu {
    position: absolute; right: 0; top: calc(100% + 4px); z-index: 1200;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: 12px; box-shadow: var(--shadow); padding: 6px; min-width: 200px;
}
.nav-menu a {
    display: block; padding: 9px 12px; border-radius: 8px;
    color: var(--text); text-decoration: none; font-size: 0.9rem; font-weight: 600; white-space: nowrap;
}
.nav-menu a:hover { background: var(--card-strong); }
/* Γραμμή badge «Ιδανικά…» + κουμπί πλοήγησης δεξιά (κάρτες «Μπάνιο») */
.swim-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
/* Στην αναλυτική προβολή: facing + πυξίδα ομαδοποιημένα δεξιά */
.beach-detail-head .beach-face { margin-left: auto; }
/* «Τώρα» + προσανατολισμός/πυξίδα στην ίδια γραμμή (ίδιο ύψος με τις Περιοχές) */
.beach-now-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.beach-now-row .sub-label { margin: 6px 0 10px; }
.beach-now-row .beach-detail-head { margin: 0; flex: 0 0 auto; }
.beach-now-row .beach-detail-head:empty { display: none; }
/* Πιο compact grid «Όλα τα δεδομένα» - περισσότερες στήλες, λιγότερα κενά */
#beach-current .metric-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}
#beach-current .metric { padding: 9px 11px; }
#beach-current .metric .m-label { font-size: 0.72rem; }
#beach-current .metric .m-value { font-size: 1.05rem; margin-top: 1px; }

/* ---- Sections ---- */
section { max-width: 1100px; margin: 22px auto; }
.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; font-size: 1.25rem; font-weight: 650; }
.hint { color: var(--muted); font-size: 0.82rem; }
.live-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: #34d399; margin-left: 6px;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%   { box-shadow: 0 0 0 0 rgba(52,211,153,0.6); }
    70%  { box-shadow: 0 0 0 8px rgba(52,211,153,0); }
    100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.location-select, .chart-select {
    background: var(--card);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 9px 12px;
    font-size: 0.95rem;
    cursor: pointer;
}
.location-select option, .chart-select option { color: #111; }

/* ---- Σύγχρονο combobox (αντικαθιστά το dropdown περιοχών/παραλιών) ---- */
.combo { position: relative; display: inline-block; text-align: left; }
.combo > select { display: none; }
.combo-trigger {
    display: inline-flex; align-items: center; gap: 10px;
    min-width: 240px; max-width: 90vw;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; font-size: 0.98rem; font-weight: 600;
    cursor: pointer;
}
.combo-trigger:hover { background: var(--card-strong); }
.combo-value { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combo-caret { color: var(--muted); font-size: 0.8rem; }
/* ---- Mega-menu: πάνελ με στήλες ανά περιοχή (packed) ---- */
.combo-panel {
    position: absolute; z-index: 1200; top: calc(100% + 4px); left: 0;
    transform: none;
    width: min(560px, 94vw);
    background: linear-gradient(180deg, var(--bg2), var(--bg1));
    border: 1px solid var(--border); border-radius: 14px;
    /* Αρνητικό spread: η σκιά πέφτει προς τα κάτω χωρίς να «ξεχειλίζει»
       στα πλάγια, ώστε το αριστερό border να διαβάζεται καθαρά. */
    box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55); padding: 14px 16px;
}
.combo-search {
    width: 100%; box-sizing: border-box;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 9px 12px; font-size: 0.95rem; margin-bottom: 6px;
}
.combo-search:focus { outline: none; border-color: var(--accent); }
/* CSS multi-column: σταθερά 3 στήλες που γεμίζουν ΟΛΟ το πλάτος (χωρίς
   κενή στήλη δεξιά). Οι περιοχές «πακετάρουν» σφιχτά από πάνω προς τα κάτω
   (π.χ. Θεσσαλία κάτω από Αττική). */
.combo-list {
    list-style: none; margin: 0; padding: 0;
    column-count: 3; column-gap: 20px;
    max-height: min(72vh, 470px); overflow-y: auto;
}
.combo-col {
    break-inside: avoid; -webkit-column-break-inside: avoid; page-break-inside: avoid;
    display: inline-block; width: 100%; margin: 0 0 14px;
}
/* Επικεφαλίδα περιοχής: κάτω γραμμή σε accent, όπως στο πρότυπο. */
.combo-group {
    padding: 0 2px 6px; margin-bottom: 6px;
    font-size: 0.82rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}
.combo-suboptions { list-style: none; margin: 0; padding: 0; }
.combo-option {
    padding: 6px 10px; border-radius: 9px; cursor: pointer;
    font-size: 0.94rem; color: var(--text);
    overflow: hidden;
    transition: background 0.15s, color 0.15s;
}
.combo-option .co-title {
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-option .co-sub {
    display: block; margin-top: 1px; line-height: 1.15;
    font-size: 0.76rem; font-weight: 500; color: var(--muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-option:hover { background: var(--card-strong); color: var(--accent); }
.combo-option:hover .co-sub { color: var(--accent); opacity: 0.8; }
.combo-option.selected { background: rgba(79,195,247,0.18); color: #fff; }
.combo-option.selected .co-sub { color: #fff; opacity: 0.75; }
.combo-option[hidden], .combo-group[hidden], .combo-col[hidden] { display: none; }

/* Μικρές οθόνες: το πάνελ πιάνει σχεδόν όλο το πλάτος, 2 στήλες. */
@media (max-width: 560px) {
    .combo-panel { padding: 12px; width: 94vw; }
    .combo-list { column-count: 2; column-gap: 14px; }
    .combo-option { padding: 7px 8px; }
}

/* ---- Forecast head: περιοχή κεντραρισμένη ---- */
.forecast-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.loc-title { margin: 0; text-align: center; }
.loc-title .loc-name { font-size: 1.9rem; font-weight: 700; color: var(--accent); }
/* Εικονίδιο SVG μέσα στον τίτλο προβολής (ίδιο με το αντίστοιχο κουμπάκι) */
.loc-title .loc-ic {
    width: 1.5rem; height: 1.5rem;
    vertical-align: -0.16em;
    margin-right: 10px;
    color: var(--accent);
}
/* Το pill του υποτίτλου έχει ίδιες διαστάσεις με τα κουμπάκια .vt-btn */
.loc-sub {
    display: inline-flex;
    align-items: center;
    align-self: center;
    margin-top: 2px;
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    letter-spacing: 0.01em;
    color: var(--accent);
    background: rgba(79, 195, 247, 0.12);
    border: 1px solid rgba(79, 195, 247, 0.28);
}
.loc-sub[hidden] { display: none; }

/* ---- Πλαίσιο κεφαλίδας: τίτλος + επιλογέας (αριστερά), μεταβάσεις (δεξιά) ---- */
.view-toolbar {
    position: relative; /* σημείο αναφοράς για το mega-menu (πλήρες πλάτος) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    flex-wrap: wrap;
    /* Μόνο όσο πλάτος χρειάζεται· μεγαλώνει αν προστεθούν κουμπάκια. */
    width: fit-content;
    max-width: 100%;
    margin: 0 auto;
    padding: 9px 12px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Ο τίτλος είναι ο επιλογέας: ένα μεγάλο, προφανώς πατήσιμο pill + pill υποτίτλου */
/* Επιλογέας + υπότιτλος σε ΕΝΑ ενιαίο πλαίσιο: ένα περίγραμμα γύρω από όλο,
   ενώ το καθένα κρατά το δικό του φόντο. */
.vt-title {
    display: inline-flex;
    align-items: stretch;
    gap: 0;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}
.view-toolbar .loc-title { display: flex; margin: 0; line-height: 1; }
/* Υπότιτλος: δεύτερο «τμήμα» του ίδιου πλαισίου - δικό του (διάφανο) φόντο,
   χωρίς δικό του περίγραμμα και χωρίς κάθετη χωρίστρα. */
.view-toolbar .loc-sub {
    display: inline-flex;
    align-items: center;
    /* Γεμίζει ΟΛΟ το ύψος του πλαισίου και κεντράρει το κείμενο με flexbox -
       ακριβώς ο ίδιος μηχανισμός με το .combo-trigger δίπλα του. Χωρίς αυτό
       (align-self: center από τον βασικό κανόνα) το ύψος του καθοριζόταν από
       το line-height και ο υπότιτλος έβγαινε λίγο εκτός κέντρου. */
    align-self: stretch;
    margin: 0;
    padding: 0 21px;
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    border: 0;
    border-radius: 0;
    color: var(--accent);
    background: none;
    text-shadow: 0 0 18px rgba(79, 195, 247, 0.35);
}
.view-toolbar .loc-sub[hidden] { display: none; }
.vt-title .combo { display: flex; max-width: 100%; }
/* Ίδιο μέγεθος με τα κουμπάκια, αλλά γεμάτο accent φόντο ώστε να ξεχωρίζει
   ότι αυτό είναι το κύριο χειριστήριο (αλλαγή περιοχής/παραλίας). */
.vt-title .combo-trigger {
    min-width: 0;
    gap: 9px;
    padding: 9px 16px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #06243a;
    background: var(--accent);
    border: 0;
    /* Στρογγυλεύει μόνο αριστερά - δένει με τον υπότιτλο στο ίδιο πλαίσιο. */
    border-radius: 9px 0 0 9px;
    box-shadow: none;
    transition: filter 0.2s;
}
/* Αν δεν υπάρχει υπότιτλος, στρογγυλεύει και δεξιά. */
.vt-title:has(.loc-sub[hidden]) .combo-trigger { border-radius: 9px; }
.vt-title .combo-trigger:hover { background: var(--accent); filter: brightness(1.08); }
.vt-title .combo-trigger:active { filter: brightness(0.95); }
.vt-title .combo-pin { width: 17px; height: 17px; flex: none; color: #06243a; opacity: 0.75; }
/* Μεγαλύτερο βελάκι, με λεπτή χωρίστρα - δηλώνει καθαρά ότι είναι επιλογέας. */
.vt-title .combo-caret {
    font-size: 1.15rem;
    line-height: 1;
    color: #06243a;
    opacity: 0.9;
    padding-left: 9px;
    border-left: 1px solid rgba(6, 36, 58, 0.28);
}
/* Το combo δεν αποτελεί πλέον σημείο αναφοράς: το mega-menu τοποθετείται
   ως προς ΟΛΟ το toolbar, ώστε να απλώνεται από την αριστερή άκρη του
   κουμπιού μέχρι τη δεξιά άκρη των κουμπιών (πλήρες πλάτος κεφαλίδας). */
.vt-title .combo { position: static; }
.vt-title .combo-panel {
    left: 0; right: 0; width: auto; transform: none;
    top: calc(100% + 6px);
}

/* Κουμπάκια μετάβασης */
.vt-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}
.vt-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--muted);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s;
}
.vt-btn:hover {
    color: var(--text);
    background: var(--card-strong);
    border-color: rgba(79, 195, 247, 0.45);
    transform: translateY(-1px);
}
.vt-btn:active { transform: scale(0.97); }
.vt-ic { width: 17px; height: 17px; flex: none; color: var(--accent); }

/* Γραμμή πλοήγησης μέσα σε προβολές χωρίς επιλογέα (Μπάνιο / Χάρτης / Πανόραμα):
   ο χρήστης δεν «κολλάει» - μπορεί να συνεχίσει σε άλλη προβολή. */
.vt-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin-top: 2px;
}
@media (max-width: 680px) {
    .vt-nav { gap: 7px; margin-top: 0; }
    .vt-nav .vt-btn { padding: 7px 12px; font-size: 0.8rem; gap: 6px; }
}

/* Ειδοποίηση παλιών δεδομένων στις Φωτιές (ο cron δεν έχει τρέξει) */
/* --- Σημειώσεις: μία φορά, κλειστές ----------------------------------------
   Ήταν έξι χωριστά μπλοκ κειμένου σκορπισμένα στη σελίδα και έπνιγαν τα
   δεδομένα. Τώρα είναι ένα κλειστό συρτάρι στο τέλος. */
.fire-notes {
    margin: 18px auto 0;
    max-width: 900px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
}
.fire-notes > summary {
    cursor: pointer;
    padding: 11px 15px;
    font-size: 0.85rem;
    color: var(--muted);
    list-style: none;
}
.fire-notes > summary::-webkit-details-marker { display: none; }
.fire-notes > summary::before { content: 'ℹ️ '; }
.fire-notes > summary::after { content: ' ▾'; opacity: 0.6; }
.fire-notes[open] > summary::after { content: ' ▴'; }
.fire-notes > summary:hover { color: var(--text); }
.fn-body {
    padding: 0 15px 14px;
    font-size: 0.82rem;
    line-height: 1.55;
    color: var(--muted);
}
.fn-body p { margin: 0 0 10px; }
.fn-body p:last-child { margin-bottom: 0; }
.fn-body strong { color: var(--text); font-weight: 600; }
.fn-warn { color: #ffb74d; }

/* Διαχωριστικό μέσα στη σειρά φίλτρων (ένωσα τις δύο σειρές σε μία). */
.chip-sep {
    display: inline-block;
    width: 1px;
    align-self: stretch;
    margin: 2px 4px;
    background: var(--border);
}
/* Σε κινητό η κάθετη γραμμή δεν φτάνει: τα δύο group («τι» και «σε ποια
   κατάσταση») έσπαγαν όπου τύχαινε, με το «Τρέχοντα» να κρέμεται δίπλα στη
   «Βοήθεια». Το διαχωριστικό γίνεται ΑΛΛΑΓΗ ΓΡΑΜΜΗΣ: κατηγορίες πάνω,
   καταστάσεις κάτω, πάντα στο ίδιο σημείο. */
@media (max-width: 620px) {
    .incident-controls .chip-sep {
        width: 100%; height: 0; flex-basis: 100%;
        margin: 3px 0 0; background: none;
    }
}
.sub-label.sp-top { margin-top: 16px; }

/* --- Κίνδυνος πυρκαγιάς ανά τοποθεσία (FWI) --------------------------------
   Η μπάρα δείχνει το εκατοστημόριο των 30 ημερών, όχι τον απόλυτο δείκτη: τον
   Αύγουστο σχεδόν κάθε σημείο είναι «Ακραίος» και οι μπάρες θα ήταν όλες
   γεμάτες. Το χρώμα κρατά την επίσημη κατηγορία EFFIS. */
.fwi-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Γεμίζει το ύψος της στήλης αντί να κόβεται σε σταθερό όριο και να αφήνει
       κενό από κάτω. Το min-height:0 χρειάζεται για να επιτραπεί η κύλιση. */
    flex: 1 1 auto;
    min-height: 240px;
    overflow-y: auto;
    padding-right: 6px;
}
.fwi-row {
    padding: 7px 11px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--card);
}
.fw-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.fw-name { font-size: 0.9rem; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.fw-name img.emoji { height: 0.95em; width: 0.95em; }
.fw-val { font-size: 1.02rem; font-weight: 700; font-variant-numeric: tabular-nums; }

.fw-bar {
    margin: 6px 0 5px;
    height: 5px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.10);
    overflow: hidden;
}
.fw-bar span { display: block; height: 100%; border-radius: 3px; }

.fw-bot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.74rem;
}
.fw-lbl { font-weight: 600; }
.fw-pct { color: var(--muted); text-align: right; }

/* Οι έξι κλάσεις EFFIS */
.fwi-row.lv1 .fw-val, .fwi-row.lv1 .fw-lbl { color: #81c784; }
.fwi-row.lv1 .fw-bar span { background: #81c784; }
.fwi-row.lv2 .fw-val, .fwi-row.lv2 .fw-lbl { color: #aed581; }
.fwi-row.lv2 .fw-bar span { background: #aed581; }
.fwi-row.lv3 .fw-val, .fwi-row.lv3 .fw-lbl { color: #ffd54f; }
.fwi-row.lv3 .fw-bar span { background: #ffd54f; }
.fwi-row.lv4 .fw-val, .fwi-row.lv4 .fw-lbl { color: #ffb74d; }
.fwi-row.lv4 .fw-bar span { background: #ffb74d; }
.fwi-row.lv5 .fw-val, .fwi-row.lv5 .fw-lbl { color: #ff8a65; }
.fwi-row.lv5 .fw-bar span { background: #ff8a65; }
.fwi-row.lv6 { border-color: rgba(239, 83, 80, 0.5); }
.fwi-row.lv6 .fw-val, .fwi-row.lv6 .fw-lbl { color: #ff8a80; }
.fwi-row.lv6 .fw-bar span { background: #ef5350; }

/* --- «Κοντά σου» -----------------------------------------------------------
   Το πρώτο πράγμα που βλέπει ο χρήστης στη σελίδα Φωτιές. Σκόπιμα πιο έντονο
   από τα υπόλοιπα μπλοκ: είναι η απάντηση, όχι ένα ακόμη πλαίσιο δεδομένων. */
.fire-near {
    /* Πλήρες πλάτος, όπως το banner του 112 και το πλέγμα των στατιστικών από
       κάτω. Είχε cap στα 900px και έβγαινε στενότερο από τα γειτονικά μπλοκ. */
    margin: 0 0 12px;
    max-width: none;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--card);
    overflow: hidden;
}
.fire-near[hidden] { display: none; }

.near-head {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
}
/* Το εικονίδιο σε στρογγυλό δισκίο, όπως τα υπόλοιπα σήματα της εφαρμογής. */
.near-ic {
    flex: 0 0 auto;
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    font-size: 1.15rem; line-height: 1;
}
.near-ic img.emoji { height: 1.15rem; width: 1.15rem; }
.near-title { font-size: 1.02rem; font-weight: 600; }
.near-sub { font-size: 0.83rem; color: var(--muted); margin-top: 3px; }

/* Ζώνες: η ένταση του χρώματος ακολουθεί την απόσταση. */
.fire-near.z-red    { border-color: rgba(239, 83, 80, 0.55); }
.fire-near.z-orange { border-color: rgba(255, 167, 38, 0.5); }
.fire-near.z-yellow { border-color: rgba(255, 213, 79, 0.42); }
.fire-near.is-clear   { border-color: rgba(34, 197, 94, 0.42); }
/* «Δεν ξέρουμε» - ουδέτερο, όχι πράσινο. Δεν καθησυχάζουμε χωρίς δεδομένα. */
.fire-near.is-unknown { border-color: rgba(255, 213, 79, 0.45); }
.fire-near.is-unknown .near-head { background: rgba(255, 213, 79, 0.10); }
.fire-near.is-unknown .near-sub a { color: var(--accent); }

.near-head.z-red    { background: rgba(239, 83, 80, 0.16); }
.near-head.z-orange { background: rgba(255, 167, 38, 0.14); }
.near-head.z-yellow { background: rgba(255, 213, 79, 0.10); }
.fire-near.is-clear .near-head { background: rgba(34, 197, 94, 0.12); }

/* Στη σελίδα μιας περιοχής/παραλίας: εμφανίζεται ΜΟΝΟ όταν υπάρχει φωτιά
   εντός ακτίνας. Απουσία μπλοκ = καμία φωτιά κοντά· δεν γεμίζουμε την οθόνη
   με «όλα καλά» σε κάθε τοποθεσία. */
.loc-near { margin: 0 auto 12px; max-width: 760px; }
.loc-near .near-head { padding: 10px 14px; }
.loc-near .near-title { font-size: 0.96rem; }
.loc-near .near-sub { font-size: 0.79rem; }
.loc-near .near-ic { font-size: 1.25rem; }
.loc-near .near-ic img.emoji { height: 1.25rem; width: 1.25rem; }
.loc-near .ln-more { color: var(--accent); text-decoration: none; white-space: nowrap; }
.loc-near .ln-more:hover { text-decoration: underline; }

/* Στην αρχική: μία διακριτική γραμμή μέσα στο πλαίσιο των καρτελών, ακριβώς
   κάτω από αυτές και πάνω από τις κάρτες. Όχι δεύτερο πλαίσιο δεδομένων. */
.home-near { margin: 0 0 12px; max-width: none; }
.home-near .near-head { padding: 10px 13px; gap: 10px; }
.home-near .near-title { font-size: 0.94rem; }
.home-near .near-sub { font-size: 0.79rem; }
.home-near .near-ic { font-size: 1.2rem; }
.home-near .near-ic img.emoji { height: 1.2rem; width: 1.2rem; }

.near-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    max-height: 340px;
    overflow-y: auto;
}

/* Κάρτα εστίας: ίδια γλώσσα με τις υπόλοιπες κάρτες της εφαρμογής -
   στρογγυλεμένη, με λεπτό περίγραμμα και έγχρωμη ράβδο ζώνης αριστερά. */
.near-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 14px 10px 11px;
    background: var(--card);
    border: 1px solid var(--border);
    border-left-width: 3px;
    border-radius: 12px;
    transition: background 0.15s ease;
}
.near-card:hover { background: var(--card-strong); }
.near-card.z-red    { border-left-color: #ef5350; }
.near-card.z-orange { border-left-color: #ffb74d; }
.near-card.z-yellow { border-left-color: #ffd54f; }

/* Η απόσταση είναι το νούμερο-κλειδί: μεγάλο, με τη μονάδα από κάτω. */
.nr-dist {
    flex: 0 0 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.05;
}
.nr-dist b { font-size: 1.22rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nr-dist i { font-size: 0.66rem; font-style: normal; color: var(--muted); margin-top: 1px; }
.near-card.z-red    .nr-dist b { color: #ff8a80; }
.near-card.z-orange .nr-dist b { color: #ffb74d; }
.near-card.z-yellow .nr-dist b { color: #ffd54f; }

.nr-body { flex: 1 1 auto; min-width: 0; }
.nr-line1 {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nr-dir {
    display: inline-block;
    min-width: 1.6em;
    font-weight: 700;
    color: var(--accent);
}
.nr-place { color: var(--muted); }
.nr-place::before { content: ' · '; }
.nr-line2 {
    font-size: 0.78rem;
    color: var(--muted);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 7px;
}
.nr-frp {
    padding: 1px 6px;
    border-radius: 5px;
    background: rgba(255, 138, 128, 0.16);
    color: #ff8a80;
    font-weight: 600;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.nr-meta {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 0.7rem;
}
.nr-src {
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.nr-src.official { background: rgba(79, 195, 247, 0.16); color: var(--accent); }
.nr-src.sat      { background: rgba(255, 255, 255, 0.08); color: var(--muted); }
.nr-age { color: var(--muted); white-space: nowrap; }

/* Υποσημείωση: ήταν μέσα στην επικεφαλίδα και την έκανε δυσανάγνωστη. */
.near-foot {
    padding: 0 14px 11px;
    font-size: 0.74rem;
    color: var(--muted);
}
.near-foot::before { content: 'ℹ '; }

@media (max-width: 620px) {
    .near-list { padding: 8px; gap: 7px; }
    .near-card { padding: 9px 11px 9px 9px; gap: 10px; }
    .nr-dist { flex-basis: 46px; }
    .nr-dist b { font-size: 1.08rem; }
    .nr-meta { font-size: 0.66rem; }
    .near-title { font-size: 0.95rem; }
    .nr-line1 { font-size: 0.86rem; }
}

/* Η σημείωση για το 112: εξηγεί ένα κενό, δεν διαφημίζει δυνατότητα. */
.fire-112-note { margin-top: 8px; }

.fire-stale {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px auto 0;
    max-width: 760px;
    padding: 10px 14px;
    border: 1px solid rgba(255, 167, 38, 0.45);
    border-radius: 12px;
    background: rgba(255, 167, 38, 0.12);
    color: #ffcc80;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.35;
}
.fire-stale.bad {
    border-color: rgba(239, 83, 80, 0.5);
    background: rgba(239, 83, 80, 0.14);
    color: #ff8a80;
}
.fire-stale[hidden] { display: none; }

/* Παλιά ώρα λήψης στην κεφαλίδα: να μη μοιάζει με τρέχουσα ένδειξη. */
.fire-updated.is-stale {
    color: #ffb74d;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
    opacity: 0.9;
}

/* Ενημερωτική γραμμή δορυφορικών θερμικών σημείων (NASA FIRMS) */
/* Πλήρες πλάτος: κάθεται κάτω από τις κάρτες στατιστικών και τις εξηγεί,
   οπότε πρέπει να έχει το ίδιο εύρος με αυτές - όχι στενή στήλη στο κέντρο. */
.fire-firms {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 4px 0 26px;
    max-width: none;
    padding: 10px 15px;
    border: 1px solid rgba(79, 195, 247, 0.35);
    border-radius: 12px;
    background: rgba(79, 195, 247, 0.09);
    color: var(--muted);
    font-size: 0.86rem;
    line-height: 1.35;
}
.fire-firms strong { color: var(--accent); }
.fire-firms[hidden] { display: none; }
.vt-btn:hover .vt-ic { color: var(--accent); }

@media (max-width: 680px) {
    .view-toolbar {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 10px;
        border-radius: 12px;
    }
    .vt-title { align-self: center; }
    .vt-title .combo-trigger { font-size: 0.92rem; padding: 8px 13px; }
    .view-toolbar .loc-sub { font-size: 0.95rem; padding: 0 16px; }
    /* Κουμπάκια στο πλάτος του περιεχομένου τους (όχι τεντωμένα), κεντραρισμένα */
    .vt-actions { justify-content: center; gap: 8px; }
    .vt-btn { flex: 0 0 auto; padding: 7px 13px; font-size: 0.82rem; gap: 6px; }
    .vt-ic { width: 15px; height: 15px; }
}

/* ---- Sub labels (διαχωρισμός Τώρα / Πρόγνωση) ---- */
.sub-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin: 22px 0 10px;
}
.sub-label:first-of-type { margin-top: 6px; }
/* Οι Παραλίες τυλίγουν την πρόγνωση σε δικό τους div, οπότε το πρώτο sub-label
   έπαιρνε λάθος (μικρό) πάνω κενό - ίδια απόσταση με τις Περιοχές. */
#beach-forecast > .sub-label:first-of-type { margin-top: 22px; }
.sub-note { font-weight: 400; text-transform: none; letter-spacing: 0; }

/* ---- Προειδοποιήσεις έκτακτων φαινομένων ---- */
.weather-alerts { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.weather-alerts:empty { display: none; }
.alert {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; border-radius: 14px; border: 1px solid;
}
.alert .a-icon { font-size: 1.5rem; line-height: 1; }
.alert .a-text { font-size: 0.95rem; }
.alert.severe { background: rgba(239, 83, 80, 0.16); border-color: rgba(239, 83, 80, 0.55); }
.alert.warning { background: rgba(255, 183, 77, 0.15); border-color: rgba(255, 183, 77, 0.55); }

/* ---- Current hero ---- */
.current-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(79,195,247,0.18), rgba(255,255,255,0.06));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px 28px;
    display: flex;
    align-items: center;
    gap: 26px;
    flex-wrap: wrap;
}
.current-hero > * { position: relative; z-index: 1; }
.current-hero.loading { justify-content: center; color: var(--muted); }
/* Χρωματισμός όλου του hero ανάλογα με τη σοβαρότητα ειδοποίησης */
.current-hero.hero-sev-warning {
    background: linear-gradient(135deg, rgba(255,183,77,0.22), rgba(255,183,77,0.05));
    border-color: rgba(255,183,77,0.45);
}
.current-hero.hero-sev-severe {
    background: linear-gradient(135deg, rgba(239,83,80,0.24), rgba(239,83,80,0.06));
    border-color: rgba(239,83,80,0.5);
}
/* Χρωματισμός hero παραλίας ανάλογα με το score μπάνιου */
.current-hero.hero-score-0 { background: linear-gradient(135deg, rgba(52,211,153,0.20), rgba(52,211,153,0.05)); border-color: rgba(52,211,153,0.45); }
.current-hero.hero-score-1 { background: linear-gradient(135deg, rgba(255,213,79,0.20), rgba(255,213,79,0.05)); border-color: rgba(255,213,79,0.45); }
.current-hero.hero-score-2 { background: linear-gradient(135deg, rgba(255,183,77,0.22), rgba(255,183,77,0.05)); border-color: rgba(255,183,77,0.45); }
.current-hero.hero-score-3 { background: linear-gradient(135deg, rgba(239,83,80,0.24), rgba(239,83,80,0.06)); border-color: rgba(239,83,80,0.5); }
/* Chip score μέσα στο hero (χρώμα ανά επίπεδο) */
.ha-chip.score-chip { font-weight: 700; }
.ha-chip.score-chip.lvl-0 { background: rgba(52,211,153,0.18);  border-color: rgba(52,211,153,0.5); }
.ha-chip.score-chip.lvl-1 { background: rgba(255,213,79,0.18);  border-color: rgba(255,213,79,0.5); }
.ha-chip.score-chip.lvl-2 { background: rgba(255,183,77,0.18);  border-color: rgba(255,183,77,0.5); }
.ha-chip.score-chip.lvl-3 { background: rgba(239,83,80,0.18);   border-color: rgba(239,83,80,0.5); }
/* Ειδοποιήσεις μέσα στο hero: στον κενό χώρο ανάμεσα στη θερμοκρασία και τα pills,
   κεντραρισμένες κατακόρυφα (χωρίς να δημιουργούν νέα γραμμή). */
.hero-alerts {
    flex: 1 1 0; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column; gap: 8px;
    justify-content: center; align-items: flex-start;
    padding: 0 6px;
}
.ha-chip {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-width: 0;
    padding: 8px 14px; border-radius: 12px;
    font-size: 0.9rem; border: 1px solid; color: var(--text);
    background: rgba(255,255,255,0.08);
}
/* Το κείμενο κόβεται (έως 2 γραμμές) ώστε η ειδοποίηση να μη «σπάει» ποτέ το hero */
.ha-tx {
    min-width: 0; overflow: hidden;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.ha-chip.warning { background: rgba(255,183,77,0.18); border-color: rgba(255,183,77,0.5); }
.ha-chip.severe  { background: rgba(239,83,80,0.20);  border-color: rgba(239,83,80,0.6); }
.ha-ic { font-size: 1.2rem; line-height: 1; flex: 0 0 auto; }
.ha-tx strong { font-weight: 700; }
.hero-icon { font-size: 4.6rem; line-height: 1; }
.hero-main { display: flex; flex-direction: column; gap: 2px; }
.hero-temp { font-size: 3.4rem; font-weight: 700; line-height: 1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hero-temp .ht-now { line-height: 1; }
.hero-desc { font-size: 1.05rem; color: var(--text); }
/* Ελάχ./μέγ. σημερινή δίπλα στη θερμοκρασία (χρώματα όπως στην πρόγνωση) */
.hero-hilo { font-size: 1.3rem; font-weight: 800; white-space: nowrap; }
.hero-hilo .hh-lo { color: #7e9cff; }
.hero-hilo .hh-hi { color: #ffb74d; }
.hero-hilo .hh-sep { color: var(--muted); font-weight: 600; margin: 0 4px; }
.hero-place {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px 8px;
    color: var(--text);
    font-size: 1rem;
    font-weight: 600;
}
.hero-place .hp-name { font-weight: 700; }
.hero-place .hp-sub {
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(79, 195, 247, 0.12);
    border: 1px solid rgba(79, 195, 247, 0.28);
}
.hero-place .hp-feel { color: var(--muted); font-weight: 500; }
.hero-place .hp-feel::before { content: "· "; }
/* ---- Σελήνη: δεδομένο, όχι ειδοποίηση ----
   (α) κελί «Σελήνη» μέσα στο πλακίδιο Ανατολή/Δύση/Υψόμετρο, μόνο τη νύχτα
   (β) το εικονίδιο του hero γίνεται πατητό και ανοίγει popover λεπτομερειών */
.hsun-moon { display: inline-flex; align-items: center; font-size: 17px; line-height: 1; }
.hsun-moon img.emoji { width: 18px; height: 18px; }
.moon-cell.moon-cloud { opacity: 0.62; }
.moon-cell.moon-cloud .hsun-moon { filter: grayscale(0.55); }
.moon-cell.is-full .hsun-t { color: #eef3ff; text-shadow: 0 0 12px rgba(226, 236, 255, 0.5); }

/* Πατητό φεγγάρι: διακριτική ένδειξη ότι κρύβει πληροφορία (χωρίς badge/χρώμα alert) */
.hero-icon.moon-ic {
    cursor: pointer; border-radius: 50%;
    transition: transform 0.15s ease, filter 0.15s ease;
    filter: drop-shadow(0 0 10px rgba(226, 236, 255, 0.22));
}
.hero-icon.moon-ic:hover { transform: scale(1.06); filter: drop-shadow(0 0 16px rgba(226, 236, 255, 0.45)); }
.hero-icon.moon-ic:focus-visible { outline: 2px solid rgba(226, 236, 255, 0.7); outline-offset: 4px; }

/* Popover λεπτομερειών σελήνης */
.moon-pop {
    position: fixed; z-index: 1200; width: 250px; max-width: calc(100vw - 16px);
    background: var(--bg2); border: 1px solid rgba(226, 236, 255, 0.28);
    border-radius: 14px; padding: 12px 14px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
    animation: moonPopIn 0.14s ease-out;
}
@keyframes moonPopIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.moon-pop.is-full { border-color: rgba(226, 236, 255, 0.5); box-shadow: 0 18px 44px rgba(0,0,0,0.55), 0 0 22px rgba(226,236,255,0.16); }
.moon-pop .mp-head { display: flex; align-items: center; gap: 10px; padding-bottom: 9px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.moon-pop .mp-emoji { font-size: 1.7rem; line-height: 1; display: inline-flex; }
.moon-pop .mp-emoji img.emoji { width: 30px; height: 30px; }
.moon-pop .mp-ttl { display: flex; flex-direction: column; font-weight: 700; color: var(--text); font-size: 0.95rem; }
.moon-pop .mp-ttl small { font-weight: 500; font-size: 0.72rem; color: var(--muted); }
.moon-pop .mp-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 0.85rem; }
.moon-pop .mp-row > span { color: var(--muted); }
.moon-pop .mp-row > b { font-weight: 700; color: var(--text); text-align: right; }
.moon-pop .mp-row b small { font-weight: 500; color: var(--muted); }
.moon-pop .vis-clear { color: #dbe6ff; }
.moon-pop .vis-cloud { color: var(--muted); }
.loc-name { color: var(--accent); }
.hero-stats {
    margin-left: auto;
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 8px 26px;
}
.hero-stat { display: flex; flex-direction: column; }
.hero-stat .v { font-size: 1.15rem; font-weight: 600; }
.hero-stat .l { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }

/* ---- Daily cards ---- */
.daily-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 16px;
}
.day-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 16px 12px;
    text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.day-card .d-name { font-weight: 700; font-size: 0.9rem; }
.day-card .d-head { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 2px 0; }
.day-card .d-icon { font-size: 2.2rem; line-height: 1; }
.day-card .d-temps { font-size: 1.2rem; font-weight: 800; display: flex; align-items: baseline; gap: 5px; }
.day-card .d-max { color: #ffb74d; }
.day-card .d-sep { color: var(--muted); font-weight: 600; }
.day-card .d-min { color: #7e9cff; }
.day-card .d-pill { width: 100%; margin-top: 8px; }
.day-card .d-pill .hsun-cell { padding: 0 6px; }
.day-card .d-pill .hsun-t { font-size: 0.92rem; }
.day-card .wind-arrow { display: inline-block; }

/* ---- Hourly ---- */
.hourly-block { margin-top: 20px; }
.hourly-tabs { display: flex; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.hourly-tab {
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 10px;
    padding: 6px 16px;
    cursor: pointer;
    transition: 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.15;
}
.hourly-tab .ht-rel { font-weight: 600; }
.hourly-tab .ht-date { font-size: 0.74rem; opacity: 0.8; }
.hourly-tab.active { background: var(--accent); color: #06243a; border-color: var(--accent); font-weight: 600; }
.hourly-tab.active .ht-date { opacity: 0.85; }
.hourly-chart-container { height: 240px; }

/* ---- Station chips (compact) ---- */
/* ---- «Περισσότερες λεπτομέρειες»: κάρτες με δείκτες ---- */
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 14px;
    margin-top: 6px;
}
.detail-card {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 18px;
    padding: 16px 18px;
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
}
.dc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.dc-title { font-size: 0.9rem; font-weight: 600; color: var(--muted); }
.dc-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 10px;
    background: rgba(79, 195, 247, 0.18); color: var(--accent);
}
.dc-svg { width: 17px; height: 17px; }
.dc-val { display: flex; align-items: baseline; gap: 7px; font-size: 1.75rem; font-weight: 800; line-height: 1; }
.dc-unit { font-size: 0.95rem; font-weight: 600; color: var(--muted); }
.dc-tag { font-size: 0.85rem; font-weight: 600; color: var(--muted); align-self: center; text-transform: capitalize; }

/* Μπλε απόχρωση για τις κάρτες δεδομένων θάλασσας (.sea) */
.detail-card.sea {
    background: rgba(79, 195, 247, 0.16);
    border-color: rgba(79, 195, 247, 0.38);
}
.detail-card.sea .dc-ic { background: rgba(79, 195, 247, 0.34); color: #e1f5fe; }
.detail-card.sea .dc-title { color: #b3e5fc; }
.bar.sea { background: rgba(79, 195, 247, 0.20); }
.bar.sea > span { background: linear-gradient(90deg, #4fc3f7, #2f8fe0); }

/* Κάρτες παραλίας (Θάλασσα & Περισσότερες λεπτομέρειες): ίδιο ύψος ανά γραμμή */
.beach-detail .details-grid { align-items: stretch; }
/* Λίγος αέρας πάνω από τις ενότητες που μπήκαν κάτω από το διάγραμμα */
#beach-details { margin-top: 18px; }

/* Segmented bars (Υγρασία / UV) */
.seg-row { display: flex; gap: 6px; margin-top: 14px; }
.seg { flex: 1; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); transition: background .2s; }
.seg.on { background: var(--accent); }
.seg-lbls { display: flex; justify-content: space-between; margin-top: 7px; font-size: 0.72rem; color: var(--muted); }
.seg-lbls .on { color: var(--text); font-weight: 700; }
.seg.uv-0.on { background: #66bb6a; }
.seg.uv-1.on { background: #9ccc65; }
.seg.uv-2.on { background: #ffca28; }
.seg.uv-3.on { background: #ff9800; }
.seg.uv-4.on { background: #ef5350; }

/* Progress bars (Βροχόπτωση / Αίσθηση / Πιθανότητα) */
.bar { position: relative; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.15); margin-top: 14px; }
.bar > span { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.bar.temp { background: linear-gradient(90deg, #4fc3f7, #9ccc65, #ffd54f, #ef5350); }
.bar i { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.45); transform: translate(-50%, -50%); }
.bar i.knob-min { background: #7e9cff; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.45); }
.bar i.knob-max { background: #ffb74d; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.45); }
.hero-right { margin-left: auto; display: flex; flex-direction: column; gap: 10px; }
.hero-pill {
    display: flex;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px; padding: 8px 0;
}
.hsun-cell { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0 14px; position: relative; text-align: center; }
.hsun-cell + .hsun-cell::before { content: ""; position: absolute; left: 0; top: 12%; height: 76%; width: 1px; background: rgba(255, 255, 255, 0.14); }
.hsun-top { display: inline-flex; align-items: center; gap: 6px; }
.hsun-svg, .hero-pill .dc-svg { width: 18px; height: 18px; color: #fff; }
.hsun-t { font-size: 1.08rem; font-weight: 800; white-space: nowrap; letter-spacing: 0.2px; }
.hsun-t small { font-size: 0.58em; font-weight: 600; color: var(--muted); }
.hsun-l { font-size: 0.66rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.hero-pill { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.mm-row { display: flex; justify-content: space-between; align-items: baseline; }
.mm-v { font-size: 1.5rem; font-weight: 800; line-height: 1; display: inline-flex; align-items: baseline; gap: 5px; }
.mm-v small { font-size: 0.42em; font-weight: 600; color: var(--muted); }
.bar-ends { display: flex; justify-content: space-between; margin-top: 7px; font-size: 0.72rem; color: var(--muted); }
/* Επεξηγηματική γραμμή σε κάρτα λεπτομέρειας (π.χ. «Αστάθεια»): μεταφράζει το
   νούμερο σε απλά ελληνικά, ώστε να μη χρειάζεται ο χρήστης να ξέρει τι είναι CAPE. */
.dc-note { margin-top: 10px; font-size: 0.76rem; line-height: 1.45; color: var(--muted); }
.press-tag { margin-top: 10px; text-align: center; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.trend {
    align-self: center; margin-left: auto;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.72rem; font-weight: 700;
    padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.trend .tr-ar { font-size: 0.92rem; line-height: 1; }
.tr-up { color: #9ccc65; background: rgba(156, 204, 101, 0.16); border-color: rgba(156, 204, 101, 0.5); }
.tr-down { color: #ff8a5c; background: rgba(255, 112, 67, 0.16); border-color: rgba(255, 112, 67, 0.5); }
.tr-steady { color: #80d8ff; background: rgba(128, 216, 255, 0.16); border-color: rgba(128, 216, 255, 0.5); }

/* Gauge (Άνεμος) */
.gauge-wrap { position: relative; display: flex; justify-content: center; }
.gauge { width: 150px; height: auto; overflow: visible; }
.g-track { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 9; stroke-linecap: round; }
.g-val { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; }
.g-dot { fill: #fff; stroke: var(--accent); stroke-width: 2.5; }
.gauge-val { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; font-size: 1.35rem; font-weight: 800; }
.gauge-ends { display: flex; justify-content: space-between; padding: 0 16px; margin-top: 2px; font-size: 0.72rem; color: var(--muted); }
.gauge-dir { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.gauge-bf { display: inline-flex; align-items: baseline; gap: 3px; font-size: 1.2rem; font-weight: 800; }
.gauge-bf small { font-size: 0.5em; font-weight: 600; color: var(--muted); }
.gauge-dirtxt { display: inline-flex; align-items: center; gap: 4px; }
.gauge-dir .wind-arrow { display: inline-block; color: var(--accent); }
/* Κάρτα Ήλιος (ανατολή/δύση) */
.sun-row { display: flex; gap: 4px; margin-top: 6px; }
.sun-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sun-ic { font-size: 1.3rem; line-height: 1; color: #ffd54f; }
.sun-ic.sun-set { color: #ff9a62; }
.sun-v { font-size: 1.3rem; font-weight: 800; line-height: 1.1; }
.sun-l { font-size: 0.72rem; color: var(--muted); }
.sun-dur { margin-top: 12px; text-align: center; font-size: 0.78rem; color: var(--muted); }
/* Κάρτα πυξίδας (κατεύθυνση ανέμου) */
.compass-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 2px; }
.compass { width: 108px; height: 108px; overflow: visible; }
.cmp-disc { fill: rgba(255, 255, 255, 0.05); }
.cmp-ring { fill: none; stroke: rgba(255, 255, 255, 0.20); stroke-width: 2; }
.cmp-tick { stroke: rgba(255, 255, 255, 0.28); stroke-width: 1.4; stroke-linecap: round; }
.cmp-tick.maj { stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; }
.cmp-lbl { fill: var(--muted); font-size: 11px; font-weight: 700; }
.cmp-n-lbl { fill: var(--accent-warm); }
.cmp-needle { fill: var(--accent); }
.cmp-needle-tail { fill: rgba(255, 255, 255, 0.25); }
.compass-val { font-size: 1.15rem; font-weight: 800; }
.compass-val small { font-size: 0.7em; font-weight: 600; color: var(--muted); }

.station-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.station-chip {
    text-align: left;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px 16px;
    color: var(--text);
    cursor: pointer;
    transition: 0.18s;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: inherit;
}
.station-chip:hover { background: var(--card-strong); transform: translateY(-3px); box-shadow: var(--shadow); }
.station-chip[hidden] { display: none; }
.chip-temp { font-size: 1.7rem; font-weight: 700; }
.chip-name { font-size: 0.9rem; }
.chip-meta { font-size: 0.8rem; color: var(--muted); margin-top: 4px; }

.stations-empty {
    color: var(--muted);
    background: var(--card);
    border: 1px dashed var(--border);
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}

/* ---- Charts ---- */
.chart-container {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 14px;
    padding: 12px;
    height: 260px;
}

/* ---- Modal ---- */
.modal-overlay {
    position: fixed; inset: 0;
    background: rgba(4, 12, 28, 0.72);
    backdrop-filter: blur(4px);
    display: flex; align-items: center; justify-content: center;
    padding: 18px;
    /* Πάνω από ΟΛΑ: ο χάρτης Leaflet κάθεται στο 1000 και το site-header στο
       1400. Με z-index 50 ο χάρτης περνούσε μπροστά από το modal και έκρυβε
       το μισό παράθυρο. */
    z-index: 1500;
}
.modal-overlay[hidden] { display: none; }
.modal {
    background: linear-gradient(160deg, #0f2a52, #0b1f40);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    width: 100%; max-width: 560px;
    max-height: 90vh; overflow-y: auto;
    padding: 24px;
    position: relative;
}
.modal-close {
    position: absolute; top: 14px; right: 14px;
    background: var(--card); border: 1px solid var(--border);
    color: var(--text); border-radius: 10px;
    width: 40px; height: 40px; cursor: pointer; font-size: 1.3rem;
}
.modal h3 { margin: 0 36px 2px 0; font-size: 1.25rem; }
.modal-time { color: var(--muted); font-size: 0.85rem; margin: 0 0 16px; }
.metric-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 10px; margin-bottom: 18px;
}
.metric {
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 12px 14px;
}
.metric .m-label { font-size: 0.78rem; color: var(--muted); }
.metric .m-value { font-size: 1.3rem; font-weight: 650; margin-top: 2px; }
.metric .m-sub { font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.modal-chart-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

/* ---- Login ---- */
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 16px; }
.login-card {
    background: var(--card-strong);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 32px 28px;
    width: 100%; max-width: 360px;
    display: flex; flex-direction: column;
}
.login-brand { font-size: 1.6rem; font-weight: 700; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 10px; }
.login-brand .brand-logo { width: 40px; height: 40px; border-radius: 10px; flex: 0 0 auto;
    box-shadow: 0 3px 10px rgba(0,0,0,0.4); }
.login-sub { text-align: center; color: var(--muted); margin: 2px 0 20px; }
.login-card label { font-size: 0.82rem; color: var(--muted); margin: 10px 0 4px; }
.login-card input {
    background: rgba(0,0,0,0.25); border: 1px solid var(--border); color: var(--text);
    border-radius: 10px; padding: 11px 12px; font-size: 0.95rem; font-family: inherit;
}
.login-card input:focus { outline: 1px solid var(--accent); }
.login-card button {
    margin-top: 20px; background: var(--accent); color: #06243a; border: none;
    border-radius: 10px; padding: 12px; font-size: 1rem; font-weight: 700; cursor: pointer;
}
.login-card button:hover { filter: brightness(1.08); }
.login-back { text-align: center; margin-top: 16px; color: var(--muted); text-decoration: none; font-size: 0.85rem; }
.login-back:hover { color: var(--text); }

/* ---- Footer ---- */
.modal-station-link {
    display: block;
    margin: 12px auto 0;
    width: fit-content;
    padding: 9px 18px;
    border-radius: 999px;
    background: var(--card-strong);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--border);
}
.modal-station-link:hover { filter: brightness(1.08); }
.modal-station-link:active { transform: translateY(1px); }
.modal-source {
    margin: 10px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 0.78rem;
}
/* ---- Αρχική σελίδα (magazine) ---- */
.home-hero { text-align: center; margin: 4px 0 16px; }
.home-title { margin: 0; font-size: 1.7rem; }
.home-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.92rem; }

.home-alerts { display: flex; flex-direction: column; gap: 8px; margin: 0 0 18px; }
.home-alert {
    padding: 10px 14px; border-radius: 12px; font-size: 0.9rem;
    border: 1px solid var(--border); background: var(--card);
}
.home-alert { display: flex; align-items: center; gap: 10px; }
.home-alert .ha-ic { font-size: 1.2rem; }
.home-alert.warning { background: rgba(255,183,77,0.14); border-color: rgba(255,183,77,0.5); }
.home-alert.severe  { background: rgba(239,83,80,0.16);  border-color: rgba(239,83,80,0.55); }
.home-alert.ok      { background: rgba(52,211,153,0.12); border-color: rgba(52,211,153,0.45); }

.home-section-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin: 28px 0 12px;
    padding-top: 24px;
}
.home-section-head:first-child { margin-top: 6px; padding-top: 0; }
.home-section-head .sub-label { margin: 0; font-size: 1.05rem; }
.home-more {
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px;
    padding: 6px 14px; font-size: 0.82rem; font-weight: 600; cursor: pointer;
}
.home-more:hover { background: var(--card-strong); border-color: var(--accent); }
/* Τρέχουσα τοποθεσία - ξεχωριστό, «δικό σου» hero στην Αρχική */
.hg-head { flex-wrap: wrap; row-gap: 6px; }
.hg-head .sub-label { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; }
.hg-head .sub-label svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: 0.85; }
.hg-head .sub-note { color: var(--muted); }
.hg-head #home-geo-open { flex: 0 0 auto; }
.home-hero {
    cursor: pointer;
    border-width: 2px;
    border-color: rgba(34, 197, 94, 0.9);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.52), rgba(16, 150, 90, 0.30));
    box-shadow: 0 10px 30px rgba(34, 197, 94, 0.34);
    transition: transform 0.12s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.home-hero:hover { transform: translateY(-1px); border-color: rgba(74, 222, 128, 1); box-shadow: 0 12px 34px rgba(50, 210, 110, 0.44); }
.home-hero:active { transform: translateY(0); }
.home-hero:focus-visible { outline: 2px solid var(--geo); outline-offset: 2px; }
/* Το κείμενο του hero τοποθεσίας πάντα αριστερά (υψηλή ειδικότητα ώστε να μη
   το κεντράρει ο mobile κανόνας) */
.home-hero .hero-main { align-items: flex-start; text-align: left; }
.home-hero .hero-place, .home-hero .hero-temp { justify-content: flex-start; }
/* Πιο σφιχτό κενό κάτω από την «τοποθεσία μου» πριν τις «Περιοχές» */
.home-hero { margin-bottom: 8px; }
.home-hero + .home-section-head { margin-top: 12px; padding-top: 8px; }

/* Fallback όταν δεν βρεθεί η τοποθεσία */
.geo-fallback { display: flex; align-items: center; gap: 14px; width: 100%; flex-wrap: wrap; }
.geo-fallback .gf-ic {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 12px; font-size: 1.4rem;
    background: color-mix(in srgb, var(--accent) 16%, transparent);
}
.geo-fallback .gf-ic img.emoji { width: 24px; height: 24px; }
.geo-fallback .gf-body { flex: 1 1 200px; min-width: 0; }
.geo-fallback .gf-title { font-size: 1.02rem; font-weight: 700; color: var(--text); }
.geo-fallback .gf-sub { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }
.geo-fallback .gf-retry { flex: 0 0 auto; }

/* Αποτυχία πρόγνωσης τοποθεσίας: λόγος + κουμπί επανάληψης μέσα στο hero */
.hero-loading .hero-why { color: var(--muted); font-size: 0.85rem; }
.hero-loading .gf-retry { display: block; margin: 10px auto 0; }

.home-more-group { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.home-more-group .home-more { display: inline-flex; align-items: center; gap: 6px; }
.home-more-group .home-more svg { width: 15px; height: 15px; }

/* ===== Αρχική · πάνελ «Έκτακτα» (Φωτιές / Ειδοποιήσεις / Σεισμοί σε καρτέλες) ===== */
/* Η μπάρα έχει πλέον δικό της κουτί, οπότε το πάνελ δεν χρειάζεται δεύτερο
   φόντο από πάνω της - φαινόταν κουτί μέσα σε κουτί. */
.hx-panel {
    background: none;
    border: 0;
    border-radius: 12px;
    padding: 0;
}
/* ΙΔΙΑ ΜΠΑΡΑ ΜΕ ΤΗ ΣΕΛΙΔΑ ΦΩΤΙΕΣ (.ftabs). Δύο συστήματα καρτελών στην ίδια
   εφαρμογή με άλλη εμφάνιση διαβάζονται ως δύο διαφορετικά πράγματα, ενώ
   κάνουν ακριβώς το ίδιο. Ένα ενιαίο γυάλινο κουτί, πλακίδια που μοιράζονται
   το πλάτος, ενεργό γεμάτο accent. */
.hx-tabs {
    display: flex;
    gap: 6px;
    margin: 0 0 12px;
    padding: 5px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
    border: 1px solid var(--border);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10);
    /* Πέντε καρτέλες σε στενή οθόνη: κυλούν ΜΕΣΑ στη μπάρα αντί να σπάνε σε
       δεύτερη γραμμή (το flex-wrap έκανε τη μπάρα να αλλάζει ύψος και να
       χοροπηδά η σελίδα κάθε φορά που άλλαζε ο μετρητής). */
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.hx-tabs::-webkit-scrollbar { display: none; }
.hx-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0; min-width: max-content; white-space: nowrap;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 0;
    border-radius: 11px;
    color: rgba(233, 240, 255, 0.82);
    font-family: inherit;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.hx-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.13); }
.hx-tab:active { transform: scale(0.98); }
.hx-tab.active { background: var(--accent); color: #06243a;
                 box-shadow: 0 2px 10px rgba(79, 195, 247, 0.35); }
.hx-count {
    min-width: 20px;
    padding: 2px 6px;
    border-radius: 7px;
    background: rgba(6, 24, 48, 0.45);
    font-size: 0.74rem;
    text-align: center;
}
.hx-count:empty { display: none; }
.hx-tab.active .hx-count { background: rgba(6, 36, 58, 0.16); }
/* Οι ειδοποιήσεις μέσα στο πάνελ δεν χρειάζονται δικό τους κάτω κενό */
.hx-panel .home-alerts { margin: 0; }
.home-alerts .home-alert-clear { grid-column: 1 / -1; }
/* Εικονίδια καρτελών: ίδιο στυλ γραμμής με τα εικονίδια μέσα στις κάρτες */
.hx-ic { width: 16px; height: 16px; flex: none; }
.hx-pane[hidden] { display: none; }

@media (max-width: 620px) {
    /* Οι πέντε λέξεις δεν χωράνε σε μία γραμμή. Σπάνε ΜΕΣΑ στο κουτί, σε δύο
       γραμμές: τα ονόματα εδώ («Στα δικά μας», «Επίσημες») δεν αναγνωρίζονται
       από το εικονίδιο, οπότε κρυφή οριζόντια κύλιση θα τα έκρυβε. */
    .hx-tabs { padding: 4px; gap: 4px; flex-wrap: wrap; overflow: visible; }
    .hx-tab  { flex: 1 1 auto; min-width: 0; padding: 10px 8px; font-size: 0.82rem; gap: 6px; }
}

/* ===== Έκτακτες ειδοποιήσεις στην Αρχική (full width) ===== */
.home-alerts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.home-alert {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 10px;
    align-items: center; text-align: center;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-left: 4px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
}
.home-alert.severe  { border-left-color: #ef5350; color: #ef5350; background: linear-gradient(155deg, rgba(239,83,80,0.24), rgba(239,83,80,0.06) 58%, var(--card)); }
.home-alert.orange  { border-left-color: #ff9800; color: #ff9800; background: linear-gradient(155deg, rgba(255,152,0,0.22), rgba(255,152,0,0.06) 58%, var(--card)); }
.home-alert.warning { border-left-color: #ffd54f; color: #f0b400; background: linear-gradient(155deg, rgba(255,213,79,0.20), rgba(255,213,79,0.06) 58%, var(--card)); }
/* Κεφαλίδα: badge σοβαρότητας + τύπος προειδοποίησης με καθαρό SVG εικονίδιο */
.hac-head { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.hac-ic { font-size: 1.15rem; line-height: 1; }
.hac-sev {
    font-size: 0.72rem; font-weight: 800; letter-spacing: 0.02em;
    text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
    color: currentColor; background: color-mix(in srgb, currentColor 16%, transparent);
    border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
}
.hac-type {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 0.92rem; font-weight: 700; color: currentColor;
}
.hac-type .dc-svg { width: 18px; height: 18px; }
.hac-title { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.hac-head .hac-title::before { content: "·"; margin-right: 8px; color: var(--muted); font-weight: 400; }
/* Κουτάκια ωρών (ίδιο πλακίδιο με τις κάρτες πρόγνωσης) */
.hac-times { margin-top: 2px; align-self: stretch; }
.hac-times .hsun-cell { padding: 0 8px; }
.hac-times .hsun-t { font-size: 0.92rem; color: var(--text); }
.hac-times .hsun-l { font-size: 0.62rem; }
.hac-src {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.78rem; font-weight: 700; color: var(--text);
    text-decoration: none;
    padding: 5px 11px; border-radius: 10px;
    background: var(--card-strong);
    border: 1px solid var(--border);
}
a.hac-src:hover { border-color: var(--accent); color: var(--accent); }
/* «Όλα καθαρά» πλαίσιο όταν δεν υπάρχουν ειδοποιήσεις */
.home-alert-clear {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 14px;
    background: linear-gradient(180deg, rgba(52,211,153,0.10), transparent 70%), var(--card);
    border: 1px solid var(--border); border-left: 4px solid #34d399;
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 16px 18px;
}
.home-alert-clear .hac-ic { font-size: 1.5rem; }
.hac-clear-txt { display: flex; flex-direction: column; }
.hac-clear-txt strong { font-size: 1rem; color: var(--text); }
.hac-clear-txt small { font-size: 0.85rem; color: var(--muted); margin-top: 2px; }

/* Mobile: τα στοιχεία ώρας σε μία σειρά (χωρίς ψηλό κουτάκι) ώστε να μη φουσκώνει το ύψος */
@media (max-width: 600px) {
    .home-alerts { grid-template-columns: 1fr; }
    .home-alert { min-height: 0; gap: 6px; padding: 14px 16px; }
    .hac-times {
        background: transparent; border: 0; padding: 2px 0;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        flex-wrap: wrap; gap: 4px 18px; justify-content: center;
    }
    .hac-times .hsun-cell { flex: 0 0 auto; flex-direction: row; align-items: baseline; gap: 6px; padding: 0; }
    .hac-times .hsun-cell + .hsun-cell::before { display: none; }
    .hac-times .hsun-svg { display: none; }
    .hac-times .hsun-t { font-size: 0.9rem; }
}

/* Επίσημες προειδοποιήσεις μέσα στο #weather-alerts */
.wa-official:empty, .wa-derived:empty { display: none; }
.wa-official, .wa-derived { display: flex; flex-direction: column; gap: 8px; }
.wa-badge {
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px; white-space: nowrap;
    color: #06243a; background: var(--accent);
}
.wa-time { font-size: 0.8rem; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* Ενότητα Windy στο τέλος των σελίδων περιοχής/παραλίας */
.windy-section { margin-top: 6px; }
.windy-embed { margin-top: 4px; }

/* Magazine grid: μεγάλη featured αριστερά + μικρές δεξιά */
.home-mag {
    display: grid;
    grid-template-columns: 1.1fr 2fr;
    gap: 12px;
    align-items: stretch;
}
.home-small-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    align-content: start;
}
/* Έως 8 μικρές κάρτες σε desktop (περιοχές & παραλίες) */
.home-small-grid .home-card:nth-child(n+9) { display: none; }

/* ===== Οριζόντιο rail μεγάλων καρτών (swipe) ===== */
/* 3 ορατές κάρτες σε desktop· σύρε αριστερά για τις υπόλοιπες. */
.home-rail {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 24px) / 3);
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    padding-bottom: 8px;
    overscroll-behavior-x: contain;
}
.home-rail > .home-card {
    scroll-snap-align: start;
    min-width: 0;
}
.home-rail::-webkit-scrollbar { height: 8px; }
.home-rail::-webkit-scrollbar-track { background: transparent; }
.home-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; }
.home-rail::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Κουκκίδες/pagination κάτω από το rail (ένδειξη ότι σύρεις για επόμενη κάρτα) */
.rail-dots {
    display: flex; justify-content: center; align-items: center;
    gap: 7px; margin: 10px 0 2px;
}
.rail-dot {
    width: 7px; height: 7px; padding: 0; border: 0; cursor: pointer;
    border-radius: 999px; background: var(--border);
    transition: width 0.22s, background 0.22s;
}
.rail-dot:hover { background: var(--muted); }
.rail-dot.active { width: 22px; background: var(--accent); }
.home-card {
    display: flex; flex-direction: column; gap: 6px;
    text-align: left; cursor: pointer;
    background: var(--card); color: var(--text);
    border: 1px solid var(--border); border-radius: 14px;
    padding: 14px 16px;
}
/* Κίνηση/εμφάνιση όπως τα station-chips */
.home-card { transition: 0.18s; }
.home-card:hover { background: var(--card-strong); border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.home-card:active { transform: translateY(-1px); }

/* Χρωματισμός θερμοκρασίας (μοντέρνο, data-driven) */
.t-hot  { color: #ff7043 !important; }
.t-warm { color: #ffb74d !important; }
.t-mild { color: #9ccc65 !important; }
.t-cool { color: #4fc3f7 !important; }
.t-cold { color: #7e9cff !important; }
/* Χρώματα τιμών στατιστικών / σκορ μπάνιου */
.v-wind  { color: #80d8ff; }
.v-humid { color: #4fc3f7; }
.v-rain  { color: #4fc3f7; }
.v-wave  { color: #4dd0e1; }
.sw-0 { color: #34d399; }
.sw-1 { color: #ffd54f; }
.sw-2 { color: #ffb74d; }
.sw-3 { color: #ef5350; }
.home-card { position: relative; overflow: hidden; }
.home-card.feature {
    justify-content: flex-start;
    min-height: 180px;
    padding: 18px 20px;
    border-color: rgba(255, 255, 255, 0.12);
    background: linear-gradient(155deg, rgba(79, 195, 247, 0.20), rgba(13, 74, 147, 0.10) 58%, var(--card));
}
.home-card.feature.beach {
    background: linear-gradient(155deg, rgba(255, 183, 77, 0.22), rgba(216, 127, 58, 0.08) 58%, var(--card));
}
/* Το πάνω κείμενο (κατηγορία/τίτλος/υπότιτλος) αφήνει χώρο για το εικονίδιο. */
.home-card.feature .hc-tag,
.home-card.feature .hc-name,
.home-card.feature .hc-sub { padding-right: 72px; }
/* Εικονίδιο καιρού: ψηλά-δεξιά (πάνω από την ειδοποίηση/θερμοκρασία). Μεγάλο. */
.home-card.feature .hc-graphic {
    position: absolute;
    top: 16px; right: 18px; bottom: auto;
    width: auto; height: auto;
    font-size: 3.4rem; line-height: 1; opacity: 0.9;
    background: none;
    filter: drop-shadow(0 3px 9px rgba(0, 0, 0, 0.30));
}
/* Σειρά θερμοκρασίας: τιμή αριστερά, ειδοποίηση δεξιά (στην ίδια ευθεία) */
.hc-temp-row { display: flex; align-items: center; gap: 10px; }
.home-card.feature .hc-temp-row { margin-top: 8px; }
.hc-temp-row .hc-alert { align-self: center; margin: 0 0 0 auto; max-width: 62%; }
.hc-temp-row .hc-alert > span { white-space: normal; line-height: 1.15; }
/* Inset πλακίδιο 3 μετρήσεων μέσα στη μεγάλη κάρτα */
.hc-stats {
    display: flex; margin-top: 12px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px; padding: 10px 4px;
}
.hc-st { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; position: relative; }
.hc-st + .hc-st::before { content: ""; position: absolute; left: 0; top: 14%; height: 72%; width: 1px; background: rgba(255, 255, 255, 0.13); }
.hc-st-ic { display: inline-flex; color: var(--accent); }
.hc-st-ic .dc-svg { width: 16px; height: 16px; }
.hc-st-v { font-size: 0.98rem; font-weight: 700; line-height: 1.1; color: var(--text); }
.hc-st-v small { font-size: 0.7em; font-weight: 600; color: var(--muted); }
.hc-st-l { font-size: 0.68rem; color: var(--muted); }
.hc-graphic {
    position: absolute; right: 10px; top: 6px;
    font-size: 4.6rem; line-height: 1; opacity: 0.85;
    pointer-events: none; filter: saturate(1.2) drop-shadow(0 2px 7px rgba(0,0,0,0.35));
    will-change: transform;
}
/* Κινούμενα εικονίδια καιρού στα μεγάλα κουτιά */
.hc-graphic.anim-pulse { animation: wxpulse 3.6s ease-in-out infinite; }
.hc-graphic.anim-drift { animation: wxdrift 6s ease-in-out infinite; }
.hc-graphic.anim-bob   { animation: wxbob 3s ease-in-out infinite; }
.hc-graphic.anim-flash { animation: wxflash 2.6s ease-in-out infinite; }
@keyframes wxpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes wxdrift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(-9px); } }
@keyframes wxbob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes wxflash { 0%,44%,100% { opacity: 0.8; } 50% { opacity: 1; } 56% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
    .hc-graphic { animation: none !important; }
}
/* ---- Διακριτική διακόσμηση στις 2 μεγάλες κάρτες ---- */
.home-card.feature::before,
.home-card.feature::after {
    content: ""; position: absolute; pointer-events: none; z-index: 0;
}
/* Απαλό φωτεινό blob που αργοκινείται */
.home-card.feature::before {
    width: 190px; height: 190px; left: -55px; bottom: -65px; border-radius: 50%;
    background: radial-gradient(circle at 32% 32%, rgba(79,195,247,0.28), rgba(79,195,247,0) 70%);
    filter: blur(8px);
    animation: hcGlow 11s ease-in-out infinite;
}
.home-card.feature.beach::before {
    background: radial-gradient(circle at 32% 32%, rgba(255,183,77,0.30), rgba(255,183,77,0) 70%);
}
/* Διακριτικό κύμα-ορίζοντας στο κάτω μέρος */
.home-card.feature::after {
    left: 0; right: 0; bottom: 0; height: 48px;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='48'%20viewBox='0%200%20400%2048'%20preserveAspectRatio='none'%3E%3Cpath%20d='M0,22%20C70,4%20140,38%20210,22%20C290,4%20350,30%20400,18%20L400,48%20L0,48%20Z'%20fill='%23ffffff'%20fill-opacity='0.05'/%3E%3C/svg%3E");
    background-size: 100% 100%; background-repeat: no-repeat;
}
/* Το περιεχόμενο πάντα πάνω από τη διακόσμηση */
.home-card.feature > * { position: relative; z-index: 1; }
@keyframes hcGlow {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.75; }
    50%      { transform: translate(22px, -14px) scale(1.12); opacity: 1; }
}
@keyframes hcDrift {
    from { background-position-x: 0; }
    to   { background-position-x: -220px; }
}
@media (prefers-reduced-motion: reduce) {
    .home-card.feature::before, .home-card.feature::after { animation: none !important; }
}
/* Sparkline τάσης θερμοκρασίας */
.hc-spark-box { display: block; margin-top: 10px; }
.hc-spark-wrap { display: flex; flex-direction: column; gap: 3px; }
.hc-spark-cap { font-size: 0.72rem; color: var(--muted); }
.hc-spark { display: block; width: 100%; height: auto; }
.spk-area { fill: rgba(255,183,77,0.16); stroke: none; }
.spk-line { fill: none; stroke: var(--accent-warm); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spk-dot  { fill: var(--accent-warm); stroke: var(--bg2); stroke-width: 1.5; }

/* Στατιστικά Αρχικής */
.home-stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin: 16px 0 4px;
}
.home-stats:empty { display: none; }
.pv-stats { margin: 0 0 4px; }
/* Επικεφαλίδα ενότητας πανοράματος (ίδιο στυλ με «⚠️ Ειδοποιήσεις»). */
.pv-section-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); margin: 22px 0 10px;
}

/* ---- Πανόραμα: πίνακας ειδοποιήσεων ---- */
.pv-alerts { margin: 16px 0 6px; }
.pv-alerts:empty { display: none; }
.pv-alerts-head {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: var(--muted); margin: 0 0 10px;
}
.pva-count {
    background: rgba(239, 83, 80, 0.20); color: #ff8a86;
    border-radius: 999px; padding: 1px 9px; font-size: 0.75rem; letter-spacing: 0;
}
.pv-alerts-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px;
}
.pv-alert {
    display: flex; align-items: center; gap: 11px;
    text-align: left; cursor: pointer; color: var(--text);
    padding: 10px 13px; border-radius: 13px; border: 1px solid; transition: 0.18s;
}
.pv-alert.warning { background: rgba(255, 183, 77, 0.12); border-color: rgba(255, 183, 77, 0.45); }
.pv-alert.severe  { background: rgba(239, 83, 80, 0.14);  border-color: rgba(239, 83, 80, 0.5); }
.pv-alert:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.pva-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
}
.pv-alert.warning .pva-ic { background: rgba(255, 183, 77, 0.18); color: #ffc77d; }
.pv-alert.severe  .pva-ic { background: rgba(239, 83, 80, 0.20); color: #ff8a86; }
.pva-ic .hc-alert-ic { width: 16px; height: 16px; }
.pva-ic .hc-alert-emo { font-size: 1rem; }
.pva-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.pva-place { font-weight: 700; font-size: 0.9rem; }
.pva-txt { font-size: 0.82rem; color: var(--muted); }
.home-stat {
    display: flex; flex-direction: column; gap: 7px;
    text-align: left; cursor: pointer;
    background: rgba(255, 255, 255, 0.10); color: var(--text);
    border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 16px; padding: 14px 16px;
    transition: 0.18s;
}
.home-stat:hover { background: var(--card-strong); border-color: var(--accent); transform: translateY(-3px); box-shadow: var(--shadow); }
.hs-top { display: flex; align-items: center; justify-content: space-between; }
.hs-lab { font-size: 0.78rem; font-weight: 600; color: var(--muted); }
.hs-ic {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 9px;
    background: rgba(79, 195, 247, 0.18); color: var(--accent);
}
.hs-ic .dc-svg { width: 16px; height: 16px; }
.hs-place { font-size: 0.95rem; font-weight: 600; }
.hs-val { font-size: 1.5rem; font-weight: 800; line-height: 1; }
/* Όταν η τιμή είναι λέξη («καμία») και όχι αριθμός: μικρότερα γράμματα, αλλά
   ίδιο ύψος γραμμής ώστε οι κάρτες να ευθυγραμμίζονται μεταξύ τους. */
.hs-val.hs-word { font-size: 1.05rem; line-height: 1.43; font-weight: 700; }
.hs-hot .hs-ic   { background: rgba(255, 112, 67, 0.20);  color: #ff8a5c; }
.hs-cold .hs-ic  { background: rgba(126, 156, 255, 0.20); color: #9fb4ff; }
.hs-wind .hs-ic  { background: rgba(128, 216, 255, 0.18); color: #80d8ff; }
.hs-humid .hs-ic { background: rgba(79, 195, 247, 0.18);  color: #4fc3f7; }
.hs-rain .hs-ic  { background: rgba(79, 195, 247, 0.18);  color: #4fc3f7; }
.hs-best .hs-ic  { background: rgba(255, 213, 79, 0.18);  color: #ffd54f; }
.hs-sea .hs-ic   { background: rgba(77, 208, 225, 0.18);  color: #4dd0e1; }
.hs-wave .hs-ic  { background: rgba(77, 208, 225, 0.18);  color: #4dd0e1; }
.hs-press .hs-ic { background: rgba(179, 157, 219, 0.20); color: #b39ddb; }
.hs-dry .hs-ic   { background: rgba(255, 204, 128, 0.20); color: #ffcc80; }
/* Μικρή μονάδα μέσα στη μεγάλη τιμή (π.χ. «5 μπφ») */
.hs-unit { font-size: 0.6em; font-weight: 600; color: var(--muted); }

/* ---- Πανόραμα: χρωματιστές κάρτες στατιστικών ---- */
.pv-stats .home-stat { border-width: 1px; }
.pv-stats .hs-val { color: var(--accent); }
.pv-stats .hs-hot   { background: linear-gradient(160deg, rgba(255,138,92,0.16), rgba(255,138,92,0.04)); border-color: rgba(255,138,92,0.34); }
.pv-stats .hs-hot   .hs-val { color: #ff9a70; }
.pv-stats .hs-cold  { background: linear-gradient(160deg, rgba(126,156,255,0.16), rgba(126,156,255,0.04)); border-color: rgba(126,156,255,0.34); }
.pv-stats .hs-cold  .hs-val { color: #aebdff; }
.pv-stats .hs-wind  { background: linear-gradient(160deg, rgba(128,216,255,0.16), rgba(128,216,255,0.04)); border-color: rgba(128,216,255,0.34); }
.pv-stats .hs-wind  .hs-val { color: #93ddff; }
.pv-stats .hs-humid { background: linear-gradient(160deg, rgba(79,195,247,0.16), rgba(79,195,247,0.04)); border-color: rgba(79,195,247,0.34); }
.pv-stats .hs-humid .hs-val { color: #6fd0fb; }
.pv-stats .hs-dry   { background: linear-gradient(160deg, rgba(255,204,128,0.16), rgba(255,204,128,0.04)); border-color: rgba(255,204,128,0.34); }
.pv-stats .hs-dry   .hs-val { color: #ffd699; }
.pv-stats .hs-rain  { background: linear-gradient(160deg, rgba(97,164,255,0.16), rgba(97,164,255,0.04)); border-color: rgba(97,164,255,0.34); }
.pv-stats .hs-rain  .hs-val { color: #8fbcff; }
.pv-stats .hs-press { background: linear-gradient(160deg, rgba(179,157,219,0.16), rgba(179,157,219,0.04)); border-color: rgba(179,157,219,0.34); }
.pv-stats .hs-press .hs-val { color: #c3b0e6; }
.pv-stats .hs-best  { background: linear-gradient(160deg, rgba(255,213,79,0.16), rgba(255,213,79,0.04)); border-color: rgba(255,213,79,0.34); }
.pv-stats .hs-best  .hs-val { color: #ffde75; }
.pv-stats .hs-sea,
.pv-stats .hs-wave  { background: linear-gradient(160deg, rgba(77,208,225,0.16), rgba(77,208,225,0.04)); border-color: rgba(77,208,225,0.34); }
.pv-stats .hs-sea   .hs-val,
.pv-stats .hs-wave  .hs-val { color: #5fdae7; }
.hc-tag {
    font-size: 0.74rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted);
}
.hc-name { font-weight: 700; font-size: 1.02rem; }
.home-card.feature .hc-name { font-size: 1.2rem; }
.hc-sub { font-size: 0.86rem; font-weight: 600; color: var(--accent); margin-top: 1px; }
/* Κρατά τη γραμμή υπότιτλου ακόμη κι αν είναι κενή, ώστε οι κάρτες με/χωρίς
   υπότιτλο να ευθυγραμμίζονται και να έχουν ίδιο ύψος περιεχομένου. */
.home-card.feature .hc-sub { min-height: 1.15em; }
.hc-temp-lg { font-size: 2.4rem; font-weight: 800; color: var(--accent-warm); line-height: 1; }
.hc-temp-lg.muted { color: var(--muted); font-size: 1.4rem; }
.hc-temp { font-size: 1.3rem; font-weight: 700; color: var(--accent-warm); }
.hc-temp.muted { color: var(--muted); font-size: 1rem; }
.hc-meta { font-size: 0.85rem; color: var(--muted); }
.hc-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hc-meta-sm { font-size: 0.8rem; color: var(--muted); }

/* Badge ειδοποίησης πάνω στην κάρτα περιοχής */
.hc-alert {
    display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
    margin-top: 2px;
    font-size: 0.72rem; font-weight: 600; line-height: 1.2;
    padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.hc-alert.warning { background: rgba(255,183,77,0.16); border-color: rgba(255,183,77,0.55); color: #ffc77d; }
.hc-alert.severe  { background: rgba(239,83,80,0.18);  border-color: rgba(239,83,80,0.6);  color: #ff8a86; }
.hc-alert-ic { width: 15px; height: 15px; flex: 0 0 auto; }
.hc-alert-emo { font-size: 0.85rem; line-height: 1; flex: 0 0 auto; }
.hc-alert.severe .hc-alert-ic { animation: alertSway 2.8s ease-in-out infinite; transform-origin: 4px 12px; }
@keyframes alertSway { 0%,100% { transform: translateX(0); } 50% { transform: translateX(1.5px); } }
@media (prefers-reduced-motion: reduce) { .hc-alert-ic { animation: none !important; } }
/* Καμία ειδική περίμετρος στις κάρτες με ειδοποίηση - μόνο το badge */

/* Κάτω ενότητα: Μπάνιο (με κατηγορίες) + Χάρτης (μικρογραφία) - ένα ενιαίο κουτί το καθένα */
.home-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; padding-top: 24px; align-items: stretch; }
.home-panel {
    display: flex; flex-direction: column;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
}
.home-panel .home-tile {
    display: flex; align-items: center; gap: 14px;
    text-align: left; cursor: pointer; color: var(--text);
    background: transparent; border: none; border-radius: 0;
    border-bottom: 1px solid var(--border); padding: 16px 18px;
}
.home-panel .home-tile:hover { background: var(--card-strong); }
.ht-emoji { font-size: 1.9rem; }
.ht-txt { display: flex; flex-direction: column; gap: 2px; }
.ht-txt small { color: var(--muted); font-size: 0.8rem; }
/* Κατηγορίες παραλιών (deep-link στο Μπάνιο) */
.home-cats-box { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.home-cats-label { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.home-cats { display: flex; flex-wrap: wrap; gap: 8px; }
.home-cat {
    cursor: pointer; font-size: 0.85rem; font-weight: 600;
    background: var(--card-strong); color: var(--text);
    border: 1px solid var(--border); border-radius: 10px; padding: 7px 14px;
}
.home-cat:hover { background: var(--accent); color: #06243a; border-color: var(--accent); }
/* Πρόταση ημέρας + παιχνιδιάρικη διακόσμηση */
.home-suggestion:empty { display: none; }
.home-sugg-btn {
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
    background: var(--card-strong); color: var(--text);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 14px; font-size: 0.9rem; cursor: pointer; text-align: left;
}
.home-sugg-btn:hover { border-color: var(--accent); }
.home-fun { position: relative; margin-top: auto; flex: 1; min-height: 84px; overflow: hidden; }
.hf-scene { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 100%; display: block; }
/* Ήλιος: καθαρός κύκλος πάνω δεξιά, ανεξάρτητος από το τέντωμα των κυμάτων */
.hf-sun {
    position: absolute; top: 14px; right: 20px;
    width: 34px; height: 34px; border-radius: 50%; z-index: 1;
    background: radial-gradient(circle at 50% 45%, #fff1c4 0%, #ffd874 42%, #ffb74d 70%, rgba(255,183,77,0) 73%);
    box-shadow: 0 0 16px 3px rgba(255,183,77,0.40);
    animation: hfSunPulse 5s ease-in-out infinite;
}
/* Απαλές ακτίνες που περιστρέφονται πολύ αργά */
.hf-sun::before {
    content: ""; position: absolute; inset: -11px; border-radius: 50%;
    background: repeating-conic-gradient(from 0deg, rgba(255,206,107,0.55) 0deg 4deg, rgba(255,206,107,0) 4deg 22.5deg);
    -webkit-mask: radial-gradient(circle, #000 46%, transparent 60%);
            mask: radial-gradient(circle, #000 46%, transparent 60%);
    animation: hfSunSpin 46s linear infinite;
}
.hf-wave-1 { animation: hfBob 5s ease-in-out infinite; }
.hf-wave-2 { animation: hfBob 3.4s ease-in-out infinite; animation-delay: 0.4s; }
.hf-wave-3 { animation: hfBob 4.2s ease-in-out infinite; animation-delay: 0.2s; }
@keyframes hfBob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes hfSunPulse { 0%,100% { transform: scale(1); opacity: 0.92; } 50% { transform: scale(1.06); opacity: 1; } }
@keyframes hfSunSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .hf-sun, .hf-sun::before, .hf-wave-1, .hf-wave-2, .hf-wave-3 { animation: none; } }
/* Μικρογραφία χάρτη */
.home-map-preview { flex: 1; min-height: 100px; border: none; border-radius: 0; overflow: hidden; cursor: pointer; }

/* Tablet: ακριβώς 2 ολόκληρες κάρτες (οι κουκκίδες δείχνουν ότι υπάρχουν κι άλλες) */
@media (max-width: 900px) {
    .home-rail { grid-auto-columns: calc((100% - 12px) / 2); }
}
@media (max-width: 640px) {
    .home-mag { grid-template-columns: 1fr; }
    .home-bottom { grid-template-columns: 1fr; }
    /* Mobile: κάρτα σε πλήρες πλάτος· οι κουκκίδες δείχνουν ότι υπάρχουν κι άλλες */
    .home-rail { grid-auto-columns: 100%; }
}

/* Μικρές κάρτες Αρχικής (περιοχές & παραλίες): αριθμός & στήλες ανά εύρος ώστε
   να μην μένει μόνη κάρτα σε σειρά. */
/* 494-1020px: ακριβώς 6 κάρτες σε 3 στήλες (2 ισορροπημένες σειρές) */
@media (min-width: 494px) and (max-width: 1020px) {
    .home-small-grid { grid-template-columns: repeat(3, 1fr); }
    .home-small-grid .home-card { display: flex; }
    .home-small-grid .home-card:nth-child(n+7) { display: none; }
}
/* <494px: 4 κάρτες σε 2 στήλες (2×2) */
@media (max-width: 493px) {
    .home-small-grid { grid-template-columns: repeat(2, 1fr); }
    .home-small-grid .home-card { display: flex; }
    .home-small-grid .home-card:nth-child(n+5) { display: none; }
}

/* ---- Χάρτης ---- */
#map-container {
    height: 70vh;
    min-height: 380px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
}
.map-hint {
    color: var(--muted); font-size: 0.85rem; margin: 6px 0 0;
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.map-dot {
    display: inline-block; width: 12px; height: 12px;
    border-radius: 50%; border: 2px solid #fff;
}
.map-dot.region { background: #4fc3f7; }
.map-dot.beach  { background: #ffb74d; }
/* Ετικέτα θερμοκρασίας πάνω στα markers του χάρτη */
.map-temp-tip {
    background: rgba(11, 31, 64, 0.9); color: #fff;
    border: 1px solid var(--border); border-radius: 8px;
    padding: 2px 7px; font-weight: 700; font-size: 0.8rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.map-temp-tip.leaflet-tooltip-right::before,
.map-temp-tip.leaflet-tooltip-left::before { display: none; } /* κρύψε το βελάκι */

/* Το όνομα φαίνεται μόνο στο hover (κουκκίδας ή ταμπελάκι - δρουν ως ένα). */
.map-temp-tip .mt-name { display: none; margin-right: 7px; }
.map-temp-tip.hover .mt-name { display: inline; }
.map-temp-tip.hover {
    background: var(--accent);
    border-color: #fff;
    color: #06243a;
    z-index: 1000;
}
.map-temp-tip.mt-beach.hover { background: var(--accent-warm); }
/* Σημεία χωρίς μέτρηση: το ταμπελάκι εμφανίζεται μόνο στο hover. */
.map-temp-tip.no-temp:not(.hover) { display: none; }
/* Leaflet popup: σκούρο θέμα */
.leaflet-popup-content { font: inherit; }
.leaflet-popup-content a { color: #0a5bd1; font-weight: 600; text-decoration: none; }

.site-footer {
    max-width: 1100px; margin: 30px auto 0;
    text-align: center; color: var(--muted); font-size: 0.82rem;
}
.app-version {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--card-strong);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
}

/* ---- Responsive ---- */

/* Tablet / μεγάλο κινητό (ίδιο όριο με το hamburger, ώστε να μη μένει το hero
   σε desktop διάταξη με άδειο χώρο) */
@media (max-width: 900px) {
    body { padding: 0 12px 40px; }
    section { margin: 18px auto; }

    .site-header { padding: 14px 2px; }
    .header-right { flex-wrap: wrap; justify-content: flex-end; }

    /* (Το μενού γίνεται hamburger ≤900px - δες παρακάτω) */

    /* Hero: ίδια στοίχιση παντού - όπως στο «πράσινο» hero της τοποθεσίας μου
       (κείμενο αριστερά, εικονίδιο δίπλα), ώστε Περιοχές/Παραλίες να μη διαφέρουν. */
    .current-hero { justify-content: flex-start; text-align: left; gap: 18px; padding: 20px; }
    /* Μεγάλα ονόματα τοποθεσίας (π.χ. «Δήμος Διρφύων - Μεσσαπίων») να μη σπρώχνουν
       το εικονίδιο σε δική του σειρά - το κείμενο αναδιπλώνεται δίπλα του, όπως στην Παλλήνη. */
    .current-hero .hero-main { flex: 1 1 0; min-width: 0; align-items: flex-start; text-align: left; }
    .hero-place { justify-content: flex-start; }
    .hero-right { margin-left: 0; width: 100%; }
    .hero-pill { width: 100%; }
    /* Ειδοποιήσεις: δική τους σειρά, κεντραρισμένες σε κινητό/tablet */
    .hero-alerts { flex: 1 1 100%; width: 100%; align-items: center; padding: 0; }
    .ha-chip { width: 100%; justify-content: center; }
    .hsun-cell { padding: 0 8px; }
    .hero-temp { font-size: 2.8rem; }

    /* Οι κάρτες πρόγνωσης μένουν 3 σε σειρά - είναι μικρές κι έτσι βολεύει */
    .daily-cards { gap: 10px; }
}

/* Κινητό */
@media (max-width: 480px) {
    .site-header { gap: 8px; }
    .brand { font-size: 1.35rem; }
    .brand-wrap { gap: 9px; flex-wrap: wrap; }
    .header-clock { min-height: 32px; margin-top: 2px; padding: 0 12px; gap: 8px; }
    .header-clock .hc-date, .header-clock .hc-time { font-size: 0.8rem; }

    /* Οι κεφαλίδες ενοτήτων αναδιπλώνονται καθαρά αντί να στριμώχνονται */
    .home-section-head { flex-wrap: wrap; row-gap: 8px; }
    .home-more-group { justify-content: center; width: 100%; }
    .home-more-group .home-more { flex: 0 1 auto; text-align: center; }
    /* …εκτός από τις «Περιοχές»: τα 3 κουμπιά μένουν στη ΙΔΙΑ γραμμή με τον τίτλο
       (compact), ώστε να μη «πηδάει» το μενού σε δεύτερη σειρά σε κινητό. */
    .home-section-head.hs-inline { flex-wrap: nowrap; gap: 8px; }
    .home-section-head.hs-inline .sub-label { white-space: nowrap; }
    .hs-inline .home-more-group { width: auto; flex: 0 1 auto; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; }
    .hs-inline .home-more-group .home-more { padding: 5px 9px; font-size: 0.74rem; }
    .hg-head #home-geo-open { margin-left: auto; }
    .current-hero { padding: 18px 16px; gap: 14px; }

    /* Μενού: compact, με αναδίπλωση αν χρειαστεί */
    .main-nav { gap: 2px; padding: 4px; }
    .nav-link { padding: 8px 12px; font-size: 0.9rem; }
    .admin-updated { text-align: center; }

    .loc-title .loc-name { font-size: 1.5rem; }

    .hero-icon { font-size: 3.6rem; }
    .hero-temp { font-size: 2.4rem; }
    .hero-stat .v { font-size: 1.05rem; }

    /* Σταθμοί: 2 ανά σειρά αντί για 1 */
    .station-grid { grid-template-columns: repeat(2, 1fr); }
    .chip-temp { font-size: 1.4rem; }

    .modal { padding: 18px; }
    .metric-grid { grid-template-columns: 1fr 1fr; }
    .hourly-chart-container { height: 220px; }
}

/* Hamburger μενού σε κινητά & tablet (κάθετα) - ώστε το μενού να μη «σπάει»
   κάτω από το λογότυπο και να χωράει κι άλλη επιλογή */
@media (max-width: 900px) {
    .site-header { position: relative; z-index: 1400; }
    .nav-toggle { display: inline-flex; align-items: center; }

    .main-nav {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        left: auto;
        width: auto;
        min-width: 210px;
        margin: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        padding: 8px;
        border-radius: 16px;
        background: linear-gradient(160deg, #133a6b, #0f2a52, #0b1f40);
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
        z-index: 1300; /* πάνω από τα controls του χάρτη (Leaflet ~1000) */
    }
    .main-nav.open { display: flex; }
    .nav-link {
        width: 100%;
        justify-content: flex-start;
        padding: 12px 16px;
        font-size: 1rem;
        border-radius: 12px;
    }
}

/* 3ήμερη πρόγνωση σε κινητά: κάθε ημέρα γίνεται πλήρους πλάτους οριζόντια κάρτα
   (όνομα + εικονίδιο + θερμοκρασίες αριστερά, μετρήσεις δεξιά) - πολύ πιο ευανάγνωστο
   από 3 στενές στήλες. */
@media (max-width: 560px) {
    .daily-cards { grid-template-columns: 1fr; gap: 8px; margin-top: 12px; }
    .day-card {
        flex-direction: row;
        align-items: center;
        flex-wrap: wrap;
        text-align: left;
        gap: 10px 12px;
        padding: 12px 14px;
    }
    .day-card .d-name { flex: 0 0 58px; font-size: 0.85rem; }
    .day-card .d-head { margin: 0; gap: 8px; flex: 0 0 auto; }
    .day-card .d-icon { font-size: 1.9rem; }
    .day-card .d-temps { font-size: 1.1rem; }
    /* Οι 3 μετρήσεις: πάντα σε δική τους γραμμή πλήρους πλάτους (να μη βγαίνουν εκτός) */
    .day-card .d-pill { flex: 1 1 100%; width: 100%; min-width: 0; margin-top: 2px; }
    .day-card .d-pill .hsun-cell { padding: 0 4px; min-width: 0; }
    .day-card .d-pill .hsun-t { font-size: 0.9rem; }
}

/* Tablet & μεγάλο κινητό: η 3ήμερη μένει σε 3 στήλες, αλλά αν στριμώχνεται,
   κρατάμε ΜΟΝΟ εικονίδιο + τιμή στις μετρήσεις (χωρίς τις ετικέτες). */
@media (min-width: 561px) and (max-width: 900px) {
    .day-card .d-pill .hsun-l { display: none; }
    .day-card .d-pill .hsun-cell { padding: 0 5px; }
    .day-card .d-pill .hsun-t { font-size: 0.88rem; }
}

/* Πολύ στενές οθόνες */
@media (max-width: 340px) {
    .station-grid { grid-template-columns: 1fr; }
}

/* ===== Φωτιές & έκτακτες καταστάσεις ===== */
.fire-updated { color: var(--muted); font-size: 0.85em; }

/* Κάρτες σύνοψης (επαναχρησιμοποιούν .home-stat) */
.fire-stats { margin-top: 6px; }
.fire-stats .hs-hot .hs-ic  { background: rgba(239, 83, 80, 0.20);  color: #ff8a86; }
.fire-stats .hs-frp .hs-ic  { background: rgba(255, 112, 67, 0.20); color: #ff8a5c; }
.fire-stats .hs-best .hs-ic { background: rgba(255, 183, 77, 0.20); color: #ffc77d; }
.fire-stats .hs-wind .hs-ic { background: rgba(79, 195, 247, 0.18); color: #4fc3f7; }
.fire-stats .hs-ic { font-size: 1.1rem; }
.fire-stats .hs-frp .hs-val { color: #ff8a5c; }
.fire-stats .hs-frp .hs-val small { font-size: 0.55em; font-weight: 600; color: var(--muted); }
/* Χρώμα της τιμής «Μέγιστος κίνδυνος» ανάλογα με την κατηγορία */
.risk-txt-1 { color: #34d399; } .risk-txt-2 { color: #9ccc65; }
.risk-txt-3 { color: #ffd54f; } .risk-txt-4 { color: #ffb74d; } .risk-txt-5 { color: #ef5350; }

/* Χάρτης: περιγραφή + χάρτης ενωμένα σε ένα πλαίσιο */
.fire-map-panel {
    margin: 6px 0 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--card);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.fire-map-intro {
    padding: 14px 18px 13px;
    background: linear-gradient(180deg, rgba(239,83,80,0.07), transparent);
    border-bottom: 1px solid var(--border);
}
.fire-map-intro .sub-label { margin: 0 0 7px; }
.fire-map-intro.below { border-bottom: 0; border-top: 1px solid var(--border);
    background: linear-gradient(0deg, rgba(239,83,80,0.07), transparent); }
.fire-map-intro.below .sub-label { margin: 0; }
.fire-map-intro.below .fire-desc-note { margin-bottom: 0; }
.fire-map-intro.below > :last-child { margin-bottom: 0; }
.fire-desc {
    margin: 0 0 10px;
    font-size: 0.92rem; line-height: 1.6; color: var(--text);
}
.fire-desc strong { color: var(--text); font-weight: 700; }
/* Σημεία επεξήγησης (χρώμα/μέγεθος) σε ξεκάθαρη λίστα */
.fire-desc-points {
    list-style: none; margin: 0 0 10px; padding: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.fire-desc-points li {
    display: flex; align-items: flex-start; gap: 9px;
    font-size: 0.9rem; line-height: 1.55; color: var(--muted);
}
.fire-desc-points strong { color: var(--text); font-weight: 700; }
.fdp-ic { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; }
.fdp-c {
    display: inline-block; margin-left: 4px;
    font-weight: 700; font-size: 0.8rem;
    padding: 1px 9px; border-radius: 999px;
}
.fdp-c.conf-high { color: #ff8a86; background: rgba(239, 83, 80, 0.16); }
.fdp-c.conf-nom  { color: #ffc77d; background: rgba(255, 183, 77, 0.16); }
.fdp-c.conf-low  { color: #c4cad2; background: rgba(158, 158, 158, 0.20); }
/* Προειδοποιητική σημείωση (112) ξεχωριστή & διακριτή */
.fire-desc-note {
    margin: 0;
    font-size: 0.86rem; line-height: 1.55; color: var(--muted);
    background: rgba(255, 183, 77, 0.10);
    border-left: 3px solid rgba(255, 183, 77, 0.6);
    border-radius: 8px; padding: 9px 13px;
}
.fire-desc-note strong { color: var(--text); font-weight: 700; }
#fire-map-container { position: relative; }
#fire-map {
    height: 440px;
    border: 0; border-radius: 0; box-shadow: none;
    overflow: hidden;
}
.fire-legend {
    position: absolute; left: 12px; bottom: 12px; z-index: 500;
    display: flex; flex-direction: column; gap: 4px;
    background: rgba(11, 31, 64, 0.82);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    border: 1px solid var(--border); border-radius: 12px;
    padding: 10px 12px; font-size: 0.78rem; color: var(--text);
}
.fl-row { display: flex; align-items: center; gap: 7px; }
.fl-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid #fff; flex: 0 0 auto; }
.fl-dot.conf-high { background: #ef5350; }
.fl-dot.conf-nom  { background: #ffb74d; }
.fl-dot.conf-low  { background: #9e9e9e; }
.fl-sq { width: 11px; height: 11px; border-radius: 2px; flex: 0 0 auto; display: inline-block; }
.fl-sq.burned { background: rgba(231,76,60,0.45); border: 1px solid #c0392b; }
.fl-sep { height: 1px; background: var(--border); margin: 3px 0; }
.fl-note { color: var(--muted); font-size: 0.72rem; }
.fl-gly { width: 12px; text-align: center; font-size: 0.82rem; line-height: 1; flex: 0 0 auto; }
/* Υπόμνημα: collapsible σε mobile (toggle), πάντα ανοιχτό σε desktop */
.fire-legend .legend-body { display: flex; flex-direction: column; gap: 4px; }
.legend-toggle { display: none; align-items: center; gap: 6px; background: none; border: 0;
    color: var(--text); font-family: inherit; font-size: 0.76rem; font-weight: 700; cursor: pointer; padding: 0; }
.lt-caret { font-size: 0.7rem; transition: transform 0.15s; }

/* Κατάσταση συμβάντος (αντικαθιστά τα conf- του FIRMS) */
.fdp-c.st-active  { color: #ff8a86; background: rgba(229, 57, 53, 0.16); }
.fdp-c.st-partial { color: #ffbf7a; background: rgba(251, 140, 0, 0.16); }
.fdp-c.st-full    { color: #8fe0a0; background: rgba(67, 160, 71, 0.18); }
.fl-dot.st-active  { background: #e53935; }
.fl-dot.st-partial { background: #fb8c00; }
.fl-dot.st-full    { background: #43a047; }

/* Markers συμβάντων (divIcon) στον χάρτη */
.inc-div { background: none; border: 0; }
.inc-pin {
    display: flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    font-size: 0.82rem; line-height: 1;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.45);
}
.inc-pin.st-active  { background: #e53935; }
.inc-pin.st-partial { background: #fb8c00; }
.inc-pin.st-full    { background: #43a047; }
.inc-pin.st-ended   { background: #9e9e9e; }

/* Feed συμβάντων - κάρτες στο στιλ των σεισμών */
.incident-panel { margin-top: 18px; }
.incident-controls { display: flex; flex-wrap: wrap; justify-content: space-between;
                     gap: 8px 18px; margin: 2px 0 16px; padding: 0 6px; }
/* flex-shrink 1 και min-width 0: με «flex: 0 0 auto» τα δύο group φίλτρων
   αρνούνταν να στενέψουν, οπότε σε μικρή οθόνη ξεχείλιζαν οριζόντια και
   έσερναν ολόκληρη τη σελίδα σε πλάγια κύλιση. */
.incident-controls .pv-chips { flex: 0 1 auto; min-width: 0; }
.incident-controls .pv-chips:last-child { justify-content: flex-end; }
.incident-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; }

.inc-card {
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(135deg, rgba(158,158,158,0.12), rgba(255,255,255,0.04));
    border: 1px solid var(--border); border-left: 4px solid #9e9e9e;
    border-radius: 16px; padding: 12px 15px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: 0.18s;
}
.inc-card.q-clickable { cursor: pointer; }
.inc-card.q-clickable:hover { border-color: var(--accent); transform: translateY(-2px); }
.inc-card.st-active  { border-left-color: #e53935; background: linear-gradient(135deg, rgba(229,57,53,0.20), rgba(255,255,255,0.05)); }
.inc-card.st-partial { border-left-color: #fb8c00; background: linear-gradient(135deg, rgba(251,140,0,0.18), rgba(255,255,255,0.05)); }
.inc-card.st-full    { border-left-color: #43a047; background: linear-gradient(135deg, rgba(67,160,71,0.16), rgba(255,255,255,0.05)); }
.inc-card.st-ended   { border-left-color: #9e9e9e; opacity: 0.72; }

.inc-lead { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 50px; }
.inc-glyph { font-size: 1.7rem; line-height: 1; }
.inc-lead-l { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-top: 5px; }

.inc-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.inc-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.inc-place { font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.inc-when { font-size: 0.76rem; color: var(--muted); white-space: nowrap; }
.inc-sub2 { font-size: 0.78rem; color: var(--muted); line-height: 1.35; }
.inc-pillrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 2px; }
.inc-badge { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.inc-badge.st-active  { color: #ff8a86; background: rgba(229,57,53,0.18); }
.inc-badge.st-partial { color: #ffbf7a; background: rgba(251,140,0,0.18); }
.inc-badge.st-full    { color: #8fe0a0; background: rgba(67,160,71,0.20); }
.inc-badge.st-ended   { color: #c4cad2; background: rgba(158,158,158,0.22); }
/* ΣΙΩΠΗΛΟ ΣΥΜΒΑΝ (stale): η πηγή το δηλώνει ακόμα ενεργό αλλά δεν το έχει
   ενημερώσει 12+ ώρες. Σκόπιμα ουδέτερο μπλε-γκρι: ούτε κόκκινο (δεν ξέρουμε
   ότι καίει) ούτε πράσινο (δεν ξέρουμε ότι έσβησε). */
.inc-badge.st-quiet   { color: #b9c6d6; background: rgba(120,144,176,0.22); }
.inc-pin.st-quiet     { background: #78909c; }
.fl-dot.st-quiet      { background: #78909c; }
.inc-card.st-quiet    { border-left-color: #78909c; opacity: 0.82;
                        background: linear-gradient(135deg, rgba(120,144,176,0.14), rgba(255,255,255,0.04)); }
.inc-meta { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; color: var(--muted); }
.inc-meta .hsun-svg { width: 14px; height: 14px; }
.inc-meta-l { font-weight: 700; color: var(--muted); }
/* Σήμανση πηγής: συμβάν από ανακοίνωση στο X, όχι από τα «Ενεργά Συμβάντα».
   Διακριτικό επίτηδες - είναι πλαίσιο, όχι κατάσταση συναγερμού. */
.inc-src { font-size: 0.68rem; font-weight: 700; padding: 2px 8px; border-radius: 999px;
           white-space: nowrap; color: #9fc7ea; background: rgba(29,155,240,0.16);
           border: 1px solid rgba(29,155,240,0.28); }

/* --- Ιστορικό ανακοινώσεων συμβάντος (modal) --- */
.inc-card.inc-openable { cursor: pointer; }
.inc-card.inc-openable:hover { background: rgba(255,255,255,0.03); }
.inc-more-hint { font-size: 0.72rem; font-weight: 700; color: #9fc7ea; margin-left: auto; }

.imodal-body { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.inc-thread-load { font-size: 0.85rem; color: var(--muted); padding: 8px 0; }

/* Κάθε ανακοίνωση είναι ένα βήμα σε χρονολογική σειρά, γι' αυτό η συνεχής
   κάθετη γραμμή: δείχνει ότι πρόκειται για ΤΟ ΙΔΙΟ συμβάν που εξελίσσεται,
   όχι για ξεχωριστά περιστατικά. */
#incident-modal .itw { padding: 0 0 18px 20px; }
#incident-modal .itw:last-child { padding-bottom: 0; }
#incident-modal .itw::before { left: 5px; top: 6px; bottom: -6px; width: 2px; }
#incident-modal .itw:last-child::before { bottom: 12px; }
/* Κουκκίδα στην αρχή κάθε βήματος. */
#incident-modal .itw::after {
    content: ''; position: absolute; left: 0; top: 4px;
    width: 12px; height: 12px; border-radius: 50%;
    background: #0f2a52; border: 2px solid rgba(29,155,240,0.55);
}
#incident-modal .itw.is-upd::after { border-color: rgba(255,255,255,0.30); }

/* ================= Κάρτες ειδοποίησης 112 =================
   Η ενέργεια μπαίνει πρώτη και μεγάλη: το 112 δεν περιγράφει κατάσταση, δίνει
   εντολή. Το χρώμα αντιστοιχεί στο πόσο επείγουσα είναι. */
.e112-card {
    background: var(--card); border: 1px solid var(--border);
    border-left: 4px solid var(--muted);
    border-radius: 12px; padding: 12px 14px;
    display: flex; flex-direction: column; gap: 5px;
}
.e112-card.a-evac    { border-left-color: #e53935; background: rgba(229,57,53,0.10); }
.e112-card.a-standby { border-left-color: #fb8c00; }
.e112-card.a-avoid   { border-left-color: #fdd835; }

.e112-top { display: flex; align-items: center; gap: 8px; }
.e112-ic  { font-size: 1.05rem; }
.e112-act { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; }
.a-evac    .e112-act { color: #ff8a86; }
.a-standby .e112-act { color: #ffbf7a; }
.a-avoid   .e112-act { color: #ffe98a; }
.a-info    .e112-act { color: var(--muted); }
.e112-when { margin-left: auto; font-size: 0.72rem; color: var(--muted); }

.e112-areas { font-size: 0.98rem; font-weight: 700; line-height: 1.3; }
.e112-sub   { font-size: 0.8rem; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
.e112-near  { color: #ff8a86; font-weight: 700; }
.e112-link  { font-size: 0.75rem; font-weight: 700; color: #9fc7ea; text-decoration: none; }
.e112-link:hover { text-decoration: underline; }

/* Ο μετρητής του 112 στην καρτέλα: κόκκινος, επειδή δεν είναι απλή πληροφορία. */
.hx-count.urgent:not(:empty) {
    background: rgba(229,57,53,0.22); color: #ff8a86;
}

/* Badge πηγής μέσα στην ενιαία ροή - το φοράνε ΟΛΕΣ οι κάρτες (112,
   MeteoAlarm), ώστε καμία να μη μοιάζει «ανώνυμη» δίπλα στις άλλες. */
.e112-src { font-size: 0.68rem; font-weight: 700; color: var(--muted);
            padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,0.07);
            white-space: nowrap; }

/* Πότε ρώτησε τελευταία φορά ο server το 112. Διακριτικό όσο όλα πάνε καλά,
   κόκκινο μόλις η λήψη σταματήσει - μια άδεια καρτέλα δεν πρέπει να μοιάζει
   με ησυχία όταν στην πραγματικότητα είναι βλάβη. */
.e112-src-note {
    grid-column: 1 / -1;
    margin-top: 2px;
    font-size: 0.72rem;
    color: var(--muted);
}
.e112-src-note.bad {
    padding: 8px 12px;
    border: 1px solid rgba(239, 83, 80, 0.5);
    border-radius: 10px;
    background: rgba(239, 83, 80, 0.14);
    color: #ff8a80;
    font-weight: 600;
    line-height: 1.35;
}

/* --- Ενιαία ροή ειδοποιήσεων στη σελίδα Φωτιές --- */
.notif-panel { margin: 18px 0; }
.notif-list  { display: grid; gap: 10px;
               grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.fire-risk-panel { margin: 18px 0; }

/* --- Banner 112: μόνο όταν σε αφορά, γι' αυτό επιτρέπεται να φωνάζει --- */
.e112-banner {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; margin-bottom: 12px;
    border-radius: 14px;
    border: 1px solid rgba(229,57,53,0.45);
    background: linear-gradient(135deg, rgba(229,57,53,0.20), rgba(229,57,53,0.08));
}
.e112-banner[hidden] { display: none; }
.e112-banner.a-standby { border-color: rgba(251,140,0,0.45);
    background: linear-gradient(135deg, rgba(251,140,0,0.18), rgba(251,140,0,0.06)); }
.e112b-ic   { font-size: 1.5rem; }
.e112b-txt  { flex: 1; min-width: 0; }
.e112b-head { font-weight: 800; font-size: 0.95rem; }
.e112b-sub  { font-size: 0.82rem; color: var(--muted); margin-top: 2px; }
.e112b-link { font-size: 0.8rem; font-weight: 700; color: #ff8a86;
              text-decoration: none; white-space: nowrap; }
.e112b-link:hover { text-decoration: underline; }

/* Κάρτα 112 που ανοίγει σε modal. */
.e112-card.e112-openable { cursor: pointer; }
.e112-card.e112-openable:hover { filter: brightness(1.12); }

/* --- Περιεχόμενο modal: ενότητες με ετικέτα --- */
.im-block { margin-bottom: 16px; }
.im-lbl   { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em;
            color: var(--muted); margin-bottom: 6px; }
.im-text  { font-size: 0.9rem; line-height: 1.5; }
.im-areas { display: flex; flex-wrap: wrap; gap: 6px; }
.im-chip  { font-size: 0.82rem; font-weight: 700; padding: 4px 10px;
            border-radius: 999px; background: rgba(229,57,53,0.16);
            border: 1px solid rgba(229,57,53,0.30); color: #ff9a96; }

/* ==========================================================================
   RESPONSIVE - μικρές οθόνες
   Αρχή: κανένα στοιχείο δεν επιβάλλει πλάτος μεγαλύτερο από τη διαθέσιμη
   στήλη. Ένα και μόνο τέτοιο στοιχείο σέρνει ΟΛΗ τη σελίδα σε πλάγια κύλιση,
   γι' αυτό τα grid χρησιμοποιούν min() και τα flex έχουν min-width: 0.
   ========================================================================== */

/* Το minmax(260px,…) απαιτεί 260px ακόμη κι όταν η στήλη είναι 240px.
   Με min() η κάρτα συρρικνώνεται αντί να ξεχειλίσει. */
.notif-list { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }

/* Μεγάλα τοπωνύμια χωρίς κενά δεν πρέπει να σπρώχνουν την κάρτα. */
.e112-areas, .e112-sub, .itw-text, .im-text { overflow-wrap: anywhere; }
.e112-card, .e112-banner { min-width: 0; }
.e112-txt, .e112b-txt { min-width: 0; }

@media (max-width: 620px) {
    /* Banner: ο σύνδεσμος πέφτει κάτω αντί να στριμώχνει το κείμενο. */
    .e112-banner { flex-wrap: wrap; gap: 8px 10px; padding: 12px 14px; }
    .e112b-txt   { flex: 1 1 100%; order: 2; }
    .e112b-ic    { order: 1; }
    .e112b-link  { order: 3; margin-left: auto; }

    /* Τα φίλτρα σε μία στήλη το καθένα, με δικό τους wrap. */
    .incident-controls { gap: 8px; }
    .incident-controls .pv-chips { flex: 1 1 100%; }
    .incident-controls .pv-chips:last-child { justify-content: flex-start; }

    /* Το modal γεμίζει σχεδόν την οθόνη - σε κινητό δεν έχει νόημα το πλαίσιο. */
    .modal-overlay { padding: 10px; }
    .modal { padding: 18px 16px; max-height: 92vh; }
    .modal h3 { font-size: 1.08rem; }
}

@media (max-width: 420px) {
    .e112-top   { flex-wrap: wrap; gap: 6px; }
    .e112-when  { margin-left: 0; }
    .e112-areas { font-size: 0.92rem; }
    .pv-chip    { font-size: 0.79rem; padding: 5px 10px; }
}

/* Κάθε ανακοίνωση: κάθετη γραμμή αριστερά, όπως το thread στο X. */
.itw { position: relative; padding-left: 14px; }
.itw::before { content: ''; position: absolute; left: 3px; top: 4px; bottom: 0;
               width: 2px; background: rgba(29,155,240,0.35); border-radius: 2px; }
.itw.is-upd::before { background: rgba(255,255,255,0.16); }
.itw-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.itw-t { font-size: 0.74rem; font-weight: 700; color: var(--muted); }
.itw-tag { font-size: 0.66rem; font-weight: 700; padding: 1px 7px; border-radius: 999px;
           color: #c4cad2; background: rgba(255,255,255,0.08); }
.itw-tag.first { color: #9fc7ea; background: rgba(29,155,240,0.16); }
.itw-link { font-size: 0.72rem; font-weight: 700; color: #9fc7ea; text-decoration: none; }
.itw-link:hover { text-decoration: underline; }
.itw-text { font-size: 0.84rem; line-height: 1.45; color: var(--text, #e8ecf1); }

/* Αρχική: πρόσφατες πυρκαγιές - ίδιο grid με τους σεισμούς */
.home-fires { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

@media (max-width: 620px) {
    .incident-list { grid-template-columns: 1fr; }
    .home-fires, .home-quakes { grid-template-columns: 1fr; }
}

/* Βέλη ανέμου στον χάρτη */
.wind-div { display: flex; align-items: center; gap: 2px; pointer-events: none; }
.wind-arrow-ic {
    display: inline-block; font-size: 1.15rem; line-height: 1; color: #4fc3f7;
    text-shadow: 0 0 3px rgba(0,0,0,0.6); font-weight: 700;
}
.wind-spd {
    font-size: 0.7rem; font-weight: 700; color: #fff;
    text-shadow: 0 0 3px rgba(0,0,0,0.85);
}

/* Δύο στήλες: κίνδυνος (πιο στενός χάρτης) + ειδοποιήσεις (πιο φαρδιές) */
/* Ίσες στήλες: με 3fr/7fr η λίστα κινδύνου στριμωχνόταν σε στενή κολόνα με
   scrollbar, ενώ δίπλα της οι προειδοποιήσεις είχαν αχρησιμοποίητο πλάτος.
   Με align-items:start η αριστερή στήλη τελείωνε νωρίς και έμενε μεγάλο κενό
   κάτω της, αφού η δεξιά συνεχίζει με τον χάρτη ΓΓΠΠ. Τώρα οι στήλες έχουν
   ίδιο ύψος και η λίστα κινδύνου το γεμίζει. */
.fire-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 28px 0 14px; align-items: stretch; }
.fire-col { min-width: 0; display: flex; flex-direction: column; }
/* Αέρας ανάμεσα στα sections της σελίδας Φωτιές */
#view-fire .fire-stats { margin: 14px 0 28px; }
#view-fire .forecast-section > .sub-label { margin-top: 30px; }

/* Το ύψος του χάρτη ισούται με 3 ειδοποιήσεις (JS)· οι ειδοποιήσεις κυλούν με scrollbar */
.fire-risk-list { display: flex; flex-direction: column; gap: 8px; height: auto; }
.fire-alert-list { height: auto; max-height: 540px; overflow-y: auto; padding-right: 4px; }
/* Επίσημος χάρτης κινδύνου (εικόνα) */
.fire-risk-map {
    text-decoration: none;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.fire-risk-map { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.fire-risk-map img { display: block; width: 100%; flex: 1 1 auto; min-height: 0; object-fit: contain; }
.fire-risk-map .frm-cap {
    display: block; flex: 0 0 auto; padding: 8px 12px;
    font-size: 0.78rem; color: var(--muted); text-align: center;
}
.fire-risk-map:hover { border-color: var(--accent); }
.fire-risk-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    background: var(--card); border: 1px solid var(--border);
    border-radius: 12px; padding: 11px 14px;
}
.frr-region { font-size: 0.95rem; font-weight: 600; }
.frr-badge {
    font-size: 0.78rem; font-weight: 700; white-space: nowrap;
    padding: 4px 11px; border-radius: 999px; border: 1px solid;
}
.frr-badge.risk-1 { background: rgba(52,211,153,0.16); border-color: rgba(52,211,153,0.5);  color: #6ee7b7; }
.frr-badge.risk-2 { background: rgba(156,204,101,0.16); border-color: rgba(156,204,101,0.5); color: #c5e1a5; }
.frr-badge.risk-3 { background: rgba(255,213,79,0.16); border-color: rgba(255,213,79,0.55);  color: #ffe082; }
.frr-badge.risk-4 { background: rgba(255,183,77,0.18); border-color: rgba(255,183,77,0.6);   color: #ffcc80; }
.frr-badge.risk-5 { background: rgba(239,83,80,0.20); border-color: rgba(239,83,80,0.65);    color: #ff8a86; }

/* Ροή ειδοποιήσεων */
.fire-alert-list { display: flex; flex-direction: column; gap: 10px; }
.fire-alert {
    display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
    border: 1px solid rgba(255,255,255,0.10); border-left: 4px solid var(--border);
    border-radius: 12px; padding: 9px 14px; background: var(--card);
}
.fire-alert.severe  { border-left-color: #ef5350; color: #ef5350; background: linear-gradient(155deg, rgba(239,83,80,0.18), rgba(239,83,80,0.05) 60%, var(--card)); }
.fire-alert.orange  { border-left-color: #ff9800; color: #ff9800; background: linear-gradient(155deg, rgba(255,152,0,0.16), rgba(255,152,0,0.05) 60%, var(--card)); }
.fire-alert.warning { border-left-color: #ffd54f; color: #f0b400; background: linear-gradient(155deg, rgba(255,213,79,0.15), rgba(255,213,79,0.05) 60%, var(--card)); }
.fa-top { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.fa-region { font-size: 1.02rem; font-weight: 800; color: var(--text); }
.fa-top .fa-region::before { content: "·"; margin-right: 8px; color: var(--muted); font-weight: 400; }
/* Στοιχεία (ώρες + πηγή) σε μία γραμμή, χωρίς κουτάκι */
.fa-meta { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; font-size: 0.84rem; color: var(--text); }
.fa-mi { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; font-weight: 600; }
.fa-mi-l { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); font-weight: 700; }
.fa-mi .hsun-svg { width: 14px; height: 14px; color: var(--muted); }
.fa-link { font-size: 0.8rem; color: var(--accent); text-decoration: none; white-space: nowrap; margin-left: auto; }
.fa-link:hover { text-decoration: underline; }

/* Ζωντανή δορυφορική εικόνα (Zoom Earth iframe) */
.fire-live {
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); overflow: hidden;
}
.fire-live iframe {
    display: block; width: 100%; height: 520px; border: 0;
}
.fire-live-cap {
    margin: 0; padding: 9px 14px;
    font-size: 0.8rem; color: var(--muted); text-align: center;
}
.fire-live-cap a { color: var(--accent); text-decoration: none; }
.fire-live-cap a:hover { text-decoration: underline; }
.fire-live-btn {
    display: inline-block; margin-top: 8px;
    background: var(--accent); color: #06243a !important;
    font-weight: 700; font-size: 0.9rem; text-decoration: none !important;
    padding: 9px 18px; border-radius: 10px;
}
.fire-live-btn:hover { filter: brightness(1.08); }

/* ---- Tabs ζωντανών χαρτών (Windy / Blitzortung) ----
   Δικές τους κλάσεις (όχι .hourly-tab), γιατί εκείνες τις διαχειρίζεται
   ο κώδικας της ωριαίας πρόγνωσης (ημέρα 0/1/2) και μπερδεύονταν. */
.livemap-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.livemap-tab {
    flex: 1 1 200px;
    background: var(--card);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 10px;
    padding: 8px 14px;
    cursor: pointer;
    transition: 0.2s;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    line-height: 1.15; text-align: center;
}
.livemap-tab .lm-name { font-weight: 600; }
.livemap-tab .lm-sub { font-size: 0.7rem; opacity: 0.75; }
.livemap-tab.active {
    background: var(--accent); color: #06243a;
    border-color: var(--accent); font-weight: 600;
}
.livemap-tab.active .lm-sub { opacity: 0.85; }
.livemap-panel[hidden] { display: none; }
/* Θέση για το iframe που μπαίνει με lazy load - αποφεύγει το «πήδημα» του layout.
   Τα δορυφορικά tiles του Blitzortung θέλουν λίγα δευτερόλεπτα, γι' αυτό δείχνουμε
   μήνυμα φόρτωσης και εμφανίζουμε τον χάρτη με fade όταν είναι έτοιμος. */
.livemap-slot { position: relative; min-height: 520px; background: #061523; }
.livemap-slot iframe {
    display: block; width: 100%; height: 520px; border: 0;
    opacity: 0; transition: opacity .45s ease;
}
.livemap-slot.ready iframe { opacity: 1; }
.livemap-slot::after {
    content: 'Φόρτωση δορυφορικού χάρτη κεραυνών…';
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem; color: var(--muted);
    pointer-events: none; transition: opacity .45s ease;
}
.livemap-slot.ready::after { opacity: 0; }

/* ===== Ραντάρ βροχής (RainViewer + Leaflet) =====
   Πραγματικές μετρήσεις ραντάρ, όχι μοντέλο: αυτό δείχνει το μπουρίνι που
   βρίσκεται ΤΩΡΑ από πάνω σου, εκεί ακριβώς που η πρόγνωση 10 km το χάνει. */
.rv-map { height: 520px; border-radius: 14px; overflow: hidden; background: #061523; }
.rv-bar {
    display: flex; align-items: center; gap: 10px;
    margin-top: 8px; padding: 6px 10px;
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 999px; width: fit-content;
}
.rv-play {
    border: 0; cursor: pointer; line-height: 1;
    background: var(--accent); color: #06243a;
    width: 26px; height: 26px; border-radius: 50%; font-size: 0.7rem;
}
.rv-time { font-size: 0.82rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.rv-time.rv-future { color: var(--accent); font-weight: 600; }

/* Κλίμακα αστάθειας (CAPE) στην κάρτα «Αστάθεια» */
.seg.st-0.on { background: #66bb6a; }
.seg.st-1.on { background: #ffca28; }
.seg.st-2.on { background: #ff9800; }
.seg.st-3.on { background: #ef5350; }

@media (max-width: 760px) {
    .livemap-tab { flex: 1 1 100%; }
    .livemap-slot { min-height: 380px; }
    .livemap-slot iframe { height: 380px; }
    .rv-map { height: 380px; }
}

@media (max-width: 760px) {
    .fire-cols { grid-template-columns: 1fr; gap: 8px; }
    #fire-map { height: 340px; }
    .fire-live iframe { height: 380px; }
    .fire-risk-list { height: auto; }
    .fire-alert-list { height: auto; max-height: 460px; }
}

/* ===== Πανόραμα (σύγκριση όλων σε πίνακα) ===== */
.pv-controls { display: flex; flex-direction: column; gap: 10px; margin: 6px 0 16px; }
.pv-row { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.pv-row-lbl {
    flex: 0 0 auto; min-width: 74px; padding-top: 6px;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--muted);
}
.pv-chips { display: flex; flex-wrap: wrap; gap: 7px; flex: 1 1 auto; }
.pv-chip {
    cursor: pointer; font-size: 0.84rem; font-weight: 600; white-space: nowrap;
    background: var(--card); color: var(--muted);
    border: 1px solid var(--border); border-radius: 10px; padding: 6px 13px;
    transition: 0.16s;
}
.pv-chip:hover { color: var(--text); background: var(--card-strong); }
.pv-chip.active { background: var(--accent); color: #06243a; border-color: var(--accent); }
/* Οι μετρήσεις είναι toggles: όταν είναι ανενεργές φαίνονται «σβηστές» */
.pv-chip.metric { opacity: 0.55; }
.pv-chip.metric.active { opacity: 1; background: rgba(79,195,247,0.18); color: var(--text); border-color: var(--accent); }

.pv-table-wrap {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow);
}
.pv-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.9rem; }
.pv-table thead th {
    position: sticky; top: 0; z-index: 3;
    background: #103058; color: var(--text);
    font-weight: 700; text-align: center; white-space: nowrap;
    padding: 11px 12px; border-bottom: 1px solid var(--border);
}
.pv-col-h { cursor: pointer; user-select: none; }
.pv-col-h:hover { background: #16406f; }
.pv-col-h small { display: block; font-size: 0.66rem; font-weight: 600; color: var(--muted); margin-top: 1px; }
.pv-col-h.sorted { color: var(--accent); }
.pv-arr { color: var(--accent); }
/* Πρώτη στήλη (όνομα) κολλημένη αριστερά */
.pv-name-h, .pv-name {
    position: sticky; left: 0; z-index: 2;
    text-align: left !important; background: #103058;
    box-shadow: 1px 0 0 var(--border);
}
.pv-name-h { z-index: 4; }
.pv-name {
    background: #0e2a4e; padding: 9px 12px; min-width: 158px;
    display: table-cell; vertical-align: middle;
}
.pv-ic { font-size: 1.05rem; margin-right: 7px; }
.pv-nm { font-weight: 700; }
.pv-badge {
    display: block; font-size: 0.7rem; font-weight: 600;
    color: var(--muted); margin-top: 1px;
}
/* Κλικ σε γραμμή -> άνοιγμα σελίδας περιοχής/παραλίας */
.pv-rowlink { cursor: pointer; }
.pv-go {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 1.15rem; font-weight: 700; color: var(--muted);
    opacity: 0; transition: opacity 0.15s;
}
.pv-table tbody tr.pv-rowlink:hover .pv-go { opacity: 1; color: var(--accent); }
.pv-cell {
    text-align: center; white-space: nowrap;
    padding: 9px 12px; border-bottom: 1px solid rgba(255,255,255,0.06);
    font-variant-numeric: tabular-nums;
}
.pv-table tbody tr:hover .pv-cell { background: rgba(255,255,255,0.04); }
.pv-table tbody tr:hover .pv-name { background: #123259; }
.pv-null { color: var(--muted); opacity: 0.6; }
.pv-mk { font-size: 0.78em; margin-left: 4px; vertical-align: middle; line-height: 1; }
.pv-mk.up   { color: #ff5b4d; }   /* υψηλότερη */
.pv-mk.down { color: #5cc6ff; }   /* χαμηλότερη */
/* Highlight υψηλότερης / χαμηλότερης τιμής ανά στήλη */
.pv-max { background: rgba(239,83,80,0.18); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(239,83,80,0.45); border-radius: 6px; }
.pv-min { background: rgba(79,195,247,0.18); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(79,195,247,0.45); border-radius: 6px; }

@media (max-width: 560px) {
    .pv-row-lbl { min-width: 100%; padding-top: 0; }
    .pv-table { font-size: 0.84rem; }
    .pv-name { min-width: 132px; }
    .pv-cell, .pv-table thead th { padding: 8px 9px; }
}

/* ===== Εικονίδιο-σύνδεσμοι μενού (Σύνδεση/Διαχείριση) - εξοικονόμηση χώρου ===== */
.nav-icon { display: inline-flex; align-items: center; justify-content: center; padding-left: 11px; padding-right: 11px; }
.nav-icon .nav-ic-gl { font-size: 1.15rem; line-height: 1; }
/* Το SVG παίρνει το ΙΔΙΟ χρώμα με το μενού (currentColor) - ορατό σε σκούρο φόντο */
.nav-icon .nav-ic-svg { width: 19px; height: 19px; display: block; flex: 0 0 auto; color: inherit; }
.nav-icon .nav-ic-lbl { display: none; }        /* desktop: μόνο εικονίδιο */
@media (max-width: 900px) {
    /* Στο κάθετο μενού κινητού δείχνουμε και την ετικέτα για σαφήνεια */
    .nav-icon { justify-content: flex-start; }
    .nav-icon .nav-ic-lbl { display: inline; margin-left: 10px; }
}

/* ===== Σεισμοί ===== */
#quake-map-container { position: relative; }
#quake-map { height: 440px; border: 0; overflow: hidden; }
.fire-stats .hs-quake .hs-ic { background: rgba(255, 112, 67, 0.20); color: #ff8a5c; }

/* Σφιχτά κενά πάνω από τον χάρτη σεισμών (χωρίς μεγάλα άδεια διαστήματα) */
#view-quakes .forecast-head { margin-bottom: 8px; }
#view-quakes .fire-stats { margin: 8px 0 12px; }
#view-quakes .fire-map-panel { margin-top: 4px; }
#view-quakes .fire-map-intro { padding-top: 12px; padding-bottom: 10px; }
#view-quakes .fire-desc { margin-bottom: 8px; }

/* Υπόμνημα μεγέθους */
.quake-legend { margin-top: 4px; }
.quake-legend .legend-body { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 620px) {
    .legend-toggle { display: inline-flex; }
    .fire-legend.collapsed .legend-body,
    .quake-legend.collapsed .legend-body { display: none; }
    .fire-legend.collapsed .lt-caret,
    .quake-legend.collapsed .lt-caret { transform: rotate(-90deg); }
}
.ql-row { display: flex; align-items: center; gap: 7px; font-size: 0.82rem; color: var(--muted); }
.ql-dot { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid rgba(0,0,0,0.35); flex: 0 0 auto; }
.ql-dot.m2 { background: #ffd54f; }
.ql-dot.m3 { background: #ffb74d; }
.ql-dot.m4 { background: #ff7043; width: 17px; height: 17px; }
.ql-dot.m5 { background: #d32f2f; width: 20px; height: 20px; }

/* Φίλτρα (επαναχρησιμοποιούν .pv-row/.pv-chip του Πανοράματος) */
.quake-controls { display: flex; flex-direction: column; gap: 10px; margin: 16px 0 6px; }

/* Λίστα σεισμών */
.quake-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.quake-card {
    display: flex; align-items: center; gap: 13px;
    background: linear-gradient(135deg, rgba(79,195,247,0.15), rgba(255,255,255,0.05));
    border: 1px solid var(--border); border-left: 4px solid rgba(79,195,247,0.55);
    border-radius: 16px; padding: 12px 15px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: 0.18s;
}
.quake-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.quake-card.q-m3 { border-left-color: #ffb74d; }
.quake-card.q-m4 { border-left-color: #ff7043; background: linear-gradient(135deg, rgba(255,112,67,0.17), rgba(255,255,255,0.05)); }
.quake-card.q-m5 { border-left-color: #d32f2f; background: linear-gradient(135deg, rgba(211,47,47,0.22), rgba(255,255,255,0.05)); }
/* Επικεφαλής: μεγάλο μέγεθος (σαν hero-temp) + ετικέτα «Ρίχτερ» */
.q-lead { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; min-width: 56px; }
.q-mag-big { font-size: 2rem; font-weight: 800; line-height: 1; }
.q-mag-big .q-mag-r { font-size: 0.42em; font-weight: 700; margin-left: 1px; color: var(--muted); }
.q-lead-l { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-top: 4px; }
/* Σώμα: τοποθεσία + «πριν …» στην ίδια γραμμή, και hero-pill με Ώρα/Βάθος */
.q-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 6px; }
.q-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.q-place { font-weight: 700; font-size: 0.98rem; line-height: 1.2; }
.q-when { font-size: 0.78rem; color: var(--muted); white-space: nowrap; }
.q-clickable { cursor: pointer; }
.q-pill { align-self: stretch; }
.q-pill .hsun-t { font-size: 0.92rem; }
.q-pill .hsun-cell { padding: 0 12px; }

/* Αρχική: πρόσφατοι σεισμοί - ίδια λογική με τη λίστα σεισμών (auto-fit, 1 στήλη σε κινητό) */
.home-quakes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }

@media (max-width: 760px) {
    #quake-map { height: 340px; }
    .quake-list { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .home-quakes { grid-template-columns: 1fr; }
}

/* Twemoji: ενιαία εμφάνιση emoji σε κάθε browser/συσκευή */
img.emoji {
    height: 1em;
    width: 1em;
    margin: 0 .05em 0 .1em;
    vertical-align: -0.1em;
    display: inline-block;
}
.ht-emoji img.emoji,
.brand-mark img.emoji {
    height: 1em;
    width: 1em;
}

/* --- Ενεργές φωτιές από δορυφόρο (NASA FIRMS) ------------------------------ */
/* Ξεχωριστό πλαίσιο από τα επίσημα συμβάντα: διαφορετική πηγή, διαφορετική
   βεβαιότητα. Το «παλιό» σημαίνει ότι ο δορυφόρος δεν έχει ξαναπεράσει. */
.firms-panel { margin-top: 4px; }
.firms-card .inc-glyph { font-size: 1.5rem; }
.firms-card.is-old { opacity: 0.66; }
.firms-card.is-old .inc-glyph { filter: grayscale(0.6); }

/* --- Header σε μικρές οθόνες ------------------------------------------------
   Το .site-header είναι flex-wrap:wrap. Όταν το ρολόι μεγάλωνε το .brand-wrap,
   το ☰ δεν χωρούσε και έπεφτε σε δεύτερη γραμμή. Λύση: η πρώτη σειρά δεν σπάει
   ποτέ - συρρικνώνεται το ρολόι, και κάτω από 430px κρύβεται η ημερομηνία. */
@media (max-width: 900px) {
    .site-header { flex-wrap: nowrap; }
    .brand-wrap  { flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; }
    .brand       { white-space: nowrap; }
    .header-clock { min-width: 0; flex: 0 1 auto; overflow: hidden; }
    .nav-toggle  { flex: 0 0 auto; }
}
@media (max-width: 430px) {
    .header-clock .hc-date { display: none; }
    .header-clock .hc-time { padding-left: 0; border-left: 0; }
    .header-clock { padding: 0 10px; }
}

/* ==========================================================================
   ANIMATED SKY - ζωντανό φόντο μόνο στο κεντρικό hero Περιοχής / Παραλίας
   --------------------------------------------------------------------------
   Δομή: <div class="hero-sky"><span class="sk-base">…<span class="sk-scrim">
   Όλα pure CSS (transform/opacity μόνο → GPU), χωρίς canvas & χωρίς rAF.
   Το χρώμα σοβαρότητας παραμένει στο border + σε εσωτερική λάμψη στο scrim.
   ========================================================================== */
.current-hero.sky { background: #070d1c; }
.current-hero > .hero-sky {
    position: absolute; inset: 0; z-index: 0;
    overflow: hidden; border-radius: inherit; pointer-events: none;
}
.hero-sky > span { position: absolute; inset: 0; display: block; }
.hero-sky .sk-l1, .hero-sky .sk-l2, .hero-sky .sk-l3 { will-change: transform; }

/* Scrim: εγγυάται αναγνωσιμότητα του λευκού κειμένου πάνω σε κάθε ουρανό. */
.hero-sky .sk-scrim {
    background: linear-gradient(100deg, rgba(4,9,20,0.56) 0%, rgba(4,9,20,0.28) 52%, rgba(4,9,20,0.18) 100%);
}
/* «Λίγο χρώμα»: εσωτερική λάμψη σοβαρότητας/score κολλητά στο περίγραμμα. */
.hero-sev-warning .sk-scrim { box-shadow: inset 0 0 48px rgba(255,183,77,0.34); }
.hero-sev-severe  .sk-scrim { box-shadow: inset 0 0 52px rgba(239,83,80,0.40); }
.hero-score-0 .sk-scrim { box-shadow: inset 0 0 48px rgba(52,211,153,0.30); }
.hero-score-1 .sk-scrim { box-shadow: inset 0 0 48px rgba(255,213,79,0.30); }
.hero-score-2 .sk-scrim { box-shadow: inset 0 0 48px rgba(255,183,77,0.34); }
.hero-score-3 .sk-scrim { box-shadow: inset 0 0 52px rgba(239,83,80,0.40); }

/* ---------- Βάσεις ουρανού (σκούρες: το κείμενο είναι λευκό) ---------- */
.sky .sk-base { background: linear-gradient(180deg,#071026 0%,#0d1c3d 55%,#14295a 100%); }

.sky-clear.sky-night .sk-base {
    background:
        radial-gradient(300px 185px at 88% -14%, rgba(178,204,255,0.28), transparent 70%),
        linear-gradient(180deg,#0b1533 0%,#152552 46%,#20386f 100%);
}
.sky-clear.sky-day .sk-base {
    background:
        radial-gradient(300px 190px at 88% -16%, rgba(255,232,178,0.28), transparent 70%),
        linear-gradient(180deg,#072a5c 0%,#0d4a86 55%,#1668a8 100%);
}
.sky-partly.sky-night .sk-base {
    background:
        radial-gradient(270px 165px at 86% -14%, rgba(178,204,255,0.22), transparent 70%),
        linear-gradient(180deg,#0d1730 0%,#16244a 46%,#213464 100%);
}
.sky-partly.sky-day .sk-base {
    background:
        radial-gradient(280px 170px at 86% -16%, rgba(255,232,178,0.22), transparent 70%),
        linear-gradient(180deg,#0a2c5f 0%,#114c8a 55%,#1d6ba6 100%);
}
.sky-cloudy.sky-day   .sk-base { background: linear-gradient(180deg,#1a2233 0%,#28324a 55%,#3a475f 100%); }
.sky-cloudy.sky-night .sk-base { background: linear-gradient(180deg,#161e2d 0%,#232d44 55%,#33405c 100%); }
.sky-rain.sky-day     .sk-base { background: linear-gradient(180deg,#141c2c 0%,#1e2941 55%,#2a3854 100%); }
.sky-rain.sky-night   .sk-base { background: linear-gradient(180deg,#121a2a 0%,#1d283e 55%,#293755 100%); }
.sky-storm            .sk-base { background: linear-gradient(180deg,#0f141f 0%,#1a2233 55%,#252f45 100%); }
.sky-snow.sky-day     .sk-base { background: linear-gradient(180deg,#16203a 0%,#22304f 55%,#324263 100%); }
.sky-snow.sky-night   .sk-base { background: linear-gradient(180deg,#111c38 0%,#1c2c52 55%,#2a3d6b 100%); }
.sky-fog.sky-day      .sk-base { background: linear-gradient(180deg,#1f252f 0%,#2c333e 55%,#3a4250 100%); }
.sky-fog.sky-night    .sk-base { background: linear-gradient(180deg,#181f2a 0%,#252d3a 55%,#333c4b 100%); }

/* ---------- ΑΣΤΕΡΙΑ (καθαρή / λίγα σύννεφα, νύχτα) ---------- */
/* Δύο στρώσεις με διαφορετικό tile & ταχύτητα → parallax. Η μετακίνηση γίνεται
   ακριβώς κατά ένα tile, ώστε ο βρόχος να είναι αόρατος. */
.sky-night.sky-clear .sk-l1, .sky-night.sky-partly .sk-l1 {
    left: -220px; width: calc(100% + 220px);
    background-image:
        radial-gradient(1.3px 1.3px at 18px 26px,  rgba(255,255,255,0.95), transparent),
        radial-gradient(1px 1px     at 88px 68px,  rgba(255,255,255,0.72), transparent),
        radial-gradient(1.5px 1.5px at 148px 22px, rgba(214,232,255,0.92), transparent),
        radial-gradient(1px 1px     at 58px 124px, rgba(255,255,255,0.66), transparent),
        radial-gradient(1.2px 1.2px at 196px 104px,rgba(255,255,255,0.86), transparent),
        radial-gradient(1px 1px     at 118px 158px,rgba(255,255,255,0.58), transparent),
        radial-gradient(1.4px 1.4px at 40px 88px,  rgba(255,255,255,0.88), transparent),
        radial-gradient(1px 1px     at 168px 62px, rgba(214,232,255,0.7), transparent),
        radial-gradient(1.2px 1.2px at 8px 148px,  rgba(255,255,255,0.75), transparent),
        radial-gradient(1.1px 1.1px at 128px 108px,rgba(255,255,255,0.68), transparent),
        radial-gradient(1.6px 1.6px at 208px 40px, rgba(255,246,220,0.9), transparent),
        radial-gradient(1px 1px     at 76px 6px,   rgba(255,255,255,0.62), transparent),
        radial-gradient(1.3px 1.3px at 178px 138px,rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px     at 32px 60px,  rgba(255,255,255,0.55), transparent);
    background-size: 220px 180px;
    animation: sk-pan-220 150s linear infinite, sk-twinkle 4.2s ease-in-out infinite;
}
/* Αστρόσκονη: πιο πυκνό & πιο αχνό πλέγμα. Το tile (110px) διαιρεί ακριβώς τη
   μετατόπιση της στρώσης (220px), οπότε ο βρόχος παραμένει αδιόρατος. */
.sky-night.sky-clear .sk-l1::before, .sky-night.sky-partly .sk-l1::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(0.9px 0.9px at 14px 18px, rgba(255,255,255,0.5), transparent),
        radial-gradient(0.8px 0.8px at 62px 44px, rgba(214,232,255,0.42), transparent),
        radial-gradient(1px 1px     at 92px 12px, rgba(255,255,255,0.46), transparent),
        radial-gradient(0.8px 0.8px at 36px 74px, rgba(255,255,255,0.38), transparent),
        radial-gradient(0.9px 0.9px at 78px 68px, rgba(255,255,255,0.44), transparent);
    background-size: 110px 90px;
    animation: sk-twinkle 7.4s ease-in-out infinite -1.1s;
}
.sky-night.sky-clear .sk-l2, .sky-night.sky-partly .sk-l2 {
    left: -310px; width: calc(100% + 310px);
    background-image:
        radial-gradient(1.8px 1.8px at 44px 54px,  rgba(255,246,220,0.95), transparent),
        radial-gradient(1.1px 1.1px at 168px 96px, rgba(255,255,255,0.7), transparent),
        radial-gradient(2px 2px     at 262px 34px, rgba(200,224,255,0.9), transparent),
        radial-gradient(1.2px 1.2px at 96px 148px, rgba(255,255,255,0.62), transparent),
        radial-gradient(1.6px 1.6px at 300px 128px,rgba(255,255,255,0.8), transparent),
        radial-gradient(1.4px 1.4px at 218px 172px,rgba(255,255,255,0.72), transparent),
        radial-gradient(2.2px 2.2px at 128px 18px, rgba(255,246,220,0.92), transparent),
        radial-gradient(1.2px 1.2px at 20px 116px, rgba(214,232,255,0.66), transparent),
        radial-gradient(1.5px 1.5px at 196px 62px, rgba(255,255,255,0.78), transparent),
        radial-gradient(1.1px 1.1px at 276px 96px, rgba(255,255,255,0.6), transparent);
    background-size: 310px 200px;
    animation: sk-pan-310 96s linear infinite, sk-twinkle 6.8s ease-in-out infinite -2.4s;
}
/* Δεύτερη αστρόσκονη, άλλος ρυθμός· tile 155px = μισή μετατόπιση (310px). */
.sky-night.sky-clear .sk-l2::before, .sky-night.sky-partly .sk-l2::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(1px 1px     at 26px 30px,  rgba(255,255,255,0.55), transparent),
        radial-gradient(0.9px 0.9px at 104px 66px, rgba(255,255,255,0.45), transparent),
        radial-gradient(1.1px 1.1px at 68px 92px,  rgba(214,232,255,0.5), transparent),
        radial-gradient(0.9px 0.9px at 138px 14px, rgba(255,255,255,0.42), transparent);
    background-size: 155px 100px;
    animation: sk-twinkle 5.6s ease-in-out infinite -3.7s;
}
.sky-night.sky-partly .sk-l1, .sky-night.sky-partly .sk-l2 { opacity: 0.62; }
/* Λίγα σύννεφα τη νύχτα: τα αστέρια κρατούν τις l1/l2, οπότε τα σύννεφα πάνε
   στην l3 - αλλιώς η πιο ειδική «αστρική» δήλωση θα τα έσβηνε. */
.sky-night.sky-partly .sk-l3 {
    left: -640px; width: calc(100% + 640px); opacity: 0.5;
    background-image:
        radial-gradient(78px 30px  at 70px 34%,  rgba(198,214,242,0.16), transparent 72%),
        radial-gradient(112px 38px at 250px 22%, rgba(198,214,242,0.12), transparent 72%),
        radial-gradient(90px 32px  at 430px 58%, rgba(198,214,242,0.14), transparent 72%);
    background-size: 640px 100%; background-repeat: repeat-x;
    animation: sk-pan-640 88s linear infinite;
}
/* Καθαρή μέρα: απαλή θερμή «ανάσα» πάνω από τον ορίζοντα. */
.sky-clear.sky-day .sk-l1 {
    background: radial-gradient(120% 70% at 50% 118%, rgba(255,226,170,0.16), transparent 68%);
    animation: sk-breathe 14s ease-in-out infinite;
}

/* Πεφταστέρια: δύο, με ασύμβατες περιόδους (11s / 17s) ώστε να μοιάζουν τυχαία. */
.sky-clear.sky-night .sk-l3::before,
.sky-clear.sky-night .sk-l3::after {
    content: ""; position: absolute; top: 14%; left: -14%;
    width: 130px; height: 1.7px; border-radius: 2px; opacity: 0;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(190,220,255,0.35) 45%, rgba(255,255,255,0.95) 100%);
    box-shadow: 0 0 8px rgba(190,220,255,0.85);
    animation: sk-shoot 11s linear infinite;
}
.sky-clear.sky-night .sk-l3::after { top: 44%; animation-duration: 17s; animation-delay: 6.5s; }

/* ---------- ΗΛΙΟΣ (καθαρή, μέρα): αργά περιστρεφόμενες ακτίνες ---------- */
.sky-clear.sky-day .sk-l3, .sky-partly.sky-day .sk-l3 {
    background: conic-gradient(from 0deg at 88% -6%,
        rgba(255,240,200,0.15) 0deg, transparent 20deg,
        rgba(255,240,200,0.11) 40deg, transparent 60deg,
        rgba(255,240,200,0.15) 80deg, transparent 100deg,
        rgba(255,240,200,0.10) 120deg, transparent 140deg,
        rgba(255,240,200,0.14) 160deg, transparent 180deg,
        rgba(255,240,200,0.11) 200deg, transparent 220deg,
        rgba(255,240,200,0.15) 240deg, transparent 260deg,
        rgba(255,240,200,0.10) 280deg, transparent 300deg,
        rgba(255,240,200,0.14) 320deg, transparent 340deg);
    transform-origin: 88% -6%;
    animation: sk-spin 110s linear infinite;
}
.sky-partly.sky-day .sk-l3 { opacity: 0.6; }

/* ---------- ΣΥΝΝΕΦΑ ---------- */
.sky-partly .sk-l1, .sky-cloudy .sk-l1, .sky-rain .sk-l1, .sky-storm .sk-l1 {
    left: -640px; width: calc(100% + 640px);
    background-image:
        radial-gradient(64px 26px  at 62px 40%,  rgba(255,255,255,0.16), transparent 72%),
        radial-gradient(96px 34px  at 214px 26%, rgba(255,255,255,0.13), transparent 72%),
        radial-gradient(72px 28px  at 366px 58%, rgba(255,255,255,0.15), transparent 72%),
        radial-gradient(116px 40px at 524px 22%, rgba(255,255,255,0.11), transparent 72%);
    background-size: 640px 100%; background-repeat: repeat-x;
    animation: sk-pan-640 74s linear infinite;
}
.sky-partly .sk-l2, .sky-cloudy .sk-l2, .sky-rain .sk-l2, .sky-storm .sk-l2 {
    left: -480px; width: calc(100% + 480px);
    background-image:
        radial-gradient(120px 44px at 96px 74%,  rgba(255,255,255,0.10), transparent 72%),
        radial-gradient(150px 52px at 340px 88%, rgba(255,255,255,0.08), transparent 72%);
    background-size: 480px 100%; background-repeat: repeat-x;
    animation: sk-pan-480 46s linear infinite;
}
/* Πυκνότητα ανά κατάσταση: από αραιά «λίγα σύννεφα» έως κλειστός ουρανός. */
.sky-partly .sk-l1 { opacity: 0.55; }
.sky-partly .sk-l2 { opacity: 0.45; }
.sky-cloudy .sk-l1 { opacity: 1; }
.sky-cloudy .sk-l2 { opacity: 0.9; }
.sky-rain .sk-l1, .sky-storm .sk-l1 { opacity: 0.72; }
.sky-rain .sk-l2, .sky-storm .sk-l2 { opacity: 0.6; }
.sky-night.sky-cloudy .sk-l1, .sky-night.sky-cloudy .sk-l2 { opacity: 0.55; }

/* ---------- ΒΡΟΧΗ ---------- */
/* Κάθε σταγόνα = επιμήκης radial μέσα σε tile· η στρώση πέφτει ακριβώς κατά
   ένα tile ύψους, οπότε ο βρόχος είναι αδιόρατος. Το skewX δίνει την κλίση. */
.sky-rain .sk-l3, .sky-storm .sk-l3 {
    top: -80px; bottom: -80px; left: -60px; width: calc(100% + 120px);
    background-image:
        radial-gradient(1.3px 11px at 14px 10px,  rgba(198,222,255,0.55), transparent),
        radial-gradient(1.2px 9px  at 62px 34px,  rgba(198,222,255,0.40), transparent),
        radial-gradient(1.5px 13px at 98px 18px,  rgba(198,222,255,0.50), transparent),
        radial-gradient(1.1px 8px  at 136px 46px, rgba(198,222,255,0.35), transparent);
    background-size: 150px 60px;
    animation: sk-rain-a 0.62s linear infinite;
}
.sky-rain .sk-l3::before, .sky-storm .sk-l3::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(1.7px 16px at 40px 22px,  rgba(214,232,255,0.42), transparent),
        radial-gradient(1.6px 14px at 128px 58px, rgba(214,232,255,0.34), transparent),
        radial-gradient(1.9px 18px at 190px 8px,  rgba(214,232,255,0.38), transparent);
    background-size: 230px 88px;
    animation: sk-rain-b 0.92s linear infinite;
}
.sky-storm .sk-l3 { filter: brightness(1.25); }

/* ---------- ΑΣΤΡΑΠΗ (καταιγίδα): διπλό τρεμόπαιγμα κάθε ~8.5s ---------- */
.sky-storm .sk-flash {
    background: radial-gradient(130% 95% at 70% -14%, rgba(228,241,255,0.9), rgba(176,206,255,0.32) 42%, transparent 74%);
    opacity: 0;
    animation: sk-lightning 8.5s linear infinite;
}

/* ---------- ΧΙΟΝΙ: πτώση + ελαφρύ λίκνισμα ---------- */
.sky-snow .sk-l1, .sky-snow .sk-l2 {
    top: -90px; bottom: -90px; left: -40px; width: calc(100% + 80px);
}
.sky-snow .sk-l1 {
    background-image:
        radial-gradient(2.2px 2.2px at 24px 18px,  rgba(255,255,255,0.85), transparent),
        radial-gradient(1.8px 1.8px at 92px 52px,  rgba(255,255,255,0.7), transparent),
        radial-gradient(2.6px 2.6px at 150px 30px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.6px 1.6px at 60px 96px,  rgba(255,255,255,0.6), transparent),
        radial-gradient(2px 2px     at 176px 82px, rgba(255,255,255,0.78), transparent);
    background-size: 200px 120px;
    animation: sk-snow-a 8.5s linear infinite;
}
.sky-snow .sk-l2 { animation: sk-sway 6.5s ease-in-out infinite; }
.sky-snow .sk-l2::before {
    content: ""; position: absolute; inset: 0;
    background-image:
        radial-gradient(3.4px 3.4px at 56px 40px,  rgba(255,255,255,0.9), transparent),
        radial-gradient(3px 3px     at 190px 96px, rgba(255,255,255,0.8), transparent),
        radial-gradient(3.8px 3.8px at 262px 26px, rgba(255,255,255,0.95), transparent);
    background-size: 300px 170px;
    animation: sk-snow-b 5.2s linear infinite;
}

/* ---------- ΟΜΙΧΛΗ: αργά κύματα θολούρας ---------- */
.sky-fog .sk-l1 {
    left: -700px; width: calc(100% + 700px);
    background-image:
        radial-gradient(250px 48px at 130px 38%, rgba(214,226,242,0.22), transparent 72%),
        radial-gradient(310px 42px at 480px 62%, rgba(214,226,242,0.16), transparent 72%);
    background-size: 700px 100%; background-repeat: repeat-x;
    filter: blur(7px);
    animation: sk-pan-700 58s linear infinite;
}
.sky-fog .sk-l2 {
    left: -460px; width: calc(100% + 460px);
    background-image:
        radial-gradient(200px 60px at 90px 78%,  rgba(226,234,246,0.18), transparent 72%),
        radial-gradient(240px 54px at 330px 22%, rgba(226,234,246,0.13), transparent 72%);
    background-size: 460px 100%; background-repeat: repeat-x;
    filter: blur(10px);
    animation: sk-pan-460 34s linear infinite reverse;
}
.sky-fog .sk-l3 { background: linear-gradient(180deg, rgba(206,218,234,0.10), transparent 45%, rgba(206,218,234,0.12)); animation: sk-breathe 11s ease-in-out infinite; }

/* ---------- Keyframes ---------- */
@keyframes sk-pan-220 { from { transform: translate3d(0,0,0); }   to { transform: translate3d(220px,0,0); } }
@keyframes sk-pan-310 { from { transform: translate3d(0,0,0); }   to { transform: translate3d(310px,0,0); } }
@keyframes sk-pan-460 { from { transform: translate3d(0,0,0); }   to { transform: translate3d(460px,0,0); } }
@keyframes sk-pan-480 { from { transform: translate3d(0,0,0); }   to { transform: translate3d(480px,0,0); } }
@keyframes sk-pan-640 { from { transform: translate3d(0,0,0); }   to { transform: translate3d(640px,0,0); } }
@keyframes sk-pan-700 { from { transform: translate3d(0,0,0); }   to { transform: translate3d(700px,0,0); } }
@keyframes sk-twinkle { 0%, 100% { opacity: 0.42; } 50% { opacity: 1; } }
@keyframes sk-spin    { to { transform: rotate(360deg); } }
@keyframes sk-breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes sk-sway    { 0%, 100% { transform: translate3d(-9px,0,0); } 50% { transform: translate3d(9px,0,0); } }
@keyframes sk-shoot {
    0%   { opacity: 0; transform: rotate(19deg) translate3d(0,0,0); }
    1.6% { opacity: 1; }
    8%   { opacity: 0; transform: rotate(19deg) translate3d(620px,0,0); }
    100% { opacity: 0; transform: rotate(19deg) translate3d(620px,0,0); }
}
@keyframes sk-rain-a { from { transform: skewX(-13deg) translate3d(0,0,0); }   to { transform: skewX(-13deg) translate3d(0,60px,0); } }
@keyframes sk-rain-b { from { transform: skewX(-9deg) translate3d(0,0,0); }    to { transform: skewX(-9deg) translate3d(0,88px,0); } }
@keyframes sk-snow-a { from { transform: skewX(-4deg) translate3d(0,0,0); }    to { transform: skewX(-4deg) translate3d(0,120px,0); } }
@keyframes sk-snow-b { from { transform: translate3d(0,0,0); }                 to { transform: translate3d(0,170px,0); } }
@keyframes sk-lightning {
    0%, 3.4% { opacity: 0; }
    3.6%     { opacity: 0.85; }
    4.1%     { opacity: 0.06; }
    4.5%     { opacity: 0.68; }
    5.8%     { opacity: 0; }
    100%     { opacity: 0; }
}

/* Στα μικρά κινητά κόβουμε τις πιο «ακριβές» στρώσεις (blur / δεύτερη βροχή). */
@media (max-width: 560px) {
    .sky-fog .sk-l2 { display: none; }
    .sky-rain .sk-l3::before, .sky-storm .sk-l3::before { display: none; }
    .sky-night.sky-clear .sk-l2, .sky-night.sky-partly .sk-l2 { opacity: 0.5; }
}

/* Σεβασμός στην προτίμηση «λιγότερη κίνηση»: μένει μόνο ο στατικός ουρανός. */
@media (prefers-reduced-motion: reduce) {
    .hero-sky > span, .hero-sky > span::before, .hero-sky > span::after { animation: none !important; }
    .sky-clear.sky-night .sk-l3::before, .sky-clear.sky-night .sk-l3::after { opacity: 0; }
}

/* ==========================================================================
   ΣΕΛΙΔΑ ΦΩΤΙΕΣ - ΚΑΡΤΕΛΕΣ (Αύγουστος 2026)
   Η σελίδα είχε γίνει έξι μπλοκ σε σειρά και ο επισκέπτης χανόταν. Πλέον η
   κορυφή («με αφορά;») μένει σταθερή και το βάθος μπαίνει σε καρτέλες.
   ========================================================================== */
.ftabs {
    position: sticky; top: 0; z-index: 30;
    display: flex; gap: 6px;
    /* Καμία αρνητική περιθωριοποίηση: το padding του body αλλάζει ανά οθόνη
       (16px / 12px) και ένα σταθερό αρνητικό margin ξεχείλιζε 4px σε κινητό,
       σέρνοντας όλη τη σελίδα σε πλάγια κύλιση. */
    /* ΑΠΟ ΑΚΡΗ ΣΕ ΑΚΡΗ. Ίδια γλώσσα με το πάνω μενού (.main-nav): ημιδιαφανές
       γυαλί, λεπτό περίγραμμα, φωτεινή γραμμή στην κορυφή. Το χρώμα ΔΕΝ είναι
       αδιαφανές μπλε - αφήνει το gradient της σελίδας να περνά από μέσα, ώστε
       η μπάρα να ανήκει στη σελίδα αντί να κάθεται πάνω της. */
    width: 100%;
    margin: 6px 0 16px; padding: 5px;
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.045));
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
            backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid var(--border);
    /* inset = η φωτεινή ακμή που έχει και το πάνω μενού· η από κάτω σκιά
       ξεχωρίζει τη μπάρα όταν κολλήσει στην κορυφή και κυλά περιεχόμενο. */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10),
                0 10px 26px rgba(0, 0, 0, 0.30);
    /* Σε στενή οθόνη οι πέντε καρτέλες δεν χωράνε: κυλούν οριζόντια ΜΕΣΑ στη
       μπάρα - ποτέ δεν σέρνουν ολόκληρη τη σελίδα σε πλάγια κύλιση. */
    overflow-x: auto; overflow-y: hidden;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.ftabs::-webkit-scrollbar { display: none; }
.ftab {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    /* Οι πέντε καρτέλες ΜΟΙΡΑΖΟΝΤΑΙ ισομερώς το πλάτος: η μπάρα διαβάζεται σαν
       ένα ενιαίο χειριστήριο, χωρίς άδειο κομμάτι στα δεξιά. Το
       `min-width: max-content` κρατά την οριζόντια κύλιση σε στενή οθόνη -
       τα κουμπιά δεν στριμώχνονται κάτω από το κείμενό τους. */
    flex: 1 1 0; min-width: max-content; white-space: nowrap;
    padding: 11px 12px;
    /* Ελαφρύ πλακίδιο, όχι σκέτο κείμενο: σε μια μπάρα που πιάνει όλο το
       πλάτος, οι ανενεργές καρτέλες χωρίς φόντο έμοιαζαν με λεζάντες που
       αιωρούνται - δεν φαινόταν ότι πατιούνται. */
    background: rgba(255, 255, 255, 0.055);
    border: 0; border-radius: 11px;
    color: rgba(233, 240, 255, 0.82);
    font-family: inherit; font-size: 0.88rem; font-weight: 700; line-height: 1;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
/* Διαφανή κουμπιά μέσα σε γεμάτη μπάρα: ένα κουτί, όχι πέντε κουτάκια μέσα σε
   ένα έκτο. Το περίγραμμα εμφανίζεται μόνο στο hover και στο ενεργό. */
.ftab:hover { color: var(--text); background: rgba(255, 255, 255, 0.13); }
.ftab:active { transform: scale(0.98); }
/* Ίδιο ακριβώς με το .nav-link.active του πάνω μενού - μία γλώσσα σε όλη τη
   σελίδα, όχι δύο διαφορετικά «ενεργά». */
.ftab.active { background: var(--accent); color: #06243a;
               box-shadow: 0 2px 10px rgba(79, 195, 247, 0.35); }
.ftab[hidden] { display: none; }
.ftab-n {
    min-width: 20px; padding: 2px 6px; border-radius: 7px;
    background: rgba(6, 24, 48, 0.45);
    font-size: 0.74rem; text-align: center;
}
.ftab-n:empty { display: none; }
.ftab.active .ftab-n { background: rgba(6, 36, 58, 0.16); }
/* Κόκκινο μόνο όταν κάτι αφορά ΕΣΕΝΑ. Μονίμως κόκκινος μετρητής δεν σημαίνει
   τίποτα - σταματάς να τον βλέπεις. */
.ftab-n.urgent:not(:empty) { background: #e53935; color: #fff; }
.ftab.active .ftab-n.urgent:not(:empty) { background: #b71c1c; color: #fff; }
.ftab-pane[hidden] { display: none; }
.ftab-pane > .fire-map-panel { margin-top: 0; }

/* --- Ομάδες στη λίστα συμβάντων --- */
.incident-groups { display: flex; flex-direction: column; gap: 24px; }
/* Ο καθολικός κανόνας «section { max-width: 1100px; margin: 22px auto }» έκανε
   κάθε ομάδα να μαζεύεται στο πλάτος του περιεχομένου της και να κεντράρεται:
   τρεις ομάδες, τρία διαφορετικά πλάτη, στοιχισμένες στη μέση. */
.inc-group { min-width: 0; width: 100%; max-width: none; margin: 0; }
.igr-head {
    display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
    margin: 0 0 11px; padding-bottom: 8px;
    border-bottom: 1px solid var(--border);
}
.igr-ic  { font-size: 1rem; line-height: 1; }
.igr-t   { font-weight: 800; font-size: 0.96rem; }
.igr-n   {
    font-size: 0.74rem; font-weight: 700; padding: 2px 9px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.10); color: var(--muted);
}
.igr-sub { font-size: 0.78rem; color: var(--muted); }
.ig-near .igr-t    { color: #ff8a86; }
.ig-near .igr-head { border-bottom-color: rgba(229, 57, 53, 0.45); }
.ig-old  .igr-t    { color: #ffc77d; }
.ig-done .igr-t    { color: #8fe0a0; }
/* Σιωπηλά: ουδέτερο μπλε-γκρι, χαμηλότερα από τα ενεργά και πάνω από τα
   ληγμένα - ό,τι ακριβώς λέει και η θέση τους στη λίστα. */
.ig-quiet .igr-t   { color: #b9c6d6; }
.inc-group.ig-quiet .incident-list { opacity: 0.9; }
.inc-group.ig-done .incident-list { opacity: 0.86; }
/* auto-fill αντί για auto-fit: μια ομάδα με ένα μόνο συμβάν κρατά το ίδιο
   πλάτος κάρτας με τις υπόλοιπες, αντί να τεντώνεται σε όλη τη γραμμή και να
   φαίνεται σαν άλλο είδος στοιχείου. */
.inc-group .incident-list { grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); }
/* Εξαίρεση: ό,τι είναι κοντά σου το θέλουμε μεγάλο. */
.ig-near .incident-list { grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr)); }

/* --- Κάρτα συμβάντος: απόσταση, διάρκεια, ενέργειες --- */
.inc-km {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 0.73rem; font-weight: 700; padding: 3px 9px;
    border-radius: 999px; white-space: nowrap;
    color: #cfe3f5; background: rgba(79, 195, 247, 0.14);
    border: 1px solid rgba(79, 195, 247, 0.26);
}
.inc-km.is-orange { color: #ffc77d; background: rgba(251, 140, 0, 0.16); border-color: rgba(251, 140, 0, 0.34); }
.inc-km.is-red    { color: #ff8a86; background: rgba(229, 57, 53, 0.20); border-color: rgba(229, 57, 53, 0.42); }
.inc-dur.is-long  { color: #ffc77d; }
.inc-acts { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.inc-act {
    font-size: 0.72rem; font-weight: 700; color: #9fc7ea;
    background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer;
    white-space: nowrap;
}
.inc-act:hover { text-decoration: underline; }
/* Το «ιστορικό ↗» είχε δικό του margin-left:auto· μέσα στη νέα ομάδα ενεργειών
   θα έσπρωχνε τον εαυτό του μακριά από το «στον χάρτη». */
.inc-acts .inc-more-hint { margin-left: 0; }

/* --- «Κοντά σου»: η κάρτα οδηγεί στον χάρτη --- */
.near-card.nr-clickable { cursor: pointer; }
.near-card.nr-clickable:hover { border-color: var(--accent); background: var(--card-strong); }

/* Φωτεινό περίγραμμα όταν ο χάρτης μόλις εστίασε σε ένα συμβάν: χωρίς αυτό ο
   χρήστης δεν καταλαβαίνει ότι η εικόνα άλλαξε επειδή το ζήτησε ο ίδιος. */
#fire-map-container.is-focused::after {
    content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 600;
    border: 3px solid rgba(255, 183, 77, 0.9);
    animation: mvFocusFade 2.8s ease-out forwards;
}
@keyframes mvFocusFade { 0% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

/* --- Banner 112: δύο ενέργειες αντί για μία --- */
.e112-banner.e112-openable { cursor: pointer; }
.e112-banner.e112-openable:hover { filter: brightness(1.10); }
.e112b-acts { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.e112b-hint { text-decoration: underline; }
button.e112b-link { background: none; border: 0; padding: 0; font-family: inherit; cursor: pointer; }

@media (max-width: 760px) {
    /* Σε κινητό η μπάρα ΠΙΑΝΕΙ όλο το πλάτος: μια μισή μπάρα στην κορυφή μιας
       στενής οθόνης μοιάζει με σφάλμα, ενώ στην πλατιά είναι σκόπιμο pill. */
    .ftabs { margin: 4px 0 12px; padding: 4px; gap: 3px; }
    .ftab  { padding: 10px 8px; font-size: 0.84rem; }
}
/* Κάτω από 560px οι πέντε καρτέλες δεν χωράνε με τις λέξεις τους. Αντί να
   κυλούν και να μένουν κρυφές, μένει το εικονίδιο και ο μετρητής· η λέξη
   φαίνεται μόνο στην ενεργή, ώστε να ξέρεις πού βρίσκεσαι. */
@media (max-width: 560px) {
    .ftabs { gap: 5px; }
    /* Χωρίς λέξεις, τα πέντε κουμπιά χωράνε: μηδενίζουμε το min-width ώστε
       να μοιραστούν ΙΣΑ το πλάτος αντί να κυλούν. */
    .ftab { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 1.02rem; }
    /* Μόνο εικονίδιο και μετρητής: η λέξη υπάρχει ούτως ή άλλως ως επικεφαλίδα
       μέσα στην ίδια την καρτέλα, ένα εκατοστό πιο κάτω. */
    .ftab .ftab-l { display: none; }
    .ftab-n { font-size: 0.7rem; min-width: 18px; padding: 2px 5px; }
}

@media (max-width: 620px) {
    /* Οι κάρτες σε μία στήλη - το minmax(min(...)) κρατά το πλάτος στο κουτί. */
    .incident-list { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
    .igr-sub { flex: 1 1 100%; }
    /* Οι ενέργειες πέφτουν στη δική τους γραμμή αντί να στριμώχνουν τα badges. */
    .inc-acts { margin-left: 0; flex: 1 1 100%; }
    /* Το banner ξαναστοιβάζεται: τα κουμπιά μαζί, κάτω δεξιά. */
    .e112b-acts { order: 3; margin-left: auto; }
}
/* Οι επικεφαλίδες μέσα στις καρτέλες: αέρας ανάμεσά τους, όχι πριν από την
   πρώτη - εκεί υπάρχει ήδη το κενό της μπάρας καρτελών. */
.ftab-pane > .sub-label { margin-top: 28px; }
.ftab-pane > .sub-label:first-child { margin-top: 0; }
@media (max-width: 620px) {
    .e112b-acts .e112b-link { order: 0; margin-left: 0; }
}

/* ---- Απόδοση χάρτη (CARTO / OpenStreetMap) ----
   Όρος του δωρεάν κλειδιού CARTO: πρέπει να μένει ορατή σε ΚΑΘΕ χάρτη, ακόμα
   και στους μικρούς. Την κρατάμε μικρή και ήσυχη ώστε να μην κλέβει το μάτι
   από τα δεδομένα. Το «Leaflet» μπροστά το σβήνει η mvBaseMap(). */
.leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.74);
    color: #33465c;
    font-size: 0.62rem;
    line-height: 1.6;
    padding: 0 6px;
    border-radius: 6px 0 0 0;
}
.leaflet-control-attribution a { color: #33465c; text-decoration: none; }
.leaflet-control-attribution a:hover { text-decoration: underline; }