/* TimeNow — Clear, large typography. Time.is philosophy + modern SaaS. */

:root {
  --bg: #0f1012;
  --bg-soft: #16181c;
  --surface: #1c1e24;
  --surface-hover: #23262e;
  --text: #f8f9fa;
  --text-muted: #9ca3af;
  --accent: #38BDF8;
  --accent-primary: #2563EB;
  --accent-dim: rgba(56, 189, 248, 0.18);
  --border: #2d3139;
  --radius: 16px;
  --radius-sm: 10px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --shadow: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.35);
  --space: 1.75rem;
  --space-lg: 3rem;
  --max-width: 1500px;
  font-size: clamp(18px, 2vw + 16px, 22px);
  --clock-size: clamp(8rem, 12vw, 14rem);
  --city-name-size: 28px;
  --section-title-size: clamp(2.5rem, 3vw + 2rem, 4rem);
  --body-size: 1.125rem;
}
[data-theme="light"] {
  --bg: #F8FAFC;
  --bg-soft: #f1f5f9;
  --surface: #fff;
  --surface-hover: #f1f5f9;
  --text: #0f172a;
  --text-muted: #64748b;
  --accent: #2563EB;
  --accent-primary: #2563EB;
  --accent-dim: rgba(37, 99, 235, 0.12);
  --border: #e2e8f0;
  --shadow: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.08);
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: 1.6;
  transition: background 0.25s ease, color 0.25s ease;
}
/* Light theme: soft gradient background */
[data-theme="light"] body {
  background: linear-gradient(160deg, #f5f7fa 0%, #eef1f5 50%, #e8ecf1 100%);
}

/* Soft animated gradient glow (fixed, behind content) */
body::before {
  content: "";
  position: fixed;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 102, 241, 0.25), transparent 60%);
  filter: blur(80px);
  z-index: -1;
  animation: glow-pulse 12s ease-in-out infinite alternate;
}
body::after {
  content: "";
  position: fixed;
  bottom: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.2), transparent 60%);
  filter: blur(80px);
  z-index: -1;
  animation: glow-pulse 14s ease-in-out infinite alternate;
}
@keyframes glow-pulse {
  from { opacity: 0.7; }
  to { opacity: 1; }
}
@keyframes floatCard {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-4px); }
  100% { transform: translateY(0px); }
}
@keyframes pulseClock {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}
.time-display {
  animation: pulseClock 2s infinite;
}

