:root {
  --bg: #05070d;
  --panel: #101827;
  --panel2: #172033;
  --text: #f8fafc;
  --muted: #a7b3c7;
  --accent: #ffcc00;
  --danger: #d71920;
  --ticker-speed: 850s;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; overflow: hidden; }

.screen { height: 100vh; display: grid; grid-template-rows: 78px 1fr 78px; background: radial-gradient(circle at 30% 20%, #1b2b4a 0%, #05070d 55%); }

.topbar { display: flex; align-items: center; justify-content: flex-start; padding: 0 34px; border-bottom: 4px solid var(--danger); background: linear-gradient(90deg, #07111f, #111827); }
.brand { font-size: 34px; font-weight: 900; letter-spacing: 1px; }
.clock-wrap { text-align: right; }
.clock { font-size: 46px; font-weight: 900; font-variant-numeric: tabular-nums; }
.hero-clock { font-size: 88px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: .9; margin-bottom: 60px;
    transform: translateY(-15px); letter-spacing: 2px; }
.clock-source { font-size: 14px; color: var(--muted); margin-top: -4px; min-height: 0; }

.main { display: grid; grid-template-columns: 1fr 360px; gap: 24px; padding: 28px; min-height: 0; }
.hero { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(16,24,39,.72); padding: 44px; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.label { color: var(--accent); font-weight: 900; font-size: 30px; letter-spacing: 2px; text-transform: uppercase; }
h1 { margin: 18px 0 10px; font-size: 68px; line-height: .96; text-transform: uppercase; }
.location-line { margin-top: 18px; font-size: 34px; color: var(--muted); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
p { font-size: 28px; color: var(--muted); max-width: 900px; }
.status-row { margin-top: 26px; font-size: 20px; color: var(--muted); display: flex; gap: 14px; }

.weather-panel { border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: linear-gradient(180deg, var(--panel), var(--panel2)); padding: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.panel-title { font-size: 22px; font-weight: 900; color: var(--accent); letter-spacing: 1px; align-self: stretch; text-align: left; }
.weather-icon { font-size: 94px; margin: 24px 0 8px; }
.temp-line { font-size: 72px; font-weight: 900; font-variant-numeric: tabular-nums; }
.conditions { font-size: 26px; color: var(--text); margin-top: 8px; }
.wind { font-size: 20px; color: var(--muted); margin-top: 12px; line-height: 1.25; }
.updated { font-size: 14px; color: var(--muted); margin-top: 22px; }

.ticker-bar { display: grid; grid-template-columns: 190px 1fr; background: #020617; border-top: 4px solid var(--danger); overflow: hidden;
    min-height: 92px; }
.ticker-label { background: var(--danger); color: white; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 24px; letter-spacing: 1px; }
.ticker-window { overflow: hidden; white-space: nowrap; display: flex; align-items: center; }
.ticker-content { display: inline-block; white-space: nowrap; font-size: 40px; font-weight: 800; padding-left: 100%; animation: ticker-scroll var(--ticker-speed) linear infinite; }
.ticker-item { margin-right: 160px; }
.source { color: var(--accent); margin-right: 10px; }
.sep { color: var(--danger); margin: 0 20px; }

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}