:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#f4f7fb;background-color:#0f172a}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at top right,#1f3f75,#0f172a 45%);min-height:100vh}.app-shell{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{padding:20px;border-right:1px solid #243a63;background:#0c172cd9}.sidebar h1{margin:0;font-size:1.3rem}.subtitle{margin:6px 0 18px;color:#9fb0cd;font-size:.85rem}.nav-link{display:block;text-decoration:none;color:#d1ddf1;padding:10px 12px;border-radius:8px;margin-bottom:6px}.nav-link:hover,.nav-link.active{background:#24477a}.content{padding:16px 20px 24px}.topbar{display:flex;justify-content:center;align-items:center;margin-bottom:16px}.topbar-title{color:#d7e6ff;font-size:1.9rem;font-weight:800;letter-spacing:.08em}h2{margin:0 0 14px}.kpi-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:12px}.card,.table-card{background:#16233dd9;border:1px solid #304f7f;border-radius:10px;padding:14px}.card h3{margin:0;font-size:.88rem;color:#aabddd}.card p{margin:10px 0 0;font-size:1.4rem;font-weight:700}.actions-row{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}input,select,button{background:#0e1d37;border:1px solid #335487;color:#f4f7fb;border-radius:8px;padding:9px 10px}button{cursor:pointer;background:#2a69c7;border:none}button.secondary{background:#405d8d}table{width:100%;border-collapse:collapse}th,td{text-align:left;padding:10px 8px;border-bottom:1px solid #2f4972;font-size:.92rem}.login-page{min-height:100vh;display:grid;place-items:center;padding:16px}.login-card{width:min(430px,100%);background:#14223ce6;border:1px solid #2c4e80;border-radius:12px;padding:22px;display:grid;gap:10px}@media (max-width: 900px){.app-shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid #243a63}}.io-pill{display:inline-block;min-width:48px;text-align:center;padding:2px 8px;border-radius:999px;font-size:.78rem;font-weight:700}.io-pill.on{background:#1faa5d;color:#eafff3}.io-pill.off{background:#7c2f45;color:#ffeaf0}.io-status{display:inline-flex;align-items:center;gap:8px}.io-lamp{width:12px;height:12px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.4)}.io-lamp.on{background:#1fd16f;box-shadow:0 0 8px #1fd16f}.io-lamp.off{background:#a43a54;box-shadow:0 0 6px #a43a54}.trend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}.trend-item{background:#0c16278c;border:1px solid #2f4972;border-radius:8px;padding:10px;display:grid;gap:6px}.trend-item strong{font-size:1.1rem}.trend-bar{width:100%;height:10px;border-radius:999px;background:#223b66;overflow:hidden}.trend-bar span{display:block;height:100%;background:linear-gradient(90deg,#13b5f8,#45d39d)}.chart-card{background:#141927;border:1px solid #2a3042;border-radius:14px;padding:18px 18px 12px;margin-bottom:12px}.chart-card h3{margin:0 0 12px;color:#9aa8c4;text-transform:uppercase;letter-spacing:.22em;font-size:.92rem}.shift-chart-shell{display:grid;grid-template-columns:34px 1fr;gap:10px;min-height:270px}.shift-axis{height:240px;display:grid;grid-template-rows:repeat(5,1fr);align-items:end;color:#8d99b6;font-size:.8rem}.shift-axis span{transform:translateY(50%)}.shift-plot{position:relative;height:240px;border-bottom:1px solid rgba(136,151,184,.25)}.shift-hline{height:20%;border-top:1px dashed rgba(124,140,175,.22)}.shift-bars-wrap{position:absolute;left:6px;right:6px;bottom:-26px;height:240px;display:grid;grid-template-columns:repeat(6,1fr);align-items:end}.shift-col{display:grid;justify-items:center;gap:6px}.shift-col small{color:#8f9ec1;font-size:.8rem}.shift-bar-stack{height:220px;display:flex;align-items:end;gap:2px}.shift-bar{border-radius:5px;display:inline-block}.shift-bar.good{width:10px;background:#20c997}.shift-bar.bad{width:6px;background:#ff4d73}@media (max-width: 900px){.shift-bar.good{width:10px}.shift-bar.bad{width:5px}}.validation-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch}.validation-two-col .table-card{height:100%}@media (max-width: 1100px){.validation-two-col{grid-template-columns:1fr}}.trend-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:12px}@media (max-width: 1200px){.trend-two-col{grid-template-columns:1fr}}.shift-report-page{display:grid;gap:18px}.shift-table-card{padding:18px;overflow-x:auto}.shift-table-card table{border-collapse:separate;border-spacing:0;min-width:1200px}.shift-table-card th,.shift-table-card td{padding:16px 14px}.shift-table-card thead th{padding-top:14px;padding-bottom:18px}.dashboard-page{display:grid;gap:22px}.dashboard-page .kpi-grid,.dashboard-page .table-card,.dashboard-page .trend-two-col,.dashboard-page .chart-card{margin-bottom:0}.dashboard-page .kpi-grid,.dashboard-page .trend-two-col,.dashboard-page .trend-grid{gap:20px}.program-top-row{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:10px}.program-top-row h2{margin:0}.program-record-row{display:grid;grid-template-columns:auto minmax(160px,220px) auto 110px auto 130px;gap:8px;align-items:center}.program-grid-two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.program-field-row,.program-no-row{display:grid;grid-template-columns:minmax(120px,1fr) 255px;gap:10px;align-items:center;margin-bottom:10px}.program-label{color:#9fd1ff;font-weight:700}.program-value{display:inline-block;text-align:center;background:#e8edf7;border:1px solid #57ccf5;border-radius:6px;padding:8px 10px;color:#1c2f4d;font-weight:800}.program-number-input{width:255px;min-width:255px;max-width:255px;height:42px;background:#0b2248;border:1px solid #2d63ab;border-radius:10px;color:#f4f7fb;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;font-size:30px;font-weight:500;line-height:42px;padding:0 14px}.program-number-input:focus{outline:none;border-color:#56a5ff;box-shadow:0 0 0 1px #56a5ff66}@media (max-width: 1100px){.program-top-row{flex-direction:column;align-items:stretch}.program-record-row{grid-template-columns:auto 1fr}.program-grid-two-col{grid-template-columns:1fr}}.program-load-bottom{margin-top:14px;display:flex;justify-content:flex-start;gap:10px}.program-load-btn{min-width:140px}.alarm-notification-card{margin-bottom:14px}.alarm-notification-card h3{margin:0 0 10px}.alarm-empty{margin:0;color:#9fb0cd}.alarm-notify-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:10px}.alarm-notify-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid #355784;border-radius:8px;background:#0c162799}.alarm-notify-item strong{display:inline-block;margin-bottom:4px}.alarm-notify-item p{margin:0;color:#d8e4fa}.dashboard-header-row{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px}.dashboard-header-row h2{margin:0}.alarm-icon-btn{position:relative;width:42px;height:42px;padding:0;border-radius:10px;border:1px solid #3e679b;background:#16335f;display:inline-flex;align-items:center;justify-content:center}.alarm-icon-btn svg{width:22px;height:22px;fill:#dce9ff}.alarm-icon-badge{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;border-radius:999px;background:#ff4d73;color:#fff;font-size:.72rem;line-height:18px;text-align:center;padding:0 4px;font-weight:700}.sprocket-showcase{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:center;background:linear-gradient(120deg,#0d162bf2,#1b1108e6)}.sprocket-copy small{color:#ff9a2b;letter-spacing:.18em;font-size:.75rem;font-weight:700}.sprocket-copy h3{margin:8px 0;font-size:1.45rem;color:#ffe6cc}.sprocket-copy p{margin:0;color:#b8c7de;max-width:440px}.sprocket-visual{position:relative;min-height:420px;border:1px solid rgba(255,122,26,.35);border-radius:14px;overflow:hidden;background:radial-gradient(circle at 75% 48%,#ff620052,#0a101eeb 58%),linear-gradient(160deg,#0a1226,#0d1a34)}.sprocket-bg-glow{position:absolute;width:360px;height:360px;right:40px;top:34px;border-radius:50%;background:radial-gradient(circle,rgba(255,140,35,.32),rgba(255,76,0,.08) 55%,transparent 72%);filter:blur(2px)}.sprocket-chain{position:absolute;width:44px;height:290px;left:56%;top:-26px;transform:rotate(18deg);border-radius:22px;background:repeating-linear-gradient(to bottom,#111421f2 0,#111421f2 16px,#3a4258f2 16px,#3a4258f2 24px,#0f131ff2 24px,#0f131ff2 40px);box-shadow:inset 0 0 0 2px #5f698259,0 0 20px #00000059}.sprocket-gear{position:absolute;width:300px;height:300px;right:44px;top:56px;border-radius:50%;background:repeating-conic-gradient(from 0deg,#ff8c1c,#ff8c1c 12deg,#ff5800 12deg,#ff5800 24deg);filter:drop-shadow(0 0 24px rgba(255,98,0,.45));animation:sprocketSpin 22s linear infinite}.sprocket-gear:before{content:"";position:absolute;top:28px;right:28px;bottom:28px;left:28px;border-radius:50%;background:radial-gradient(circle,#ffd06d,#ffa12f,#ff4f00 84%)}.sprocket-gear:after{content:"";position:absolute;top:104px;right:104px;bottom:104px;left:104px;border-radius:50%;background:#0d1a34;box-shadow:0 0 0 14px #ff8c238c,inset 0 0 24px #ff7f1f73}@keyframes sprocketSpin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.sprocket-visual-overlay{position:absolute;left:18px;right:18px;bottom:16px;z-index:2}.sprocket-visual-overlay h4{margin:0;font-size:1.7rem;color:#fef6ea}.sprocket-visual-overlay p{margin:4px 0 0;color:#a8c0de}@media (max-width: 1050px){.sprocket-showcase{grid-template-columns:1fr}}