@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap');

:root {
    --day-bg: linear-gradient(135deg, #1fa2ff, #12d8fa, #a6ffcb);
    --night-bg: linear-gradient(135deg, #020024, #090979, #00d4ff);
    --primary-color: #ffcc00;
    --secondary-color: #7f00ff;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }

body {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-height:100vh;
    background: var(--day-bg);
    transition: background 1.5s ease-in-out;
    color:#f0f0f0;
    padding:20px;
}

.day-bg { background: var(--day-bg); color: #222; }
.night-bg { background: var(--night-bg); color: #f0f0f0; }

.container {
    text-align:center;
    max-width:450px;
    width:100%;
    padding:30px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

.title { font-size:2.8em; color: var(--primary-color); margin-bottom:5px; text-shadow:2px 2px 4px rgba(0,0,0,0.3); }
.tagline { font-size:1em; margin-bottom:25px; color:#ddd; }
.day-bg .tagline { color:#555; }

.search-box-container { display:flex; justify-content:center; margin:20px 0; }
.search-box { display:flex; border-radius:25px; overflow:hidden; box-shadow:0 4px 10px rgba(0,0,0,0.2); max-width:400px; width:100%; }
#cityInput { padding:12px 20px; border:none; flex-grow:1; font-size:1em; outline:none; background:rgba(255,255,255,0.95); color:#333; }
#searchBtn { padding:12px 20px; background:var(--primary-color); color:#333; border:none; font-weight:600; cursor:pointer; transition: background 0.3s; }
#searchBtn:hover { background:#ffaa00; }

.time-card { background: rgba(255,255,255,0.15); padding:25px; border-radius:15px; box-shadow: inset 0 0 15px rgba(255,255,255,0.3); transition:0.5s ease; margin-top:20px; }
.hidden { display:none; }
#locationName { font-size:2em; margin-bottom:10px; color: var(--primary-color); }
.main-time { font-size:3.8em; font-weight:700; margin-bottom:10px; letter-spacing:3px; color:#fff; }
.day-bg .main-time { color:#000; }
#timeZone, #dateInfo, #dayStatus { font-size:1em; margin-top:5px; color:#ccc; }
.day-bg #timeZone, .day-bg #dateInfo, .day-bg #dayStatus { color:#444; }

.watch-icon-container { display:flex; justify-content:center; margin-bottom:20px; padding-top:10px; }
.ai-watch-icon { width:80px; height:80px; background:var(--secondary-color); border-radius:50%; position:relative; box-shadow:0 0 20px rgba(127,0,255,0.8); }
.watch-face { width:60px; height:40px; background:#000; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border-radius:10px; }
.watch-eye { width:10px; height:10px; background:#00eaff; border-radius:50%; position:absolute; top:50%; transition:transform 0.1s linear; }
.watch-eye.left { left:20px; }
.watch-eye.right { left:50px; }

.api-info { margin-top:40px; padding:15px; background:rgba(0,0,0,0.5); border-radius:10px; max-width:600px; width:100%; text-align:left; font-size:0.85em; color:#ccc; }
.api-info h3 { color: var(--primary-color); margin-bottom:5px; }