:root{--navy:#0d2039;--deep:#071a2f;--ink:#14243b;--muted:#72849b;--border:#e1e9f0;--teal:#098b90;--bg:#f3f7fb;--shadow:0 10px 32px rgba(19,46,82,.05)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font:14px/1.55 system-ui,-apple-system,'Noto Sans Thai','Sarabun',Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink)}button,input,select,textarea{font:inherit}button{cursor:pointer}a{text-decoration:none;color:#07828a}img{max-width:100%}h1,h2,h3,p{margin:0}h2{font-size:24px}h3{font-size:17px}.muted{color:var(--muted)}.mt{margin-top:22px!important}.inline{display:inline-flex;margin:0}.full{width:100%;justify-content:center}.small{font-size:12px!important}.button{display:inline-flex;gap:8px;align-items:center;justify-content:center;border:1px solid #dce5ed;border-radius:11px;background:white;color:#203348;font-weight:700;padding:10px 16px;min-height:40px;white-space:nowrap;transition:.15s}.button:hover{filter:brightness(.97)}.button.primary{background:var(--teal);border-color:var(--teal);color:white}.button.danger{background:#fff1f3;color:#c02a44;border-color:#ffdce1}.button.warn{background:#fff8e9;color:#95631d;border-color:#f4e2bd}.button.small{padding:6px 11px;min-height:32px}.button.outline{background:transparent;color:inherit}.button.ghost{background:#eaf7f9;color:#08767c;border-color:#ccebed}.button.darkbutton{background:#103b59;border-color:#257094;color:white}.message,.error-box{padding:13px 17px;border-radius:11px;background:#eafaf1;color:#1e7754;margin:0 0 16px;border:1px solid #bdebd3}.message.error,.error-box{background:#fff0f1;color:#b12e43;border-color:#ffccd4}
input,select,textarea{width:100%;display:block;border:1px solid #d8e2ec;border-radius:10px;padding:11px 13px;min-height:43px;background:#fff;color:#243951;outline-color:#21b4b9}textarea{resize:vertical;white-space:pre-wrap}input[type=radio],input[type=checkbox]{min-height:0;width:auto;display:inline;accent-color:var(--teal)}label{display:block;font-weight:700;color:#41546d;font-size:12px}label input,label select,label textarea{margin-top:7px;font-size:14px;font-weight:400}.login-body{min-height:100vh;background:radial-gradient(circle at 15% 17%,#194768,transparent 50%),#071829;display:grid;place-items:center;padding:20px}.login-wrap{display:grid;grid-template-columns:1fr 420px;width:min(1050px,100%);min-height:500px;border-radius:22px;overflow:hidden;background:#fff;box-shadow:0 30px 70px #020a1266}.login-art{padding:50px;color:white;background:linear-gradient(150deg,#092038,#13465d);display:flex;flex-direction:column;align-items:flex-start;justify-content:center}.login-art .logo{font-size:45px;background:#15a2a4;border-radius:20px;padding:10px 22px}.login-art h1{font-size:44px;margin-top:12px}.login-art .lg{font-size:19px;margin:0 0 25px}.login-art .feature{padding:13px 0;border-bottom:1px solid #ffffff25;width:100%}.login-panel{padding:50px 35px;display:flex;flex-direction:column;justify-content:center;gap:16px}.login-panel h2{font-size:27px}.login-panel form{display:grid;gap:17px}.login-panel .muted{margin-top:-12px}.login-panel .hint{font-size:12px;color:#788ba1}.divider-word{text-align:center;color:#8190a2}.login-panel .message{margin:0}
.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;flex:0 0 250px;background:#0e203a;color:#b5c9e0;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:27px 15px}.brand{display:flex;gap:11px;align-items:center;padding:0 10px 36px;color:white}.brand .logo{background:#1aa4a6;font-size:22px;width:45px;height:45px;border-radius:14px;display:grid;place-items:center}.brand b{display:block;font-size:21px}.brand small{font-size:10px;color:#9db4cb}.nav-label{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:#7c98ba;margin:6px 14px 15px}.nav-item{display:flex;gap:16px;align-items:center;padding:12px 16px;border-radius:12px;color:#abc3de;font-weight:700;font-size:14px;margin-bottom:7px}.nav-item:hover,.nav-item.active{background:#1b4863;color:white}.nav-item.active{box-shadow:inset 3px 0 #34d9d1}.sidebar-foot{margin-top:auto;background:#19304e;border-radius:13px;padding:15px}.sidebar-foot b,.sidebar-foot small{display:block}.sidebar-foot small{color:#98b2c8;font-size:12px}.workspace{min-width:0;flex:1}.topbar{height:80px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;padding:14px 28px;gap:10px}.topbar .crumb{font-size:12px;color:#7b8ca3}.topbar h1{font-size:24px;line-height:1.4}.top-actions{display:flex;align-items:center;gap:10px}.role-tag{padding:6px 12px;background:#e8f7f5;color:#0e837c;border:1px solid #bee5df;border-radius:999px;font-weight:750}.menu-toggle{display:none}.content{padding:27px 28px 60px;max-width:1600px;margin:auto}.page-title{display:flex;justify-content:space-between;gap:16px;align-items:center;margin:0 0 22px}.page-title p{color:var(--muted);margin-top:5px}.back{display:block;margin-bottom:8px}.actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.filterbar{display:flex;align-items:end;flex-wrap:wrap;gap:12px;background:white;border:1px solid var(--border);border-radius:15px;padding:16px;margin-bottom:17px}.filterbar label{flex:1;min-width:145px}.filterbar input{min-width:140px}.result-count{color:#687f93;font-size:13px;margin-bottom:12px}.panel{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}.panel-body{padding:22px}.panel-body>h3{margin-bottom:12px}.panel-body>p{margin-bottom:13px}.panel-body>label{margin:16px 0}.form-panel{max-width:840px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.panel-footer{padding:18px 22px;background:#fbfdff;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}.empty{padding:50px;background:#fff;border:1px dashed #cbd8e5;border-radius:14px;text-align:center;color:#8ca0b2}.machine-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.machine-card{display:block;border-radius:16px;overflow:hidden;background:white;border:1px solid var(--border);box-shadow:var(--shadow);color:inherit}.machine-card:hover{border-color:#48bcbf;transform:translateY(-2px)}.machine-photo{height:170px;background:#d7e9ee;position:relative;overflow:hidden}.machine-photo img{width:100%;height:100%;object-fit:cover}.machine-photo span{position:absolute;top:10px;left:10px;border-radius:7px;background:#ffffffed;padding:4px 7px;color:#36566c;font-size:11px;font-weight:700}.machine-info{padding:14px}.machine-info small{color:#788ba3}.machine-info h3{font-size:16px;margin:8px 0 14px;min-height:24px}.card-bottom,.flex-between{display:flex;justify-content:space-between;align-items:center;gap:8px}.card-bottom b{font-size:12px;color:var(--teal)}.status{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:750;padding:6px 10px;border-radius:99px;white-space:nowrap}.status i{width:7px;height:7px;border-radius:50%;background:currentColor}.status.normal{background:#daf9eb;color:#148a58}.status.abnormal{background:#ffe2e8;color:#cb2d47}.status.pending{background:#fff0cc;color:#b77b12}.two-col{display:grid;grid-template-columns:1.12fr 1fr;gap:17px;align-items:start}.machine-cover{width:100%;height:230px;object-fit:cover;background:#d9eaf0}.check-display,.history-item{display:flex;justify-content:space-between;align-items:center;gap:13px;padding:13px 0;border-bottom:1px solid #e9eef4}.check-display span:first-child{flex:1}.history-item b,.history-item small{display:block}.history-item small{color:#8395a7}.photo-tag{font-size:11px;color:#286d8a}.check-row{display:flex;justify-content:space-between;align-items:center;gap:13px;padding:15px 0;border-bottom:1px solid #e6edf4}.check-row b{max-width:65%}.radio-set{display:flex;gap:7px}.radio-set label{font-size:12px;display:flex;align-items:center;gap:6px;border:1px solid #dde6ee;border-radius:9px;padding:7px 10px;white-space:nowrap}.uploaded{margin:12px 0}.uploaded img{max-width:260px;max-height:230px;display:block;object-fit:contain;border:1px solid #ddd;border-radius:10px}.detail-panel{max-width:960px}.detail-head{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;background:#f6fafc;padding:22px}.detail-head>div{background:white;border:1px solid #e2ebf3;padding:12px;border-radius:11px}.detail-head small,.detail-head b{display:block}.detail-head small{color:#7d8d9e}.notes-content{background:#f9fbfd;padding:12px;border-radius:11px;white-space:pre-wrap}.result-photo{display:block;max-width:650px}.result-photo img{width:100%;max-height:450px;object-fit:contain;background:#f2f7fa;border-radius:13px}.result-photo span{font-size:12px;color:#789}.table-panel{margin-top:14px}.table-caption{padding:12px 18px;color:#657e93;font-size:12px;font-weight:700}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;min-width:850px;font-size:12px}th{text-align:left;background:#f1f6fa;color:#62788e;padding:12px 11px;white-space:nowrap}td{padding:10px 11px;border-top:1px solid #e9eef4;vertical-align:middle}td .actions{flex-wrap:nowrap}.note-cell{min-width:150px;max-width:260px;overflow:hidden;text-overflow:ellipsis}.empty-td{text-align:center;color:#8a9cae;padding:25px}.history-filter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;background:white;border:1px solid #e3eaf2;border-radius:15px;padding:18px}.history-filter .date-label{grid-column:span 2}.be-date{display:grid;grid-template-columns:90px 1fr 110px;gap:8px;margin-top:7px}.be-date select{margin:0;min-width:0}.filter-buttons{display:flex;gap:9px;align-items:end}.admin-layout{display:grid;grid-template-columns:minmax(300px,450px) minmax(0,1fr);gap:17px;align-items:start}.admin-machines{max-height:850px;overflow:auto}.admin-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #edf1f5;padding:13px 0}.admin-row small{display:block;color:#8695a5}.mobile-nav{display:none}
/* Dark dashboard */
.dashboard-content{background:radial-gradient(circle at 72% 6%,#133c5b,transparent 30%),#071a2d;color:#e8f5ff;min-height:calc(100vh - 80px);max-width:none}.dash-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:19px}.dash-head h2{font-size:29px;color:white}.dash-head h2 span{color:#36d7ed}.dash-head p{color:#8db1c7;margin-top:5px}.kicker{letter-spacing:2px;font-size:11px;color:#27d5e8;font-weight:800;margin-bottom:12px}.dash-filters{display:flex;gap:14px;align-items:end;flex-wrap:wrap;border:1px solid #1b5574;background:#0a263f;padding:15px 18px;border-radius:16px;margin-bottom:16px}.dash-filters label{color:#96c9e0;flex:1;min-width:170px}.dash-filters select{background:#071b30;border-color:#29607e;color:#e9f7ff}.updated{color:#6fa2b9;font-size:12px;margin-bottom:10px}.metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.metric,.dark-panel{background:#092137;border:1px solid #1c6486;box-shadow:inset 0 0 18px #006b9c0d;border-radius:17px}.metric{min-height:223px;padding:17px;text-align:center}.m-label{color:#b9dced;font-size:13px;font-weight:800}.gauge{--pct:0;--accent:#2ae0a2;width:138px;height:138px;background:conic-gradient(var(--accent) calc(var(--pct)*1%),#1a3952 0);border-radius:50%;margin:14px auto 9px;display:grid;place-items:center;position:relative}.gauge:before{content:'';position:absolute;background:#081c2f;border-radius:50%;inset:16px}.gauge strong{z-index:1;color:white;font-size:25px}.metric small{color:#8cb7cf}.huge-number{font-size:70px;line-height:1.3;font-weight:850;color:#2de6ad;margin:13px 0}.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.counts span{border:1px solid #22506b;padding:8px 4px;border-radius:9px;font-size:11px;color:#99bed3}.counts b{font-size:18px;display:block;color:white}.dash-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:15px;margin-top:15px}.dark-panel{padding:16px;min-width:0}.dark-panel-head{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:15px}.dark-panel-head h3{font-size:17px;color:#e7f8ff}.dark-panel-head span,.dark-panel-head a{font-size:12px;color:#89bed7}.dash-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.dash-machine{background:#d8edf3;border:1px solid #72a5b4;border-radius:12px;overflow:hidden;color:#193247;min-width:0}.dash-machine img{display:block;width:100%;height:130px;object-fit:cover}.dash-machine-body{padding:10px}.dash-machine-body small,.dash-machine-body b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dash-machine-body b{font-size:13px;margin:4px 0 10px}.issue-list>a{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid #1c435b;color:#e8f5fc}.issue-list>a>span:nth-child(2){flex:1}.issue-list>a small{display:block;color:#83a5bd}.red-dot{color:#ff5874}.nothing{padding:22px 6px;color:#9fc5d3}.trend-svg{width:100%;height:auto;display:block}.donut-layout{display:flex;justify-content:center;align-items:center;gap:22px;min-height:215px}.donut{width:172px;height:172px;flex:0 0 172px;border-radius:100%;background:conic-gradient(#27daab 0 var(--normal),#ff6678 var(--normal) var(--abnormal),#ffd56a var(--abnormal) 100%);display:grid;place-items:center}.donut>div{width:118px;height:118px;border-radius:100%;background:#092137;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#b9d6e8}.donut b{font-size:30px;color:white}.legend{min-width:120px}.legend>div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;color:#aacde1}.legend b{color:white}
@media(max-width:1200px){.metrics{grid-template-columns:repeat(2,1fr)}.machine-grid{grid-template-columns:repeat(3,1fr)}.dash-grid{grid-template-columns:1fr}.dash-cards{grid-template-columns:repeat(4,1fr)}.history-filter{grid-template-columns:repeat(2,1fr)}}
@media(max-width:850px){.sidebar{width:205px;flex-basis:205px}.topbar{padding:14px}.content{padding:18px}.machine-grid{grid-template-columns:repeat(2,1fr)}.two-col,.admin-layout{grid-template-columns:1fr}.be-date{grid-template-columns:70px 1fr 100px}}
@media(max-width:650px){.login-body{padding:9px}.login-wrap{grid-template-columns:1fr;min-height:0}.login-art{padding:24px}.login-art .logo{font-size:25px;padding:8px 14px}.login-art h1{font-size:27px}.login-art .lg{font-size:13px;margin-bottom:8px}.login-art .feature{display:none}.login-panel{padding:25px 23px}.sidebar{position:fixed;z-index:90;transform:translateX(-105%);transition:transform .18s;box-shadow:0 0 30px #0003}.nav-open .sidebar{transform:translateX(0)}.workspace{width:100%}.menu-toggle{display:inline-block;background:transparent;border:0;font-size:23px;color:#24415a;margin-right:9px}.topbar{height:68px}.topbar .crumb{display:none}.topbar h1{font-size:19px}.top-actions{gap:5px}.role-tag{padding:5px 7px;font-size:11px}.content{padding:16px 12px 92px}.page-title{align-items:start;flex-wrap:wrap}.page-title h2{font-size:20px}.machine-grid{gap:9px}.machine-photo{height:115px}.machine-info{padding:10px}.machine-info h3{font-size:13px;min-height:38px}.machine-info small{font-size:10px}.card-bottom{flex-wrap:wrap}.filterbar{gap:10px}.filterbar label{flex:1 1 140px}.form-grid{grid-template-columns:1fr}.check-row{align-items:start;flex-direction:column}.check-row b{max-width:100%}.radio-set{width:100%}.radio-set label{flex:1;justify-content:center}.detail-head{grid-template-columns:repeat(2,1fr);padding:12px;gap:7px}.detail-head>div{padding:9px}.history-filter{grid-template-columns:1fr;gap:12px}.history-filter .date-label{grid-column:span 1}.be-date{grid-template-columns:65px 1fr 90px;gap:5px}.be-date select{padding:9px 6px;font-size:12px}.mobile-nav{position:fixed;bottom:0;left:0;right:0;z-index:80;background:#102a48;color:#b2cede;display:flex;justify-content:space-evenly;padding:7px 5px max(7px,env(safe-area-inset-bottom));box-shadow:0 -4px 16px #0001}.mobile-nav a{min-width:64px;color:#c0d5e8;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:20px}.mobile-nav a span{font-size:10px}.mobile-nav a.active{color:#2ce4ca}.dash-head{align-items:start;flex-wrap:wrap}.dash-head h2{font-size:22px}.metrics{gap:8px}.metric{min-height:170px;padding:10px}.m-label{font-size:11px}.gauge{width:100px;height:100px;margin:13px auto 8px}.gauge:before{inset:11px}.gauge strong{font-size:19px}.metric small{font-size:10px}.huge-number{font-size:44px;margin:6px 0}.counts{grid-template-columns:1fr;gap:3px}.counts span{padding:2px 5px;display:flex;justify-content:space-between}.counts b{font-size:13px}.dash-cards{grid-template-columns:repeat(2,1fr)}.dash-machine img{height:95px}.dark-panel{padding:12px}.donut-layout{gap:10px}.donut{width:140px;height:140px;flex-basis:140px}.donut>div{width:92px;height:92px}.donut b{font-size:24px}.legend{font-size:12px}.dash-filters label{min-width:130px}.admin-row{flex-wrap:wrap}}