*,:before,:after{box-sizing:border-box;margin:0;padding:0}body{color:#f0f0f0;-webkit-font-smoothing:antialiased;background:#0d0d0d}.app{color:#f0f0f0;background:#0d0d0d;min-height:100vh;padding:2rem 1rem 3rem;font-family:Segoe UI,system-ui,sans-serif}.site-header{text-align:center;margin-bottom:2.5rem}.site-header h1{letter-spacing:.05em;color:#fff;margin:0 0 .3rem;font-size:2.2rem;font-weight:700}.site-header p{color:#888;margin:0;font-size:.95rem}.grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;max-width:1100px;margin:0 auto;display:grid}.card{background:#1a1a1a;border:1px solid #ffffff12;border-radius:16px;padding:1.4rem 1.6rem 1.6rem;transition:transform .2s,box-shadow .2s;animation:.4s both fadeSlide}.card:hover{transform:translateY(-4px);box-shadow:0 8px 28px #00000080}@keyframes fadeSlide{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.card-header{align-items:center;gap:.55rem;margin-bottom:1rem;display:flex}.flag{font-size:1.5rem;line-height:1}.country{flex:1;font-size:1.05rem;font-weight:600}.badge{text-transform:uppercase;letter-spacing:.07em;border-radius:999px;padding:.2rem .55rem;font-size:.7rem;font-weight:600}.badge.morning{color:#7a5900;background:#fff3cd}.badge.afternoon{color:#7a3500;background:#ffe0b2}.badge.evening{color:#7a0030;background:#fce4ec}.badge.night{color:#9fa8da;background:#1e1e3a;border:1px solid #3f51b5}.clock{align-items:baseline;gap:.4rem;margin-bottom:.55rem;display:flex}.digits{font-variant-numeric:tabular-nums;letter-spacing:.04em;font-family:Courier New,Lucida Console,monospace;font-size:2.6rem;font-weight:700}.ampm{opacity:.65;font-size:1rem;font-weight:600}.date{color:#aaa;letter-spacing:.02em;font-size:.82rem}.card.morning{border-left:4px solid #fbbf24}.card.afternoon{border-left:4px solid #f97316}.card.evening{border-left:4px solid #ec4899}.card.night{border-left:4px solid #6366f1}.card.morning .digits{color:#fde68a}.card.afternoon .digits{color:#fdba74}.card.evening .digits{color:#f9a8d4}.card.night .digits{color:#a5b4fc}@media (width<=480px){.digits{font-size:2rem}.site-header h1{font-size:1.6rem}}