:root{color:#edf5ff;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#11131f;font-family:Segoe UI,Noto Sans Thai,Tahoma,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}button,input,textarea{font:inherit}.app-shell{box-sizing:border-box;color:#edf5ff;background:radial-gradient(circle at 18% 0,#7e57ff24,#0000 28%),radial-gradient(circle at 86% 18%,#00b7ff1c,#0000 30%),linear-gradient(135deg,#11131f 0%,#151826 48%,#101820 100%);grid-template-rows:auto minmax(0,1fr);grid-template-columns:minmax(0,1.72fr) minmax(340px,.88fr);gap:18px 30px;height:100svh;min-height:100svh;padding:28px 30px;display:grid;overflow:hidden}.viewer-panel,.sidebar{min-height:0}.viewer-panel{display:contents}.sidebar{scrollbar-gutter:stable;flex-direction:column;grid-area:2/2;min-width:0;padding:0 4px 0 0;display:flex;overflow:auto}.topbar,.card{box-shadow:none;background:0 0;border:0}.topbar{grid-area:1/1/auto/-1;justify-content:space-between;align-items:flex-start;gap:22px;padding:0 0 4px;display:flex}.viewer-stage{background:radial-gradient(circle,#263142eb,#121622f5 58%,#0d111cfa),#121622;border-radius:8px;grid-area:2/1;height:100%;min-height:0;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0f,0 22px 70px #00000052}.viewer-overlay{z-index:4;pointer-events:none;position:absolute;inset:0}.selected-chip,.viewer-toolbar,.usage-hint,.conveyor-legend{pointer-events:auto;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#121623d1;position:absolute;box-shadow:0 18px 46px #00000057}.selected-chip{color:#f6fbff;border-radius:8px;gap:3px;max-width:min(360px,100% - 32px);padding:12px 14px;display:grid;top:16px;left:16px}.selected-chip strong,.selected-chip span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.selected-chip strong{font-size:14px}.selected-chip span{color:#9cb1c9;font-size:12px}.selected-chip-meta{align-items:center;gap:8px;min-width:0;display:flex}.selected-chip-meta>span:first-child{text-overflow:ellipsis;white-space:nowrap;min-width:0;overflow:hidden}.status-pill{border:1px solid;border-radius:999px;flex:none;align-items:center;gap:5px;padding:3px 7px;font-weight:700;line-height:1;display:inline-flex;font-size:10px!important}.status-pill:before{content:"";background:currentColor;border-radius:999px;width:6px;height:6px}.is-running{color:#55f0a7!important}.is-idle{color:#8be7ff!important}.is-maintenance{color:#ffd24d!important}.is-fault{color:#ff7b6b!important}.chip-label{text-transform:uppercase;color:#7f91aa!important;font-size:10px!important}.viewer-toolbar{border-radius:8px;gap:7px;padding:7px;display:flex;top:16px;right:16px}.machine-select{color:#e8f1ff;width:186px;height:36px;font:inherit;background:#0c0f1ae0;border:1px solid #8fa4c133;border-radius:7px;outline:none;padding:0 9px;font-size:12px}.machine-select:focus{border-color:#00b7ffc7;box-shadow:0 0 0 3px #00b7ff1f}.viewer-toolbar button{color:#dce9fb;min-width:38px;height:36px;font:inherit;cursor:pointer;background:#191e2edb;border:1px solid #8fa4c12e;border-radius:7px;font-size:12px}.viewer-toolbar button:hover,.viewer-toolbar button.is-active{color:#64f3b2;background:#224944d1;border-color:#3ee6a094}.usage-hint{border-radius:8px;flex-wrap:wrap;gap:8px;max-width:calc(100% - 32px);padding:8px;display:flex;bottom:16px;left:16px}.usage-hint span{color:#c5d3e6;background:#ffffff0f;border-radius:999px;padding:6px 10px;font-size:12px}.viewer-info-panel{color:#dce9fb;pointer-events:none;background:#0a0e18e6;border-radius:8px;gap:10px;min-width:290px;max-width:min(360px,100% - 32px);padding:12px 14px;font-size:13px;line-height:1.4;display:grid;position:absolute;top:66px;right:16px;box-shadow:0 18px 46px #00000057}.viewer-info-label{color:#64f3b2;text-transform:uppercase;font-size:11px}.viewer-info-panel strong{color:#f4fbff;font-size:18px;line-height:1.2}.viewer-info-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;display:grid}.viewer-info-grid div{gap:3px;display:grid}.viewer-info-grid span{color:#8ea7c6;font-size:11px}.viewer-info-grid b{color:#eef6ff;font-size:13px;font-weight:700}.viewer-info-grid .status-text{font-weight:800}.conveyor-legend{border-radius:8px;gap:7px;max-width:min(420px,100% - 32px);padding:11px;display:grid;bottom:16px;right:16px}.conveyor-legend div{align-items:center;gap:9px;display:flex}.conveyor-legend span{background:#00b7ff;border-radius:999px;flex:none;width:10px;height:10px;box-shadow:0 0 0 4px #00b7ff24}.conveyor-legend strong{color:#d9f3ff;font-size:12px;line-height:1.25}.legend-heading{color:#8ea7c6;letter-spacing:.04em;text-transform:uppercase;padding-top:2px;font-size:10px;font-weight:800}.machine-overview{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px!important;display:grid!important}.machine-overview button{color:#d9f3ff;min-width:0;font:inherit;cursor:pointer;text-align:left;background:#ffffff09;border:1px solid #8fa4c124;border-radius:6px;grid-template-columns:8px 22px minmax(0,1fr);align-items:center;gap:6px;padding:5px 6px;display:grid}.machine-overview button:hover{background:#00b7ff14;border-color:#00b7ffb8}.machine-overview .machine-overview-dot{width:8px;height:8px;box-shadow:none;background:currentColor;border-radius:999px}.machine-overview button>span:last-child{width:auto;height:auto;box-shadow:none;color:#b9cbe1;text-overflow:ellipsis;white-space:nowrap;background:0 0;border-radius:0;font-size:10px;line-height:1.2;overflow:hidden}.machine-overview strong{color:#f4fbff;font-size:11px}.machine-marker{color:#64f3b2;min-width:30px;height:24px;font:inherit;cursor:pointer;background:#101622eb;border:1px solid #3ee6a080;border-radius:999px;font-size:11px;font-weight:700;transform:translateY(-2px);box-shadow:0 10px 24px #00000057}.machine-marker:hover,.machine-marker.is-hovered{color:#8be7ff;border-color:#00b7ffe6}.machine-marker.is-selected{color:#ffe18a;background:#5c4714e0;border-color:#ffd45ceb;box-shadow:0 0 0 2px #ffd45c2e,0 12px 28px #00000061}.machine-marker.is-status-running{border-color:#55f0a7d9}.machine-marker.is-status-idle{border-color:#8be7ffd9}.machine-marker.is-status-maintenance{border-color:#ffd24dd9}.machine-marker.is-status-fault{border-color:#ff7b6be6}.selected-machine-beacon{color:#fff3c2;text-align:center;pointer-events:none;background:#14120af0;border:1px solid #ffd45cb8;border-radius:8px;gap:4px;min-width:190px;max-width:260px;padding:9px 12px;display:grid;box-shadow:0 14px 30px #00000057}.selected-machine-beacon span{color:#fff0ad;overflow-wrap:anywhere;font-size:12px;font-weight:700;line-height:1.2}.selected-machine-beacon strong{color:#ffd24d;overflow-wrap:anywhere;font-size:13px;line-height:1.2}.conveyor-label{color:#c8f2ff;text-align:center;white-space:normal;background:#0c121edb;border-radius:999px;max-width:230px;padding:8px 12px;font-size:12px;font-weight:700;line-height:1.25;box-shadow:0 12px 28px #0000004d}.selected-machine-callout-anchor{pointer-events:none;position:absolute;inset:0}.selected-machine-callout-pin{background:#ff2b2b;border-radius:999px;width:8px;height:8px;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 0 3px #ff2b2b29}.selected-machine-callout-line{transform-origin:0;background:#ff2b2b;height:2px;position:absolute;box-shadow:0 0 0 1px #ff2b2b14}.selected-machine-callout{color:#ff1f1f;pointer-events:none;background:#fffffff5;gap:2px;min-width:230px;max-width:280px;padding:8px 10px;font-size:12px;font-weight:700;line-height:1.25;display:grid;position:absolute;box-shadow:0 12px 26px #00000047}.selected-machine-callout strong,.selected-machine-callout span{overflow-wrap:anywhere}.card{border-radius:8px;padding:0;overflow:visible}.editor-card{flex-direction:column;flex:none;min-height:0;padding-bottom:24px;display:flex}.section-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:16px;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:0;color:#8192ad;margin:0 0 7px;font-size:12px}h1,h2,p{margin:0}h1{color:#fff;white-space:nowrap;max-width:none;font-size:38px;line-height:1.05}h2{color:#f7fbff;font-size:21px;line-height:1.18}.machine-id{color:#64f3b2;background:#3ee6a017;border-radius:999px;padding:8px 10px;font-size:12px}.editor-lock-panel{background:#0a0e185c;border:1px solid #8fa4c129;border-radius:8px;margin-bottom:16px;padding:12px}.editor-lock-panel.is-unlocked{background:#2093671a;border-color:#3ee6a052}.editor-lock-panel form,.editor-lock-panel.is-unlocked{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;display:grid}.editor-lock-panel label,.editor-lock-panel div{gap:6px;min-width:0;display:grid}.editor-lock-panel span{color:#8c9fba;font-size:12px}.editor-lock-panel strong{color:#64f3b2;font-size:14px}.editor-lock-panel p{color:#ffb08c;grid-column:1/-1;font-size:12px}.editor-lock-panel input{box-sizing:border-box;width:100%;min-height:42px;font:inherit;color:#eef6ff;background:#0a0e18b8;border:1px solid #8fa4c12e;border-radius:8px;outline:none;padding:9px 12px}.compact-button{white-space:nowrap;min-height:42px;padding:8px 12px}.summary-panel,.operation-panel{background:0 0;border-bottom:1px solid #8fa4c129;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin-bottom:16px;padding:0 0 16px;display:grid}.summary-panel div,.operation-panel div{gap:4px;min-width:0;display:grid}.summary-panel span,.operation-panel span,.field-grid span{color:#8c9fba;font-size:12px}.summary-panel strong,.operation-panel strong{text-overflow:ellipsis;white-space:nowrap;color:#eef6ff;min-width:0;font-size:14px;overflow:hidden}.summary-panel input,.summary-panel textarea,.operation-panel input{box-sizing:border-box;width:100%;min-height:44px;font:inherit;color:#eef6ff;resize:vertical;background:#0a0e18b8;border:1px solid #8fa4c12e;border-radius:8px;outline:none;padding:9px 12px}.summary-panel textarea{grid-column:1/-1;min-height:84px}.summary-panel input:focus,.summary-panel textarea:focus,.operation-panel input:focus{border-color:#00b7ffb8;box-shadow:0 0 0 3px #00b7ff1a}.summary-panel p{color:#b6c5d9;grid-column:1/-1;font-size:13px;line-height:1.5}.operation-panel strong{line-height:1.35}.status-editor-row{grid-template-columns:minmax(0,1fr);gap:8px;margin:-4px 0 16px;display:grid}.status-editor-row label{gap:6px;display:grid}.status-editor-row span{color:#8c9fba;font-size:12px}.status-editor-row select{box-sizing:border-box;color:#eef6ff;width:100%;min-height:44px;font:inherit;background:#0a0e18b8;border:1px solid #8fa4c12e;border-radius:8px;outline:none;padding:9px 12px}.status-editor-row select:focus{border-color:#00b7ffb8;box-shadow:0 0 0 3px #00b7ff1a}.status-editor-row select:disabled{color:#9aaac0;background:#ffffff09}.editor-title-row{justify-content:space-between;align-items:flex-end;gap:12px;margin-bottom:10px;display:flex}.save-state{color:#8c9fba;font-size:12px}.save-state.is-dirty{color:#ffd24d}.save-state.is-saving{color:#66d5ff}.save-state.is-error{color:#ff7d8c}.save-button{white-space:nowrap;min-width:132px}.topbar-actions{gap:10px;display:flex}.primary-button,.secondary-button{font:inherit;cursor:pointer;border-radius:8px;padding:10px 14px}.primary-button{color:#72f7b9;background:#20936747;border:1px solid #3ee6a085}.secondary-button{color:#dce9fb;background:#ffffff0a;border:1px solid #8fa4c133}.primary-button:hover,.secondary-button:hover{transform:translateY(-1px)}.field-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding-right:0;display:grid;overflow:visible}.field-grid label{gap:8px;display:grid}.field-grid input,.field-grid textarea,.field-grid select{box-sizing:border-box;width:100%;min-height:44px;font:inherit;color:#edf5ff;resize:vertical;background:#0a0e18b8;border:1px solid #8fa4c12e;border-radius:8px;outline:none;padding:10px 12px}.field-grid textarea{min-height:92px}.field-grid input:focus,.field-grid textarea:focus,.field-grid select:focus{border-color:#00b7ffb8;box-shadow:0 0 0 3px #00b7ff1a}.field-grid input[readonly]{color:#8da0bb;background:#ffffff09}.summary-panel input[readonly],.summary-panel textarea[readonly],.operation-panel input[readonly],.field-grid textarea[readonly]{color:#9aaac0;cursor:default;background:#ffffff09}.primary-button:disabled,.secondary-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.full-width{grid-column:1/-1}.empty-card{color:#b6c5d9;place-content:center;gap:12px}.stage-message,.canvas-label{color:#dce9fb;place-items:center;width:100%;height:100%;font-size:15px;display:grid}.stage-error{color:#ffb08c}@media (width<=1120px){.app-shell{grid-template-rows:auto auto auto;grid-template-columns:1fr;height:auto;overflow:visible}.sidebar{grid-area:3/1;padding:0;overflow:visible}.topbar{grid-area:1/1}.viewer-stage{grid-area:2/1;height:auto;min-height:500px}}@media (width<=720px){.app-shell{padding:18px}.sidebar{padding:0}.topbar{flex-direction:column}.topbar-actions{width:100%}.primary-button,.secondary-button{flex:1 1 0}.viewer-toolbar{flex-wrap:wrap;max-width:calc(100% - 32px);inset:auto auto 80px 16px}.conveyor-legend{bottom:136px;left:16px;right:auto}.machine-select{width:100%}.summary-panel,.field-grid{grid-template-columns:1fr}h1{white-space:normal;font-size:30px}.viewer-stage{min-height:420px}}