*{box-sizing:border-box;}
body{margin:0;padding:0;font-family:'Open Sans',Arial,sans-serif;background:#f7f9fc;color:#333;display:flex;min-height:100vh;overflow:hidden;}#container{width:100%;height:100vh;display:flex;}#map-container{width:60%;height:100%;overflow:hidden;border-right:1px solid#ddd;}#map{width:100%;height:100%;}#sidebar{width:40%;background:linear-gradient(135deg,#0d57a5,#1e90ff);color:white;padding:20px;display:flex;flex-direction:column;overflow:hidden;}#header{font-size:26px;font-weight:bold;text-align:center;margin-bottom:15px;text-shadow:0 1px 4px rgba(0,0,0,0.3);}#info{flex:1;background:white;padding:20px;border-radius:14px;box-shadow:0 6px 18px rgba(0,0,0,0.1);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.7;border:1px solid#eee;overflow:hidden;}.data-row{display:flex;justify-content:space-between;width:100%;margin-bottom:16px;}.left-side{width:50%;text-align:left;padding-right:8px;}.right-side{width:50%;text-align:right;padding-left:8px;}.temp{font-size:46px;font-weight:bold;color:#ff6b35;margin:0;}.condition{font-size:19px;color:#555;margin:5px 0;}.time{font-size:22px;font-weight:bold;color:#2c3e50;margin:10px 0;}.address{font-size:14px;color:#777;margin:4px 0;font-weight:bold;}.city{font-size:20px;font-weight:bold;color:#ff6b35;margin:4px 0;}.country{font-size:18px;font-weight:bold;color:#1e90ff;margin:4px 0;}.flag-img{width:48px;height:32px;margin:10px auto 10px 0;border:1px solid#ddd;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,0.1);}.cp-large{font-size:24px;font-weight:bold;color:#ff6b35;}.cp-label{color:#000;}.extra{display:flex;justify-content:space-around;margin-top:8px;padding:8px 0;border-top:1px solid#eee;font-size:14px;color:#555;flex-wrap:wrap;width:100%;}.extra div{text-align:center;min-width:55px;margin:3px 0;}.extra div b{display:block;font-size:15px;color:#1e90ff;}.forecast{display:flex;justify-content:space-around;margin-top:12px;padding:8px 0;border-top:1px dashed#ccc;font-size:15px;color:#333;font-weight:bold;width:100%;}.forecast-day{text-align:center;min-width:55px;margin:6px 0;}.forecast-day.icon{font-size:24px;line-height:1;display:block;margin-bottom:2px;}.forecast-day b{color:#ff6b35;font-size:17px;}.forecast-day small{color:#777;font-size:13px;}.buttons-container{display:flex;gap:10px;margin:15px 0;}.btn{flex:1;background:white;color:#1e90ff;border:none;padding:14px;font-size:16px;font-weight:bold;border-radius:12px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 4px 10px rgba(0,0,0,0.1);transition:all 0.3s ease;}.btn:hover{background:#e6f7ff;transform:translateY(-2px);}
body.dark-mode{background:#121212;color:#e0e0e0;}
body.dark-mode#sidebar{background:linear-gradient(135deg,#0d3b66,#052140);}
body.dark-mode#info{background:#1e1e1e;color:#e0e0e0;border-color:#444;}
body.dark-mode.left-side,body.dark-mode.right-side,body.dark-mode.extra{color:#bbb;}
body.dark-mode.temp{color:#ffa726;}
body.dark-mode.time{color:#80cbc4;}
body.dark-mode.city{color:#ffb74d;}
body.dark-mode.cp-large{color:#ffa726;}
body.dark-mode.cp-label{color:#fff;}
body.dark-mode.forecast-day b{color:#ffb74d;}
body.dark-mode.description{color:#e0e0e0!important;}@media(min-width:1025px){#container{flex-direction:row;}#map-container{width:60%;height:100%;border-right:1px solid#ddd;}#sidebar{width:40%;}#info{padding:25px;}.temp{font-size:52px;}.condition{font-size:21px;}.time{font-size:26px;}.city{font-size:22px;}.extra{font-size:15px;}.extra div b{font-size:17px;}.forecast{font-size:17px;}.forecast-day b{font-size:20px;}.buttons-container{margin:18px 0;}.btn{font-size:18px;padding:16px;}}@media(min-width:768px)and(max-width:1024px){#container{flex-direction:column;}#map-container{width:100%;height:20vh;border-right:none;border-bottom:1px solid#ddd;}#map{width:100%;height:100%;}#sidebar{width:100%;height:80vh;padding:15px;}#info{padding:15px;}.data-row{flex-direction:row;}.left-side,.right-side{width:50%;text-align:left;padding-right:8px;}.right-side{text-align:right;padding-left:8px;}.temp{font-size:42px;}.condition{font-size:18px;}.time{font-size:20px;}.city{font-size:18px;}.extra{font-size:14px;}.forecast{font-size:15px;}.buttons-container{margin:12px 0;}.btn{padding:12px;font-size:15px;}}@media(max-width:767px){#container{flex-direction:column;}#map-container{display:none;}#sidebar{width:100%;height:100vh;padding:10px;}#header{font-size:18px;margin-bottom:6px;}.buttons-container{margin:6px 0;gap:5px;}.btn{padding:6px 4px;font-size:12px;}#info{flex:1;padding:20px;font-size:14px;}}