/* ----- App header: same structure on all pages ----- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-family: var(--font);
}
/* Match page content width and horizontal padding (same as .main) */
.header-container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 12px var(--space);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.header-left {
  display: flex;
  align-items: center;
}
.header-right {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
}
.logo {
  font-size: clamp(1.25rem, 1.5vw + 1rem, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: white;
  background: linear-gradient(90deg, #38bdf8, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.logo:hover { opacity: 0.92; }
.header-right a {
  text-decoration: none;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.header-right a:hover { color: white; }
.header-search-wrap {
  position: relative;
  width: 120px;
  min-width: 100px;
}
.header-search-input {
  width: 100%;
  padding: 6px 10px 6px 28px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: 0.8125rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.header-search-wrap::before {
  content: "🔍";
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  pointer-events: none;
  font-size: 0.75rem;
}
.header-search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.header-search-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.25);
}
.search-box {
  width: 420px;
  max-width: 100%;
  position: relative;
}
.search-box::before {
  content: "🔍";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  pointer-events: none;
}
.search-input {
  width: 100%;
  padding: 10px 16px 10px 36px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: white;
  font-size: clamp(0.875rem, 0.5vw + 0.8rem, 1rem);
  outline: none;
  transition: all 0.25s ease;
}
.search-input::placeholder { color: rgba(255, 255, 255, 0.5); }
.search-input:focus {
  border-color: #6366f1;
  box-shadow:
    0 0 0 2px rgba(99, 102, 241, 0.25),
    0 8px 30px rgba(0, 0, 0, 0.4);
}
.theme-btn {
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.theme-btn:hover { background: rgba(255, 255, 255, 0.1); }
.theme-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sound-btn { margin-left: 0; }
@media (max-width: 768px) {
  .header-container {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .header-right { justify-content: center; }
  .header-search-wrap { width: 140px; }
}
/* Legacy .top-bar: map to app-header for old markup */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(15, 15, 25, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: var(--space);
  padding: 12px 20px;
  flex-wrap: wrap;
}
.search-wrap { position: relative; flex: 1; max-width: 420px; margin: 0 auto; min-width: 0; }
.search-wrap .search-input { padding-left: 36px; }
.search-wrap::before {
  content: "🔍";
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.6;
  pointer-events: none;
}
.header-nav { display: flex; align-items: center; gap: 22px; flex-shrink: 0; }
.header-nav a { color: rgba(255, 255, 255, 0.75); text-decoration: none; font-size: 14px; }
.header-nav a:hover { color: white; }

/* ----- Main: wide content, centered, generous whitespace ----- */
.main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space);
}

/* ----- Hero: dominant clock (Time.is style, refined) ----- */
.hero {
  text-align: center;
  padding: var(--space-lg) 0;
  animation: heroFade 0.5s ease;
  overflow: visible;
}
@keyframes heroFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-subtext {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin: 0 0 0.75rem 0;
  font-weight: 500;
}
.hero-time-wrap {
  margin: 0.75rem 0;
  overflow: visible;
  min-width: 0;
}
/* Hero clock: dominates the page (time.is style, modern gradient) — max 13rem so all 8 digits fit on wide screens */
.hero .time-display {
  font-size: clamp(9rem, 14vw, 13rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: white;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  transition: opacity 0.15s ease;

  background: linear-gradient(
    90deg,
    #22d3ee,
    #6366f1,
    #8b5cf6
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  filter: saturate(1.2);
  text-shadow:
    0 0 32px rgba(34, 211, 238, 0.5),
    0 0 64px rgba(99, 102, 241, 0.4),
    0 0 96px rgba(139, 92, 246, 0.35);
}
.hero-date {
  font-size: 1.35rem;
  color: var(--text-muted);
  margin-top: 0.75rem;
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 1rem;
  margin-top: 0.75rem;
  font-size: 1.1rem;
  color: var(--text-muted);
}
.tz-abbr { font-weight: 600; color: var(--text); }
.tz-offset { font-family: ui-monospace, monospace; }
.accuracy-line {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 1rem;
  padding: 0.25rem 0.5rem;
  background: var(--bg-soft);
  border-radius: 4px;
  display: inline-block;
}
.accuracy-line.hidden { display: none; }
.format-toggle {
  display: inline-flex;
  margin-top: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.format-toggle button {
  padding: 0.35rem 0.75rem;
  font-size: 0.8125rem;
  border: none;
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.2s, color 0.2s;
}
.format-toggle button.active { background: var(--accent-dim); color: var(--accent); font-weight: 600; }
.format-toggle button:hover:not(.active) { background: var(--surface-hover); color: var(--text); }

/* ----- Info blocks: timezone, sun (glass cards) ----- */
.info-block {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  border-radius: var(--radius);
  padding: var(--space);
  margin-bottom: var(--space);
}
.info-title {
  font-size: clamp(0.85rem, 1.2vw + 0.7rem, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0 0 0.5rem 0;
}
.info-content p { margin: 0.25rem 0; font-size: 1.05rem; }
.info-content .muted { color: var(--text-muted); font-size: 0.95rem; }

/* ----- Timezone section: feature panel ----- */
.timezone-section {
  margin-top: 40px;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.05),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(12px);
}
.timezone-section h2 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.4px;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.timezone-section h2::before {
  content: "🌍";
  font-size: 20px;
}

/* ----- Sun window: progress bar ----- */
.sun-window {
  margin-top: 20px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sun-row {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--text-muted);
  align-items: center;
}
/* Sunrise/Sunset: bigger, clearer emojis */
.sun-rise-cell,
.sun-set-cell {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.sun-rise-cell::before {
  content: "🌅";
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.4));
}
.sun-set-cell::before {
  content: "🌇";
  font-size: 2rem;
  line-height: 1;
  filter: drop-shadow(0 0 8px rgba(251, 191, 36, 0.4));
}
.sun-progress {
  height: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}
.sun-progress-bar {
  height: 100%;
  width: 60%;
  background: linear-gradient(
    90deg,
    #f59e0b,
    #fbbf24,
    #fde68a
  );
  border-radius: 8px;
  transition: width 0.3s ease;
}

.sun-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0.5rem;
}
.sun-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.75rem;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}
.sun-icon { font-size: 1.75rem; line-height: 1; filter: drop-shadow(0 0 6px rgba(251, 191, 36, 0.35)); }
.sun-item span:not(.sun-icon):not(.sun-label) { font-weight: 600; font-variant-numeric: tabular-nums; }
.sun-label { font-size: 0.75rem; color: var(--text-muted); }

/* ----- Section titles / headings ----- */
.section { margin-bottom: var(--space-lg); }
h1, h2 {
  font-size: clamp(2.5rem, 3vw + 2rem, 4rem);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1rem 0;
  line-height: 1.2;
}
.section-title {
  font-size: clamp(2.5rem, 3vw + 2rem, 4rem);
  font-weight: 600;
  color: var(--text);
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.6rem;
  border-bottom: none;
  position: relative;
}
.section-title::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 120px;
  height: 4px;
  background: linear-gradient(
    90deg,
    #38bdf8,
    #6366f1
  );
  border-radius: 4px;
}
/* Section title emojis */
.world-clocks-default .section-title::before { content: "🕐 "; }
.section-pinned .section-title::before { content: "📌 "; }
.cities-section .section-title::before { content: "🏙️ "; }
.meeting-section .section-title::before { content: "📅 "; }
.accordion-section .section-title::before { content: "🛠️ "; }
.sun-info .info-title::before { content: "☀️ "; font-size: 1.05em; }

/* ----- Default World Clocks grid (10 cities, 2 rows, link to city page) ----- */
.world-clocks-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.25rem;
}
.world-clock-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  border-radius: var(--radius);
  padding: 1.25rem;
}
.world-clock-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow:
    0 12px 60px rgba(0, 0, 0, 0.45),
    0 0 30px rgba(99, 102, 241, 0.25);
}
.world-clock-card .city-name {
  display: block;
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}
.world-clock-card .city-time {
  display: block;
  font-size: 1.35rem;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}
