@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap");

:root {
  --accent: #00d2ff;
  --accent2: #3a7bd5;
  --bg: #080812;
  --card: rgba(16, 16, 30, 0.8);
  --muted: #8a8a9e;
  --border: rgba(255, 255, 255, 0.07);
}

/* V15 community & moderation interface */
.site-alert {
  max-width: 980px;
  margin: 12px auto 0;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  text-align: center;
}
.site-alert.warning {
  background: #7c2d12;
  color: #fff7ed;
  border: 1px solid #fb923c;
}
.site-alert.danger {
  background: #7f1d1d;
  color: #fff1f2;
  border: 1px solid #fb7185;
}
.site-alert.notice {
  background: #713f12;
  color: #fefce8;
  border: 1px solid #facc15;
}
.comment-compose-guest {
  background: rgba(14, 14, 28, 0.88);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 18px;
}
.comment-compose-title {
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
}
.comment-compose-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.comment-compose-guest input,
.comment-compose-guest textarea {
  box-sizing: border-box;
  width: 100%;
  background: #0a0a1a;
  color: #fff;
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 10px;
  padding: 10px 12px;
  font: 13px Poppins, sans-serif;
  outline: none;
  margin-bottom: 8px;
}
.comment-compose-guest textarea {
  resize: vertical;
}
.comment-compose-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.comment-compose-actions button {
  border-radius: 10px;
  padding: 8px 16px;
  font: 600 13px Poppins, sans-serif;
  cursor: pointer;
}
.comment-signin {
  background: transparent;
  border: 1px solid rgba(0, 210, 255, 0.35);
  color: var(--accent);
}
.comment-post {
  background: var(--accent);
  border: 0;
  color: #061018;
}
/* Desktop nav: only show Home/Τώρα/Ωριαία/Ημερήσια/Μηνιαία — rest live in hamburger */
@media (min-width: 769px) {
  .nav-links [data-tab="stats"],
  .nav-links [data-tab="maps"],
  .nav-links [data-tab="activities"],
  .nav-links [data-tab="settings"],
  .nav-links [data-tab="news"],
  .nav-links [data-tab="comments"] {
    display: none;
  }
  /* Hamburger always visible on desktop */
  .hamburger-btn {
    display: flex !important;
  }
  /* Desktop navbar layout: logo-left, search-center, tabs+hamburger-right */
  .navbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
  }
  .navbar-left {
    grid-column: 1;
  }
  .search-area.desktop-only {
    grid-column: 2;
    justify-self: start;
    min-width: 200px;
    max-width: 340px;
  }
  .nav-links {
    grid-column: 3;
    display: flex;
    flex-wrap: nowrap;
    gap: 2px;
    align-items: center;
  }
  /* hide mobile-only buttons on desktop */
  .mobile-nav-actions {
    display: none !important;
  }
}
@media (max-width: 520px) {
  .comment-compose-fields {
    grid-template-columns: 1fr;
  }
}

/* Mod controls use the same dark cards, fields and buttons as the site. */
#_siteTools {
  background: linear-gradient(
    135deg,
    rgba(13, 34, 62, 0.96),
    rgba(10, 24, 46, 0.96)
  ) !important;
  border-color: rgba(0, 210, 255, 0.28) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
#_siteTools h4 {
  font-size: 16px;
}
#_siteTools input,
#_siteTools select {
  min-height: 38px;
  background: rgba(5, 13, 29, 0.9) !important;
  color: #eaf8ff !important;
  border: 1px solid rgba(0, 210, 255, 0.25) !important;
  border-radius: 9px !important;
  padding: 8px 10px !important;
  font: 500 12px Poppins, sans-serif !important;
  outline: none;
}
#_siteTools input:focus,
#_siteTools select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.12);
}
#_siteTools button {
  min-height: 38px;
  border: 1px solid rgba(0, 210, 255, 0.35) !important;
  border-radius: 9px !important;
  background: rgba(0, 210, 255, 0.12) !important;
  color: var(--accent) !important;
  padding: 7px 12px !important;
  font: 700 12px Poppins, sans-serif !important;
  cursor: pointer;
}
#_siteTools button:hover {
  background: var(--accent) !important;
  color: #061018 !important;
}
#_siteTools button:last-child {
  border-color: rgba(255, 107, 129, 0.4) !important;
  color: #ff8ca0 !important;
}
.deleted-comment {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 13px;
  margin-bottom: 9px;
  border: 1px solid rgba(255, 107, 129, 0.25);
  border-radius: 12px;
  background: rgba(127, 29, 29, 0.15);
}
.deleted-comment p {
  margin: 4px 0 0;
  color: #d7dbe6;
  font-size: 13px;
}
.deleted-comment button {
  margin-left: 7px;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 8px;
  background: rgba(0, 210, 255, 0.1);
  color: var(--accent);
  padding: 6px 9px;
  cursor: pointer;
}
.site-locked {
  display: none !important;
}
.site-locked-disabled {
  opacity: 0.38 !important;
  filter: blur(1px);
}
.site-locked,
.site-locked-disabled {
  display: flex !important;
  opacity: 0.42 !important;
  filter: blur(1px);
  cursor: not-allowed !important;
}
.daily-extra10-divider {
  margin: 28px 6px 12px !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--accent) !important;
  letter-spacing: 0 !important;
  background: none !important;
  border: 0 !important;
  text-transform: none !important;
}
.mod-tool-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  padding: 11px;
  border: 1px solid rgba(0, 210, 255, 0.14);
  border-radius: 11px;
  background: rgba(5, 13, 29, 0.45);
}
.mod-tool-group > span {
  width: 88px;
  color: #9deaff;
  font-size: 12px;
  font-weight: 700;
}
.mod-tool-group input {
  flex: 1;
  min-width: 150px;
}
.mod-tool-group select {
  min-width: 205px;
}
.news-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 0 0 16px;
}
.news-tabs button,
.news-actions button {
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 10px;
  background: rgba(0, 210, 255, 0.08);
  color: var(--accent);
  padding: 8px 13px;
  font: 600 13px Poppins, sans-serif;
  cursor: pointer;
}
.news-tabs button.active {
  background: var(--accent);
  color: #061018;
}
.news-list {
  display: grid;
  gap: 18px;
}
/* Legacy .news-card kept for any other use */
.news-card {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 15px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: rgba(14, 14, 28, 0.86);
}
.news-card img {
  width: 210px;
  height: 138px;
  border-radius: 10px;
  object-fit: cover;
}
/* New full-article card */
.news-card-full {
  border: 1px solid rgba(0, 210, 255, 0.12);
  border-radius: 18px;
  background: rgba(10, 10, 24, 0.88);
  overflow: hidden;
  transition: border-color 0.2s;
}
.news-card-full:hover {
  border-color: rgba(0, 210, 255, 0.28);
}
.news-card-full-img {
  width: 100%;
  max-height: 240px;
  object-fit: cover;
  display: block;
}
.news-card-body {
  padding: 16px 18px 18px;
}
.news-card-title {
  margin: 6px 0 10px;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  line-height: 1.4;
}
.news-card-content {
  color: #b8c4d6;
  font-size: 13.5px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.news-source {
  font-size: 11px;
  color: var(--accent);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.news-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 12px;
  flex-wrap: wrap;
}
.news-actions a {
  color: #9deaff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 9px;
  padding: 6px 12px;
  transition: background 0.2s;
}
.news-actions a:hover {
  background: rgba(0, 210, 255, 0.1);
}
.news-comments-toggle {
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 9px;
  background: rgba(0, 210, 255, 0.08);
  color: var(--accent);
  padding: 6px 13px;
  font: 600 13px Poppins, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s;
}
.news-comments-toggle:hover {
  background: rgba(0, 210, 255, 0.16);
}
.news-inline-comments {
  margin-top: 16px;
  border-top: 1px solid rgba(0, 210, 255, 0.1);
  padding-top: 14px;
}
.news-comment-compose {
  background: rgba(8, 8, 20, 0.7);
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 16px;
}
.news-comment-compose-title {
  font-weight: 700;
  color: #fff;
  margin-bottom: 10px;
  font-size: 14px;
}
.news-loading {
  color: #8a8a9e;
  padding: 22px;
  text-align: center;
}
@media (max-width: 620px) {
  .news-card {
    grid-template-columns: 1fr;
  }
  .news-card img {
    width: 100%;
    height: 180px;
  }
  .news-card-full-img {
    max-height: 180px;
  }
}
#_accountGate {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(2, 6, 18, 0.72);
  backdrop-filter: blur(10px);
  display: grid;
  place-items: center;
  padding: 20px;
}
.account-gate-box {
  max-width: 390px;
  padding: 28px;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 18px;
  background: #081426;
  text-align: center;
  box-shadow: 0 18px 60px #0008;
}
.account-gate-box i {
  font-size: 28px;
  color: var(--accent);
}
.account-gate-box h3 {
  margin: 10px 0;
}
.account-gate-box p {
  color: #cbd5e1;
  margin-bottom: 18px;
}
.account-gate-box button {
  margin: 4px;
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 9px;
  background: rgba(0, 210, 255, 0.12);
  color: var(--accent);
  padding: 9px 12px;
  font: 600 12px Poppins, sans-serif;
  cursor: pointer;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  overflow-x: hidden;
  width: 100%;
}

body {
  font-family: "Poppins", sans-serif;
  background: var(--bg);
  color: #fff;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.8s ease;
  max-width: 100vw;
}

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 100vw;
  overflow-x: hidden;
}

body.no-scroll {
  overflow: hidden;
  height: 100%;
}

.hidden {
  display: none !important;
}

