*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#eaf2f7;color:#183044}
header{background:#174f84;color:#fff;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px}h1{margin:0;font-size:27px}header p{margin:3px 0 0}
button,select,input{font-size:15px}button{background:#1976b9;color:#fff;border:0;border-radius:8px;padding:9px 12px;font-weight:bold;cursor:pointer}.secondary{background:#687b87}
main{padding:12px}.panel,.levelbar{background:#fff;border:1px solid #c4d3dd;border-radius:12px;padding:12px}.levelbar{display:flex;align-items:center;gap:15px;flex-wrap:wrap;margin-bottom:12px}.levelbar>div{flex:1;min-width:250px}#levelName{display:block;color:#174f84;font-size:18px}#levelGoal{font-size:13px}
.layout{display:grid;grid-template-columns:1.05fr 1fr 1.1fr;gap:12px}h2{margin:0 0 9px;color:#174f84;font-size:20px}
.sky{height:310px;border-radius:10px;overflow:hidden;position:relative;background:linear-gradient(#67b8ed,#d8effd)}.sun{position:absolute;right:25px;top:18px;font-size:60px}.horizon{position:absolute;left:0;right:0;bottom:0;height:95px;background:#70a957;border-top:8px solid #568c43}.windsock{position:absolute;left:18%;top:-48px;font-size:55px;transform-origin:left center}.gauge{position:relative;display:inline-block;font-size:42px;margin:20px 12px}.cloud{position:absolute;font-size:70px;filter:drop-shadow(0 2px 2px #5555)}.clock{text-align:center;padding:9px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.inst{min-height:105px;background:#f5f9fc;color:#17364b;border:1px solid #b9cad5;display:flex;flex-direction:column;align-items:center;justify-content:center}.inst:hover{background:#e8f4fb}.inst span{font-size:30px}.inst b{display:block;margin-top:5px;color:#174f84;min-height:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-items:center;margin:7px 0}.row label{font-weight:bold}.row input,.row select{width:100%;padding:7px;border:1px solid #aabac5;border-radius:6px;background:#fff}.actions{display:flex;gap:7px;margin-top:10px}.ok{background:#e7f6e7;border:1px solid #70a870;padding:9px;border-radius:8px;margin-top:9px;color:#245d27}.bad{background:#fff0ee;border:1px solid #c98279;padding:9px;border-radius:8px;margin-top:9px;color:#8a3028}
.history{margin-top:12px}.historyHead{display:flex;justify-content:space-between;align-items:center}.history table{width:100%;border-collapse:collapse;font-size:13px}.history th,.history td{border:1px solid #ccd7de;padding:6px;text-align:center}.history th{background:#eef5f9}.tablewrap{overflow:auto}.forecast{margin-top:10px;padding:10px;border-radius:8px;background:#fff7d7;border:1px solid #d5b84d}
.modal{position:fixed;inset:0;background:#0008;display:flex;align-items:center;justify-content:center;padding:20px;z-index:10}.hidden{display:none}.card{position:relative;background:#fff;border-radius:12px;max-width:650px;width:100%;padding:22px;max-height:85vh;overflow:auto}.card>#closeModal{position:absolute;right:7px;top:7px;background:#657985;padding:4px 9px;font-size:20px}
@media(max-width:1000px){.layout{grid-template-columns:1fr 1fr}.log{grid-column:1/-1}}@media(max-width:650px){.layout{display:block}.panel{margin-bottom:10px}.sky{height:260px}.grid{grid-template-columns:1fr 1fr}.row{grid-template-columns:1fr}.history table{min-width:800px}}