body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;margin:0;padding:0;height:100vh;width:100vw}
.container{width:100%;height:100%;margin:0;background:#fff;display:flex;flex-direction:column}
.header{background:#2c3e50;color:#fff;padding:20px 24px;text-align:left}
.title{margin:0}
.controls{padding:18px 24px;background:#f8f9fa;border-bottom:1px solid #e9ecef}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:end}
.field{display:flex;flex-direction:column;gap:6px;min-width:240px;flex:1}
.flex2{flex:2}
.w280{max-width:280px}
.w260{min-width:260px}
.field label{font-weight:600;color:#2c3e50}
.field input{padding:10px;border:2px solid #e9ecef;border-radius:8px;font-size:16px;flex:1}
.btn{background:#2980b9;color:#fff;border:none;padding:10px 16px;border-radius:8px;font-size:15px;font-weight:600;cursor:pointer}
.content{flex:1;display:flex;min-height:0}
.map-wrap{flex:2}
#map{width:100%;height:100%;display:none;border-top:1px solid #e9ecef}
.info{flex:1;padding:18px;background:#f8f9fa;overflow:auto}
.card{background:#fff;border-radius:12px;padding:14px;margin-bottom:12px;box-shadow:0 4px 12px rgba(0,0,0,.05)}
.item{display:flex;justify-content:space-between;border-bottom:1px solid #ecf0f1;padding:6px 0}
.item:last-child{border-bottom:none}
.label{color:#7f8c8d;font-weight:600}
.val{color:#2c3e50;font-weight:500}
.moon-emoji{font-size:24px;line-height:24px}
.mode{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.mode label{font-weight:500;color:#2c3e50}
.input-group{display:flex;gap:8px;align-items:center}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border:2px solid #e9ecef;border-radius:8px;background:#fff;cursor:pointer}
.icon-btn:active{transform:scale(0.98)}
@media (max-width:768px){
  .row{flex-direction:column}
  .btn{width:100%}
  .field{min-width:auto;max-width:none;width:100%}
  .input-group{width:100%}
  .content{flex-direction:column}
  .map-wrap{height:50vh}
  .info{height:auto}
}