/* ===== LOADING SCREEN ===== */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.5s ease;
  background: radial-gradient(circle at 50% 30%, #0d1b3a 0%, #050810 70%);
}
.loading-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.loading-logo-img-real {
  width: 84px;
  height: 84px;
  animation: logoPulse 2s ease-in-out infinite;
  filter: drop-shadow(0 6px 18px rgba(0, 210, 255, 0.35));
}
@keyframes logoPulse {
  0%,
  100% {
    opacity: 0.92;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}
.loading-brand {
  font-size: 22px;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    #fff 0%,
    var(--accent) 60%,
    var(--accent2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.loading-spinner {
  width: 42px;
  height: 42px;
  border: 3px solid rgba(0, 210, 255, 0.2);
  border-top-color: #00d2ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
.loading-text {
  font-size: 13px;
  color: rgba(0, 210, 255, 0.7);
  letter-spacing: 0.5px;
  text-align: center;
  padding: 0 20px;
}

/* ===== NAVBAR ===== */
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  gap: 8px;
  background: rgba(8, 8, 20, 0.97);
  backdrop-filter: blur(24px);
  padding: 8px 20px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 52px;
}
/* Hamburger always visible */
.hamburger-btn {
  display: flex !important;
}
.navbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 10px;
  transition: all 0.2s;
  text-decoration: none;
  min-width: 0;
}
.brand:hover {
  background: rgba(255, 255, 255, 0.06);
}
.brand-icon-img {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.brand-main {
  font-size: 17px;
  font-weight: 800;
  background: linear-gradient(
    135deg,
    #fff 0%,
    var(--accent) 60%,
    var(--accent2) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
  white-space: nowrap;
}
.brand-sub {
  font-size: 9px;
  color: #4fc3f7;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
}
.mobile-nav-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.mobile-icon-btn {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ccc;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
  flex-shrink: 0;
}
.mobile-icon-btn:hover {
  background: rgba(0, 210, 255, 0.15);
  color: var(--accent);
}

/* ===== SEARCH ===== */
.desktop-only {
  display: flex;
}
.search-area {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.search-box {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 24px;
  padding: 7px 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  gap: 8px;
  transition: all 0.3s;
  min-width: 200px;
  font-family: inherit;
  cursor: pointer;
}
.search-box:hover {
  border-color: rgba(0, 210, 255, 0.4);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.1);
}
.search-icon {
  color: var(--accent);
  font-size: 13px;
}
.search-box-label {
  color: #8a8a9e;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.heart-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #aaa;
  padding: 7px 12px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.2s;
  font-size: 15px;
  flex-shrink: 0;
}
.heart-btn.active {
  color: #ff3366;
  background: rgba(255, 51, 102, 0.15);
  border-color: #ff3366;
}

/* ===== NAV TABS ===== */
.nav-links {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.nav-tab {
  background: none;
  border: none;
  color: #8a8a9e;
  padding: 7px 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 10px;
  transition: all 0.2s;
  font-family: inherit;
  font-size: 13px;
  white-space: nowrap;
}
.nav-tab.active,
.nav-tab:hover {
  color: #fff;
  background: rgba(0, 210, 255, 0.15);
}

/* ===== FAVORITES BAR ===== */
.favorites-bar {
  display: flex;
  gap: 8px;
  padding: 7px 24px;
  background: rgba(4, 4, 12, 0.6);
  overflow-x: auto;
  min-height: 18px;
  border-bottom: 1px solid var(--border);
}
.fav-chip {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4px 12px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: 0.2s;
  white-space: nowrap;
  color: #ccc;
  flex-shrink: 0;
}
.fav-chip:hover,
.fav-active {
  background: rgba(0, 210, 255, 0.1);
  border-color: rgba(0, 210, 255, 0.3);
  color: var(--accent);
}
.fav-remove {
  color: #ff4444;
  cursor: pointer;
  font-size: 14px;
  margin-left: 2px;
}

/* ===== UNIVERSAL BAR ===== */
.universal-now-bar {
  background: rgba(0, 210, 255, 0.06);
  border-bottom: 1px solid rgba(0, 210, 255, 0.15);
  padding: 7px 24px;
  font-size: 13px;
  font-weight: 500;
  color: #d0d0e0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.sep {
  color: rgba(255, 255, 255, 0.15);
}
.uni-icon-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.severe-indicator {
  position: absolute;
  top: -5px;
  left: -5px;
  background: #f44336;
  color: #fff;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #fff;
  animation: severePulse 1.5s infinite;
}
@keyframes severePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.2);
  }
}

/* ===== ALERTS BANNER ===== */
.alerts-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  min-height: 44px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.3s;
}
.alerts-banner.level-red {
  background: rgba(244, 67, 54, 0.1);
  border-bottom-color: #f44336;
}
.alerts-banner.level-orange {
  background: rgba(255, 152, 0, 0.08);
  border-bottom-color: #ff9800;
}
.alerts-banner.level-yellow {
  background: rgba(255, 235, 59, 0.07);
  border-bottom-color: #ffeb3b;
}
.alerts-banner.level-info {
  background: rgba(0, 210, 255, 0.07);
  border-bottom-color: var(--accent);
}
.alert-nav-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.15s;
}
.alert-nav-btn:hover {
  background: rgba(0, 210, 255, 0.2);
}
.alert-banner-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  flex-wrap: wrap;
}
.alert-sev {
  font-weight: 700;
  color: #ffb74d;
  white-space: nowrap;
}
.alert-desc {
  color: #e5e7eb;
}
.alert-source-tag {
  font-size: 10px;
  color: #7a7a8e;
  background: rgba(255, 255, 255, 0.05);
  padding: 1px 6px;
  border-radius: 6px;
}
.alert-level-badge {
  font-weight: 700;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.badge-red {
  background: rgba(244, 67, 54, 0.25);
  color: #ff5252;
}
.badge-orange {
  background: rgba(255, 152, 0, 0.25);
  color: #ffb74d;
}
.badge-yellow {
  background: rgba(255, 235, 59, 0.2);
  color: #fff176;
}
.badge-info {
  background: rgba(0, 210, 255, 0.2);
  color: #4fc3f7;
}
.alert-counter {
  font-size: 11px;
  color: #555;
}

/* ===== LIVE BADGE ===== */
.live-badge {
  background: linear-gradient(135deg, #ff3333, #ff6b00);
  color: #fff;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  animation: livePulse 2s infinite;
}
@keyframes livePulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
}
.data-source-badge {
  background: rgba(0, 210, 255, 0.15);
  color: var(--accent);
  padding: 3px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid rgba(0, 210, 255, 0.3);
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ===== MAIN CONTENT ===== */
.main-content {
  max-width: 1060px;
  margin: 22px auto;
  padding: 0 16px;
  flex: 1;
  width: 100%;
}
.section-title {
  margin: 18px 0 14px;
  color: var(--accent);
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.weather-section {
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== NOW TAB ===== */
.now-location-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  background: rgba(255, 255, 255, 0.02);
  padding: 12px 18px;
  border-radius: 14px;
  border-left: 4px solid var(--accent);
  flex-wrap: wrap;
  gap: 8px;
}
.now-city-name {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  word-break: break-word;
}
.now-local-time {
  font-size: 12px;
  color: var(--accent);
  margin-top: 3px;
}
.now-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.now-layout-container {
  display: flex;
  gap: 18px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.now-left-square {
  flex: 0 0 220px;
  height: 220px;
  background: linear-gradient(
    145deg,
    rgba(0, 210, 255, 0.08),
    rgba(58, 123, 213, 0.05)
  );
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
}
.now-temp-big {
  position: absolute;
  top: 13px;
  left: 17px;
  font-size: 36px;
  font-weight: 800;
  color: #fff;
}
.anim-icon-xlarge {
  align-self: center;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.now-short-desc {
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
  padding-bottom: 5px;
}
.now-feels-mini {
  text-align: center;
  font-size: 11px;
  color: #7a7a8e;
  padding-bottom: 4px;
}
.now-right-bars {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.now-bar-analysis {
  padding: 15px 18px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.7;
  background: rgba(0, 210, 255, 0.05);
  border: 1px solid rgba(0, 210, 255, 0.12);
  color: #e8e8f0;
  overflow-wrap: break-word;
}
.now-bar-warning {
  padding: 11px 15px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.6;
  background: rgba(255, 71, 87, 0.07);
  border: 1px solid rgba(255, 71, 87, 0.2);
  color: #ff6b81;
  font-weight: 500;
}
#nowEightBoxes,
.now-8-boxes-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 11px;
  margin-top: 0;
}
.now-info-box,
.grid-box {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 13px;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  transition: all 0.22s;
  cursor: default;
  min-width: 0;
}
.now-info-box:hover,
.grid-box:hover {
  transform: translateY(-2px);
  border-color: rgba(0, 210, 255, 0.22);
  background: rgba(0, 210, 255, 0.05);
}
.now-info-box .bi,
.grid-box i {
  font-size: 21px;
  color: var(--accent);
}
.box-label,
.box-title {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.box-val,
.box-value {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  overflow-wrap: break-word;
}
.box-sub {
  font-size: 11px;
  color: #666;
}

/* ===== HOURLY TAB ===== */
.chart-container-box {
  background: rgba(14, 14, 28, 0.8);
  padding: 18px;
  border-radius: 18px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
}
.chart-container-box h4 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #ccc;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.stats-canvas {
  width: 100% !important;
  height: 160px !important;
  display: block;
}
.stats-line-chart-wrap {
  position: relative;
  width: 100%;
  height: 160px;
}
.precip-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  padding: 4px 4px 20px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 8px;
}
.precip-bar-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}
.precip-bar {
  width: 100%;
  max-width: 28px;
  border-radius: 3px 3px 0 0;
  min-height: 3px;
  transition: height 0.3s ease;
}
.precip-bar-label {
  font-size: 9px;
  color: #666;
  margin-top: 3px;
  white-space: nowrap;
  position: absolute;
  bottom: -18px;
}
.precip-bar-val {
  font-size: 9px;
  color: #4fc3f7;
  position: absolute;
  top: -14px;
}

.vertical-hourly-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 620px;
  overflow-y: auto;
  padding-right: 4px;
}
.hourly-row {
  background: rgba(18, 18, 35, 0.7);
  padding: 11px 16px;
  border-radius: 13px;
  border: 1px solid rgba(255, 255, 255, 0.03);
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.hourly-row:hover {
  background: rgba(24, 24, 44, 0.9);
  border-color: rgba(0, 210, 255, 0.14);
}
.hourly-time {
  width: 52px;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
}
.hourly-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.hourly-icon svg {
  width: 28px;
  height: 28px;
}
.hourly-desc {
  flex: 1;
  min-width: 90px;
  font-size: 13px;
  color: #e5e7eb;
  padding-left: 8px;
  font-weight: 500;
}
.hourly-temp {
  width: 60px;
  font-weight: 800;
  font-size: 15px;
  color: var(--accent);
  text-align: right;
}
.hourly-rain {
  width: 56px;
  color: #7dd3fc;
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}
.hourly-wind {
  width: 70px;
  font-size: 12px;
  color: #aaa;
  text-align: right;
}
.hourly-detail {
  flex-basis: 100%;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.hourly-detail-desc {
  font-size: 12.5px;
  color: #d0d0e0;
  margin-bottom: 8px;
  line-height: 1.5;
}
.hdet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  font-size: 12px;
  color: #aaa;
  width: 100%;
}
.hdet-grid b {
  color: #fff;
  font-weight: 600;
}
@media (max-width: 480px) {
  .hdet-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ===== DAILY TAB ===== */
.vertical-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.daily-row {
  background: rgba(16, 16, 30, 0.85);
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.04);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  border-left: 3px solid transparent;
}
.daily-row:hover {
  background: rgba(22, 22, 42, 0.9);
}
.daily-today {
  border-left-color: var(--accent) !important;
}
.daily-severe {
  border-left-color: #f44336 !important;
}
.daily-main {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  flex-wrap: wrap;
}
.daily-date-col {
  width: 75px;
  flex-shrink: 0;
}
.daily-day {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.daily-datestr {
  font-size: 11px;
  color: #666;
}
.daily-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.daily-icon svg {
  width: 42px;
  height: 42px;
}
.daily-double-icons {
  display: flex;
  gap: 8px;
  align-items: center;
}
.daily-icon-wrap {
  text-align: center;
}
.daily-icon-wrap svg {
  width: 28px;
  height: 28px;
}
.daily-period-label {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
}
.daily-temps {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  flex-shrink: 0;
  min-width: 55px;
}
.temp-max {
  font-size: 15px;
  font-weight: 800;
  color: #ff7043;
}
.temp-min {
  font-size: 13px;
  font-weight: 600;
  color: #4fc3f7;
}
.daily-extra {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #aaa;
  flex-wrap: wrap;
}
.desktop-daily-icons {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-shrink: 0;
}
.mobile-daily-icon {
  display: none;
  flex-shrink: 0;
}
.desktop-daily-desc {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
  color: #d0d0e0;
  min-width: 140px;
}
.daily-desc-line {
  display: flex;
  align-items: center;
  gap: 4px;
  line-height: 1.4;
  flex-wrap: wrap;
}
.desc-period {
  font-size: 10px;
  font-weight: 700;
  color: #9deaff;
  text-transform: uppercase;
  white-space: nowrap;
  min-width: 40px;
}
@media (max-width: 768px) {
  .desktop-daily-icons {
    display: none !important;
  }
  .desktop-daily-desc {
    display: none !important;
  }
  .mobile-daily-icon {
    display: flex !important;
  }
}
@media (min-width: 769px) {
  .mobile-daily-icon {
    display: none !important;
  }
  .daily-main {
    flex-wrap: nowrap;
    align-items: center;
  }
  .daily-date-col {
    width: 80px;
  }
  .desktop-daily-icons {
    width: 100px;
    justify-content: center;
  }
  .daily-temps {
    width: 65px;
  }
  .desktop-daily-desc {
    min-width: 0;
    flex: 1;
    padding: 0 10px;
  }
  .daily-extra {
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    font-size: 12px;
  }
}

/* Always-visible day/night quarter cards inside the expanded daily detail */
.daily-detail {
  padding: 0 16px 14px;
  background: rgba(8, 8, 20, 0.98);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.daynight-quarters {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
  padding-top: 12px;
}
@media (max-width: 480px) {
  .daynight-quarters {
    grid-template-columns: 1fr;
  }
}
.daynight-quarter {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 14px;
  padding: 12px;
  text-align: center;
}
.daynight-quarter.is-day {
  border-top: 3px solid #ffca28;
}
.daynight-quarter.is-night {
  border-top: 3px solid #b388ff;
}
.daynight-quarter-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}
.daynight-quarter.is-day .daynight-quarter-label {
  color: #ffca28;
}
.daynight-quarter.is-night .daynight-quarter-label {
  color: #b388ff;
}
.daynight-quarter-icon svg {
  width: 44px;
  height: 44px;
}
.daynight-quarter-desc {
  font-size: 12.5px;
  color: #e5e7eb;
  margin: 4px 0 6px;
}
.daynight-quarter-rain {
  font-size: 11px;
  color: #7dd3fc;
  font-weight: 600;
}
.daily-stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-size: 12px;
}
@media (max-width: 480px) {
  .daily-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.daily-stats-grid .hd-label {
  display: block;
  margin-bottom: 2px;
  color: #9ca3af;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.daily-stats-grid b {
  color: #fff;
}

/* ===== STATS TAB ===== */
.stats-layout {
  display: grid;
  grid-template-columns: 265px 1fr;
  gap: 18px;
  margin-top: 12px;
}
.stats-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.stats-sidebar-card {
  background: rgba(14, 14, 28, 0.9);
  border: 1px solid var(--border);
  padding: 16px;
  border-radius: 18px;
}
.stats-sidebar-card h4 {
  margin: 0 0 13px;
  font-size: 14px;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: 7px;
}
.stats-meta-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stats-meta-list li {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: #aaa;
  gap: 8px;
}
.stats-meta-list li b {
  color: #fff;
  text-align: right;
}
.stats-update-info {
  text-align: center;
  font-size: 11px;
  color: #444;
  margin-bottom: 6px;
}
.stats-main-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.stats-bars-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  height: 155px;
  padding: 10px 0 26px;
  gap: 3px;
}
.stats-day-bar-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.stats-day-bar-wrap {
  width: 14px;
  height: 110px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  position: relative;
}
.stats-bar-max {
  position: absolute;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #ff5722, #ff9800);
  border-radius: 4px;
}
.stats-day-label {
  font-size: 9px;
  color: #555;
  white-space: nowrap;
}
.stats-temp-label {
  font-size: 9px;
  color: #ff7043;
  font-weight: 700;
}
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}
.now-card {
  background: rgba(255, 255, 255, 0.03);
  padding: 13px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--border);
  min-width: 0;
}
.now-card i {
  font-size: 21px;
  color: var(--accent);
  flex-shrink: 0;
}
.now-card-info {
  min-width: 0;
}
.now-card-info h5 {
  margin: 0;
  font-size: 11px;
  color: #7a7a8e;
}
.now-card-info p {
  margin: 2px 0 0;
  font-size: 15px;
  font-weight: 600;
}
@media (max-width: 900px) {
  .stats-layout {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.ensemble-model-toggles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.ensemble-model-chip {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ccc !important;
  padding: 7px 15px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: 0.15s;
}
.ensemble-model-chip:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}
.ensemble-model-chip.active {
  background: rgba(0, 210, 255, 0.16) !important;
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
.ensemble-model-chip .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* ===== MAPS ===== */
.maps-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.maps-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8a8a9e;
  padding: 8px 17px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.maps-tab-btn.active {
  background: rgba(0, 210, 255, 0.15);
  color: var(--accent);
  border-color: rgba(0, 210, 255, 0.3);
}
.map-controls {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.map-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #8a8a9e;
  padding: 7px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}
.map-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.map-btn.active {
  background: var(--accent);
  color: #000;
  font-weight: 700;
  box-shadow: 0 0 12px rgba(0, 210, 255, 0.4);
}
.map-model-label {
  font-size: 12px;
  color: #555;
}
.map-legend {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 7px;
  background: rgba(8, 8, 18, 0.8);
  border: 1px solid var(--border);
  padding: 7px 11px;
  border-radius: 8px;
}
.legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #8a8a9e;
}
.legend-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  flex-shrink: 0;
}
.windy-frame {
  width: 100%;
  height: 520px;
  border: none;
  border-radius: 16px;
  border: 1px solid var(--border);
  display: block;
}
.map-model-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #8a8a9e;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  transition: 0.2s;
}
.map-model-btn.active {
  background: rgba(0, 210, 255, 0.18);
  color: var(--accent);
  border-color: var(--accent);
}
.map-model-controls {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
  flex-wrap: wrap;
}
.map-btn-radar.active {
  background: linear-gradient(135deg, #ff3333, #ff6b00);
  color: #fff;
}
@media (max-width: 768px) {
  .windy-frame {
    height: 380px;
  }
}
@media (max-width: 480px) {
  .windy-frame {
    height: 300px;
  }
}

/* ===== SETTINGS ===== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 18px;
}
.settings-card {
  background: rgba(14, 14, 28, 0.9);
  border: 1px solid var(--border);
  padding: 18px;
  border-radius: 18px;
}
.settings-card h4 {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--accent);
}
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 11px;
  font-size: 13px;
  gap: 11px;
  flex-wrap: wrap;
}
.setting-row label {
  color: #ccc;
  white-space: nowrap;
  min-width: 80px;
}
.setting-row select {
  background: #0a0a1a;
  color: #fff;
  border: 1px solid rgba(0, 210, 255, 0.2);
  padding: 6px 10px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  flex: 1;
  min-width: 140px;
  cursor: pointer;
}
.setting-row select:focus {
  outline: none;
  border-color: var(--accent);
}
.settings-info {
  background: rgba(0, 210, 255, 0.04);
  border: 1px solid rgba(0, 210, 255, 0.1);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 13px;
  color: #8a8a9e;
  line-height: 1.7;
}
.settings-info p {
  margin-bottom: 8px;
}
.settings-info p:last-child {
  margin-bottom: 0;
}
.settings-sources-card {
  margin-top: 14px;
}
@media (max-width: 900px) {
  .settings-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== HOME TAB ===== */
.home-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 18px;
}
.home-left {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.home-athens-card {
  background: linear-gradient(
    145deg,
    rgba(0, 210, 255, 0.1),
    rgba(58, 123, 213, 0.06)
  );
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 20px;
  padding: 22px;
  text-align: center;
}
.home-city-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 7px;
}
.home-city-icon {
  display: flex;
  justify-content: center;
  margin: 8px 0;
}
.home-city-icon svg {
  width: 70px;
  height: 70px;
}
.home-city-temp {
  font-size: 50px;
  font-weight: 800;
  color: var(--accent);
  line-height: 1;
}
.home-city-desc {
  font-size: 14px;
  color: #aaa;
  margin: 5px 0 12px;
}
.home-city-stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 8px;
}
.home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 13px;
}
.home-stat i {
  color: var(--accent);
  font-size: 15px;
}
.home-stat span {
  font-weight: 700;
  color: #fff;
}
.home-stat small {
  color: #4a4a6a;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.home-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 9px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.home-radar-frame {
  width: 100%;
  height: 210px;
  border-radius: 13px;
  border: 1px solid var(--border);
}
.home-center {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.home-city-rank-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  background: rgba(14, 14, 28, 0.8);
  border: 1px solid var(--border);
  border-radius: 12px;
  cursor: pointer;
  margin-bottom: 6px;
  transition: all 0.15s;
}
.home-city-rank-card:hover {
  border-color: rgba(0, 210, 255, 0.22);
  background: rgba(0, 210, 255, 0.05);
}
.rank-num {
  width: 18px;
  font-size: 12px;
  font-weight: 800;
  color: #555;
  flex-shrink: 0;
  text-align: center;
}
.rank-icon {
  flex-shrink: 0;
}
.rank-icon svg {
  width: 30px;
  height: 30px;
}
.rank-name {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rank-temp {
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
}
.rank-sub {
  font-size: 11px;
  color: #666;
  flex-shrink: 0;
}
.home-rank-section {
  margin-bottom: 14px;
}
.home-rank-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 7px;
  padding: 0 2px;
}
.home-rank-subtitle {
  font-size: 10px;
  color: #4a4a6a;
  margin: -4px 0 6px 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.home-cities-loading {
  text-align: center;
  padding: 18px;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}
.loading-spinner-sm {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(0, 210, 255, 0.2);
  border-top-color: #00d2ff;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  display: inline-block;
}
@media (max-width: 900px) {
  .home-layout {
    grid-template-columns: 1fr;
  }
}

/* ===== SVG ICONS ===== */
svg {
  display: inline-block;
  vertical-align: middle;
  overflow: visible;
}
.anim-icon-xlarge svg {
  width: 90px;
  height: 90px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
#nowIcon svg {
  width: 90px;
  height: 90px;
}
#uniIconWrap svg {
  width: 22px;
  height: 22px;
}
#homeAthensIcon svg {
  width: 70px;
  height: 70px;
}
.svg-sun-group {
  animation: rotateSun 12s linear infinite;
  transform-origin: 50% 50%;
}
@keyframes rotateSun {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rainFall {
  0% {
    transform: translateY(-3px);
    opacity: 0;
  }
  25% {
    opacity: 0.9;
  }
  100% {
    transform: translateY(7px);
    opacity: 0;
  }
}
@keyframes snowFall {
  0% {
    transform: translateY(-3px) rotate(0deg);
    opacity: 0.9;
  }
  100% {
    transform: translateY(7px) rotate(60deg);
    opacity: 0.2;
  }
}
@keyframes flashBolt {
  0%,
  85%,
  100% {
    opacity: 1;
  }
  88%,
  95% {
    opacity: 0.08;
  }
  91% {
    opacity: 0.85;
  }
}
@keyframes fogDrift {
  0% {
    transform: translateX(-4px);
    opacity: 0.6;
  }
  50% {
    transform: translateX(4px);
    opacity: 1;
  }
  100% {
    transform: translateX(-4px);
    opacity: 0.6;
  }
}

/* ===== BACKGROUND THEMES ===== */
.realistic-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.realistic-bg canvas {
  width: 100%;
  height: 100%;
  display: block;
}
body.theme-realistic {
  background: transparent !important;
}
body
  > *:not(.realistic-bg):not(.loading-screen):not(.hamburger-overlay):not(
    .hamburger-drawer
  ):not(.search-modal) {
  position: relative;
  z-index: 1;
}
body.theme-realistic .navbar,
body.theme-realistic .now-left-square,
body.theme-realistic .chart-container-box {
  backdrop-filter: blur(18px) !important;
  background: rgba(5, 5, 15, 0.6) !important;
}
body.theme-midnight {
  background: linear-gradient(160deg, #020818 0%, #050d2e 100%) !important;
}
body.theme-aurora {
  background: linear-gradient(160deg, #021a0e 0%, #030d18 100%) !important;
}
body.theme-neon {
  background: linear-gradient(160deg, #0e0418 0%, #04091a 100%) !important;
}
body.theme-sunset {
  background: linear-gradient(160deg, #1a0808 0%, #0d0418 100%) !important;
}
body.theme-storm {
  background: linear-gradient(160deg, #0a0014 0%, #04000a 100%) !important;
}
body.theme-ocean {
  background: linear-gradient(160deg, #001428 0%, #002040 100%) !important;
}
body.theme-sunny {
  background: linear-gradient(160deg, #0d4a7e 0%, #1a7ac8 100%) !important;
}
body.theme-night {
  background: linear-gradient(160deg, #020510 0%, #080a20 100%) !important;
}
body.theme-rain {
  background: linear-gradient(160deg, #1a2a3a 0%, #2c3e50 100%) !important;
}
body.theme-snow {
  background: linear-gradient(160deg, #1a2a40 0%, #253550 100%) !important;
}
body.theme-cloudy {
  background: linear-gradient(160deg, #1e2838 0%, #2a3848 100%) !important;
}
body.theme-fog {
  background: linear-gradient(160deg, #1a2028 0%, #283040 100%) !important;
}
body.theme-realistic-sunny .now-left-square,
body.theme-realistic-sunny .chart-container-box,
body.theme-realistic-sunny .now-bar-analysis,
body.theme-realistic-sunny .now-info-box,
body.theme-realistic-sunny .daily-row,
body.theme-realistic-sunny .hourly-row,
body.theme-realistic-sunny .stats-sidebar-card {
  background: rgba(5, 20, 45, 0.72) !important;
  border-color: rgba(0, 180, 255, 0.18) !important;
  color: #fff !important;
}
body.theme-realistic-sunny .now-short-desc,
body.theme-realistic-sunny .box-label,
body.theme-realistic-sunny .box-val,
body.theme-realistic-sunny .hourly-desc,
body.theme-realistic-sunny .daily-day,
body.theme-realistic-sunny .rank-name {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
body.theme-realistic-clearnight .now-left-square,
body.theme-realistic-clearnight .chart-container-box,
body.theme-realistic-clearnight .now-bar-analysis,
body.theme-realistic-clearnight .now-info-box,
body.theme-realistic-clearnight .daily-row,
body.theme-realistic-clearnight .hourly-row,
body.theme-realistic-clearnight .stats-sidebar-card {
  background: rgba(4, 6, 20, 0.78) !important;
  border-color: rgba(100, 130, 255, 0.15) !important;
}
body.theme-realistic-rain .now-left-square,
body.theme-realistic-rain .chart-container-box,
body.theme-realistic-rain .now-bar-analysis,
body.theme-realistic-rain .now-info-box,
body.theme-realistic-rain .daily-row,
body.theme-realistic-rain .hourly-row,
body.theme-realistic-rain .stats-sidebar-card {
  background: rgba(8, 18, 30, 0.78) !important;
  border-color: rgba(79, 195, 247, 0.15) !important;
}
body.theme-realistic-snow .now-left-square,
body.theme-realistic-snow .chart-container-box,
body.theme-realistic-snow .now-bar-analysis,
body.theme-realistic-snow .now-info-box,
body.theme-realistic-snow .daily-row,
body.theme-realistic-snow .hourly-row,
body.theme-realistic-snow .stats-sidebar-card {
  background: rgba(20, 30, 50, 0.72) !important;
  border-color: rgba(180, 220, 255, 0.18) !important;
}
body.theme-realistic-thunder .now-left-square,
body.theme-realistic-thunder .chart-container-box,
body.theme-realistic-thunder .now-bar-analysis,
body.theme-realistic-thunder .now-info-box,
body.theme-realistic-thunder .daily-row,
body.theme-realistic-thunder .hourly-row,
body.theme-realistic-thunder .stats-sidebar-card {
  background: rgba(5, 3, 15, 0.82) !important;
  border-color: rgba(180, 100, 255, 0.18) !important;
}
body.theme-realistic-fog .now-left-square,
body.theme-realistic-fog .chart-container-box,
body.theme-realistic-fog .now-bar-analysis,
body.theme-realistic-fog .now-info-box,
body.theme-realistic-fog .daily-row,
body.theme-realistic-fog .hourly-row,
body.theme-realistic-fog .stats-sidebar-card {
  background: rgba(20, 28, 38, 0.76) !important;
  border-color: rgba(180, 200, 210, 0.14) !important;
}
body.theme-realistic-drizzle .now-left-square,
body.theme-realistic-drizzle .chart-container-box,
body.theme-realistic-drizzle .now-bar-analysis,
body.theme-realistic-drizzle .now-info-box,
body.theme-realistic-drizzle .daily-row,
body.theme-realistic-drizzle .hourly-row,
body.theme-realistic-drizzle .stats-sidebar-card {
  background: rgba(10, 20, 32, 0.75) !important;
  border-color: rgba(100, 180, 220, 0.14) !important;
}
body.theme-realistic-cloudy .now-left-square,
body.theme-realistic-cloudy .chart-container-box,
body.theme-realistic-cloudy .now-bar-analysis,
body.theme-realistic-cloudy .now-info-box,
body.theme-realistic-cloudy .daily-row,
body.theme-realistic-cloudy .hourly-row,
body.theme-realistic-cloudy .stats-sidebar-card {
  background: rgba(12, 20, 35, 0.74) !important;
  border-color: rgba(130, 160, 190, 0.14) !important;
}

/* ===== FOOTER ===== */
.main-footer {
  background: #050508;
  padding: 18px 24px;
  text-align: center;
  border-top: 1px solid var(--border);
  font-size: 13px;
  color: #555;
  margin-top: auto;
}
.footer-brand {
  color: var(--accent);
  font-weight: 700;
}
.footer-social {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.social-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.2s;
}
.social-link.youtube {
  background: rgba(255, 0, 0, 0.12);
  color: #ff4444;
  border: 1px solid rgba(255, 0, 0, 0.25);
}
.social-link.youtube:hover {
  background: rgba(255, 0, 0, 0.22);
}
.social-link.discord {
  background: rgba(88, 101, 242, 0.12);
  color: #7289da;
  border: 1px solid rgba(88, 101, 242, 0.25);
}
.social-link.discord:hover {
  background: rgba(88, 101, 242, 0.22);
}
.footer-data-sources {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding: 9px 14px;
  background: rgba(0, 210, 255, 0.03);
  border: 1px solid rgba(0, 210, 255, 0.08);
  border-radius: 10px;
  font-size: 12px;
  color: #555;
}
.footer-data-sources a {
  color: #4fc3f7;
  text-decoration: none;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 210, 255, 0.25);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 210, 255, 0.45);
}

/* ===== RESPONSIVE (general safety net so nothing overflows narrow phones) ===== */
@media (max-width: 900px) {
  #nowEightBoxes,
  .now-8-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .desktop-only {
    display: none !important;
  }
  .mobile-nav-actions {
    display: flex !important;
  }
  .nav-links {
    display: none !important;
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  .navbar {
    padding: 9px 13px;
  }
  .brand-main {
    font-size: 14px;
  }
  .main-content {
    margin: 12px auto;
    padding: 0 10px;
  }
  .now-layout-container {
    flex-direction: column;
  }
  .now-left-square {
    flex: 0 0 auto;
    height: auto;
    min-height: 175px;
    width: 100%;
  }
}
@media (max-width: 480px) {
  #nowEightBoxes,
  .now-8-boxes-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .now-temp-big {
    font-size: 30px;
  }
  .home-city-temp {
    font-size: 38px;
  }
  .monthly-card-temp {
    font-size: 21px;
  }
  .activities-grid {
    grid-template-columns: 1fr;
  }
  .monthly-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 380px) {
  .main-content {
    padding: 0 8px;
  }
  .now-info-box,
  .grid-box {
    padding: 10px 8px;
  }
  .box-val {
    font-size: 12.5px;
  }
  .stats-meta-list li {
    font-size: 12px;
  }
  .settings-card,
  .stats-sidebar-card,
  .chart-container-box {
    padding: 12px;
  }
}

/* ===== V10/V11 ADDITIONS ===== */
.rank-icon svg {
  width: 30px;
  height: 30px;
}
@media (min-width: 769px) {
  .nav-tab-label {
    margin-left: 4px;
  }
}
@media (max-width: 1080px) {
  .nav-tab-label {
    display: none;
  }
}

/* ===== MONTHLY TAB ===== */
.monthly-disclaimer {
  font-size: 12.5px;
  color: #8a8a9e;
  background: rgba(0, 210, 255, 0.05);
  border: 1px solid rgba(0, 210, 255, 0.12);
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 14px;
  line-height: 1.6;
}
.monthly-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .monthly-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 520px) {
  .monthly-grid {
    grid-template-columns: 1fr;
  }
}
.monthly-card {
  background: rgba(14, 14, 28, 0.9);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.monthly-card-month {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  text-transform: capitalize;
}
.monthly-card-range {
  font-size: 10.5px;
  color: #6a6a8a;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-top: -4px;
}
.monthly-card-temp {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
}
.monthly-card-row {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: #aaa;
  gap: 8px;
}
.monthly-card-row b {
  color: #e5e7eb;
  text-align: right;
}
.monthly-anomaly-warm {
  color: #ff8a65;
}
.monthly-anomaly-cold {
  color: #4fc3f7;
}
.monthly-anomaly-wet {
  color: #4fc3f7;
}
.monthly-anomaly-dry {
  color: #ffb74d;
}
.monthly-loading,
.monthly-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px;
  color: #666;
}
.monthly-hist-controls {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  align-items: center;
}
.monthly-hist-select {
  background: #0a0a1a;
  color: #fff;
  border: 1px solid rgba(0, 210, 255, 0.2);
  padding: 8px 12px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
}
.monthly-hist-result {
  background: rgba(14, 14, 28, 0.9);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 700px) {
  .monthly-hist-result {
    grid-template-columns: repeat(2, 1fr);
  }
}
.monthly-hist-stat {
  text-align: center;
}
.monthly-hist-stat .lbl {
  font-size: 10.5px;
  color: #8a8a9e;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: block;
  margin-bottom: 4px;
}
.monthly-hist-stat .val {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.monthly-hist-empty {
  grid-column: 1 / -1;
  text-align: center;
  color: #666;
  padding: 10px;
}

/* ===== ACTIVITIES SECTION ===== */
.activities-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 7px;
}
.activities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 768px) {
  .activities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
.activity-card {
  background: rgba(14, 14, 28, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: 0.2s;
  cursor: default;
  min-width: 0;
}
.activity-card:hover {
  border-color: rgba(0, 210, 255, 0.2);
  transform: translateY(-2px);
}
.activity-card-header {
  display: flex;
  align-items: center;
  gap: 9px;
}
.activity-icon {
  font-size: 26px;
  flex-shrink: 0;
}
.activity-name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.activity-score-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.activity-score-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s ease;
}
.activity-label {
  font-size: 12px;
  font-weight: 700;
}
.activity-desc {
  font-size: 11px;
  color: #888;
  line-height: 1.5;
}
.score-excellent {
  background: linear-gradient(to right, #00e676, #69f0ae);
}
.score-good {
  background: linear-gradient(to right, #76ff03, #b2ff59);
}
.score-fair {
  background: linear-gradient(to right, #ffea00, #ffff8d);
}
.score-poor {
  background: linear-gradient(to right, #ff6d00, #ffab40);
}
.score-bad {
  background: linear-gradient(to right, #f44336, #ef9a9a);
}
.label-excellent {
  color: #00e676;
}
.label-good {
  color: #76ff03;
}
.label-fair {
  color: #ffea00;
}
.label-poor {
  color: #ff6d00;
}
.label-bad {
  color: #f44336;
}
.activity-card.gardening-card {
  grid-column: 1 / -1;
}
.gardening-tip {
  background: rgba(0, 210, 255, 0.05);
  border-left: 3px solid #00e676;
  border-radius: 0 8px 8px 0;
  padding: 8px 12px;
  font-size: 12px;
  color: #c0e0c0;
  line-height: 1.6;
  margin-top: 4px;
}

/* ===== GEO / LOCATION (used inside search modal now) ===== */
.geo-btn.loading {
  animation: spin 0.8s linear infinite;
}

/* ===== HAMBURGER DRAWER — pill style matching the main nav ===== */
.hamburger-btn {
  font-size: 20px !important;
}
.hamburger-overlay {
  position: fixed !important;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 999997;
  backdrop-filter: blur(4px);
}
.hamburger-drawer {
  position: fixed !important;
  top: 0;
  right: 0;
  width: 270px;
  max-width: 85vw;
  height: 100%;
  height: 100dvh;
  background: rgba(8, 8, 20, 0.98);
  border-left: 1px solid rgba(0, 210, 255, 0.15);
  z-index: 999998;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(24px);
  isolation: isolate;
}
.hamburger-drawer.open {
  transform: translateX(0);
}
.hamburger-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.hamburger-drawer-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hamburger-drawer-icon-img {
  width: 26px;
  height: 26px;
}
.hamburger-close {
  background: rgba(255, 255, 255, 0.08);
  border: none;
  color: #aaa;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s;
}
.hamburger-close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}
.hamburger-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  overflow-y: auto;
}
.hamburger-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid transparent;
  border-radius: 12px;
  color: #c0c0d8;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: 0.15s;
  width: 100%;
}
.hamburger-item i {
  font-size: 16px;
  color: var(--accent);
  width: 20px;
  text-align: center;
}
.hamburger-item:hover {
  background: rgba(0, 210, 255, 0.1);
  color: #fff;
  border-color: rgba(0, 210, 255, 0.15);
}
.hamburger-item.active-tab {
  background: rgba(0, 210, 255, 0.16);
  color: var(--accent);
  border-color: var(--accent);
}
.hamburger-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(0, 210, 255, 0.5);
  padding: 10px 6px 4px;
  margin-top: 2px;
}
.hamburger-section-label:first-child {
  padding-top: 2px;
}

/* Settings page redesign */
.settings-layout {
  display: flex;
  gap: 20px;
  flex-direction: column;
}
.settings-category {
  background: rgba(14, 14, 30, 0.7);
  border: 1px solid rgba(0, 210, 255, 0.12);
  border-radius: 18px;
  overflow: hidden;
}
.settings-category-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: rgba(0, 210, 255, 0.04);
  border-bottom: 1px solid rgba(0, 210, 255, 0.08);
  cursor: pointer;
  transition: background 0.2s;
  user-select: none;
}
.settings-category-header:hover {
  background: rgba(0, 210, 255, 0.09);
}
.settings-category-icon {
  font-size: 20px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 210, 255, 0.1);
  border-radius: 10px;
  flex-shrink: 0;
}
.settings-category-title {
  flex: 1;
}
.settings-category-title h4 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.settings-category-title p {
  margin: 0;
  font-size: 12px;
  color: #8a8a9e;
  line-height: 1.4;
}
.settings-category-arrow {
  color: #8a8a9e;
  font-size: 14px;
  transition: transform 0.2s;
}
.settings-category.open .settings-category-arrow {
  transform: rotate(90deg);
}
.settings-category-body {
  display: none;
  padding: 16px 20px;
  flex-direction: column;
  gap: 14px;
}
.settings-category.open .settings-category-body {
  display: flex;
}
.setting-row-v2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.setting-row-v2:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.setting-row-v2 label {
  font-size: 13px;
  color: #c0c0d8;
  font-weight: 500;
  flex: 1;
}
.setting-row-v2 select,
.setting-row-v2 input[type="text"] {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 210, 255, 0.2);
  color: #fff;
  border-radius: 10px;
  padding: 7px 12px;
  font: 500 13px Poppins, sans-serif;
  outline: none;
  min-width: 160px;
  cursor: pointer;
  transition: border-color 0.2s;
}
.setting-row-v2 select:focus,
.setting-row-v2 input:focus {
  border-color: var(--accent);
}
.settings-version-box {
  background: rgba(0, 210, 255, 0.04);
  border: 1px solid rgba(0, 210, 255, 0.12);
  border-radius: 14px;
  padding: 16px 20px;
  font-size: 13px;
  color: #8a8a9e;
  line-height: 1.7;
  margin-top: 4px;
}
.settings-version-box b {
  color: var(--accent);
}

/* ===== UNIFIED SEARCH MODAL ===== */
.search-modal {
  position: fixed !important;
  inset: 0;
  z-index: 999995;
  background: rgba(3, 4, 10, 0.88);
  backdrop-filter: blur(18px) saturate(0.7);
  -webkit-backdrop-filter: blur(18px) saturate(0.7);
  display: flex;
  flex-direction: column;
}
.search-modal-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 8px;
  z-index: 2;
}
.search-modal-back {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 16px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-modal-inputwrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(8, 8, 20, 0.92);
  border: 1px solid rgba(0, 210, 255, 0.35);
  border-radius: 16px;
  padding: 10px 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.search-modal-inputwrap i {
  color: var(--accent);
  font-size: 15px;
  flex-shrink: 0;
}
.search-modal-inputwrap input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-family: inherit;
  font-size: 14px;
}
.search-modal-clear {
  background: none;
  border: none;
  color: #777;
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  flex-shrink: 0;
}
.search-modal-go {
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  border: none;
  color: #000;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.search-modal-uselocation {
  margin: 0 14px 8px;
  background: rgba(0, 210, 255, 0.08);
  border: 1px solid rgba(0, 210, 255, 0.2);
  color: var(--accent);
  border-radius: 12px;
  padding: 10px 14px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 2;
}
.search-modal-uselocation:hover {
  background: rgba(0, 210, 255, 0.15);
}
.search-modal-suggestions {
  position: relative;
  z-index: 2;
  margin: 0 14px 10px;
  background: rgba(8, 8, 22, 0.97);
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 14px;
  max-height: 40vh;
  overflow-y: auto;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
}
.search-modal-suggestion-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #e5e7eb;
  font-size: 13.5px;
}
.search-modal-suggestion-item:last-child {
  border-bottom: none;
}
.search-modal-suggestion-item:hover,
.search-modal-suggestion-item.is-active {
  background: rgba(0, 210, 255, 0.12);
}
.search-modal-suggestion-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.search-modal-map {
  flex: 1;
  width: 100%;
  min-height: 0;
  position: relative;
  z-index: 1;
  background: #0a0a18;
}
.search-modal-map .leaflet-tile-pane {
  filter: saturate(0.9) brightness(0.95);
}
.search-modal-map .leaflet-control-attribution {
  background: rgba(0, 0, 0, 0.5) !important;
  color: #aaa !important;
  font-size: 10px !important;
}
.search-modal-map .leaflet-control-attribution a {
  color: #7dd3fc !important;
}
.search-pin-red {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
}
.search-pin-numbered {
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 50% 0;
  background: var(--accent);
  transform: rotate(-45deg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5);
  border: 2px solid #fff;
}
.search-pin-numbered span {
  transform: rotate(45deg);
  color: #000;
  font-size: 12px;
  font-weight: 800;
}
.search-modal-confirm {
  position: relative;
  z-index: 2;
  padding: 14px;
  background: rgba(8, 8, 20, 0.97);
  border-top: 1px solid rgba(0, 210, 255, 0.2);
  box-shadow: 0 -12px 30px rgba(0, 0, 0, 0.4);
  animation: fadeIn 0.25s ease;
}
.search-modal-confirm-info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.search-modal-confirm-icon svg {
  width: 46px;
  height: 46px;
}
.search-modal-confirm-text {
  flex: 1;
  min-width: 0;
}
.search-modal-confirm-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-modal-confirm-desc {
  font-size: 12px;
  color: #8a8a9e;
}
.search-modal-confirm-temp {
  font-size: 26px;
  font-weight: 800;
  color: var(--accent);
  flex-shrink: 0;
}
.mobile-search-ok {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 0;
  padding: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #000;
  font-weight: 800;
  font-size: 15px;
  font-family: inherit;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
}
.mobile-search-ok:hover {
  opacity: 0.9;
  transform: scale(1.02);
}

/* ===== DAILY SOURCE MODE TOGGLE + 4-PART BREAKDOWN ===== */
.daily-source-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.daily-mode-btn {
  -webkit-appearance: none;
  appearance: none;
  font-family: inherit;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #ccc;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.15s;
}
.daily-mode-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}
.daily-mode-btn.active {
  background: rgba(0, 210, 255, 0.18);
  border-color: var(--accent);
  color: var(--accent);
}
.daily-extra10-divider {
  margin: 14px 2px 8px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #6a6a8a;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  background: linear-gradient(
    90deg,
    rgba(0, 210, 255, 0.16),
    rgba(58, 123, 213, 0.08)
  );
  border-radius: 12px;
  border: 1px solid rgba(0, 210, 255, 0.3);
}
.fourpart-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.fourpart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  background: rgba(255, 255, 255, 0.02);
  border-radius: 10px;
  font-size: 12px;
}
.fourpart-icon svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}
.fourpart-label {
  width: 66px;
  flex-shrink: 0;
  font-weight: 700;
  color: #9ca3af;
  text-transform: uppercase;
  font-size: 10.5px;
}
.fourpart-desc {
  flex: 1;
  color: #e5e7eb;
  min-width: 0;
}
.fourpart-rain {
  color: #7dd3fc;
  font-weight: 600;
  flex-shrink: 0;
}

/* ===== NOW TAB: 8-box grid (sunrise+sunset merged into one) ===== */
.box-val-dual {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12.5px;
}

/* ===== FIX: Dropdown option elements dark background ===== */
select option,
select optgroup {
  background: #0d0d20 !important;
  color: #e0e0f0 !important;
}
select optgroup {
  color: #00d2ff !important;
  font-weight: 700;
  font-size: 11px;
}
.setting-row-v2 select option:hover,
.setting-row-v2 select option:checked {
  background: #1a1a35 !important;
  color: #fff !important;
}

/* ===== ΝΕΕΣ ΘΕΜΑΤΙΚΕΣ ΕΠΙΛΟΓΕΣ ΦΟΝΤΟΥ ===== */

/* γ. ΦΛΟΓΑ */
body.theme-flame {
  background: #0a0000 !important;
}
body.theme-flame::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 120%,
    #ff6a00 0%,
    #ee0979 40%,
    #1a0000 80%
  );
  animation: flamePulse 4s ease-in-out infinite alternate;
}
body.theme-flame::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      ellipse at 30% 80%,
      rgba(255, 140, 0, 0.35) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse at 70% 90%,
      rgba(255, 50, 0, 0.28) 0%,
      transparent 55%
    );
  animation: flamePulse2 3s ease-in-out infinite alternate;
  filter: blur(30px);
}
@keyframes flamePulse {
  0% {
    opacity: 0.85;
    transform: scale(1);
  }
  100% {
    opacity: 1;
    transform: scale(1.04);
  }
}
@keyframes flamePulse2 {
  0% {
    opacity: 0.5;
    transform: scaleY(1);
  }
  100% {
    opacity: 1;
    transform: scaleY(1.1);
  }
}