.world-clock-card .city-tz {
  display: block;
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-top: 0.35rem;
  white-space: nowrap;
}
/* City font styles (data-font on card) */
.world-clock-card[data-font="serif"] .city-name { font-family: "Playfair Display", Georgia, serif; }
.world-clock-card[data-font="elegant"] .city-name { font-family: "Libre Baskerville", Georgia, serif; }
.world-clock-card[data-font="minimal"] .city-name { font-family: "DM Sans", system-ui, sans-serif; }
.world-clock-card[data-font="artistic"] .city-name { font-family: "Playfair Display", serif; }
.world-clock-card[data-font="strong"] .city-name { font-family: "Oswald", system-ui, sans-serif; }
/* Accent colors for city names (existing accent palette) */
.world-clock-card[data-accent="1"] .city-name { color: var(--accent); }
.world-clock-card[data-accent="2"] .city-name { color: #a78bfa; }
.world-clock-card[data-accent="3"] .city-name { color: #34d399; }
.world-clock-card[data-accent="4"] .city-name { color: #f472b6; }
.world-clock-card[data-accent="5"] .city-name { color: #fb923c; }

/* ----- Pinned clocks: responsive grid + premium cards ----- */
.pinned-cities-grid,
.multi-clock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 18px;
  margin-bottom: 1rem;
}
.mini-clock.pinned-city-card {
  padding: 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
  animation: cardIn 0.3s ease, floatCard 6s ease-in-out 0.3s infinite;
}
.mini-clock.pinned-city-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(99, 102, 241, 0.15),
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}
.mini-clock.pinned-city-card:hover {
  transform: translateY(-6px);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.45),
    0 0 20px rgba(99, 102, 241, 0.25);
  border-color: rgba(99, 102, 241, 0.35);
}
.mini-clock.pinned-city-card:hover::before {
  opacity: 1;
}
.pinned-city-name {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}
.pinned-city-time {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.pinned-city-offset {
  font-size: 12px;
  color: var(--text-muted);
}
.day-indicator {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 10px #22c55e;
}
.day-indicator.night {
  background: #6366f1;
  box-shadow: 0 0 10px #6366f1;
}
.mini-clock .btn-remove {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 22px;
  height: 22px;
  border: none;
  background: var(--surface-hover);
  color: var(--text-muted);
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s, background 0.2s;
  z-index: 2;
}
.mini-clock .btn-remove:hover { opacity: 1; background: var(--accent-dim); color: var(--accent); }
@keyframes cardIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* Legacy mini-clock (without pinned-city-card) fallback */
.mini-clock:not(.pinned-city-card) {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  transition: all 0.25s ease;
  border-radius: var(--radius);
  padding: 1rem;
  position: relative;
  animation: cardIn 0.3s ease, floatCard 6s ease-in-out 0.3s infinite;
}
.mini-clock:not(.pinned-city-card):hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 12px 60px rgba(0, 0, 0, 0.45), 0 0 30px rgba(99, 102, 241, 0.25);
}
.mini-clock .day-night {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  font-size: 0.875rem;
  opacity: 0.9;
}
.mini-clock .city-name { font-weight: 600; font-size: 0.9375rem; margin-bottom: 0.35rem; padding-left: 1.5rem; }
.mini-clock .mini-time { font-size: 1.25rem; font-variant-numeric: tabular-nums; font-weight: 500; }
.mini-clock .mini-date { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.2rem; }
.mini-clock .mini-offset { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }
.pinned-clocks-hint {
  margin-bottom: 0.75rem;
  font-size: 0.9rem;
}
.add-clock-wrap {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1rem;
}
.add-clock-msg {
  width: 100%;
  margin: 0.5rem 0 0 0;
  font-size: 0.875rem;
}
.add-clock-wrap input {
  padding: 0.45rem 0.65rem;
  font-size: 0.875rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  width: 160px;
}
.add-clock-wrap button {
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: filter 0.2s;
}
.add-clock-wrap button:hover { filter: brightness(1.08); }

/* ----- Meeting planner ----- */
.meeting-planner { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space); }
.meeting-row {
  display: grid;
  grid-template-columns: 70px 1fr auto;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}
