:root{--bg:#c9ddf2;--panel:#fff;--panel-border:#e3edf8;--header-bg:#eef4fb;--ink:#17222e;--label:#333f4d;--value:#1668b8;--running:#12a812;--stopped:#d43a3a;--line:#8ab6e2;--btn-bg:#e8eef6;--btn-border:#c9d8ea;--title:#123a63}*{box-sizing:border-box}html,body{background:var(--bg);color:var(--ink);margin:0;padding:0;font-family:Segoe UI,Leelawadee UI,Tahoma,system-ui,-apple-system,sans-serif}.topbar{background:var(--header-bg);align-items:center;gap:24px;padding:14px 28px;display:flex}.brand{letter-spacing:1px;color:#101820;white-space:nowrap;font-size:30px;font-weight:800}.brand b{font-weight:900}.topbar-title{text-align:left;color:var(--title);flex:1;padding-left:6vw;font-size:24px;font-weight:700}.topbar-clock{color:var(--title);white-space:nowrap;align-items:center;gap:28px;font-size:20px;font-weight:600;display:flex}.topbar-clock .cal{font-size:24px}.page{padding:10px 16px 16px}.diagram-panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:16px;padding:8px;box-shadow:0 2px 8px #1e467814}.diagram-panel svg{width:100%;height:auto;display:block}.modulebar{align-items:stretch;gap:14px;margin-top:14px;display:flex}.mbtn{background:var(--btn-bg);border:1px solid var(--btn-border);text-align:center;color:#23394f;cursor:pointer;border-radius:12px;flex:1;padding:14px 8px;font-size:20px;font-weight:700;line-height:1.25;text-decoration:none;transition:background .15s}.mbtn:hover{background:#dbe7f4}.mbtn.active{background:#cfe0f2;border-color:#9dbcdd}.powered{color:#2c68ad;text-align:center;flex-direction:column;justify-content:center;min-width:110px;font-size:15px;font-weight:700;line-height:1.2;display:flex}.login-wrap{justify-content:center;align-items:center;min-height:100vh;display:flex}.login-card{background:var(--panel);border-radius:16px;width:min(400px,92vw);padding:36px 34px 30px;box-shadow:0 8px 30px #143c6e2e}.login-card h1{color:var(--title);margin:0 0 4px;font-size:26px}.login-card .sub{color:#5b6b7c;margin:0 0 24px;font-size:14px}.login-card label{color:#34465a;margin:14px 0 6px;font-size:14px;font-weight:600;display:block}.login-card input{border:1px solid #c3d3e4;border-radius:8px;outline:none;width:100%;padding:11px 12px;font-size:16px}.login-card input:focus{border-color:#2f7fd0}.login-card button{color:#fff;cursor:pointer;background:#1668b8;border:none;border-radius:8px;width:100%;margin-top:22px;padding:12px;font-size:17px;font-weight:700}.login-card button:disabled{opacity:.6}.login-err{color:#c22;text-align:center;margin-top:14px;font-size:14px}.detail-wrap{padding:18px 24px}.detail-card{background:var(--panel);border-radius:16px;max-width:1100px;margin:0 auto;padding:24px 28px;box-shadow:0 2px 8px #1e467814}.detail-head{flex-wrap:wrap;align-items:baseline;gap:18px;display:flex}.detail-head h1{color:var(--title);margin:0;font-size:28px}.status-pill{color:#fff;background:var(--running);text-transform:capitalize;border-radius:999px;padding:4px 14px;font-size:15px;font-weight:700}.status-pill.stopped{background:var(--stopped)}.back-link{color:#1668b8;margin-left:auto;font-weight:600;text-decoration:none}.stat-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-top:22px;display:grid}.stat-box{background:#f2f7fc;border:1px solid #dbe7f3;border-radius:12px;padding:16px 18px}.stat-box h3{color:#46586c;margin:0 0 10px;font-size:15px}.stat-box .row{justify-content:space-between;padding:2px 0;font-size:18px;display:flex}.stat-box .row b{color:var(--value)}.chart-box{margin-top:24px}.chart-box h3{color:#46586c;margin-bottom:8px;font-size:16px}.report-table{border-collapse:collapse;width:100%;margin-top:18px;font-size:14px}.report-table th,.report-table td{text-align:right;border:1px solid #d7e3ef;padding:7px 10px}.report-table th{color:#2c4159;background:#eef4fb}.report-table td:first-child,.report-table th:first-child{text-align:left}.toolbar{gap:12px;margin-top:18px;display:flex}.toolbar button,.toolbar a{color:#23394f;cursor:pointer;background:#e8eef6;border:1px solid #c9d8ea;border-radius:8px;padding:9px 18px;font-size:15px;font-weight:700;text-decoration:none}@media (max-width:900px){.topbar{flex-wrap:wrap;gap:8px}.topbar-title{padding-left:0;font-size:19px}.modulebar{flex-wrap:wrap}.mbtn{min-width:130px}}