/* δ. ΩΚΕΑΝΟΣ */
body.theme-ocean {
  background: #00060f !important;
}
body.theme-ocean::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 0%,
    #0077b6 0%,
    #023e8a 40%,
    #03045e 80%
  );
  animation: oceanPulse 6s ease-in-out infinite alternate;
  filter: blur(2px);
}
body.theme-ocean::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      ellipse at 20% 60%,
      rgba(0, 180, 216, 0.3) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 40%,
      rgba(0, 119, 182, 0.25) 0%,
      transparent 50%
    );
  animation: oceanPulse2 8s ease-in-out infinite alternate;
  filter: blur(40px);
}
@keyframes oceanPulse {
  0% {
    opacity: 0.9;
    transform: translateY(0);
  }
  100% {
    opacity: 1;
    transform: translateY(-8px);
  }
}
@keyframes oceanPulse2 {
  0% {
    opacity: 0.6;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(10px);
  }
}

/* ε. ΝΥΧΤΟΠΟΥΛΙ */
body.theme-nightowl {
  background: #00000a !important;
}
body.theme-nightowl::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, #0d1b2a 0%, #010108 60%);
  animation: nightPulse 7s ease-in-out infinite alternate;
}
body.theme-nightowl::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      circle at 20% 20%,
      rgba(10, 10, 60, 0.6) 0%,
      transparent 40%
    ),
    radial-gradient(circle at 80% 70%, rgba(5, 5, 40, 0.5) 0%, transparent 40%);
  animation: nightPulse2 5s ease-in-out infinite alternate;
  filter: blur(50px);
}
@keyframes nightPulse {
  0% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}
