*{margin:0;padding:0;box-sizing:border-box}
body{background:#0b0f16;color:#d8e4ff;font-family:Segoe UI,Arial,sans-serif}
.topbar{min-height:235px;display:flex;justify-content:space-between;align-items:flex-start;padding:20px 35px 25px;background:linear-gradient(#1d2f47,#111827);border-bottom:2px solid #3c6ea8;box-shadow:0 0 25px #000}
.topbar h1{font-size:34px;color:#8fc8ff;letter-spacing:2px;margin-top:10px}
.clock-wrapper{display:flex;justify-content:center;align-items:center;position:relative;margin-top:28px;margin-right:15px}
.clock-wrapper:before{content:"";position:absolute;top:-23px;left:50%;width:25px;height:25px;transform:translateX(-50%);border:5px solid #bfc4ca;border-radius:50%;background:#1a2432;box-shadow:inset 0 0 6px #ffffff44,0 0 10px #4aa3ff77}
.clock{width:190px;height:190px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#686868,#1b1b1b 58%,#000);border:8px solid #bfc4ca;box-shadow:inset 0 0 25px #ffffff22,inset 0 0 45px #00000088,0 0 25px #4aa3ff55,0 0 45px #0b60ff33;position:relative}
.dial{width:100%;height:100%;position:relative;border-radius:50%}
.dial span{position:absolute;color:#f0f4ff;font-size:16px;font-weight:bold;font-family:Georgia,"Times New Roman",serif;text-shadow:0 0 6px #69b4ff}
.n12{top:8px;left:50%;transform:translateX(-50%)}.n1{top:22px;right:42px}.n2{top:48px;right:18px}.n3{top:50%;right:8px;transform:translateY(-50%)}.n4{bottom:48px;right:18px}.n5{bottom:22px;right:42px}.n6{bottom:8px;left:50%;transform:translateX(-50%)}.n7{bottom:22px;left:42px}.n8{bottom:48px;left:18px}.n9{left:8px;top:50%;transform:translateY(-50%)}.n10{top:48px;left:18px}.n11{top:22px;left:42px}
.hand{position:absolute;left:50%;bottom:50%;transform-origin:bottom center;border-radius:20px;z-index:3}.hour{width:6px;height:48px;background:#fff}.minute{width:4px;height:68px;background:#88d6ff}.second{width:2px;height:82px;background:#ff4040}.center-dot{position:absolute;width:14px;height:14px;background:#d9d9d9;border-radius:50%;left:50%;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 10px white;z-index:4}
.dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;padding:30px 20px 20px}
.card{background:linear-gradient(#18283a,#111820);border:1px solid #2d5f8b;border-radius:12px;padding:18px;box-shadow:0 0 12px #000}.card h2{margin-bottom:14px;color:#7dc5ff;border-bottom:1px solid #325c8a;padding-bottom:8px}.card div{padding:5px 0;font-size:15px}hr{margin:12px 0;border:0;border-top:1px solid #35597e}
#vcore,#3v3,#5v,#12v{color:#ff6767;font-weight:bold}
button{width:120px;padding:10px;margin:8px 4px;border:none;border-radius:8px;font-size:15px;font-weight:bold;cursor:pointer;transition:.25s}#startBtn{background:#0c8c41;color:white}#startBtn:hover{background:#18b758}#stopBtn{background:#b11d1d;color:white}#stopBtn:hover{background:#e33434}button:disabled{background:#59616c!important;color:#bfc5cc!important;cursor:not-allowed;opacity:.72}

.title-area{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.logout-button{width:auto;padding:8px 14px;margin:0;background:#24384f;color:#d8e4ff;border:1px solid #3c6ea8}
.login-page{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at 50% 20%,#1d3552,#0b0f16 55%,#05070b)}
.login-shell{width:min(92vw,430px)}
.login-card{background:linear-gradient(#18283a,#111820);border:1px solid #3c6ea8;border-radius:16px;padding:32px;box-shadow:0 0 35px #000,0 0 30px #176bc344}
.login-card h1{color:#8fc8ff;letter-spacing:1px;margin-bottom:8px}
.login-card p{margin-bottom:24px;color:#aebed3}
.login-form{display:grid;gap:10px}
.login-form label{font-size:14px;color:#9fc8ee}
.login-form input{width:100%;padding:12px;border-radius:8px;border:1px solid #35597e;background:#0b121c;color:#eef6ff;outline:none}
.login-form input:focus{border-color:#69b4ff;box-shadow:0 0 10px #4aa3ff55}
.login-button{width:100%;margin:14px 0 0;background:#0c6fa8;color:white}
.login-error{padding:10px;margin-bottom:16px;border:1px solid #a94a4a;background:#4a1717;color:#ffd3d3;border-radius:8px}

.electricity-card{text-align:center}
.electricity-price{font-size:36px;font-weight:800;letter-spacing:1px;color:#d8ecff;text-shadow:0 0 18px #4aa3ff66;margin:8px 0}
.electricity-period{color:#9fb8d4;font-size:14px;margin-bottom:12px}
.electricity-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:10px 0}
.electricity-grid div{background:#0b121c;border:1px solid #294765;border-radius:8px;padding:8px 4px;font-size:13px}
.electricity-level{margin-top:10px;padding:9px;border-radius:8px;font-weight:700}
.electricity-negative{background:#321b49}.electricity-cheap{background:#123c28}
.electricity-normal{background:#163754}.electricity-expensive{background:#563515}
.electricity-very_expensive{background:#561b1b}.electricity-unknown{background:#343434}

.electricity-chart{height:110px;display:flex;align-items:flex-end;gap:1px;margin:14px 0 8px;padding:6px 4px 20px;border:1px solid #294765;border-radius:8px;background:#0b121c;overflow:hidden}
.electricity-bar-column{flex:1;min-width:2px;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;position:relative}
.electricity-bar-area{height:78px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.electricity-bar{width:75%;min-width:2px;background:#2f86c9;border-radius:2px 2px 0 0}
.electricity-bar-current{background:#f3f6fa;box-shadow:0 0 8px #fff}
.electricity-bar-negative{background:#9a63c7}
.electricity-bar-label{position:absolute;bottom:-17px;font-size:8px;color:#8ea8c2;white-space:nowrap;transform:rotate(-45deg)}
.broadcast-log-card{grid-column:1/-1}
.broadcast-log{height:210px;overflow-y:auto;background:#070d14;border:1px solid #294765;border-radius:8px;padding:8px;font-family:monospace;font-size:12px;line-height:1.45;text-align:left}
.broadcast-log-line{padding:2px 4px;border-bottom:1px solid #142536;white-space:pre-wrap;overflow-wrap:anywhere}
.broadcast-log-error{color:#ff9b9b}.broadcast-log-ok{color:#9ee6bd}
.electricity-chart{overflow-x:auto;overflow-y:hidden;justify-content:flex-start}
.electricity-bar-column{flex:0 0 4px;min-width:4px}
.electricity-tomorrow-start{border-left:2px solid #f2d36b;margin-left:5px;padding-left:5px}
.electricity-tomorrow-label{position:absolute;top:0;left:4px;font-size:8px;font-weight:800;color:#f2d36b;white-space:nowrap;z-index:3}
.news-watch-card{min-height:260px}.news-watch{height:100%}.news-link{display:block;color:inherit;text-decoration:none}
.news-image-wrap{height:150px;border:1px solid #294765;border-radius:8px;overflow:hidden;background:#070d14;display:flex;align-items:center;justify-content:center}
.news-image{width:100%;height:100%;object-fit:cover}.news-no-image::after{content:"IS";font-size:48px;font-weight:900;color:#405a73}
.news-copy{padding:12px 4px 4px}.news-title{font-size:18px;font-weight:800;line-height:1.25;color:#e8f4ff}
.news-published{margin-top:8px;font-size:11px;color:#8ea8c2}.news-dots{display:flex;gap:5px;justify-content:center;margin-top:10px}
.news-dot{width:6px;height:6px;border-radius:50%;background:#405a73}.news-dot-active{background:#e8f4ff;box-shadow:0 0 7px #fff}
@media(max-width:700px){.news-image-wrap{height:130px}.news-title{font-size:16px}}