:root{
  --bg:#0f1724;
  --card: rgba(255,255,255,0.06);
  --glass: rgba(255,255,255,0.04);
  --accent: #7c5cff;
  --muted: #98a0b3;
  --glass-border: rgba(255,255,255,0.07);
  --radius: 14px;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background: radial-gradient(circle at 10% 10%, rgba(124,92,255,0.12), transparent 10%),
              linear-gradient(180deg, rgba(10,14,25,1) 0%, rgba(7,11,18,1) 100%);
  color: #e6eef8;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.container{width:100%;max-width:720px;}
.header{text-align:left;margin-bottom:18px;}
.header h1{font-size:1.6rem;font-weight:700;}
.header .subtitle{color:var(--muted);margin-top:6px;font-size:0.95rem;}
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(8px) saturate(110%);
  border-radius: var(--radius);
  padding:20px;
}
.time-section{display:flex;flex-direction:column;gap:6px;align-items:flex-start;}
.time-section .big{font-size:2.6rem;font-weight:600;}
.time-section .small{color:var(--muted);font-size:0.95rem;}
.location-section{margin-top:14px;}
.label{color:var(--muted);font-size:0.85rem;margin-bottom:6px;}
#location{font-size:1rem;font-weight:500;}
.coords{margin-top:6px;color:var(--muted);font-size:0.9rem;}
.btn{
  margin-top:10px;padding:8px 12px;border-radius:10px;
  background:linear-gradient(90deg, rgba(124,92,255,0.14), rgba(124,92,255,0.08));
  border: 1px solid rgba(124,92,255,0.18);
  color: #eaf0ff;cursor:pointer;font-weight:600;
}
.footer{margin-top:14px;text-align:left;color:var(--muted);font-size:0.85rem;}