@keyframes nightPulse2 {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }
  100% {
    opacity: 0.9;
    transform: scale(1.08);
  }
}

/* στ. ΟΜΙΧΛΗ */
body.theme-mist {
  background: #2a2e35 !important;
}
body.theme-mist::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 50%,
    #c8d6e0 0%,
    #8a9baa 40%,
    #3d4852 80%
  );
  animation: mistDrift 8s ease-in-out infinite alternate;
  filter: blur(4px);
}
body.theme-mist::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
      ellipse at 30% 30%,
      rgba(220, 230, 240, 0.5) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 70% 70%,
      rgba(180, 200, 215, 0.4) 0%,
      transparent 50%
    );
  animation: mistDrift2 10s ease-in-out infinite alternate;
  filter: blur(60px);
}
@keyframes mistDrift {
  0% {
    transform: translateX(-5px) scale(1);
  }
  100% {
    transform: translateX(5px) scale(1.03);
  }
}
@keyframes mistDrift2 {
  0% {
    transform: translateX(8px) scale(1);
  }
  100% {
    transform: translateX(-8px) scale(1.05);
  }
}

/* ζ. ΗΛΙΟΒΑΣΙΛΕΜΑ */
body.theme-sunset {
  background: #0a0005 !important;
}
body.theme-sunset::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    #0d0221 0%,
    #6a0572 25%,
    #e8461e 55%,
    #f9a825 80%,
    #1a0033 100%
  );
  animation: sunsetPulse 6s ease-in-out infinite alternate;
}
body.theme-sunset::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    ellipse at 50% 65%,
    rgba(255, 100, 0, 0.4) 0%,
    transparent 55%
  );
  animation: sunsetPulse2 5s ease-in-out infinite alternate;
  filter: blur(35px);
}
@keyframes sunsetPulse {
  0% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sunsetPulse2 {
  0% {
    transform: scaleX(0.9);
    opacity: 0.6;
  }
  100% {
    transform: scaleX(1.1);
    opacity: 1;
  }
}

/* η. ΑΠΛΟ ΛΕΥΚΟ */
body.theme-white {
  background: #f0f2f5 !important;
  color: #1a1a2e !important;
}
body.theme-white .navbar,
body.theme-white .app-shell {
  background: #ffffff !important;
}
body.theme-white::before {
  display: none;
}
body.theme-white::after {
  display: none;
}

/* θ. ΑΠΛΟ ΜΑΥΡΟ (ήδη υπάρχει ως theme-storm, αλλά clean version) */
body.theme-storm {
  background: #000000 !important;
}
body.theme-storm::before {
  display: none;
}
body.theme-storm::after {
  display: none;
}

/* ===== ICON STYLES ===== */
/* Simple mode uses the project SVG icon renderer, never emoji weather icons. */
body.icon-style-simple .anim-icon,
body.icon-style-simple .anim-icon-xlarge,
body.icon-style-simple [class*="weather-icon"] {
  font-family: inherit !important;
  font-size: 2em;
  filter: none !important;
}

/* ===== NEWS: Truncated content with "Δείτε περισσότερα" ===== */
.news-card-content {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  position: relative;
}
.news-card-content.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.news-read-more-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font: 600 12px Poppins, sans-serif;
  padding: 2px 0 8px;
  display: block;
  text-decoration: underline dotted;
}
.news-read-more-btn:hover {
  color: #fff;
}

/* ===== NEWS ADMIN (γραφή ειδήσεων) ===== */
.news-admin-compose {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.news-admin-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.news-admin-field label {
  font-size: 12px;
  color: #8a8a9e;
  font-weight: 600;
}
.news-admin-field input,
.news-admin-field textarea {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 210, 255, 0.2);
  color: #fff;
  border-radius: 10px;
  padding: 9px 13px;
  font: 13px Poppins, sans-serif;
  outline: none;
  transition: border-color 0.2s;
  resize: vertical;
}
.news-admin-field input:focus,
.news-admin-field textarea:focus {
  border-color: var(--accent);
}
.news-admin-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}
.news-admin-submit-btn {
  background: linear-gradient(135deg, #00d2ff, #3a7bd5);
  border: none;
  color: #fff;
  border-radius: 10px;
  padding: 10px 22px;
  font: 700 13px Poppins, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: opacity 0.2s;
}
.news-admin-submit-btn:hover {
  opacity: 0.85;
}
.news-admin-status {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
.news-admin-status.ok {
  background: rgba(0, 200, 100, 0.15);
  color: #4ade80;
  border: 1px solid rgba(0, 200, 100, 0.3);
}
.news-admin-status.fail {
  background: rgba(255, 50, 50, 0.12);
  color: #f87171;
  border: 1px solid rgba(255, 50, 50, 0.3);
}
.news-admin-list-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  margin-bottom: 8px;
}
.news-admin-list-item-info {
  flex: 1;
  min-width: 0;
}
.news-admin-list-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #e0e0f0;
}
.news-admin-list-item-meta {
  font-size: 11px;
  color: #8a8a9e;
  margin-top: 3px;
}
.news-admin-delete-btn {
  background: rgba(220, 30, 30, 0.15);
  border: 1px solid rgba(220, 30, 30, 0.3);
  color: #f87171;
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s;
}
.news-admin-delete-btn:hover {
  background: rgba(220, 30, 30, 0.3);
}

/* ===== MONTHLY: Calendar day grid ===== */
.monthly-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-top: 12px;
}
.monthly-cal-header {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  padding: 4px 0;
}
.monthly-cal-day {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 8px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
.monthly-cal-day:hover {
  border-color: var(--accent);
  background: rgba(0, 210, 255, 0.08);
}
.monthly-cal-day-num {
  font-size: 12px;
  font-weight: 700;
  color: #c0c0d8;
}
.monthly-cal-day-icon {
  font-size: 14px;
}
.monthly-cal-day-temp {
  font-size: 10px;
  color: #8a8a9e;
}
.monthly-cal-day-empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
}
.monthly-cal-day.today {
  border-color: var(--accent);
  background: rgba(0, 210, 255, 0.12);
}
.monthly-cal-day-detail {
  background: rgba(14, 14, 28, 0.92);
  border: 1px solid rgba(0, 210, 255, 0.2);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 12px;
  display: none;
}
.monthly-cal-day-detail.active {
  display: block;
}
.monthly-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.monthly-summary-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}
.monthly-summary-card h5 {
  color: var(--accent);
  font-size: 13px;
  margin: 0 0 8px;
}
.monthly-summary-card p {
  font-size: 13px;
  color: #c0c0d8;
  margin: 3px 0;
}