.meeting-row label { font-size: 0.875rem; color: var(--text-muted); }
.meeting-row input {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-size: 0.9375rem;
}
.meeting-time { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 5ch; }
.meeting-overlap { font-size: 0.875rem; margin: 0.5rem 0 0 0; }

/* ----- Cities strip ----- */
.city-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}
.city-strip .continent-label {
  flex: 0 0 100%;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin: 0.5rem 0 0.25rem 0;
}
.city-strip .continent-label:first-child { margin-top: 0; }
.city-card {
  flex: 0 0 auto;
  min-width: 88px;
  padding: 0.6rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 600;
  transition: transform 0.2s, box-shadow 0.2s;
  text-align: center;
}
.city-card.city-card-styled {
  font-weight: inherit;
  font-size: inherit;
  font-family: inherit;
  font-style: inherit;
  color: inherit;
  border-color: inherit;
  opacity: 0.95;
}
.city-card:hover,
.city-card.city-card-styled:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  opacity: 1;
}
.city-card.city-card-styled:hover {
  filter: brightness(1.08);
}

/* ----- Tools grid ----- */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.tool-card {
  display: block;
  padding: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  transition: transform 0.2s, box-shadow 0.2s;
}
.tool-card:hover { transform: translateY(-1px); box-shadow: var(--shadow); }

