@import url("https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700;800&display=swap");*{box-sizing:border-box}*,body,html{margin:0;padding:0}body,html{width:100%;height:100%;overflow-x:hidden;font-family:Sarabun,Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}:root{--btn-radius:10px;--btn-font-size:16px;--btn-padding-y:10px;--btn-padding-x:16px;--btn-primary-bg:#2563eb;--btn-primary-color:#fff;--btn-primary-hover:#1e40af;--btn-shadow:0 8px 20px rgba(2,6,23,.12);--btn-shadow-hover:0 18px 36px rgba(2,6,23,.18);--btn-transition:180ms cubic-bezier(.2,.8,.2,1)}.k-btn{display:inline-flex;align-items:center;gap:10px;padding:var(--btn-padding-y) var(--btn-padding-x);font-size:var(--btn-font-size);border-radius:var(--btn-radius);border:0;background:linear-gradient(180deg,#fff,#f3f6ff 60%);color:#0b1220;cursor:pointer;box-shadow:0 18px 40px rgba(2,6,23,.18),inset 0 6px 18px rgba(2,6,23,.08);border:1px solid rgba(2,6,23,.06);position:relative;overflow:hidden;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background .15s ease;will-change:transform,box-shadow;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-backface-visibility:hidden;backface-visibility:hidden;transform:translateZ(0)}.k-btn:hover{animation:btn-bounce .3s both;transform:translateY(-10px) translateZ(18px);box-shadow:0 30px 70px rgba(2,6,23,.2),inset 0 10px 24px rgba(2,6,23,.1)}@keyframes btn-bounce{0%{transform:translateY(0)}35%{transform:translateY(-10px)}60%{transform:translateY(-4px)}to{transform:translateY(-6px)}}.k-btn:active{transform:translateY(-4px) translateZ(8px);box-shadow:0 10px 26px rgba(2,6,23,.16),inset 0 4px 10px rgba(2,6,23,.06)}.k-btn:before{content:"";position:absolute;inset:0;background:hsla(0,0%,100%,.06);opacity:0;transition:opacity .18s ease;pointer-events:none}.k-btn:active:before{opacity:1;transition:opacity .26s ease-in-out}.k-btn.clicked{transform:translateY(-6px) translateZ(12px);box-shadow:0 32px 80px rgba(2,6,23,.22),inset 0 8px 22px rgba(2,6,23,.1)}.k-btn.clicked:before{opacity:1}.k-btn.clicked,.k-btn:active,.k-btn:focus,.link-button{cursor:pointer!important}.k-btn:focus{outline:3px solid rgba(37,99,235,.18);outline-offset:4px;box-shadow:0 12px 34px rgba(37,99,235,.09),inset 0 6px 14px rgba(2,6,23,.06)}.k-btn-primary{background:linear-gradient(180deg,#3b82f6,#2563eb 60%,#1e40af);color:var(--btn-primary-color);border:1px solid rgba(13,82,255,.14);box-shadow:0 18px 50px rgba(37,99,235,.22),inset 0 6px 18px rgba(2,6,23,.06);text-shadow:0 1px 0 rgba(0,0,0,.12);transition:transform var(--btn-transition),box-shadow var(--btn-transition),filter var(--btn-transition)}.k-btn-primary:hover{transform:translateY(-10px) translateZ(20px);box-shadow:0 36px 80px rgba(37,99,235,.28),inset 0 6px 22px rgba(2,6,23,.08);filter:brightness(1.03)}.k-btn-primary:active{transform:translateY(-4px) translateZ(10px) scale(.996);box-shadow:0 12px 34px rgba(37,99,235,.18),inset 0 4px 12px rgba(2,6,23,.06);filter:brightness(.98)}.k-btn-primary:after{content:"";position:absolute;left:6px;right:6px;top:6px;height:12px;border-radius:8px;background:linear-gradient(180deg,hsla(0,0%,100%,.22),hsla(0,0%,100%,0));pointer-events:none;opacity:.95;mix-blend-mode:overlay}.k-btn-ghost{background:linear-gradient(180deg,#fbfdff,#f8fafc);color:#0f172a;border:1px solid rgba(2,6,23,.06);box-shadow:0 8px 22px rgba(2,6,23,.06)}.k-btn:after{content:"";position:absolute;left:6px;right:6px;top:6px;height:8px;border-radius:8px;background:linear-gradient(180deg,hsla(0,0%,100%,.6),hsla(0,0%,100%,0));pointer-events:none;opacity:.85;transform:translateZ(30px)}.link-button{cursor:pointer}.crisp-text{-webkit-font-smoothing:antialiased!important;-moz-osx-font-smoothing:grayscale!important;text-rendering:geometricPrecision!important;-webkit-backface-visibility:hidden!important;backface-visibility:hidden!important;transform:translateZ(0)!important;filter:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}@media (max-width:560px){.k-btn{font-size:15px;padding:8px 12px}}.page-shell{padding:28px;min-height:100vh;background:linear-gradient(180deg,#f8fafc,#eef2ff 60%);perspective:1200px;-webkit-font-smoothing:antialiased}.card{background:linear-gradient(180deg,#fff,#fbfdff);border-radius:12px;border:1px solid rgba(2,6,23,.06);box-shadow:0 6px 20px rgba(2,6,23,.06),0 2px 6px rgba(2,6,23,.04);transition:transform .26s cubic-bezier(.2,.9,.2,1),box-shadow .26s ease,filter .26s ease;transform-style:preserve-3d;will-change:transform,box-shadow;padding:14px}.card:hover{transform:translateY(-12px) translateZ(28px);box-shadow:0 30px 60px rgba(2,6,23,.12),0 8px 18px rgba(2,6,23,.06)}.machine-card{flex-direction:column;padding:14px 16px;min-height:160px}.machine-card,.machine-card-header{display:flex;justify-content:space-between}.machine-card-header{align-items:center;gap:12px}.machine-name{font-size:18px;font-weight:800;color:#0f172a}.machine-sub{font-size:13px;color:#475569;margin-top:4px}.status-pill{padding:6px 10px;border-radius:999px;font-weight:700;font-size:13px;display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(2,6,23,.04)}.status-pill.ok{background:linear-gradient(180deg,#ecfdf5,#d1fae5);color:#065f46}.status-pill.warn{background:linear-gradient(180deg,#fff7ed,#ffedd5);color:#92400e}.machine-info-row{display:flex;gap:12px;margin-top:12px}.machine-info{flex:1 1}.machine-info .label{font-size:13px;color:#475569}.machine-info .value{font-weight:800;font-size:16px;color:#0f172a}.machine-actions{display:flex;gap:8px;margin-top:12px}.machine-action-btn{flex:1 1;padding:8px 10px;border-radius:8px;font-size:15px}.machine-action-btn.small{flex:0 0 auto;padding:8px 12px}@media (max-width:720px){.machine-card{min-width:220px;max-width:100%}.machine-name{font-size:16px}}.service-card{width:120px;text-align:center;padding:12px}.card:before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(180deg,hsla(0,0%,100%,.5),hsla(0,0%,100%,0));transform:translateZ(-1px) scale(1.02);opacity:.6}.controls label,.controls select{font-size:15px}.crisp-text button,.crisp-text input,.crisp-text select{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;transform:translateZ(0)}.k-input{width:100%;padding:10px 12px;border-radius:8px;border:1px solid rgba(2,6,23,.12);background:linear-gradient(180deg,#fff,#fbfdff);box-shadow:inset 0 1px 0 hsla(0,0%,100%,.6);font-size:17px;color:#0f172a;max-width:520px}.k-input.narrow{max-width:360px}.k-input:focus{outline:none;border-color:rgba(37,99,235,.9);box-shadow:0 6px 20px rgba(37,99,235,.06)}.k-table-wrapper{overflow:auto;border:1px solid #eef2f8;border-radius:10px;background:#fff;padding:10px}.k-table{width:100%;border-collapse:collapse;min-width:920px;font-size:14px}.k-table td,.k-table th{padding:10px 12px;border:1px solid #f1f5f9}.k-table thead th{background:linear-gradient(180deg,#f8fafc,#f1f5f9);font-weight:600;color:#0f172a}.k-table tbody tr:hover{background:rgba(37,99,235,.02)}.search-controls{display:flex;gap:8px;align-items:center}.search-controls .k-btn{padding:6px 10px}.k-input.large,.search-controls .k-input,.search-controls select{font-size:18px}.controls-right{display:flex;gap:8px;align-items:center}.data-card{padding:14px;border-radius:10px;background:linear-gradient(180deg,#fff,#fbfdff);border:1px solid #eef2f8;box-shadow:0 6px 18px rgba(2,6,23,.03)}.controls-card{margin-top:8px;padding:10px;border-radius:10px;background:linear-gradient(180deg,#fbfdff,#fff);border:1px solid rgba(2,6,23,.06);box-shadow:0 8px 20px rgba(2,6,23,.04)}.controls-card .k-input{min-width:220px;max-width:420px}.controls-card .k-btn{flex:0 0 auto}.clickable-status{cursor:pointer;color:#0f172a}@media (max-width:1000px){.k-table{min-width:720px;font-size:13px}}:root{--depth-shadow-1:0 10px 30px rgba(2,6,23,.14);--depth-shadow-2:0 20px 60px rgba(2,6,23,.18);--depth-shadow-3:0 6px 18px rgba(2,6,23,.08);--edge-color-strong:rgba(2,6,23,.08)}.page-shell{perspective:1400px}.k-btn{box-shadow:var(--depth-shadow-1);transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease,background-color .12s ease}.k-btn:hover{transform:translateY(-8px) translateZ(12px);box-shadow:var(--depth-shadow-2)}.k-btn:active{transform:translateY(-4px) translateZ(6px)}.k-btn-primary{box-shadow:0 18px 50px rgba(37,99,235,.22)}.card,.data-card{transform-style:preserve-3d;box-shadow:0 22px 60px rgba(2,6,23,.1),0 8px 24px rgba(2,6,23,.06);border:1px solid var(--edge-color-strong)}.card:hover,.data-card:hover{transform:translateY(-22px) translateZ(40px);box-shadow:0 40px 110px rgba(2,6,23,.16),0 14px 40px rgba(2,6,23,.08)}.k-table-wrapper{box-shadow:0 18px 48px rgba(2,6,23,.08);border:1px solid rgba(2,6,23,.06)}.k-table td,.k-table th{border-color:rgba(2,6,23,.06)}.k-table thead th{border-bottom:2px solid rgba(2,6,23,.07)}.k-table tbody tr:hover{background:rgba(2,6,23,.03)}.k-input:focus{box-shadow:0 12px 32px rgba(37,99,235,.06);border-color:rgba(37,99,235,.95)}.found-row{border-radius:8px;padding:8px;border:1px solid rgba(2,6,23,.06);background:#fff;box-shadow:0 8px 20px rgba(2,6,23,.04);font-size:18px;min-width:220px;display:inline-block}.found-row-device,.found-row-field,.found-row-time{display:block}.found-row-time{color:#0f172a;font-weight:600}.found-row-device{color:#111827;margin-top:4px}.found-row-field{color:#374151;margin-top:4px;font-weight:500}.power-section-heading{font-size:20px;font-weight:700;color:#0f172a;margin:0 0 8px}.power-group-header{font-size:18px;font-weight:700;color:#0f172a}.form-row{margin-bottom:16px}.form-row label{display:block;margin-bottom:8px;font-weight:600;color:#111827}