:root{--bg-color:#0d1117;--card-bg:#161b22;--border-color:#30363d;--text-primary:#c9d1d9;--text-secondary:#8b949e;--accent-blue:#58a6ff;--accent-yellow:#e3b341;--font-body:'Inter', sans-serif;--font-mono:'Roboto Mono', monospace}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background-color:var(--bg-color);color:var(--text-primary);font-family:var(--font-body);line-height:1.6;padding:1.5rem}.container{width:100%;max-width:1400px;margin:0 auto}.site-header{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:2rem}.logo a{font-size:clamp(1.5rem, 4vw, 2rem);font-weight:700;color:var(--text-primary);text-decoration:none;display:flex;align-items:center;gap:.75rem;transition:color 0.3s ease}.logo a:hover{color:var(--accent-blue)}.logo i{color:var(--accent-yellow)}nav{margin-top:1rem}nav ul{display:flex;justify-content:center;gap:1.5rem;list-style:none;flex-wrap:wrap}nav a{text-decoration:none;color:var(--text-secondary);font-weight:500;padding:.3rem 0;position:relative;transition:color 0.3s ease}nav a::after{content:'';position:absolute;bottom:0;left:0;width:0;height:2px;background-color:var(--accent-yellow);transition:width 0.3s ease}nav a:hover,nav a.active{color:var(--text-primary)}nav a:hover::after,nav a.active::after{width:100%}.page-header{text-align:center;margin-bottom:2.5rem}.page-header h1{font-size:clamp(2.2rem, 6vw, 3.5rem);font-weight:700;color:#fff;margin-bottom:.5rem}.page-header p{font-size:1.1rem;color:var(--text-secondary);max-width:600px;margin:0 auto}.controls-container{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2.5rem;padding:1rem;background-color:rgb(22 27 34 / .5);border:1px solid var(--border-color);border-radius:12px}#search-bar{flex-grow:1;min-width:250px;padding:.8rem 1.2rem;font-size:1rem;border-radius:8px;border:1px solid var(--border-color);background-color:var(--bg-color);color:var(--text-primary);transition:all 0.3s ease;outline:none}#search-bar:focus{border-color:var(--accent-blue);box-shadow:0 0 0 3px rgb(88 166 255 / .3)}.sort-controls{display:flex;gap:.5rem}.sort-btn{padding:.7rem 1rem;font-size:.9rem;font-weight:500;border:1px solid var(--border-color);background-color:var(--card-bg);color:var(--text-secondary);border-radius:8px;cursor:pointer;transition:all 0.3s ease}.sort-btn:hover{background-color:#21262d;color:var(--text-primary)}.sort-btn.active{color:#fff;background-color:var(--accent-blue);border-color:var(--accent-blue)}#clocks-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}#no-results{text-align:center;grid-column:1 / -1;padding:3rem;font-size:1.2rem;color:var(--text-secondary);display:none}.clock-card{background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;transition:transform 0.3s ease,box-shadow 0.3s ease,border-color 0.3s ease}.clock-card:hover{transform:translateY(-5px);border-color:var(--accent-blue);box-shadow:0 8px 24px rgb(13 17 23 / .6)}.card-header{font-weight:500;font-size:1.4rem;color:var(--text-primary)}.card-body .current-time{font-family:var(--font-mono);font-size:2.5rem;font-weight:700;color:#fff;letter-spacing:1px}.card-footer{margin-top:auto;padding-top:1rem;border-top:1px solid var(--border-color);display:flex;justify-content:space-between;align-items:center;font-size:.9rem;color:var(--text-secondary)}.current-date,.utc-offset{display:flex;align-items:center;gap:.5rem}.utc-offset{font-family:var(--font-mono);font-weight:500}.highlighted-country{border-color:var(--accent-yellow);position:relative;overflow:hidden}.highlighted-country::before{content:'HEM';position:absolute;top:10px;right:-25px;background-color:var(--accent-yellow);color:#000;padding:2px 30px;font-size:.7rem;font-weight:700;transform:rotate(45deg)}.highlighted-country:hover{border-color:var(--accent-yellow)}footer{text-align:center;margin-top:4rem;padding-top:2rem;border-top:1px solid var(--border-color);color:var(--text-secondary)}@media (max-width:768px){body{padding:1rem}.controls-container{flex-direction:column;align-items:stretch}#clocks-container{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}}@media (max-width:480px){#clocks-container{grid-template-columns:1fr}nav ul{gap:1rem}}