.ad-slot {
  min-height: 80px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  margin: var(--space) 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 0.8rem;
}

/* ----- Accordion ----- */
.accordion-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.accordion-head {
  width: 100%;
  padding: 0.9rem 1rem;
  text-align: left;
  border: none;
  background: var(--surface);
  color: var(--text);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
}
.accordion-head:hover { background: var(--surface-hover); }
.accordion-head::after { content: "▼"; font-size: 0.65rem; opacity: 0.6; transition: transform 0.2s; }
.accordion-item.open .accordion-head::after { transform: rotate(180deg); }
.accordion-body { padding: 0 1rem 1rem; display: none; }
.accordion-item.open .accordion-body { display: block; animation: heroFade 0.25s ease; }
.tool-form label { display: block; margin-top: 0.75rem; font-size: 0.875rem; color: var(--text-muted); }
.tool-form input, .tool-form select, .tool-form textarea {
  width: 100%;
  max-width: 300px;
  padding: 0.5rem 0.75rem;
  margin-top: 0.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 0.875rem;
}
.tool-form button {
  margin-top: 0.75rem;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  font-size: 0.875rem;
}
.tool-form button:hover { filter: brightness(1.08); }
.tool-output {
  margin-top: 0.75rem;
  padding: 0.75rem;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.overlap-bars { margin-top: 0.5rem; }
.overlap-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.8125rem; }
.overlap-row .label { min-width: 90px; }
.overlap-row .bar-wrap { flex: 1; height: 18px; background: var(--bg-soft); border-radius: 4px; overflow: hidden; }
.overlap-row .bar-fill { height: 100%; border-radius: 4px; background: var(--accent); transition: width 0.3s; }

/* ----- Global footer (modern) ----- */
.global-footer {
  margin-top: 80px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
  padding: var(--space-lg) var(--space);
}
.footer-brand { margin: 0 0 0.75rem 0; font-weight: 600; }
.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.5rem;
}
.footer-nav a {
  color: var(--text-muted);
  text-decoration: none;
}
.footer-nav a:hover { color: var(--accent); }

/* ----- Breadcrumbs ----- */
.breadcrumbs { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 1rem; }
.breadcrumbs a { color: var(--accent); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumb-sep { margin: 0 0.35rem; color: var(--text-muted); }

/* ----- Global search results (dropdown) ----- */
.global-search-results { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--surface); border: 2px solid var(--border); border-radius: var(--radius); margin-top: 0.25rem; padding: 0.75rem; max-height: 320px; overflow-y: auto; z-index: 100; box-shadow: var(--shadow-lg); }
.header-search-wrap .global-search-results { min-width: 260px; right: auto; }
.global-search-results.open { display: block; }
.search-result-group { margin-bottom: 0.75rem; }
.search-result-group:last-child { margin-bottom: 0; }
.search-result-group strong { display: block; margin-bottom: 0.35rem; font-size: 0.85rem; color: var(--text-muted); }
.search-result-group ul { list-style: none; margin: 0; padding: 0; }
.search-result-group li { margin: 0.25rem 0; }
.search-result-group a { color: var(--text); text-decoration: none; }
.search-result-group a:hover { color: var(--accent); }
.top-bar .search-wrap { position: relative; }

/* ----- About city section ----- */
.about-city-section .city-meta { color: var(--text-muted); font-size: 0.95rem; margin-top: 0.5rem; }