/* =========================================================
   V16 — Master Development & Improvement pass (2026-08-26)
   Focus: unified premium UI, data clarity, responsive behavior
   ========================================================= */

/* Homepage: real current / today / tomorrow hierarchy */
.home-city-stats-expanded {
  grid-template-columns: repeat(5, minmax(86px, 1fr));
  gap: 8px;
}
.home-city-stats-expanded .home-stat {
  min-width: 0;
  padding: 10px 8px;
  border-radius: 12px;
  background: rgba(4, 14, 30, 0.46);
  border: 1px solid rgba(0, 210, 255, 0.1);
}
.home-city-stats-expanded .home-stat span {
  font-size: 16px;
}
.home-city-stats-expanded .home-stat small {
  font-size: 9.5px;
  line-height: 1.25;
  text-align: center;
}
.home-data-source,
.daily-data-note {
  margin-top: 10px;
  color: #8fb4c7;
  font-size: 11px;
  line-height: 1.45;
}
.daily-data-note {
  margin: 8px 0 14px;
  padding: 9px 12px;
  border: 1px solid rgba(0, 210, 255, 0.12);
  border-radius: 11px;
  background: rgba(5, 17, 34, 0.5);
}

/* Real 15-minute data strip: shown only when provider returns it */
.quarter-hour-strip {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid rgba(0, 210, 255, 0.15);
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(6, 25, 48, 0.88), rgba(8, 14, 31, 0.88));
}
.quarter-hour-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: #bfefff;
  font-size: 12px;
  font-weight: 700;
}
.quarter-hour-title small {
  margin-left: auto;
  color: #6f8998;
  font-weight: 500;
}
.quarter-hour-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(92px, 1fr));
  gap: 8px;
}
.quarter-hour-card {
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.035);
  text-align: center;
}
.quarter-hour-card strong {
  display: block;
  color: #fff;
  font-size: 14px;
}
.quarter-hour-card span,
.quarter-hour-card small {
  display: block;
  color: #9fb2c3;
  font-size: 10px;
  margin-top: 2px;
}

/* Daily narrative generated from actual period data */
.daily-narrative {
  margin: 12px 0;
  padding: 11px 13px;
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  background: rgba(0, 210, 255, 0.055);
  color: #d7e9f4;
  font-size: 12.5px;
  line-height: 1.65;
}
.daily-narrative b {
  color: #8ee8ff;
}

/* Statistics — Meteo-style clarity with Thavma branding */
.stats-kpi-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(125px, 1fr));
  gap: 10px;
  margin: 0 0 16px;
}
.stats-kpi {
  position: relative;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid rgba(0, 210, 255, 0.13);
  border-radius: 13px;
  background: linear-gradient(145deg, rgba(10, 27, 48, 0.86), rgba(9, 14, 29, 0.9));
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.14);
}
.stats-kpi::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  border-radius: 13px 13px 0 0;
  background: linear-gradient(90deg, transparent, rgba(0, 210, 255, 0.75), transparent);
}
.stats-kpi span {
  display: block;
  color: #8199aa;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.45px;
}
.stats-kpi b {
  display: block;
  margin-top: 5px;
  color: #f2fbff;
  font-size: 17px;
  line-height: 1.2;
}
.stats-kpi-source b {
  color: var(--accent);
  font-size: 12px;
  line-height: 1.45;
}

/* Meteograms / Assemblies */
.meteogram-product-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin: 10px 0 14px;
}
.meteogram-product-btn {
  border: 1px solid rgba(0, 210, 255, 0.22);
  border-radius: 9px;
  background: rgba(0, 210, 255, 0.055);
  color: #93dff0;
  padding: 7px 12px;
  font: 600 12px Poppins, sans-serif;
  cursor: pointer;
}
.meteogram-product-btn.active {
  color: #061018;
  background: var(--accent);
  border-color: var(--accent);
}
#meteogramViewNote {
  color: #71889a;
  font-size: 10.5px;
  margin-left: auto;
}
.stats-chart-expandable {
  cursor: zoom-in;
}
.chart-fullscreen-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
  background: rgba(0, 4, 12, 0.94);
  backdrop-filter: blur(12px);
}
.chart-fullscreen-box {
  width: min(1200px, 96vw);
  height: min(720px, 86vh);
  padding: 16px;
  border: 1px solid rgba(0, 210, 255, 0.25);
  border-radius: 18px;
  background: #080d19;
}
.chart-fullscreen-box canvas {
  width: 100% !important;
  height: 100% !important;
}

/* News rich editor */
.news-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(0, 210, 255, 0.18);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  background: rgba(4, 13, 28, 0.96);
}
.news-editor-toolbar button {
  min-width: 34px;
  min-height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.04);
  color: #d8eff8;
  font: 600 11px Poppins, sans-serif;
  cursor: pointer;
}
.news-editor-toolbar button:hover {
  border-color: rgba(0, 210, 255, 0.38);
  background: rgba(0, 210, 255, 0.08);
  color: #fff;
}
.news-rich-editor {
  min-height: 240px;
  max-height: 560px;
  overflow: auto;
  padding: 16px;
  border: 1px solid rgba(0, 210, 255, 0.18);
  border-radius: 0 0 12px 12px;
  background: rgba(4, 9, 22, 0.9);
  color: #eef8ff;
  font: 13.5px/1.75 Poppins, sans-serif;
  outline: none;
}
.news-rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #596879;
  pointer-events: none;
}
.news-rich-editor:focus {
  border-color: rgba(0, 210, 255, 0.55);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.08);
}
.news-rich-editor img,
.news-article-rich img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}
.news-rich-editor blockquote,
.news-article-rich blockquote {
  margin: 12px 0;
  padding: 10px 14px;
  border-left: 3px solid var(--accent);
  background: rgba(0, 210, 255, 0.055);
  color: #cde5ef;
}
.news-rich-editor iframe,
.news-article-rich iframe {
  width: 100%;
  min-height: 320px;
  border: 0;
  border-radius: 12px;
}
.news-admin-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr;
  gap: 10px;
}
.news-ai-placeholder {
  width: 100%;
  min-height: 40px;
  border: 1px dashed rgba(0, 210, 255, 0.22);
  border-radius: 10px;
  background: rgba(0, 210, 255, 0.035);
  color: #6b8897;
  font: 600 11px Poppins, sans-serif;
}
.news-admin-image-preview,
.news-admin-preview {
  margin: 10px 0 14px;
  padding: 12px;
  border: 1px solid rgba(0, 210, 255, 0.14);
  border-radius: 13px;
  background: rgba(7, 15, 30, 0.84);
}
.news-admin-image-preview img {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 10px;
}
.news-admin-preview .news-card-full {
  margin: 0;
}
.news-card-subtitle {
  margin: -3px 0 12px;
  color: #91a9b8;
  font-size: 12.5px;
  line-height: 1.55;
}
.news-article-rich {
  color: #c6d4df;
  font-size: 13.5px;
  line-height: 1.75;
  word-break: break-word;
}
.news-server-warning {
  color: #ffd37a;
}

/* Protected-category gate: lighter, clear and responsive */
.account-gate-box {
  max-width: 430px;
  padding: 26px;
  border-color: rgba(0, 210, 255, 0.24);
  background: linear-gradient(155deg, rgba(9, 23, 45, 0.98), rgba(6, 10, 24, 0.98));
}
.account-gate-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.account-gate-google {
  grid-column: 1 / -1;
  background: #fff !important;
  color: #30343b !important;
  border-color: #fff !important;
}

/* Flame: keep original palette; add occasional lightweight spark layer */
#thavmaFlameSparks {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
#thavmaFlameSparks span {
  position: absolute;
  bottom: -8px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #ffd27a;
  box-shadow: 0 0 8px rgba(255, 159, 67, 0.8);
  opacity: 0;
  animation: thavmaSparkRise var(--spark-d, 4s) ease-out var(--spark-delay, 0s) infinite;
}
@keyframes thavmaSparkRise {
  0%, 58% { transform: translate3d(0, 0, 0) scale(0.5); opacity: 0; }
  63% { opacity: 0.7; }
  100% { transform: translate3d(var(--spark-x, 16px), -34vh, 0) scale(0); opacity: 0; }
}

/* More layered mist without changing the stylized mode identity */
body.theme-mist::before {
  filter: blur(18px);
  opacity: 0.72;
}
body.theme-mist::after {
  filter: blur(30px);
  opacity: 0.5;
}

