/* WorldTime styles */
.wt-hub { max-width: 1080px; margin: 0 auto; }
.wt-search { width: 100%; max-width: 420px; display: block; margin: 0 auto 1.5rem; padding: .7rem 1rem; font-size: 1rem; border: 1px solid #cbd5e1; border-radius: 8px; }
.wt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.wt-card { display: block; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.1rem 1rem; text-decoration: none; color: inherit; background: #fff; transition: box-shadow .15s, transform .15s; }
.wt-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); transform: translateY(-2px); }
.wt-card-city { font-weight: 700; font-size: 1.05rem; }
.wt-card-country { color: #64748b; font-size: .85rem; margin-bottom: .5rem; }
.wt-card-time { font-size: 1.35rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #0f172a; }
.wt-card-date { color: #64748b; font-size: .85rem; }
.wt-h2 { margin-top: 3rem; }
.wt-conv { border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; background: #f8fafc; display: grid; gap: 1rem; max-width: 640px; }
.wt-conv label { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
.wt-conv select, .wt-conv input { padding: .6rem .8rem; font-size: 1rem; border: 1px solid #cbd5e1; border-radius: 8px; font-weight: 400; }
.wt-btn { background: #2563eb; color: #fff; border: none; padding: .7rem 1.6rem; border-radius: 8px; font-weight: 600; cursor: pointer; justify-self: start; }
.wt-btn:hover { background: #1d4ed8; }
.wt-result { font-size: 1.05rem; line-height: 1.7; }

/* City page */
.wt-city-wrap { max-width: 760px; margin: 0 auto; }
.wt-city-clock { font-size: clamp(2.5rem, 8vw, 4.5rem); font-weight: 800; font-variant-numeric: tabular-nums; margin: 1rem 0 .25rem; color: #0f172a; }
.wt-city-date { font-size: 1.15rem; color: #475569; margin-bottom: 1.5rem; }
.wt-facts { list-style: none; padding: 0; display: grid; gap: .4rem; margin-bottom: 1.5rem; }
.wt-facts li { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: .6rem .9rem; }
.wt-seo { color: #334155; line-height: 1.7; }
.wt-related { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.wt-related a { border: 1px solid #e2e8f0; border-radius: 999px; padding: .4rem .9rem; text-decoration: none; font-size: .9rem; }
.wt-related a:hover { background: #eff6ff; border-color: #bfdbfe; }
.wt-zone-hint { font-weight: 400; font-size: .78rem; color: #64748b; }