/* ----- City content sections (AI-generated) ----- */
.city-content-section .info-content p { line-height: 1.6; }
.best-places-list, .best-restaurants-list { list-style: none; padding: 0; margin: 0.5rem 0 0 0; }
.best-places-list li, .best-restaurants-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--border); }
.best-places-list li:last-child, .best-restaurants-list li:last-child { border-bottom: none; }
.best-restaurants-list li { font-size: 0.95rem; }
.best-restaurants-list strong { display: inline-block; margin-right: 0.25rem; }

/* ----- FAQ accordion ----- */
.faq-section .faq-accordion { margin-top: 0.5rem; }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 0.5rem; overflow: hidden; }
.faq-question { width: 100%; padding: 0.85rem 1rem; text-align: left; font-size: 1rem; font-weight: 600; background: var(--surface); color: var(--text); border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.faq-question:hover { background: var(--bg-soft); }
.faq-question::after { content: ''; flex-shrink: 0; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -0.2rem; transition: transform 0.2s; }
.faq-question[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 0.2rem; }
.faq-answer { padding: 0 1rem 0.85rem; font-size: 0.95rem; line-height: 1.5; color: var(--text-muted); display: none; }
.faq-answer.open { display: block; }
.faq-question[aria-expanded="true"] + .faq-answer { display: block; }

/* ----- Time difference two-column ----- */
.time-diff-two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-bottom: 1rem; }
.time-diff-city .time-display { font-size: clamp(2rem, 10vw, 4rem); }
.time-diff-summary { font-size: 1.1rem; }