/* Unified premium cleanup */
.weather-section,
.chart-container-box,
.home-athens-card,
.home-radar-wrap,
.stats-sidebar-card,
.daily-row,
.hourly-row,
.news-card-full {
  -webkit-font-smoothing: antialiased;
}
.chart-container-box,
.stats-sidebar-card,
.daily-row,
.hourly-row,
.news-card-full {
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

@media (max-width: 1050px) {
  .home-city-stats-expanded {
    grid-template-columns: repeat(3, minmax(90px, 1fr));
  }
  .stats-kpi-grid {
    grid-template-columns: repeat(3, minmax(120px, 1fr));
  }
  .news-admin-media-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 700px) {
  .home-city-stats-expanded {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .quarter-hour-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .quarter-hour-card {
    min-width: 104px;
    scroll-snap-align: start;
  }
  .stats-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .news-admin-media-grid {
    grid-template-columns: 1fr;
  }
  .news-rich-editor {
    min-height: 210px;
  }
  .news-rich-editor iframe,
  .news-article-rich iframe {
    min-height: 210px;
  }
  .account-gate-actions {
    grid-template-columns: 1fr;
  }
  .account-gate-google {
    grid-column: auto;
  }
  #meteogramViewNote {
    width: 100%;
    margin-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  #thavmaFlameSparks span,
  body.theme-flame::before,
  body.theme-flame::after,
  body.theme-mist::before,
  body.theme-mist::after {
    animation: none !important;
  }
}

/* Weekly verification panel */
.verify-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000000;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(2, 5, 16, 0.88);
  backdrop-filter: blur(18px);
}
.verify-modal-box {
  width: min(420px, 100%);
  position: relative;
  border: 1px solid rgba(0, 210, 255, 0.28);
  border-radius: 22px;
  padding: 28px;
  background: linear-gradient(155deg, rgba(12, 28, 56, 0.98), rgba(5, 12, 30, 0.98));
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.38);
  text-align: center;
}
.verify-modal-icon { font-size: 34px; margin-bottom: 8px; }
.verify-modal-box h3 { margin: 0 0 8px; color: #fff; }
.verify-modal-box p { color: #aebbd0; font-size: 13px; line-height: 1.6; }
.verify-modal-box input {
  width: 100%; box-sizing: border-box; margin: 12px 0 8px; padding: 12px 14px;
  border: 1px solid rgba(0, 210, 255, 0.28); border-radius: 11px;
  background: rgba(5, 13, 29, 0.92); color: #fff; text-align: center; letter-spacing: .08em;
}
.verify-submit, .verify-resend {
  width: 100%; padding: 11px 14px; border-radius: 11px; cursor: pointer; font: 700 13px Poppins, sans-serif;
}
.verify-submit { border: 0; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #061018; }
.verify-resend { margin-top: 8px; border: 1px solid rgba(0,210,255,.25); background: transparent; color: var(--accent); }
.verify-error { min-height: 18px; margin: 4px 0 8px; color: #ff8ca0; font-size: 12px; }
.verify-modal-close { position:absolute; top:12px; right:12px; border:0; background:rgba(255,255,255,.07); color:#aaa; border-radius:50%; width:30px; height:30px; cursor:pointer; }

.chart-fullscreen-image { width: 100%; max-height: 76vh; object-fit: contain; display: block; border-radius: 12px; }
.chart-fullscreen-close { position:absolute; top:12px; right:12px; width:34px; height:34px; border-radius:50%; border:1px solid rgba(255,255,255,.14); background:rgba(0,0,0,.48); color:#fff; cursor:pointer; }
#statsEnsemblesSection canvas { cursor: zoom-in; }
#thavmaFlameSparks { z-index: 0; }
#appShell { position: relative; z-index: 1; }

/* =========================================================
   V17 — News editor layout inspired by the supplied reference
   ========================================================= */
.news-admin-pro {
  gap: 14px;
}
.news-editor-section,
.news-editor-featured {
  border: 1px solid rgba(0, 210, 255, 0.22);
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(4, 28, 42, 0.94), rgba(3, 18, 31, 0.94));
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
}
.news-editor-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 12px;
  color: #84ecff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.25px;
  border-bottom: 1px solid rgba(0, 210, 255, 0.16);
  background: rgba(0, 210, 255, 0.035);
}
.news-editor-section-body {
  padding: 12px;
}
.news-editor-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(220px, 0.65fr);
  gap: 10px;
  margin-bottom: 10px;
}
.news-admin-pro .news-admin-field label,
.news-editor-small-label {
  color: #9cc7d2;
  font-size: 10.5px;
  font-weight: 700;
}
.news-admin-pro .news-admin-field input,
.news-admin-pro .news-admin-field textarea {
  min-height: 38px;
  border-radius: 8px;
  border-color: rgba(0, 210, 255, 0.22);
  background: rgba(2, 15, 27, 0.92);
  color: #eefbff;
}
.news-admin-pro .news-admin-field input:focus,
.news-admin-pro .news-admin-field textarea:focus {
  border-color: rgba(0, 210, 255, 0.72);
  box-shadow: 0 0 0 3px rgba(0, 210, 255, 0.08);
}
.news-media-actions {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(240px, 1.35fr);
  gap: 7px;
  align-items: stretch;
}
.news-media-upload-btn,
.news-media-remove-btn,
.news-ai-thumbnail-btn {
  min-height: 40px;
  border-radius: 8px;
  font: 700 10.5px Poppins, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.news-media-upload-btn {
  cursor: pointer;
  color: #ecfbff;
  background: linear-gradient(135deg, #0072b8, #0b6a9b);
  border: 1px solid rgba(116, 225, 255, 0.4);
}
.news-media-remove-btn {
  cursor: pointer;
  color: #b9cbd2;
  background: rgba(9, 27, 38, 0.85);
  border: 1px solid rgba(160, 190, 200, 0.22);
}
.news-ai-thumbnail-btn {
  color: #fff;
  background: linear-gradient(90deg, #6c28e8, #7449f6);
  border: 1px solid rgba(191, 162, 255, 0.35);
  box-shadow: 0 0 18px rgba(111, 52, 238, 0.18);
}
.news-ai-thumbnail-btn:disabled {
  opacity: 0.9;
  cursor: not-allowed;
}
.news-file-hidden {
  display: none !important;
}
.news-image-url-field {
  margin-top: 9px;
}
.news-media-help {
  margin: 6px 2px 0;
  color: #718d98;
  font-size: 9.5px;
}
.news-category-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 7px 0 11px;
}
.news-category-pills label {
  cursor: pointer;
}
.news-category-pills input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.news-category-pills span {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 7px;
  border: 1px solid rgba(85, 165, 189, 0.32);
  color: #b9d2db;
  background: rgba(2, 20, 34, 0.9);
  font-size: 10px;
  font-weight: 650;
  transition: border-color 0.18s, background 0.18s, color 0.18s, transform 0.18s;
}
.news-category-pills input:checked + span {
  color: #07131a;
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(0, 210, 255, 0.08);
}
.news-tag-pills input:checked + span {
  color: #dffaff;
  background: rgba(0, 210, 255, 0.12);
}
.news-editor-featured {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 14px;
}
.news-editor-featured > div {
  display: grid;
  gap: 2px;
}
.news-editor-featured strong {
  color: #d9fbff;
  font-size: 11px;
}
.news-editor-featured span {
  color: #d2e5ea;
  font-size: 10.5px;
  font-weight: 650;
}
.news-editor-featured small {
  color: #78929b;
  font-size: 9px;
  line-height: 1.45;
}
.news-switch {
  position: relative;
  width: 44px;
  height: 24px;
  flex: 0 0 auto;
}
.news-switch input {
  position: absolute;
  opacity: 0;
}
.news-switch-track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #15394b;
  border: 1px solid #2e5b6f;
  transition: .2s;
}
.news-switch-track::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 17px;
  left: 3px;
  top: 2px;
  border-radius: 50%;
  background: #89aab7;
  transition: .2s;
}
.news-switch input:checked + .news-switch-track {
  background: rgba(0, 210, 255, 0.35);
  border-color: var(--accent);
}
.news-switch input:checked + .news-switch-track::after {
  transform: translateX(19px);
  background: #e9fdff;
}
.news-admin-pro .news-editor-toolbar {
  border-radius: 8px 8px 0 0;
  padding: 5px;
  background: rgba(4, 21, 34, 0.98);
}
.news-admin-pro .news-editor-toolbar button {
  min-width: 28px;
  min-height: 27px;
  border-radius: 5px;
  font-size: 9.5px;
}
.news-admin-pro .news-rich-editor {
  min-height: 165px;
  border-radius: 0 0 8px 8px;
  background: rgba(2, 14, 25, 0.96);
}
.news-pin-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 9px;
  color: #a8c4ce;
  font-size: 10px;
  cursor: pointer;
}
.news-pin-row input {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
}
.news-admin-actions-pro {
  justify-content: space-between;
  gap: 8px;
  padding-top: 2px;
}
.news-admin-actions-pro .news-admin-action-btn,
.news-admin-actions-pro .news-admin-submit-btn {
  min-height: 40px;
}
.news-admin-actions-pro .news-admin-submit-btn {
  margin-left: auto;
}

@media (max-width: 820px) {
  .news-editor-two-col,
  .news-media-actions {
    grid-template-columns: 1fr;
  }
  .news-media-upload-btn,
  .news-media-remove-btn,
  .news-ai-thumbnail-btn {
    width: 100%;
  }
}
@media (max-width: 520px) {
  .news-editor-section-body {
    padding: 10px;
  }
  .news-category-pills {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .news-category-pills span {
    width: 100%;
    justify-content: center;
  }
  .news-editor-featured {
    align-items: flex-start;
  }
  .news-admin-actions-pro {
    flex-direction: column;
  }
  .news-admin-actions-pro .news-admin-action-btn,
  .news-admin-actions-pro .news-admin-submit-btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   V21 — retained targeted fixes: realistic weather, news editor, 4-day + days 5–14 daily, meteograms
   ========================================================= */
.realistic-bg,
.realistic-bg canvas {
  background: #07111f;
}
.realistic-bg canvas {
  filter: saturate(1.06) contrast(1.05) brightness(.96);
  transform: translateZ(0);
}
body.theme-realistic .realistic-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 20%, transparent 0 40%, rgba(0,0,0,.06) 78%, rgba(0,0,0,.20) 100%),
    linear-gradient(to bottom, transparent 0 68%, rgba(2,8,16,.18) 100%);
}

/* Daily forecast has exactly two public range choices. */
.daily-range-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  flex-wrap: wrap;
}
.daily-range-label {
  color: #9ccbd8;
  font-size: 12px;
  font-weight: 700;
  margin-right: 2px;
}
.daily-range-bar .daily-mode-btn {
  min-width: 112px;
}

/* Actual Meteograms */
.meteogram-panel,
.assemblies-panel { display: grid; gap: 12px; }
.meteogram-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 12px;
  border: 1px solid rgba(0,210,255,.16);
  border-radius: 12px;
  background: rgba(4,18,31,.82);
  color: #cfeaf2;
}
.meteogram-controls label { font-size: 12px; font-weight: 750; color: #8feaff; }
.meteogram-controls select {
  min-height: 36px;
  min-width: 180px;
  border: 1px solid rgba(0,210,255,.25);
  border-radius: 8px;
  background: #061522;
  color: #eafaff;
  padding: 6px 10px;
  font: 600 12px Poppins, sans-serif;
  color-scheme: dark;
}
#meteogramStatus { margin-left: auto; color: #809baa; font-size: 11px; }
.meteogram-chart-wrap { height: 300px; min-height: 300px; }
.meteogram-chart-card { overflow: hidden; }

/* Comprehensive dark skin for every control in the News editor.
   This intentionally resets native white form backgrounds. */
.news-admin-pro {
  color-scheme: dark;
  color: #d9eef5;
}
.news-admin-pro,
.news-admin-pro *,
.news-admin-preview,
.news-admin-preview * { box-sizing: border-box; }
.news-admin-pro .news-editor-section,
.news-admin-pro .news-editor-featured,
.news-admin-pro .news-editor-section-body,
.news-admin-pro .news-admin-field,
.news-admin-pro .news-media-actions,
.news-admin-pro .news-category-pills,
.news-admin-pro .news-editor-toolbar,
.news-admin-pro .news-rich-editor {
  color-scheme: dark;
}
.news-admin-pro input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.news-admin-pro textarea,
.news-admin-pro select,
.news-admin-pro [contenteditable="true"] {
  width: 100%;
  background: #041522 !important;
  color: #edfaff !important;
  border: 1px solid rgba(0,210,255,.22) !important;
  outline: none;
  caret-color: #00d2ff;
  box-shadow: none;
}
.news-admin-pro select,
.news-admin-pro option {
  background: #061522 !important;
  color: #edfaff !important;
}
.news-admin-pro input::placeholder,
.news-admin-pro textarea::placeholder { color: #617985 !important; opacity: 1; }
.news-admin-pro button,
.news-admin-pro label[for="newsAdminImageFile"] {
  appearance: none;
  -webkit-appearance: none;
  box-shadow: none;
}
.news-admin-pro .news-editor-toolbar,
.news-admin-pro .news-editor-toolbar button {
  background-color: #061827 !important;
}
.news-admin-pro .news-editor-toolbar button {
  color: #cfe9f2 !important;
  border-color: rgba(109,181,207,.18) !important;
}
.news-admin-pro .news-editor-toolbar button:hover,
.news-admin-pro .news-editor-toolbar button:focus-visible {
  background: rgba(0,210,255,.13) !important;
  border-color: rgba(0,210,255,.52) !important;
  color: #fff !important;
}
.news-admin-pro .news-rich-editor,
.news-admin-pro .news-rich-editor p,
.news-admin-pro .news-rich-editor div,
.news-admin-pro .news-rich-editor span,
.news-admin-pro .news-rich-editor h1,
.news-admin-pro .news-rich-editor h2,
.news-admin-pro .news-rich-editor h3,
.news-admin-pro .news-rich-editor ul,
.news-admin-pro .news-rich-editor ol,
.news-admin-pro .news-rich-editor li {
  background-color: transparent !important;
  color: inherit;
}
.news-admin-pro .news-rich-editor a { color: #70e6ff !important; }
.news-admin-pro .news-admin-image-preview,
.news-admin-pro .news-admin-preview,
.news-admin-pro .news-admin-status {
  background: #061522 !important;
  color: #d9eef5;
}
.news-admin-actions-pro .news-admin-action-btn {
  border: 1px solid rgba(0,210,255,.25);
  border-radius: 9px;
  background: rgba(5,25,40,.95);
  color: #bfefff;
  padding: 9px 14px;
  font: 700 11px Poppins, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.news-admin-pro input[type="checkbox"],
.news-admin-pro input[type="radio"] { accent-color: #00d2ff; }

@media (max-width: 720px) {
  #meteogramStatus { width: 100%; margin-left: 0; }
  .meteogram-controls select { flex: 1; min-width: 0; }
  .meteogram-chart-wrap { height: 260px; min-height: 260px; }
  .daily-range-label { width: 100%; }
  .daily-range-bar .daily-mode-btn { flex: 1; min-width: 0; }
}

/* Photographic base layer for Realistic mode; animated canvas adds live clouds/rain/fog above it. */
body.theme-realistic-sunny .realistic-bg { filter: saturate(1.05) brightness(.90) contrast(1.04); }
body.theme-realistic-clearnight .realistic-bg { filter: saturate(.75) brightness(.34) contrast(1.12) hue-rotate(8deg); }
body.theme-realistic-cloudy .realistic-bg,
body.theme-realistic-drizzle .realistic-bg { filter: saturate(.80) brightness(.66) contrast(1.10); }
body.theme-realistic-rain .realistic-bg { filter: saturate(.72) brightness(.54) contrast(1.15); }
body.theme-realistic-thunder .realistic-bg { filter: saturate(.70) brightness(.42) contrast(1.22); }
body.theme-realistic-fog .realistic-bg { filter: saturate(.55) brightness(.78) contrast(.92); }
body.theme-realistic-snow .realistic-bg { filter: saturate(.50) brightness(.88) contrast(.96); }


/* ==========================================================================\n   THAVMA FORECAST V21 — consolidated correction pass\n   ========================================================================== */
:root{--v19-panel:rgba(5,18,34,.88);--v19-panel-2:rgba(8,27,48,.94);--v19-cyan:#2edcff;--v19-text:#eaf8ff;--v19-muted:#95adc2}
.daily-forecast-group{margin:0 0 22px;padding:18px;border:1px solid rgba(46,220,255,.18);border-radius:18px;background:linear-gradient(145deg,rgba(4,20,37,.93),rgba(7,28,49,.84));box-shadow:0 18px 45px rgba(0,0,0,.18)}
.daily-heading-row{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;flex-wrap:wrap}.daily-heading-row .section-title{margin:0 0 5px}.daily-section-subtitle{margin:0;color:var(--v19-muted);font-size:12px;line-height:1.55}.daily-source-bar{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.daily-mode-btn{display:inline-flex!important;align-items:center;gap:7px;min-height:38px}.model-source-badge{padding:7px 11px;border:1px solid rgba(46,220,255,.28);border-radius:999px;color:#79e9ff;font-size:11px;font-weight:800;letter-spacing:.06em;background:rgba(46,220,255,.08)}
.daily-results-four .daily-row:nth-child(n+5){display:none!important}.daily-results-ten .daily-row:nth-child(n+11){display:none!important}.daily-model-group .daily-detail{border-color:rgba(122,162,255,.17)}
.now-location-meta{margin-top:5px;color:#8fabc0;font-size:11px;display:flex;gap:8px;flex-wrap:wrap}.now-location-meta span{padding:3px 7px;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:rgba(255,255,255,.035)}
/* compact current/hourly — no giant icons or empty blocks */
.now-layout-container{min-height:0}.now-left-square{min-height:245px}.anim-icon-xlarge{transform:scale(.72);transform-origin:center}.now-temp-big{font-size:clamp(58px,9vw,106px)}
.vertical-hourly-list{gap:7px}.hourly-row{min-height:62px;padding:8px 12px;grid-template-columns:62px 46px minmax(58px,76px) minmax(120px,1fr) 86px 120px}.hourly-icon .weather-icon,.hourly-icon svg,.hourly-icon img{max-width:38px!important;max-height:38px!important}.hourly-temp{font-size:19px}.hourly-desc{font-size:12px}.quarter-hour-card{min-height:112px;padding:10px}.quarter-hour-icon{font-size:28px!important}
/* fully styled news editor: defensive reset against white/native controls */
#newsSection,#modSection,.news-editor,.news-editor-panel,.news-editor-form,.news-editor-section{color:var(--v19-text)}
#newsSection input,#newsSection textarea,#newsSection select,#newsSection [contenteditable="true"],#modSection input,#modSection textarea,#modSection select,#modSection [contenteditable="true"],.news-editor input,.news-editor textarea,.news-editor select,.news-rich-editor{box-sizing:border-box!important;width:100%;background:#061a2b!important;color:#e9f8ff!important;border:1px solid rgba(46,220,255,.2)!important;border-radius:10px!important;outline:none!important;box-shadow:none!important}
#newsSection input,#newsSection select,#modSection input,#modSection select,.news-editor input,.news-editor select{min-height:40px;padding:9px 11px!important}.news-rich-editor,[contenteditable="true"].news-rich-editor{min-height:220px;padding:14px!important;line-height:1.65}.news-rich-editor:empty:before{color:#637f95}.news-editor-toolbar,.news-rich-toolbar{background:#071d30!important;border:1px solid rgba(46,220,255,.18)!important;border-radius:10px 10px 0 0!important;padding:6px!important;display:flex!important;gap:5px!important;flex-wrap:wrap!important}.news-editor-toolbar button,.news-rich-toolbar button{min-width:34px;min-height:32px;background:#0a2941!important;color:#dff8ff!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:7px!important}.news-preview,.news-editor-preview{background:#071a2c!important;color:#eaf8ff!important;border:1px solid rgba(46,220,255,.17)!important;border-radius:12px!important}.news-card-time{color:#8fa9bd;font-size:11px}.news-card-full{background:rgba(5,19,34,.93)}
/* in-house advertisements */
.thavma-ad-slot:empty{display:none}.thavma-ad-card{display:grid;grid-template-columns:112px minmax(0,1fr);gap:15px;align-items:center;margin:20px 0;padding:13px;border:1px solid rgba(46,220,255,.17);border-radius:15px;background:linear-gradient(135deg,rgba(6,25,43,.93),rgba(8,35,58,.86));box-shadow:0 12px 30px rgba(0,0,0,.14)}.thavma-ad-image{width:112px;aspect-ratio:1/1;object-fit:cover;border-radius:11px;background:#0a2941}.thavma-ad-copy{min-width:0}.thavma-ad-label{display:block;margin-bottom:4px;color:#6d92a8;font-size:9px;letter-spacing:.12em;font-weight:800}.thavma-ad-title{margin:0 0 5px;color:#f4fbff;font-size:15px}.thavma-ad-text{margin:0 0 10px;color:#a9becd;font-size:12px;line-height:1.5}.thavma-ad-button{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:8px;background:rgba(46,220,255,.12);border:1px solid rgba(46,220,255,.3);color:#7eeeff;text-decoration:none;font-size:11px;font-weight:800}
/* realistic scene system: varied city / road / coast / landscape scenes */
.realistic-bg{background-color:#061321;background-size:cover;background-position:center;transition:background-image .8s ease,filter .5s ease}.realistic-bg::before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(1,9,18,.08),rgba(1,9,18,.4));pointer-events:none}.realistic-bg[data-scene-time="night"]::before{background:linear-gradient(to bottom,rgba(0,5,17,.28),rgba(0,7,18,.62))}.realistic-bg[data-scene="fog"]{filter:saturate(.72) contrast(.92)}.realistic-bg[data-scene="dust"]{filter:sepia(.18) saturate(.85)}
/* tutorial */
.tutorial-layer{position:fixed;inset:0;z-index:25000;background:rgba(0,5,14,.74);backdrop-filter:blur(3px);transition:opacity .25s ease}.tutorial-layer.hidden{display:none}.tutorial-spotlight{position:fixed;z-index:1;border:2px solid #32dbff;border-radius:14px;box-shadow:0 0 0 9999px rgba(0,5,14,.72),0 0 34px rgba(46,220,255,.55);pointer-events:none;transition:all .32s ease;opacity:0}.tutorial-card{position:fixed;z-index:2;width:min(410px,calc(100vw - 28px));padding:24px;border:1px solid rgba(46,220,255,.28);border-radius:20px;background:linear-gradient(155deg,rgba(4,24,43,.98),rgba(6,35,58,.98));box-shadow:0 30px 90px rgba(0,0,0,.55);left:50%;top:50%;transform:translate(-50%,-50%);outline:none;transition:left .32s ease,top .32s ease,transform .32s ease}.tutorial-close{position:absolute;right:13px;top:13px;width:43px;height:43px;border:1px solid rgba(255,90,103,.65);border-radius:50%;background:#b91c2b;color:white;font-size:20px;cursor:pointer;box-shadow:0 8px 25px rgba(185,28,43,.35)}.tutorial-brand{display:flex;align-items:center;gap:8px;color:#65e7ff;font-size:11px;font-weight:800;letter-spacing:.08em}.tutorial-brand img{width:30px;height:30px;object-fit:contain}.tutorial-step-icon{font-size:31px;color:#47e0ff;margin:18px 0 8px}.tutorial-kicker{margin:0 0 5px;color:#65dff5;font-size:10px;font-weight:900;letter-spacing:.14em}.tutorial-card h2{margin:0 42px 10px 0;font-size:22px;line-height:1.2}.tutorial-card>p:not(.tutorial-kicker){color:#afc4d2;line-height:1.65;font-size:13px}.tutorial-progress{display:flex;gap:5px;flex-wrap:wrap;margin:18px 0}.tutorial-dot{width:8px;height:8px;border-radius:99px;background:#345064;transition:.2s}.tutorial-dot.active{width:24px;background:#2edcff}.tutorial-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}.tutorial-btn{min-height:40px;padding:8px 14px;border-radius:9px;font-weight:800;cursor:pointer}.tutorial-btn-primary{background:#16bfe5;border:1px solid #4ee6ff;color:#03131c}.tutorial-btn-secondary{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#d9eef8}.tutorial-target-active{position:relative;z-index:25002!important}
/* organized settings */
.settings-category{background:rgba(5,20,35,.82);border-color:rgba(46,220,255,.13)}.settings-category-header{min-height:72px}.settings-category-title h4{font-size:15px}.settings-category-title p{font-size:11px}.settings-help-card{display:flex;justify-content:space-between;gap:15px;align-items:center;padding:12px;border:1px solid rgba(46,220,255,.14);border-radius:12px;background:rgba(46,220,255,.045)}
@media(max-width:760px){.daily-forecast-group{padding:12px}.daily-heading-row{display:block}.daily-source-bar{margin-top:12px}.hourly-row{grid-template-columns:49px 38px 55px 1fr;gap:5px}.hourly-rain,.hourly-wind{font-size:10px}.thavma-ad-card{grid-template-columns:1fr;text-align:left}.thavma-ad-image{width:100%;max-width:190px}.tutorial-card{top:auto!important;left:14px!important;right:14px!important;bottom:max(14px,env(safe-area-inset-bottom));width:auto;transform:none!important;padding:20px}.tutorial-spotlight{display:none}.tutorial-actions{justify-content:stretch}.tutorial-btn{flex:1}.now-left-square{min-height:205px}.anim-icon-xlarge{transform:scale(.6)}}
@media(prefers-reduced-motion:reduce){.tutorial-card,.tutorial-spotlight,.realistic-bg{transition:none!important}.tutorial-layer *{animation:none!important}}

/* ==========================================================================
   THAVMA FORECAST V21 — functional correction pass
   Stable Current / Statistics / Meteograms / Thavma Maps / Tutorial
   ========================================================================== */

/* CURRENT: compact hero with controlled icon sizes. No absolute giant temperature. */
.now-layout-container{align-items:stretch;gap:14px}
.now-left-square{
  flex:0 0 clamp(230px,28vw,310px)!important;
  min-height:220px!important;height:auto!important;
  padding:16px 18px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 86px;
  grid-template-areas:"temp icon" "desc desc" "feels feels" "extremes extremes";
  grid-template-rows:auto auto auto auto;
  align-content:center;align-items:center;gap:5px 12px;
}
.now-temp-big{
  grid-area:temp;position:static!important;align-self:center;
  font-size:clamp(44px,5.2vw,66px)!important;line-height:.95!important;
  letter-spacing:-.045em;font-weight:800;white-space:nowrap;
}
.anim-icon-xlarge{
  grid-area:icon;width:82px!important;height:82px!important;margin:0!important;
  transform:none!important;align-self:center!important;justify-self:end!important;
}
.anim-icon-xlarge svg,.anim-icon-xlarge img,.anim-icon-xlarge .weather-icon{
  width:78px!important;height:78px!important;max-width:78px!important;max-height:78px!important;
}
.now-short-desc{grid-area:desc;text-align:left!important;padding:3px 0 0!important;font-size:14px!important;line-height:1.3}
.now-feels-mini{grid-area:feels;text-align:left!important;padding:0!important;color:#96acbc!important;font-size:11.5px!important}
.now-today-extremes{grid-area:extremes;display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:7px}
.now-today-extremes>span{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;padding:7px 9px;border:1px solid rgba(0,210,255,.12);border-radius:9px;background:rgba(0,210,255,.04)}
.now-today-extremes small{font-size:9px;color:#7794a7;text-transform:uppercase;font-weight:700}.now-today-extremes b{font-size:14px;color:#eafaff}
.now-right-bars{justify-content:flex-start!important}.now-bar-analysis{min-height:112px}
#nowEightBoxes,.now-8-boxes-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}
.now-info-box{min-height:92px;padding:11px 8px}.now-info-box .bi{font-size:18px}.now-info-box .box-label{font-size:9px;line-height:1.25}.now-info-box .box-val{font-size:12.5px;line-height:1.3}

/* Statistics: fixed card/chart geometry. Hover must never resize or squeeze data. */
#statsSection{min-width:0}
#statsSection .stats-layout,#statsSection .stats-main-content,#statsSection .stats-sidebar,#statsSection .chart-container-box,#statsSection .stats-kpi,#statsSection .now-card{min-width:0}
#statsSection .stats-kpi,#statsSection .stats-sidebar-card,#statsSection .chart-container-box,#statsSection .now-card{
  transform:none!important;scale:1!important;transition:border-color .18s ease,background-color .18s ease,box-shadow .18s ease!important;
}
#statsSection .stats-kpi:hover,#statsSection .stats-sidebar-card:hover,#statsSection .chart-container-box:hover,#statsSection .now-card:hover{
  transform:none!important;scale:1!important;
}
#statsSection .stats-kpi-grid{grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}
#statsSection .stats-kpi{min-height:78px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
#statsSection .stats-kpi span,#statsSection .stats-kpi b{overflow-wrap:anywhere}
#statsSection .stats-sidebar-card h4{font-size:13px;line-height:1.35;min-height:36px;align-items:flex-start}
#statsSection .stats-meta-list li{align-items:flex-start;line-height:1.35}
#statsSection .stats-meta-list li span{min-width:0;flex:1}
#statsSection .stats-meta-list li b{flex:0 0 auto;max-width:48%;overflow-wrap:anywhere}
#statsSection .stats-line-chart-wrap,
#statsSection .meteogram-chart-wrap,
#statsSection .ensemble-chart-wrap{
  position:relative!important;width:100%!important;height:280px!important;min-height:280px!important;max-height:280px!important;overflow:hidden!important;
}
#statsSection .stats-line-chart-wrap canvas,
#statsSection .meteogram-chart-wrap canvas,
#statsSection .ensemble-chart-wrap canvas{
  display:block!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
}
.meteogram-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.meteogram-chart-card{margin:0!important}
.ensemble-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 12px;border:1px solid rgba(0,210,255,.16);border-radius:12px;background:rgba(4,18,31,.82)}
.ensemble-controls label{font-size:11px;font-weight:750;color:#8feaff}.ensemble-controls select{min-height:36px;min-width:170px;background:#061522;color:#eafaff;border:1px solid rgba(0,210,255,.25);border-radius:8px;padding:6px 9px;color-scheme:dark}.ensemble-members-toggle{display:inline-flex!important;align-items:center;gap:6px;color:#b7cfda!important}.ensemble-members-toggle input{accent-color:#00d2ff}.ensemble-summary-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:12px 0}.ensemble-summary-grid>div{padding:10px;border:1px solid rgba(0,210,255,.12);border-radius:10px;background:rgba(0,210,255,.035)}

/* Thavma Maps — native third map product rendered from the Thavma API grid. */
#thavmaMapsSection{min-width:0}.thavma-map-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:10px;padding:11px;border:1px solid rgba(0,210,255,.15);border-radius:13px;background:rgba(4,18,31,.84)}
.thavma-map-layer-group{display:flex;gap:6px;flex-wrap:wrap}.thavma-layer-btn{min-height:36px;padding:7px 10px;border:1px solid rgba(0,210,255,.20);border-radius:9px;background:#071a2a;color:#bcd7e2;font:700 11px Poppins,sans-serif;cursor:pointer}.thavma-layer-btn:hover{border-color:rgba(0,210,255,.48);color:#fff}.thavma-layer-btn.active{background:rgba(0,210,255,.16);border-color:#00d2ff;color:#70ebff}
.thavma-map-time-control{display:flex;align-items:center;gap:10px;min-width:min(100%,300px)}.thavma-map-time-control label{font-size:11px;color:#a9c3cf;white-space:nowrap}.thavma-map-time-control input{accent-color:#00d2ff;flex:1;min-width:120px}
.thavma-map-status{min-height:34px;margin:8px 0;padding:8px 11px;border-left:3px solid #00d2ff;border-radius:7px;background:rgba(0,210,255,.05);color:#98bccb;font-size:11px;line-height:1.45}.thavma-map-status .thavma-map-loading i{display:inline-block;animation:thavmaMapSpin 1s linear infinite}.thavma-map-error{color:#ff9da9}@keyframes thavmaMapSpin{to{transform:rotate(360deg)}}
.thavma-model-map{width:100%;height:560px;min-height:380px;border:1px solid rgba(0,210,255,.18);border-radius:16px;overflow:hidden;background:#061522;isolation:isolate}.thavma-model-map .leaflet-tile-pane{filter:saturate(.72) brightness(.62) contrast(1.08)}.thavma-model-map .leaflet-control-attribution{background:rgba(2,10,18,.78)!important;color:#8ba5b2!important}.thavma-model-map .leaflet-control-attribution a{color:#62dff8!important}
.thavma-map-popup{display:grid;gap:3px;color:#10222c;min-width:130px}.thavma-map-popup strong{font-size:20px}.thavma-map-popup span,.thavma-map-popup small{font-size:11px}
.thavma-map-legend{margin-top:9px;padding:10px 11px;border:1px solid rgba(0,210,255,.12);border-radius:11px;background:rgba(4,18,31,.82)}.thavma-map-legend:empty{display:none}.thavma-map-legend-title{display:flex;justify-content:space-between;gap:12px;margin-bottom:8px;color:#dffaff;font-size:11px}.thavma-map-legend-title span{color:#7e9caa}.thavma-map-legend-scale{display:grid;grid-template-columns:repeat(6,1fr);gap:3px}.thavma-map-legend-scale span{display:grid;gap:4px;text-align:center;min-width:0}.thavma-map-legend-scale i{height:8px;border-radius:6px;background:var(--legend-color)}.thavma-map-legend-scale small{font-size:9px;color:#94afbb;white-space:nowrap}.thavma-map-legend-source{margin-top:7px;color:#6f8d9b;font-size:9px;text-align:right}

/* Location-aware realistic background credit. */
.realistic-scene-credit{position:absolute;right:9px;bottom:8px;z-index:3;max-width:min(70vw,520px);padding:4px 7px;border-radius:7px;background:rgba(0,5,12,.58);color:rgba(230,247,255,.72);font-size:8px;text-decoration:none;backdrop-filter:blur(5px);pointer-events:auto}.realistic-scene-credit:hover{color:#fff;background:rgba(0,5,12,.78)}

/* Tutorial: real spotlight on desktop AND mobile. The target itself does not get reflowed. */
body.tutorial-open{overflow:hidden}.tutorial-layer{background:rgba(0,5,14,.16)!important;backdrop-filter:none!important}.tutorial-spotlight{display:block!important;box-shadow:0 0 0 9999px rgba(0,5,14,.76),0 0 34px rgba(46,220,255,.58)!important;will-change:left,top,width,height}.tutorial-target-active{outline:2px solid rgba(46,220,255,.28);outline-offset:4px}.tutorial-card{max-height:min(78vh,640px);overflow:auto}.tutorial-close:hover{transform:scale(1.06);background:#d42134}.tutorial-close:focus-visible,.tutorial-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media(max-width:1100px){
  #nowEightBoxes,.now-8-boxes-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  #statsSection .stats-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .meteogram-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .now-layout-container{display:grid!important;grid-template-columns:1fr!important}.now-left-square{width:100%!important;min-height:190px!important;grid-template-columns:minmax(0,1fr) 72px!important}.now-temp-big{font-size:clamp(42px,15vw,58px)!important}.anim-icon-xlarge{width:68px!important;height:68px!important}.anim-icon-xlarge svg,.anim-icon-xlarge img,.anim-icon-xlarge .weather-icon{width:64px!important;height:64px!important;max-width:64px!important;max-height:64px!important}
  #nowEightBoxes,.now-8-boxes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.now-info-box{min-height:84px}
  #statsSection .stats-layout{grid-template-columns:1fr!important}.stats-sidebar{display:grid!important;grid-template-columns:1fr!important}.stats-kpi-grid,#statsSection .stats-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  #statsSection .stats-line-chart-wrap,#statsSection .meteogram-chart-wrap,#statsSection .ensemble-chart-wrap{height:245px!important;min-height:245px!important;max-height:245px!important}
  .ensemble-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ensemble-controls select{flex:1;min-width:140px}
  .thavma-model-map{height:62vh;min-height:390px}.thavma-map-time-control{width:100%}.thavma-map-legend-scale small{font-size:8px;white-space:normal}.thavma-map-legend-title{display:grid;gap:3px}
  .tutorial-spotlight{display:block!important}.tutorial-card{max-height:52vh;overflow:auto}.tutorial-target-active{outline:none}
}
.ensemble-controls-v2{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:11px 12px;border:1px solid rgba(0,210,255,.16);border-radius:12px;background:rgba(4,18,31,.82)}
.ensemble-controls-v2>label{font-size:11px;font-weight:750;color:#8feaff}.ensemble-controls-v2>select{min-height:36px;min-width:170px;background:#061522;color:#eafaff;border:1px solid rgba(0,210,255,.25);border-radius:8px;padding:6px 9px;color-scheme:dark}.ensemble-controls-v2 .ensemble-members-toggle{display:inline-flex;align-items:center;gap:6px;color:#b7cfda}.ensemble-controls-v2 .ensemble-members-toggle input{accent-color:#00d2ff}
@media(max-width:760px){.ensemble-controls-v2>select{flex:1;min-width:140px}.ensemble-controls-v2{align-items:stretch}}

/* V21 tutorial stacking fix: search modal uses ~999995. The tutorial
   must stay above it while spotlighting the real search/map UI. */
.tutorial-layer{z-index:1000010!important}
.tutorial-spotlight{z-index:1!important}
.tutorial-card{z-index:3!important}
.tutorial-target-active{z-index:auto!important}
.weather-data-missing{display:grid;place-items:center;width:100%;height:100%;font:800 36px/1 Poppins,sans-serif;color:#7894a5}
.weather-data-missing-small{font-size:16px}

/* V21 geometry/readability corrections */
#statsSection .stats-kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.daily-model-unavailable{opacity:.82;border-style:dashed!important}
.daily-main-unavailable{cursor:default!important}
.daily-model-unavailable .daily-desc-line{color:#9db0bd}
.daily-model-unavailable .daily-extra{color:#7f95a4;font-size:10px}
.weather-data-missing-row{font-size:20px;min-width:34px;min-height:34px}
@media(max-width:1100px){#statsSection .stats-kpi-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}}
@media(max-width:760px){#statsSection .stats-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Final Current sizing: keep the condition icon informative, never dominant. */
.now-temp-big{font-size:clamp(42px,4.8vw,62px)!important}
.anim-icon-xlarge{width:74px!important;height:74px!important}
.anim-icon-xlarge svg,.anim-icon-xlarge img,.anim-icon-xlarge .weather-icon{width:70px!important;height:70px!important;max-width:70px!important;max-height:70px!important}
@media(max-width:760px){.now-temp-big{font-size:clamp(40px,14vw,55px)!important}.anim-icon-xlarge{width:62px!important;height:62px!important}.anim-icon-xlarge svg,.anim-icon-xlarge img,.anim-icon-xlarge .weather-icon{width:58px!important;height:58px!important;max-width:58px!important;max-height:58px!important}}

/* V21 — stable compact hourly geometry and unavailable states. */
#hourlyResults .hourly-row{
  flex:0 0 auto;
  height:auto!important;
  max-height:none!important;
  overflow:visible;
  grid-auto-rows:auto;
  display:grid!important;
  grid-template-columns:58px 40px 66px minmax(110px,1fr) minmax(94px,128px) minmax(105px,135px)!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:initial!important;
}
#hourlyResults .hourly-time,#hourlyResults .hourly-icon,#hourlyResults .hourly-temp,
#hourlyResults .hourly-desc,#hourlyResults .hourly-rain,#hourlyResults .hourly-wind{
  width:auto!important;min-width:0!important;padding-left:0!important;
}
#hourlyResults .hourly-temp{text-align:left!important}
#hourlyResults .hourly-rain,#hourlyResults .hourly-wind{text-align:right!important;white-space:normal;line-height:1.25}
#hourlyResults .hourly-detail{grid-column:1/-1!important;width:100%!important;min-width:0!important;position:static;float:none;color:#dceef7;padding:12px 0 4px}
#hourlyResults .hourly-detail.hidden{display:none!important}
#hourlyResults .hourly-row:focus-visible{outline:2px solid #54deff;outline-offset:2px}
#hourlyResults .hdet-grid{color:#b8cfde;overflow-wrap:anywhere}
#hourlyResults .hdet-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.weather-empty-state{padding:18px;border:1px dashed rgba(126,174,198,.25);border-radius:12px;background:rgba(4,18,31,.55);color:#8fa8b6;text-align:center;font-size:12px;line-height:1.55}
.precip-bar-missing{border:1px dashed rgba(150,180,195,.25);min-height:1px!important;opacity:.6}
@media(max-width:940px){
  #hourlyResults .hourly-row{grid-template-columns:54px 38px 62px minmax(100px,1fr) minmax(100px,120px)!important}
  #hourlyResults .hourly-rain{display:none!important}
  #hourlyResults .hdet-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  #hourlyResults .hourly-row{grid-template-columns:48px 34px 58px minmax(0,1fr)!important;gap:6px!important}
  #hourlyResults .hourly-rain,#hourlyResults .hourly-wind{display:none!important}
  #hourlyResults .hourly-desc{font-size:11px!important;line-height:1.25}
  #hourlyResults .hourly-icon .weather-icon,#hourlyResults .hourly-icon svg,#hourlyResults .hourly-icon img{max-width:30px!important;max-height:30px!important}
  #hourlyResults .hdet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* V21 tutorial scrolling: allow spotlight steps to scroll the real page while the fixed overlay remains active. */
body.tutorial-open{overflow:auto!important;overscroll-behavior:contain}
@media(max-width:760px){.tutorial-card{max-height:min(68vh,560px)!important}.tutorial-close{width:46px;height:46px}}

/* Neutral state when a provider has no real weather code. Never imply sun/night. */
.theme-weather-unavailable{background:linear-gradient(160deg,#071522,#0a2030)!important}
.theme-realistic-unknown .realistic-bg::before{background:linear-gradient(to bottom,rgba(3,12,22,.22),rgba(3,12,22,.50))!important}
/* Final Current icon geometry: avoid legacy double-scaling inside the compact V21 grid. */
.now-left-square .anim-icon-xlarge{transform:none!important;transform-origin:center!important}

/* V21 — organized, functional Settings controls. */
.settings-toggle-line{display:flex;align-items:center;gap:9px;min-width:0;color:#b9ceda;font-size:12px;line-height:1.4;cursor:pointer}
.settings-toggle-line input[type="checkbox"]{width:18px!important;height:18px!important;min-height:18px!important;flex:0 0 18px;margin:0;accent-color:#00d2ff}
.settings-range-row{align-items:center}.settings-range-control{display:flex;align-items:center;gap:10px;flex:1;min-width:180px}.settings-range-control input[type="range"]{flex:1;accent-color:#00d2ff}.settings-range-control output{min-width:42px;text-align:right;color:#76e8ff;font-size:11px;font-weight:800}
.settings-availability-note,.settings-readonly-value{display:flex;align-items:flex-start;gap:7px;flex:1;min-width:0;padding:9px 11px;border:1px solid rgba(0,210,255,.14);border-radius:9px;background:rgba(0,210,255,.045);color:#9cb7c5;font-size:11px;line-height:1.45}.settings-readonly-value{color:#bfeaf4;font-family:ui-monospace,SFMono-Regular,Consolas,monospace}
.settings-inline-status{margin-top:8px;min-height:16px;color:#7fcfe0;font-size:10px;line-height:1.4}
body.animations-disabled *,body.animations-disabled *::before,body.animations-disabled *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
body[data-ui-density="compact"] .weather-section{padding-top:10px!important;padding-bottom:10px!important}
body[data-ui-density="compact"] .chart-container-box,body[data-ui-density="compact"] .daily-forecast-group,body[data-ui-density="compact"] .settings-category-body{padding:10px!important}
body[data-ui-density="compact"] .now-info-box{min-height:76px!important;padding:8px 7px!important}
body[data-ui-density="compact"] #hourlyResults .hourly-row{min-height:54px!important;padding-top:6px!important;padding-bottom:6px!important}
body.experimental-disabled .maps-tab-btn[data-maps-tab="thavma"]{display:none!important}
body.experimental-disabled #thavmaMapsSection{display:none!important}
@media(max-width:760px){.settings-range-control{min-width:0;width:100%}.setting-row-v2{align-items:flex-start}.settings-toggle-line,.settings-availability-note,.settings-readonly-value{width:100%}}

/* ========================================================================== 
   THAVMA FORECAST V21 — supplied-asset realistic layers / settings / climate
   ========================================================================== */
body[data-version="22"]{background:#04101f;color:var(--v19-text,#eaf8ff)}
.realistic-bg{overflow:hidden;background:#081a30!important;filter:none!important;isolation:isolate}
.realistic-base-layer{position:absolute;inset:0;z-index:0;background:linear-gradient(180deg,#0b2b4d 0%,#397798 56%,#8bb2c5 100%);transition:background .45s ease}
.realistic-bg canvas{position:absolute;inset:0;z-index:1;background:transparent!important;filter:none!important;transform:translateZ(0)}
.realistic-landscape-layer{position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;height:auto;max-height:33vh;object-fit:contain;object-position:center bottom;pointer-events:none;user-select:none;filter:drop-shadow(0 -12px 24px rgba(2,9,18,.18));transition:opacity .3s ease}
.realistic-human-layer{position:absolute;z-index:3;right:clamp(2vw,5vw,7vw);bottom:0;width:clamp(235px,29vw,470px);height:auto;max-height:72vh;aspect-ratio:4/5;object-fit:contain;object-position:center bottom;pointer-events:none;filter:drop-shadow(0 16px 26px rgba(0,0,0,.28));transition:opacity .28s ease,transform .28s ease}
.realistic-landscape-layer.hidden,.realistic-human-layer.hidden,.realistic-asset-badge.hidden{display:none!important}
.realistic-asset-badge{display:none!important}
/* Never darken/blur the entire realistic composition. Only canvas/base may be graded. */
body.theme-realistic-sunny .realistic-base-layer,body.theme-realistic-sunny #weatherCanvas{filter:saturate(1.04) brightness(.98)}
body.theme-realistic-clearnight .realistic-base-layer,body.theme-realistic-clearnight #weatherCanvas{filter:saturate(.86) brightness(.72) contrast(1.05)}
body.theme-realistic-cloudy .realistic-base-layer,body.theme-realistic-drizzle .realistic-base-layer{filter:saturate(.88) brightness(.86)}
body.theme-realistic-rain .realistic-base-layer,body.theme-realistic-thunder .realistic-base-layer{filter:saturate(.82) brightness(.72)}
body.theme-realistic-fog .realistic-base-layer{filter:saturate(.72) brightness(.92)}
body.theme-realistic-snow .realistic-base-layer{filter:saturate(.72) brightness(.98)}
body[data-background-effects="off"] .realistic-human-layer{display:none!important}
body[data-background-effects="off"] #weatherCanvas{opacity:.35}
body[data-background-effects="reduced"] .realistic-human-layer{opacity:.88;transform:scale(.96);transform-origin:center bottom}
body.thavma-reduced-motion .realistic-human-layer{transition:none!important}
body.thavma-reduced-motion #weatherCanvas{transition:none!important}

/* Real card transparency changes backgrounds only, never text. */
body[data-version="22"] .weather-section,
body[data-version="22"] .chart-container-box,
body[data-version="22"] .now-left-square,
body[data-version="22"] .now-info-box,
body[data-version="22"] .daily-row,
body[data-version="22"] .hourly-row,
body[data-version="22"] .stats-card,
body[data-version="22"] .stats-sidebar-card,
body[data-version="22"] .settings-category,
body[data-version="22"] .news-card-full{color:inherit}

.monthly-climate-extra{margin-top:9px;padding-top:8px;border-top:1px solid rgba(255,255,255,.07)}
.monthly-card-row-small{font-size:10.5px;min-height:22px}.monthly-climate-source{display:block;margin-top:5px;color:#7191a8;font-size:9px}
.year-outlook-section{margin-top:26px;padding:17px;border:1px solid rgba(46,220,255,.14);border-radius:16px;background:rgba(5,20,35,.76)}
.year-outlook-heading{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;flex-wrap:wrap}.year-outlook-heading .section-title{margin-top:0}.year-outlook-controls{display:flex;gap:7px;align-items:center}.year-outlook-status{margin:6px 0 14px;color:#8fa9bd;font-size:11px}
.year-outlook-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.year-month-card{min-width:0;padding:11px;border:1px solid rgba(255,255,255,.08);border-radius:13px;background:rgba(4,18,32,.78)}.year-month-card h4{margin:0 0 9px;color:#78eaff;font-size:13px}.year-month-calendar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}.year-week-head{padding:3px 0;text-align:center;color:#68879d;font-size:8px;font-weight:800}.year-day{appearance:none;min-width:0;min-height:40px;padding:3px;border:1px solid transparent;border-radius:6px;background:rgba(255,255,255,.025);color:#dceef7;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}.year-day:hover,.year-day:focus-visible{border-color:rgba(46,220,255,.38);background:rgba(46,220,255,.07);outline:none}.year-day-empty{background:transparent}.year-day-num{font-size:8px}.year-day-icon{width:18px;height:18px}.year-day-icon svg{width:18px;height:18px}.year-day-no-data{font-size:11px;color:#587285}.year-outlook-section .monthly-hist-result.active{display:grid;gap:5px;margin-top:12px}

/* V21 tutorial: mobile onboarding is its own safe-area layout, not a squeezed desktop modal. */
.tutorial-close{width:50px!important;height:50px!important;right:12px!important;top:12px!important;background:#c81d2d!important;border-color:#ff7180!important;font-size:25px!important;font-weight:900!important;touch-action:manipulation}
@media(max-width:760px){
  .tutorial-layer{padding:0!important}
  .tutorial-card{left:max(10px,env(safe-area-inset-left))!important;right:max(10px,env(safe-area-inset-right))!important;bottom:max(10px,env(safe-area-inset-bottom))!important;top:auto!important;width:auto!important;max-height:calc(100dvh - max(20px,env(safe-area-inset-top)) - max(20px,env(safe-area-inset-bottom)))!important;padding:20px 18px calc(18px + env(safe-area-inset-bottom))!important;transform:none!important;overflow-y:auto!important;overscroll-behavior:contain}
  .tutorial-card h2{font-size:20px}.tutorial-card>p:not(.tutorial-kicker){font-size:13px;line-height:1.55}.tutorial-close{width:52px!important;height:52px!important}.tutorial-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:9px}.tutorial-btn{min-height:48px!important;padding:10px!important}.tutorial-progress{margin:14px 0}.tutorial-spotlight{display:block!important;border-radius:10px}
  .realistic-landscape-layer{max-height:24vh}.realistic-human-layer{right:-2vw;width:min(58vw,330px);max-height:58vh}.realistic-asset-badge{display:none!important}
  .year-outlook-grid{grid-template-columns:1fr}.year-month-card{padding:10px}.year-day{min-height:43px}.year-day-icon,.year-day-icon svg{width:20px;height:20px}
}
@media(min-width:761px) and (max-width:1120px){.year-outlook-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.realistic-human-layer{width:34vw}}
@media(prefers-reduced-motion:reduce){.realistic-human-layer{transition:none!important}.year-day,.tutorial-close{transition:none!important}}
/* V21 transparency applies to card surfaces, not text/content. */
body[data-version="22"] .now-left-square,
body[data-version="22"] .now-bar-analysis,
body[data-version="22"] .now-info-box,
body[data-version="22"] .chart-container-box,
body[data-version="22"] .daily-forecast-group,
body[data-version="22"] .daily-row,
body[data-version="22"] .hourly-row,
body[data-version="22"] .quarter-hour-card,
body[data-version="22"] .monthly-card,
body[data-version="22"] .monthly-summary-card,
body[data-version="22"] .stats-card,
body[data-version="22"] .stats-sidebar-card,
body[data-version="22"] .settings-category,
body[data-version="22"] .news-card-full,
body[data-version="22"] .news-editor-section,
body[data-version="22"] .year-month-card{
  background:rgba(5,20,35,var(--thavma-card-alpha,.84))!important;
}
/* V21 year calendar navigation / selected month */
.year-outlook-control-separator{width:1px;height:28px;background:rgba(255,255,255,.12);margin:0 2px}
.year-month-card.is-focused-month{border-color:rgba(46,220,255,.48);box-shadow:0 0 0 2px rgba(46,220,255,.08),0 12px 32px rgba(0,0,0,.18)}
@media(max-width:760px){.year-outlook-controls{width:100%;display:grid!important;grid-template-columns:auto 1fr auto auto 1fr auto}.year-outlook-control-separator{display:none}.year-outlook-controls .monthly-hist-select{min-width:0;width:100%}}
/* V22: compact sidebar and accessible regional push forms. */
.mod-shell{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px}
.mod-shell{background:rgba(5,24,40,.96);padding:20px;border:1px solid #28536a;border-radius:18px}
.push-admin-form input[type=checkbox]{width:18px!important;height:18px!important;min-width:18px!important;max-width:18px!important;flex:0 0 18px!important;padding:0!important;margin:0!important;appearance:auto;accent-color:#35c8e6}
.push-admin-form fieldset label{justify-content:flex-start!important;text-align:left!important;font-size:14px}
.mod-shell #_modTabs{display:flex;flex-direction:column;align-items:stretch;gap:6px;align-self:start}
.mod-shell #_modTabs button{text-align:left;white-space:normal}
#modSection>#_siteTools,#modParking{display:none}
#_modContent{min-width:0}
.push-panel{width:100%;line-height:1.6}
.push-actions{display:flex;gap:10px;flex-wrap:wrap}
.push-panel button,.push-admin-form button,.push-notice button{padding:10px 16px;border:1px solid #347188;border-radius:10px;background:#123b51;color:#eaf8ff;cursor:pointer}
.push-panel button:disabled,.push-admin-form button:disabled{opacity:.55;cursor:wait}
.push-panel p,.push-panel small{white-space:normal;overflow-wrap:anywhere}
.push-admin-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.push-admin-form label{display:grid;gap:6px}
.push-admin-form input:not([type=checkbox]),.push-admin-form textarea,.push-admin-form select{width:100%;box-sizing:border-box;padding:10px;background:#092438;color:#eaf8ff;border:1px solid #316176;border-radius:8px}
.push-admin-form textarea,.push-admin-form fieldset{min-width:0;grid-column:1/-1}
.push-admin-form fieldset{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;border:1px solid #316176}
.push-admin-form fieldset label{display:flex;align-items:center;gap:6px}
.push-notice{border-left:5px solid #35c8e6;padding:12px 18px;margin-top:16px;background:#092438;border-radius:10px;overflow-wrap:anywhere}
.push-notice[data-severity=yellow]{border-color:#f5d941}.push-notice[data-severity=orange]{border-color:#ff9435}.push-notice[data-severity=red]{border-color:#f44e61}.push-notice[data-severity=purple]{border-color:#a15be0}
.admin-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.admin-summary-grid article{padding:16px;background:#0b293d;border:1px solid #21475c;border-radius:12px}
.admin-asset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}.admin-asset-grid img{max-width:100%;height:100px;object-fit:contain}
.tv-card{display:block;max-width:780px;margin:24px auto;border:1px solid #28566e;border-radius:18px;overflow:hidden;background:linear-gradient(120deg,#061323,#103c55);color:#eaf8ff;text-decoration:none}
.tv-card img{display:block;width:100%;max-height:255px;object-fit:cover}.tv-card-copy{padding:16px 22px}.tv-card-copy strong{color:#55d8f3;font-size:20px}.tv-card-copy p{margin:6px 0}
.tv-card.is-unconfigured{opacity:.8}.tv-card-weather img{object-fit:contain;height:130px}
.realistic-landscape-layer{width:100%;height:33vh;max-height:none;object-fit:cover;object-position:center bottom}
.realistic-landscape-layer[data-day-part="night"][data-generic-lighting="true"]{filter:brightness(.42) saturate(.65)}
@media(max-width:700px){.mod-shell{grid-template-columns:1fr}.mod-shell #_modTabs{display:flex;flex-direction:row;flex-wrap:wrap}.mod-shell #_modTabs button{flex:1 1 130px}.push-admin-form{grid-template-columns:1fr}.push-admin-form fieldset{grid-template-columns:1fr}.realistic-landscape-layer{height:24vh;max-height:none}}


@media(max-width:460px){.home-athens-card .home-city-stats-expanded{grid-template-columns:repeat(3,minmax(0,1fr))}.navbar .brand-text{min-width:0}.push-panel{font-size:13px} .hourly-detail{font-size:12px}}