:root {
  --bg: linear-gradient(135deg,#eef2f7,#dce4f7);
  --card: rgba(255,255,255,0.85);
  --text: #058813;
  --muted: #555;
  --accent: #ff8900;
  --radius: 16px;
  --shadow: 0 8px 24px rgba(0,0,0,0.08);
}
body.dark-mode {
  --bg: linear-gradient(135deg,#0d1117,#161b22);
  --card: rgba(22,27,34,0.9);
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #2f81f7;
  --shadow: 0 8px 30px rgba(0,0,0,0.4);
}
body {
  margin:0;
  font-family:"Inter","Segoe UI",system-ui,sans-serif;
  background: var(--bg);
  color: var(--text);
  transition: background 0.4s,color 0.3s;
}

/* Main Layout */
.hero{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:24px;
  margin:30px auto;
  max-width:1280px;
  padding:0 20px;
}
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding:22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  transition: background 0.3s, box-shadow 0.3s;
}

/* Clocks */
.main-clock{
  position: relative;
  text-align:center;
  margin-bottom:24px;
}
.main-clock .time{ font-size:64px; font-weight:700; color: var(--accent);}
.main-clock .tz{ font-size:16px;color: var(--muted); margin-top:6px;}
.utc-small{
  position:absolute;
  top:10px;
  right:10px;
  background: rgba(47,129,247,0.1);
  border-radius:10px;
  padding:6px 12px;
  text-align:right;
}
.utc-small .clock-time{ font-size:20px; font-weight:600; color: var(--accent);}
.utc-small .clock-tz{ font-size:12px; color: var(--muted);}

/* Meta Info */
.meta-row{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0;}
.meta{ background: rgba(0,0,0,0.05); padding:6px 12px; border-radius: var(--radius); font-size:13px; color: var(--muted);}
body.dark-mode .meta{ background: rgba(255,255,255,0.05); }

/* Cities Grid */
.cities{ display:grid; grid-template-columns: repeat(auto-fill,minmax(180px,1fr)); gap:16px; margin-top:16px;}
.city-card{ background: rgba(255,255,255,0.15); padding:14px; border-radius: var(--radius); text-align:center; backdrop-filter: blur(6px); transition: all 0.2s ease;}
.city-card:hover{ transform: translateY(-3px);}
.city-name{ font-size:15px; font-weight:600;}
.city-time{ font-size:20px; font-weight:700; color: var(--accent); margin-top:4px;}

.flag-inline-title {
  height: 1em;                 /* same height as text */
  width: auto;                 /* keeps aspect ratio */
  margin-right: 0.4em;
  vertical-align: middle;      /* aligns with text baseline */
  position: relative;
  top: -0.1em;                 /* fine-tune vertical centering */
  border-radius: 0.2em;
  object-fit: cover;
  box-shadow: 0 0.05em 0.15em rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.flag-inline-title:hover {
  transform: scale(1.05);
}


/* Converter */
.converter h3{ margin-bottom:12px;}
.converter .row{ display:flex; gap:10px; margin-bottom:12px; flex-wrap:wrap;}
.converter select, .converter input{ flex:1; padding:8px 10px; border-radius: var(--radius); border:1px solid #ccc; font-size:14px;}
body.dark-mode .converter select, body.dark-mode .converter input{ background:#161b22; border:1px solid rgba(255,255,255,0.1); color: var(--text);}
.cta{ background: linear-gradient(135deg,#2f81f7,#539bf5); border:none; color:#fff; font-weight:600; border-radius: var(--radius); padding:10px 18px; cursor:pointer; transition:0.2s;}
.cta:hover{ box-shadow:0 3px 12px rgba(47,129,247,0.4); transform:translateY(-2px); }

@media(max-width:768px){ .hero{grid-template-columns:1fr;} .main-clock .time{ font-size:48px;} .utc-small{position:static;margin-top:10px;text-align:center;} }

/* Back Button */
.back-home-button {
    display: inline-block;
    background-color: #ff8900;
    color: #fff;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: background-color 0.3s ease;
  }

  .back-home-button:hover {
    background-color: #058813;
  }

  .back-home-wrapper {
    text-align: center;
    margin: 40px 0;
  }