/* Working hours overlap chart (time-difference page) */
.overlap-chart-wrap { margin-top: 1rem; }
.overlap-chart { font-size: 0.85rem; }
.overlap-chart-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; }
.overlap-label { min-width: 8rem; font-weight: 600; }
.overlap-hours { display: flex; flex-wrap: wrap; gap: 2px; }
.overlap-chart .hour-cell { display: inline-block; width: 2rem; text-align: center; padding: 0.25rem; border-radius: 2px; background: var(--bg-soft); color: var(--text-muted); }
.overlap-chart .hour-cell.work { background: var(--accent); color: #fff; font-weight: 600; }
.overlap-legend { margin-top: 0.75rem; font-size: 0.8rem; color: var(--text-muted); }
.overlap-legend .hour-cell { margin-right: 0.5rem; vertical-align: middle; }

/* ----- City detail page (/time/:slug) ----- */
.city-page .city-hero .time-display { font-size: clamp(var(--clock-size, 3.5rem), 20vw, 8rem); font-variant-numeric: tabular-nums; transition: opacity 0.15s ease; }
.city-map-wrap { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 2px solid var(--border); }
.detail-page-map-wrap { border-radius: var(--radius); overflow: hidden; background: var(--surface); border: 2px solid var(--border); margin-top: 0.5rem; }
.detail-page-map { display: block; border: 0; width: 100%; height: 360px; }
.city-map-iframe { display: block; border: 0; min-height: 320px; }
.time-diff-wrap { background: var(--surface); border-radius: var(--radius); padding: 1.25rem; border: 2px solid var(--border); }
.time-diff-table { width: 100%; border-collapse: collapse; font-size: 1.05rem; }
.time-diff-table th, .time-diff-table td { padding: 0.6rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); }
.time-diff-table th { font-weight: 600; color: var(--text-muted); }
.time-diff-table .diff-time { font-variant-numeric: tabular-nums; }
.add-city-wrap { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; }
.add-city-wrap input { flex: 1; min-width: 160px; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--bg-soft); color: var(--text); font-size: 1rem; }
.add-city-wrap button { padding: 0.5rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--accent); background: var(--accent); color: #fff; font-weight: 600; cursor: pointer; }
.btn-remove-city { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.25rem; padding: 0 0.35rem; line-height: 1; }
.btn-remove-city:hover { color: var(--text); }
.places-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; }
.place-chip { display: inline-block; padding: 0.5rem 0.75rem; border-radius: var(--radius-sm); font-weight: 600; font-size: 1rem; margin: 0.25rem 0.25rem 0 0; }
.place-chip-1 { background: var(--accent-dim); color: var(--accent); }
.place-chip-2 { background: rgba(167, 139, 250, 0.2); color: #a78bfa; }
.place-chip-3 { background: rgba(52, 211, 153, 0.2); color: #34d399; }
.place-chip-4 { background: rgba(244, 114, 182, 0.2); color: #f472b6; }
.place-chip-5 { background: rgba(251, 146, 60, 0.2); color: #fb923c; }
.place-chip-6 { background: rgba(99, 102, 241, 0.15); color: #818cf8; }
.place-chip-7 { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
.place-chip-8 { background: rgba(236, 72, 153, 0.2); color: #ec4899; }
.place-chip-9 { background: rgba(251, 191, 36, 0.2); color: #fbbf24; }
.place-chip-10 { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

/* Internal linking (city page: nearby, popular, major cities) */
.internal-links .internal-links-block { margin-bottom: 1.5rem; }
.internal-links .internal-links-block .section-title { font-size: 1.1rem; margin-bottom: 0.5rem; }
.internal-links-list { margin: 0; color: var(--text-muted); }
.internal-links-list a { color: var(--accent); text-decoration: none; }
.internal-links-list a:hover { text-decoration: underline; }

.country-cities-by-letter { margin-top: 1rem; }
.country-cities-group { margin-bottom: 1.5rem; }
.country-cities-group-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text);
  margin: 0 0 0.5rem 0;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border);
}
.country-cities-group .internal-links-list { margin: 0; }

/* ----- List pages: /continents, /countries (card grid + OSM maps) ----- */
.list-page .section { max-width: var(--max-width); margin-left: auto; margin-right: auto; }

.continents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space);
  list-style: none;
  padding: 0;
  margin: 0;
}
.continent-card {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.continent-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.continent-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.continent-card__title {
  font-size: clamp(1.25rem, 2vw + 1rem, 1.5rem);
  font-weight: 700;
  margin: 0;
  padding: 1rem 1rem 0.5rem;
  line-height: 1.2;
}
.continent-card__map-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  background: var(--bg-soft);
  overflow: hidden;
}
.continent-card__map {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.continent-card__cta {
  display: block;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: inherit;
  opacity: 0.9;
}
/* Continent-themed colors */
.continent-card--europe { border-color: #0ea5e9; background: linear-gradient(180deg, rgba(14, 165, 233, 0.12) 0%, var(--surface) 45%); }
.continent-card--europe .continent-card__title { color: #0c4a6e; }
[data-theme="light"] .continent-card--europe .continent-card__title { color: #0369a1; }
.continent-card--africa { border-color: #ea580c; background: linear-gradient(180deg, rgba(234, 88, 12, 0.15) 0%, var(--surface) 45%); }
.continent-card--africa .continent-card__title { color: #9a3412; }
[data-theme="light"] .continent-card--africa .continent-card__title { color: #c2410c; }
.continent-card--asia { border-color: #ca8a04; background: linear-gradient(180deg, rgba(202, 138, 4, 0.12) 0%, var(--surface) 45%); }
.continent-card--asia .continent-card__title { color: #854d0e; }
[data-theme="light"] .continent-card--asia .continent-card__title { color: #a16207; }
.continent-card--north-america { border-color: #16a34a; background: linear-gradient(180deg, rgba(22, 163, 74, 0.12) 0%, var(--surface) 45%); }
.continent-card--north-america .continent-card__title { color: #166534; }
[data-theme="light"] .continent-card--north-america .continent-card__title { color: #15803d; }
.continent-card--south-america { border-color: #22c55e; background: linear-gradient(180deg, rgba(34, 197, 94, 0.12) 0%, var(--surface) 45%); }
.continent-card--south-america .continent-card__title { color: #14532d; }
[data-theme="light"] .continent-card--south-america .continent-card__title { color: #16a34a; }
.continent-card--oceania { border-color: #0284c7; background: linear-gradient(180deg, rgba(2, 132, 199, 0.12) 0%, var(--surface) 45%); }
.continent-card--oceania .continent-card__title { color: #075985; }
[data-theme="light"] .continent-card--oceania .continent-card__title { color: #0284c7; }
.continent-card--antarctica { border-color: #7dd3fc; background: linear-gradient(180deg, rgba(125, 211, 252, 0.15) 0%, var(--surface) 45%); }
.continent-card--antarctica .continent-card__title { color: #0e7490; }
[data-theme="light"] .continent-card--antarctica .continent-card__title { color: #0891b2; }
.continent-card--default { border-color: var(--border); background: var(--surface); }

.countries-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space);
  list-style: none;
  padding: 0;
  margin: 0;
}
.country-card {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.country-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.country-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1rem;
  text-decoration: none;
  color: var(--text);
}
.country-card__flag {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}
.country-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}
.country-card__map-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
  margin: 0.5rem 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-soft);
}
.country-card__map {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
}
.country-card__cta {
  margin-top: auto;
  font-size: 0.85rem;
  color: var(--accent);
  font-weight: 500;
}

/* ----- Contact page form ----- */
.contact-form { max-width: 32rem; margin: 1.5rem 0; }
.contact-form .form-row { margin-bottom: 1.25rem; }
.contact-form label { display: block; margin-bottom: 0.35rem; font-size: 0.95rem; font-weight: 500; color: var(--text); }
.contact-form .required { color: var(--accent); }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 0.6rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-soft);
  color: var(--text);
  transition: border-color 0.2s;
}
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.contact-form textarea { resize: vertical; min-height: 120px; }
.contact-form .form-actions { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1.5rem; }
.contact-form .btn { padding: 0.6rem 1.25rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; border: none; transition: filter 0.2s; }
.contact-form .btn-primary { background: var(--accent); color: #fff; }
.contact-form .btn-primary:hover:not(:disabled) { filter: brightness(1.1); }
.contact-form .btn-primary:disabled { opacity: 0.7; cursor: not-allowed; }
.contact-status { font-size: 0.95rem; }
.contact-status--success { color: var(--accent); }
.contact-status--error { color: #f87171; }
.contact-fallback { margin-top: 1.5rem; color: var(--text-muted); font-size: 0.95rem; }

.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ----- Responsive ----- */
@media (max-width: 640px) {
  :root { font-size: clamp(18px, 4vw + 14px, 20px); }
  body { font-size: 1.05rem; }
  .top-bar { flex-wrap: wrap; }
  .search-wrap { max-width: 100%; order: 3; width: 100%; }
  .hero .time-display { font-size: clamp(4rem, 18vw, 10rem); }
  .hero-date { font-size: 1.15rem; }
  h1, h2, .section-title { font-size: clamp(1.75rem, 6vw + 1.25rem, 2.5rem); }
  .world-clocks-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .world-clock-card .city-name { font-size: 1.1rem; }
  .world-clock-card .city-time { font-size: 1.2rem; }
  .sun-grid { grid-template-columns: 1fr; }
  .meeting-row { grid-template-columns: 1fr; }
  .meeting-row .meeting-time { margin-top: 0.25rem; }
  .city-page .city-hero .time-display { font-size: clamp(4rem, 18vw, 10rem); }
  .time-diff-wrap { overflow-x: auto; }
  .time-diff-table { font-size: 1rem; }
  .places-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .place-chip { font-size: 1rem; }
  .continents-grid { grid-template-columns: 1fr; gap: 1rem; }
  .countries-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .country-card__title { font-size: 1rem; }
}
@media (prefers-contrast: high) {
  :root { --border: #3f3f46; }
  [data-theme="light"] { --border: #d4d4d8; }
}