:root {
      color-scheme: light;
      font-family: "Microsoft JhengHei", Arial, sans-serif;
      --cell-w: clamp(76px, 5.4vw, 104px);
      --cell-h: clamp(64px, 6.5vh, 82px);
    }
    * { box-sizing: border-box; }
    body { margin: 0; background: #d9dde3; color: #111827; }
    button, input, select { font: inherit; }
    #app { min-height: 100vh; }
    .app-shell { display: flex; flex-direction: column; min-height: 100vh; }
    .toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 8px; background: linear-gradient(#eef1f4,#cfd5dc); color: #111827; align-items: center; border-bottom:1px solid #8b949e; }
    .toolbar button { border: 1px solid #7b8490; border-radius: 2px; padding: 5px 9px; cursor: pointer; background: linear-gradient(#fff,#dfe3e8); color: #111827; }
    .toolbar button:hover { background: #dbeafe; border-color:#2563eb; }
    .toolbar .separator { width:1px; height:24px; background:#9ca3af; margin:0 3px; }
    .workspace { display: grid; grid-template-columns: clamp(220px,16vw,280px) minmax(0,1fr) clamp(320px,23vw,400px); gap: 10px; padding: 10px; flex: 1; min-height: 0; }
    .workspace.ladder-workspace { grid-template-columns: clamp(200px,14vw,240px) minmax(720px,1fr) clamp(330px,22vw,390px); }
    .panel { background: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.12); padding: 10px; min-height: 0; }
    .toolbox button { display: block; width: 100%; margin-bottom: 6px; padding: 8px; border: 1px solid #cbd5e1; border-radius: 6px; background: white; cursor: pointer; }
    .toolbox button.active { background: #dbeafe; border-color: #60a5fa; }
    .editor-area { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
    .status-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 10px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; }
    .octal-address-notice { display:flex; align-items:center; gap:10px; border:1px solid #e2b468; border-left:4px solid #cf7c1d; background:#fff8e9; padding:8px 10px; color:#654417; font-size:11px; }
    .octal-address-notice strong { flex:none; color:#8b520e; }
    .canvas-wrap { flex: 1; min-height:clamp(620px,calc(100vh - 315px),900px); overflow: auto; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; padding: 14px; }
    
    .ladder-grid {
      display: grid;
      grid-template-columns: 44px repeat(var(--cols), var(--cell-w));
      grid-auto-rows: var(--cell-h);
      width: fit-content;
      border-top: 1px solid #cbd5e1;
      border-left: 1px solid #cbd5e1;
    }
    .cell {
      position: relative;
      border-right: 1px solid #cbd5e1;
      border-bottom: 1px solid #cbd5e1;
      background: rgba(255,255,255,.72);
      min-width: var(--cell-w);
      min-height: var(--cell-h);
      overflow: hidden;
    }
    
    .cell.bus { background: rgba(254,242,242,.8); }
    .cell.selected { outline: 2px solid #2563eb; outline-offset: -2px; }
    .cell.range-selected { outline: 2px dashed #0ea5e9; outline-offset: -2px; }
    .cell.error { outline: 2px solid #dc2626; outline-offset: -2px; }
    .cell-label { position: absolute; top: 2px; left: 2px; font-size: 10px; color: #64748b; pointer-events: none; }
    
    .wire { position: absolute; background: #111827; z-index: 1; pointer-events: none; }
    .wire.mid {
      top: 50%; left: 0; width: 100%; height: 2px; transform: translateY(-50%);
    }
    .wire.right { top: 50%; right: 0; width: 50%; height: 2px; transform: translateY(-50%); }
    .wire.left { top: 50%; left: 0; width: 50%; height: 2px; transform: translateY(-50%); }
    .wire.down { left: 0; top: 50%; width: 2px; height: 50%; }
    .wire.up { left: 0; top: 0; width: 2px; height: 50%; }
    
    .symbol { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 2; }
    .contact-chip { width: 36px; height: 20px; border-left: 2px solid #111827; border-right: 2px solid #111827; position: relative; background: rgba(255,255,255,.95); }
    .contact-chip::before { content: ''; position: absolute; left: 50%; top: -4px; width: 2px; height: 26px; background: #111827; display: none; }
    .contact-chip.inverted::before { display: block; transform: translateX(-50%) rotate(-36deg); }
    .contact-chip .pulse-arrow { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 14px; line-height: 1; font-weight: 900; color: #111827; pointer-events: none; }
    .instruction-label { position:absolute; top:2px; max-width:calc(100% - 4px); overflow:hidden; padding:0 3px; background:#fff; color:#0d2a42; font:800 11px/1.2 Consolas,monospace; white-space:nowrap; text-overflow:ellipsis; }

    .coil-chip { min-width: 62px; height: 24px; padding: 0 8px; border: 2px solid #111827; border-radius: 8px; background: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-family: Consolas, monospace; }
    .coil-chip.instruction-coil { min-width:74px; padding-inline:7px; border-radius:5px; font-weight:800; }
    .block-slot { position: absolute; inset: 6px 0; display: flex; align-items: center; justify-content: center; border-top: 2px solid #111827; border-bottom: 2px solid #111827; border-left: 1px solid #111827; border-right: 1px solid #111827; background: #fff; font-size: 10px; font-family: Consolas, monospace; z-index: 2; }
    .block-slot.start { border-left-width: 2px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; }
    .block-slot.end { border-right-width: 2px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; }
    .end-chip { min-width: 110px; padding: 4px 8px; border: 2px solid #0f172a; border-radius: 999px; background: #f8fafc; color: #0f172a; font-weight: 700; font-size: 11px; font-family: Consolas, monospace; letter-spacing: 0.4px; }
    
    .inline-input-dialog { position: fixed; z-index: 2200; min-width: 420px; background: #dfe3ea; border: 1px solid #7d8592; box-shadow: 0 12px 28px rgba(0,0,0,.28); padding: 8px; }
    .inline-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 88px; gap: 8px; align-items: start; }
    .inline-input-left { position: relative; }
    .inline-input-left input { width: 100%; border: 1px solid #5f6672; background: #ffffff; color: #111827; outline: none; padding: 7px 8px; font-family: Consolas, "Courier New", monospace; font-size: 13px; }
    .inline-input-left input:focus { border-color: #2563eb; box-shadow: inset 0 0 0 1px rgba(37,99,235,.3); }
    .inline-input-buttons { display: flex; flex-direction: column; gap: 6px; }
    .dialog-btn { border: 1px solid #656b77; background: linear-gradient(#f4f5f7, #d3d7de); color: #111827; padding: 5px 6px; font-size: 12px; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.75); text-align: center; user-select: none; }
    .dialog-btn:active { background: linear-gradient(#c7ccd5, #e2e5eb); box-shadow: inset 0 1px 3px rgba(0,0,0,.22); }
    .autocomplete-dropdown { position: absolute; left: 0; right: 0; top: calc(100% + 2px); max-height: 200px; overflow: auto; background: #ffffff; border: 1px solid #5f6672; box-shadow: 0 6px 16px rgba(0,0,0,.16); display: none; z-index: 2300; }
    .autocomplete-dropdown.show { display: block; }
    .dropdown-item { padding: 6px 8px; font-size: 12px; border-bottom: 1px solid #e5e7eb; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; }
    .dropdown-item:last-child { border-bottom: 0; }
    .dropdown-item.active, .dropdown-item:hover { background: #dbeafe; }
    .dropdown-item .code { font-family: Consolas, "Courier New", monospace; font-weight: 700; color: #0f172a; min-width: 56px; }
    .dropdown-item .meta { color: #334155; font-size: 11px; text-align: right; flex: 1; }
    
    .hint { font-size: 12px; color: #64748b; }
    .issue-list { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
    .issue-item { width: 100%; text-align: left; border: 1px solid #fecaca; background: #fff1f2; color: #7f1d1d; border-radius: 6px; padding: 6px; cursor: pointer; }
    .issue-item:hover { background: #ffe4e6; }
    .compile-summary { font-family:Consolas,monospace; font-size:12px; background:#eef6ff; border:1px solid #93c5fd; padding:7px; margin-bottom:8px; white-space:pre-wrap; }
    .mono-box { white-space: pre-wrap; font-family: Consolas, monospace; font-size: 12px; min-height: 120px; max-height: 280px; overflow: auto; border: 1px solid #e2e8f0; border-radius: 6px; padding: 8px; background: #f8fafc; }
    .checklist-box { min-height: 96px; max-height: 180px; }
    
    .device-watch-panel input { width: 100%; margin: 4px 0; padding: 6px; border: 1px solid #cbd5e1; border-radius: 6px; }
    .device-watch-panel button { margin: 2px 2px 4px 0; padding: 5px 8px; cursor: pointer; background: #334155; color: white; border: none; border-radius: 4px;}
    .device-watch-panel button:hover { background: #475569; }

    .academy-header { background:#071f35; color:#fff; border-bottom:3px solid #19c4b1; }
    .academy-header-main { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 18px 12px; }
    .brand-lockup { display:flex; align-items:center; gap:12px; min-width:0; }
    .brand-mark { width:42px; height:42px; border:1px solid rgba(255,255,255,.28); border-radius:10px; display:grid; place-items:center; background:#0d3353; font:800 12px/1 Consolas,monospace; color:#57e4d2; box-shadow:inset 0 0 0 3px rgba(87,228,210,.08); }
    .brand-title { font-size:20px; font-weight:800; letter-spacing:.04em; }
    .brand-subtitle { margin-top:3px; color:#b8d1e5; font-size:12px; }
    .header-status { display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
    .status-chip { border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.07); border-radius:999px; padding:6px 10px; font-size:12px; color:#dcebf6; }
    .status-chip.live::before { content:''; display:inline-block; width:7px; height:7px; margin-right:6px; border-radius:50%; background:#33d6a6; box-shadow:0 0 0 4px rgba(51,214,166,.14); }
    .question-tabs { display:grid; grid-template-columns:repeat(6,minmax(118px,1fr)); gap:1px; padding:0 18px; overflow:auto; }
    .question-tab { border:0; border-top:2px solid transparent; background:#0b2a46; color:#a9c1d4; padding:10px 12px; text-align:left; cursor:pointer; min-width:118px; }
    .question-tab:hover { background:#103653; color:#fff; }
    .question-tab.active { background:#f7fafc; color:#08233a; border-top-color:#38d8c2; }
    .question-tab strong { display:block; font-size:12px; }
    .question-tab small { display:block; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .mission-strip { display:grid; grid-template-columns:minmax(250px,1.35fr) minmax(480px,2fr); gap:16px; align-items:center; padding:10px 18px; background:#f7fafc; border-bottom:1px solid #b8c5d1; }
    .mission-eyebrow { color:#137d72; font:700 11px/1.2 Consolas,monospace; letter-spacing:.08em; text-transform:uppercase; }
    .mission-title { margin-top:4px; font-size:17px; font-weight:800; color:#0b253a; }
    .mission-copy { margin-top:4px; font-size:12px; color:#536779; }
    .workflow { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
    .workflow button { position:relative; border:1px solid #bdc8d2; background:#fff; color:#405466; padding:9px 8px 9px 30px; text-align:left; border-radius:6px; cursor:pointer; font-size:12px; }
    .workflow button::before { content:attr(data-step); position:absolute; left:8px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; display:grid; place-items:center; background:#d7e0e8; color:#405466; font:700 10px/16px Consolas,monospace; text-align:center; }
    .workflow button.active { border-color:#0d8c7f; background:#eafaf7; color:#075c55; box-shadow:inset 0 0 0 1px #0d8c7f; }
    .workflow button.active::before { background:#0d8c7f; color:#fff; }
    .workspace { grid-template-columns:280px minmax(0,1fr) 360px; padding:10px 12px 12px; }
    .panel { border:1px solid #c8d2dc; border-radius:5px; box-shadow:0 1px 2px rgba(12,36,55,.08); }
    .side-section { border-bottom:1px solid #dbe2e8; padding-bottom:12px; margin-bottom:12px; }
    .side-section:last-child { border-bottom:0; margin-bottom:0; padding-bottom:0; }
    .section-kicker { color:#0e7c71; font:700 10px/1.2 Consolas,monospace; letter-spacing:.09em; text-transform:uppercase; }
    .section-title { margin:3px 0 7px; color:#102c44; font-size:14px; font-weight:800; }
    .brief-list { margin:0; padding-left:18px; color:#43596b; font-size:12px; line-height:1.55; }
    .device-pills { display:flex; flex-wrap:wrap; gap:4px; }
    .device-pill { border:1px solid #c7d2dc; background:#f8fafc; border-radius:4px; padding:3px 5px; font:11px/1.2 Consolas,monospace; color:#274257; }
    .device-pill.input { border-left:3px solid #2c84d8; }
    .device-pill.output { border-left:3px solid #e48924; }
    .editor-stage { min-height:570px; }
    .stage-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; }
    .stage-heading h2 { margin:0; color:#0d2a42; font-size:18px; }
    .stage-heading p { margin:4px 0 0; color:#627485; font-size:12px; }
    .stage-badge { flex:none; border-radius:999px; padding:5px 9px; background:#e9f9f6; color:#08736a; font:700 11px/1 Consolas,monospace; }
    .wiring-board { position:relative; min-height:500px; border:1px solid #97a8b7; background:linear-gradient(90deg,rgba(15,50,78,.035) 1px,transparent 1px),linear-gradient(rgba(15,50,78,.035) 1px,transparent 1px),#edf2f5; background-size:20px 20px; overflow:hidden; }
    .wiring-board canvas { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
    .wiring-columns { position:relative; z-index:2; display:grid; grid-template-columns:minmax(190px,1fr) 170px minmax(190px,1fr); gap:34px; padding:18px; }
    .terminal-bank { background:rgba(255,255,255,.95); border:1px solid #9cadba; box-shadow:0 3px 10px rgba(34,62,83,.08); }
    .terminal-bank h3 { margin:0; padding:9px 10px; background:#173a55; color:#fff; font-size:12px; }
    .terminal-list { padding:6px; display:grid; gap:4px; }
    .terminal { display:flex; align-items:center; gap:7px; width:100%; min-height:32px; padding:5px 7px; border:1px solid #c9d2d9; background:#fff; color:#243c4f; cursor:pointer; text-align:left; font-size:11px; }
    .terminal:hover,.terminal.pending { border-color:#0aa795; background:#e8faf7; }
    .terminal.connected { background:#f0f8ff; border-color:#6ba8dc; }
    .terminal-dot { flex:none; width:13px; height:13px; border:2px solid #233e53; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 3px #dfe7ed; }
    .terminal.pending .terminal-dot { border-color:#0a8c80; box-shadow:inset 0 0 0 3px #a8eee4; }
    .terminal-code { margin-left:auto; font:700 10px/1 Consolas,monospace; color:#27668f; }
    .plc-rack { align-self:start; background:#263b4b; border:5px solid #172936; color:#fff; box-shadow:0 7px 18px rgba(10,30,45,.25); }
    .plc-brand { padding:9px 8px; border-bottom:1px solid #607382; font:800 11px/1 Consolas,monospace; }
    .plc-bank-label { padding:6px 8px 3px; color:#9fb1bf; font:10px/1 Consolas,monospace; }
    .plc-terminal { display:flex; align-items:center; gap:7px; width:100%; border:0; border-top:1px solid #435967; background:#2e4657; color:#dce7ed; padding:5px 8px; cursor:pointer; font:11px/1.2 Consolas,monospace; }
    .plc-terminal:hover,.plc-terminal.pending { background:#12695f; color:#fff; }
    .plc-terminal.used { color:#52e5cf; }
    .plc-led { width:7px; height:7px; border-radius:50%; background:#14232d; border:1px solid #78909f; }
    .plc-terminal.used .plc-led { background:#3af1cd; box-shadow:0 0 7px #3af1cd; }
    .wiring-help { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; border-top:1px solid #aebdc8; background:#fff; color:#4c6173; font-size:12px; }
    .wiring-help button { border:1px solid #aeb9c2; background:#fff; border-radius:4px; padding:5px 8px; cursor:pointer; }
    .wiring-board { min-height:1120px; overflow:auto; background:linear-gradient(90deg,rgba(15,50,78,.035) 1px,transparent 1px),linear-gradient(rgba(15,50,78,.035) 1px,transparent 1px),#e7ecef; background-size:20px 20px; }
    .plc-external-panel { position:relative; z-index:2; min-width:930px; height:370px; margin:165px 18px 185px; border:5px solid #182a37; background:#fff; box-shadow:0 10px 26px rgba(18,42,58,.18); }
    .input-terminal-rail { position:absolute; left:96px; right:22px; top:0; display:flex; align-items:start; justify-content:center; min-height:72px; border-bottom:2px solid #344b5b; background:#f9fafb; }
    .fixed-terminal,.plc-external-panel .plc-terminal { position:relative; flex:1 1 38px; min-width:36px; width:auto; height:70px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:1px; overflow:visible; border:0; border-right:1px solid #aeb9c1; border-top:0; padding:3px 1px; background:#fff; color:#172d3c; cursor:pointer; font:700 10px/1.1 Consolas,monospace; }
    .fixed-terminal { cursor:default; }
    .screw-head { display:grid; place-items:center; width:30px; height:30px; flex:none; border:2px solid #3c4c56; border-radius:50%; background:radial-gradient(circle,#fff 0 48%,#e3e7e9 49% 100%); color:#3b4850; font:400 26px/1 Arial,sans-serif; }
    .fixed-terminal b,.plc-address { margin-top:4px; font:900 17px/1 Consolas,monospace; letter-spacing:.01em; }
    .plc-external-panel .plc-led { position:absolute; right:3px; top:3px; width:6px; height:6px; }
    .plc-external-panel .plc-terminal:hover,.plc-external-panel .plc-terminal.pending { background:#eaf9f6; color:#075e57; }
    .plc-external-panel .plc-terminal.used { background:#edf8ff; color:#146ca0; }
    .plc-external-panel .plc-terminal.used .screw-head { border-color:#187dab; box-shadow:inset 0 0 0 4px #ccecff; }
    .plc-external-panel .plc-terminal.has-installed-device { z-index:5; }
    .plc-external-panel .plc-terminal.drop-ready { background:#c9f7ed; box-shadow:inset 0 0 0 3px #11a68f; }
    .plc-external-panel .plc-terminal.drop-ready .screw-head { border-color:#087a6d; transform:scale(1.08); }
    .power-terminal-stack { position:absolute; left:0; top:80px; display:grid; gap:24px; }
    .power-terminal-stack > div { display:flex; align-items:center; gap:7px; padding-left:6px; color:#283f4e; font:700 12px/1 Consolas,monospace; }
    .plc-panel-center { position:absolute; inset:96px 130px 104px 130px; display:flex; flex-direction:column; align-items:center; justify-content:center; color:#132e40; }
    .plc-panel-center span { color:#7b8d99; font:700 10px/1 Consolas,monospace; letter-spacing:.16em; }
    .plc-panel-center strong { margin-top:13px; font-size:34px; font-weight:500; letter-spacing:.04em; }
    .plc-panel-center small { margin-top:9px; color:#0b7b70; font-size:16px; font-weight:800; }
    .output-terminal-rail { position:absolute; left:96px; right:22px; bottom:0; height:78px; display:grid; grid-template-columns:repeat(4,1fr); gap:8px; align-items:end; }
    .output-terminal-group { position:relative; display:flex; align-items:end; border:1px solid #82939f; border-bottom:0; background:#f9fafb; padding-top:15px; }
    .output-terminal-group .common-label { position:absolute; top:3px; left:4px; color:#243b4a; font:900 12px/1 Consolas,monospace; }
    .output-terminal-group .plc-terminal { height:60px; }
    .output-terminal-group .screw-head { width:28px; height:28px; font-size:24px; }
    .component-zone { position:relative; z-index:2; min-width:930px; display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 18px 18px; }
    .wiring-component-zone { position:relative; z-index:2; min-width:930px; margin:18px; }
    .input-component-zone { margin-bottom:30px; }
    .output-component-zone { margin-top:30px; }
    .component-tray { border:1px solid #99aab6; background:rgba(255,255,255,.96); box-shadow:0 5px 14px rgba(26,54,72,.08); }
    .tray-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 10px; background:#183a52; color:#fff; }
    .output-tray .tray-heading { background:#654316; }
    .tray-heading span { color:#8de1d5; font:700 10px/1 Consolas,monospace; letter-spacing:.1em; }
    .output-tray .tray-heading span { color:#f1c986; }
    .tray-heading h3 { margin:4px 0 0; font-size:14px; }
    .tray-heading > b { border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:5px 8px; font:700 11px/1 Consolas,monospace; }
    .component-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:7px; padding:9px; }
    .component-tray-empty { grid-column:1/-1; display:grid; place-items:center; min-height:64px; border:1px dashed #a7b6c0; background:#f4f8fa; color:#5a7180; font-size:12px; }
    .field-component { position:relative; display:grid; grid-template-columns:52px minmax(82px,1fr) auto; gap:8px; align-items:center; width:100%; min-height:92px; margin:0; padding:8px 9px; text-align:left; touch-action:none; overflow:visible; background:#fff; }
    .field-component.dragging { opacity:.4; cursor:grabbing; }
    .field-component.connected { border-color:#248eb1; box-shadow:inset 0 0 0 1px #248eb1; }
    .field-component.pending { border-color:#0a9a86; box-shadow:0 0 0 3px rgba(10,154,134,.2); }
    .field-component .terminal-dot { position:absolute; left:50%; width:8px; height:8px; border:2px solid #516875; border-radius:50%; background:#fff; transform:translateX(-50%); z-index:4; }
    .field-component.input-component .terminal-dot { bottom:-6px; }
    .field-component.output-component .terminal-dot { top:-6px; }
    .field-component .component-copy { min-width:0; }
    .field-component .component-copy strong,.field-component .component-copy small { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .field-component .component-copy strong { color:#18384e; font:900 16px/1.2 Consolas,monospace; }
    .field-component .component-copy small { margin-top:5px; color:#405d6e; font-size:13px; font-weight:700; line-height:1.3; }
    .field-component .terminal-code { align-self:start; border-radius:3px; padding:5px 6px; background:#edf3f6; color:#244455; font:900 13px/1 Consolas,monospace; }
    .input-contact-symbol { position:relative; display:block; width:52px; height:72px; color:#172c39; }
    .input-contact-symbol i { position:absolute; display:block; box-sizing:border-box; }
    .input-contact-symbol .contact-node { left:22px; width:9px; height:9px; border:2px solid currentColor; border-radius:50%; background:#fff; z-index:2; }
    .input-contact-symbol .contact-node.top { top:12px; }
    .input-contact-symbol .contact-node.bottom { bottom:12px; }
    .input-contact-symbol .contact-stem { left:25.5px; width:2px; background:currentColor; }
    .input-contact-symbol .contact-stem.top { top:0; height:13px; }
    .input-contact-symbol .contact-stem.bottom { bottom:0; height:13px; }
    .input-contact-symbol .contact-blade { left:25px; top:55px; width:34px; height:2.5px; background:currentColor; transform-origin:left center; transform:rotate(-57deg); }
    .input-contact-symbol.no .contact-blade { width:29px; transform:rotate(-49deg); }
    .input-contact-symbol.nc .contact-blade { width:35px; transform:rotate(-90deg); }
    .input-contact-symbol.nc::after { content:'NC'; position:absolute; right:-3px; top:27px; color:#b23838; font:800 7px/1 Consolas,monospace; }
    .input-contact-symbol .contact-actuator { display:none; }
    .input-contact-symbol.pushbutton .contact-actuator { display:block; right:2px; top:27px; width:14px; height:2px; background:#273d49; box-shadow:8px 0 0 -1px #273d49; }
    .input-contact-symbol.overload .contact-actuator { display:block; left:18px; top:32px; width:16px; height:2px; background:#b23838; transform:rotate(48deg); }
    .input-contact-symbol.overload .contact-actuator::after { content:''; position:absolute; inset:0; background:#b23838; transform:rotate(84deg); }
    .input-contact-symbol.limit .contact-actuator { display:block; right:0; top:29px; width:14px; height:10px; border:2px solid #273d49; background:#fff; }
    .selector-switch-symbol { position:relative; display:block; width:62px; height:72px; color:#172c39; }
    .selector-switch-symbol i { position:absolute; display:block; box-sizing:border-box; }
    .selector-common,.selector-point { width:9px; height:9px; border:2px solid currentColor; border-radius:50%; background:#fff; z-index:2; }
    .selector-common { left:27px; top:5px; }
    .selector-point { bottom:8px; }
    .selector-point.p0 { left:5px; }
    .selector-2 .selector-point.p1 { right:5px; }
    .selector-3 .selector-point.p1 { left:27px; }
    .selector-3 .selector-point.p2 { right:5px; }
    .selector-arm { left:31px; top:13px; width:2px; height:43px; background:currentColor; transform-origin:top center; }
    .selector-switch-symbol.position-0 .selector-arm { transform:rotate(31deg); }
    .selector-2.position-1 .selector-arm { transform:rotate(-31deg); }
    .selector-3.position-1 .selector-arm { transform:rotate(0); }
    .selector-3.position-2 .selector-arm { transform:rotate(-31deg); }
    .selector-label { position:absolute; bottom:-3px; color:#7a3f22; font:700 8px/1 Consolas,monospace; font-style:normal; }
    .selector-label.l0 { left:7px; } .selector-2 .selector-label.l1 { right:7px; }
    .selector-3 .selector-label.l1 { left:29px; } .selector-3 .selector-label.l2 { right:7px; }
    .output-load-symbol { position:relative; display:grid; place-items:center; width:52px; height:52px; border:2px solid #263a47; border-radius:50%; background:#fff; color:#182e3d; }
    .output-load-symbol::before,.output-load-symbol::after { content:''; position:absolute; top:50%; width:12px; height:2px; background:#263a47; transform:translateY(-50%); }
    .output-load-symbol::before { right:100%; }
    .output-load-symbol::after { left:100%; }
    .output-load-symbol b { max-width:45px; overflow:hidden; text-overflow:ellipsis; font:800 10px/1 Consolas,monospace; text-align:center; }
    .output-load-symbol.long-code b { font-size:7px; }
    .output-load-symbol.pilot-lamp .ray { position:absolute; left:50%; top:50%; width:68px; height:2px; background:#263a47; transform-origin:center; z-index:-1; }
    .output-load-symbol.pilot-lamp .ray.r1 { transform:translate(-50%,-50%) rotate(45deg); }
    .output-load-symbol.pilot-lamp .ray.r2 { transform:translate(-50%,-50%) rotate(-45deg); }
    .output-load-symbol.pilot-lamp .ray.r3 { transform:translate(-50%,-50%) rotate(90deg); }
    .output-load-symbol.pilot-lamp .ray.r4 { transform:translate(-50%,-50%) rotate(0); }
    .output-load-symbol.buzzer { border-style:double; border-width:4px; }
    .contact-type-badge { display:inline-flex; margin-top:5px; border-radius:999px; padding:3px 6px; font:700 8px/1 sans-serif; }
    .contact-type-badge.no { background:#dff0ff; color:#176d9f; }
    .contact-type-badge.nc { background:#ffe4e4; color:#a02f2f; }
    .contact-type-badge.selector { background:#eee8ff; color:#6243a6; }
    .contact-type-badge.load { background:#ffefd5; color:#855718; }
    .installed-device { position:absolute; left:50%; width:110px; display:flex; align-items:center; pointer-events:none; color:#172c39; transform:translateX(-50%); z-index:9; }
    .installed-device.input { bottom:calc(100% - 18px); flex-direction:column; }
    .installed-device.output { top:calc(100% - 18px); flex-direction:column; }
    .installed-device .installed-lead { display:block; flex:none; width:2px; background:#1b303d; }
    .installed-device.input .installed-lead { height:calc(24px + var(--install-stagger,0) * 34px); }
    .installed-device.output .installed-lead { height:34px; }
    .installed-device.output .installed-return-lead { display:block; width:2px; height:28px; flex:none; background:#1b303d; }
    .installed-name { display:block; width:110px; text-align:center; line-height:1.2; }
    .installed-name b,.installed-name small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .installed-name b { color:#0b2c43; font:900 16px/1.1 Consolas,monospace; }
    .installed-name small { margin-top:4px; color:#3f5969; font:800 12px/1.25 "Microsoft JhengHei",sans-serif; }
    .installed-contact-type { margin:5px 0 3px; border:1px solid #d8c6bd; border-radius:999px; padding:4px 6px; background:#fff; color:#7d382f; font:900 11px/1 sans-serif; white-space:nowrap; }
    .installed-device.input .input-contact-symbol,.installed-device.input .selector-switch-symbol { flex:none; }
    .installed-device.output .output-load-symbol { flex:none; margin:0 0 5px; }
    .installed-device.output .output-load-symbol::before,.installed-device.output .output-load-symbol::after { display:none; }
    .wiring-drag-active .plc-terminal.pending { animation:terminalReady 1s ease-in-out infinite; }
    @keyframes terminalReady { 50% { box-shadow:inset 0 0 0 3px rgba(14,159,139,.42); } }
    .machine-stage { min-height:500px; border:1px solid #a2b1bc; background:#e9eef1; position:relative; overflow:hidden; }
    .machine-toolbar { display:flex; flex-wrap:wrap; gap:6px; padding:10px; background:#fff; border-bottom:1px solid #b7c2ca; }
    .machine-toolbar button { border:1px solid #8ca0ae; border-radius:4px; background:#f7f9fa; padding:7px 10px; cursor:pointer; }
    .machine-toolbar button.primary { background:#0a8478; border-color:#0a8478; color:#fff; }
    .virtual-input-panel { margin:12px; border:1px solid #aebdc7; background:#fff; box-shadow:0 4px 12px rgba(25,51,69,.08); }
    .virtual-input-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 12px; border-bottom:1px solid #c5d0d7; background:#173b54; color:#fff; }
    .virtual-input-heading span { color:#72dfcf; font:800 9px/1 Consolas,monospace; letter-spacing:.13em; }
    .virtual-input-heading h3 { margin:4px 0 0; font-size:15px; }
    .virtual-input-heading > small { max-width:330px; color:#c9dbe7; font-size:11px; line-height:1.4; text-align:right; }
    .sim-input-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:7px; max-height:330px; overflow:auto; padding:9px; background:#edf2f5; }
    .sim-input-control { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:9px; align-items:center; min-height:72px; border:1px solid #b8c5ce; border-left:4px solid #3984b7; border-radius:5px; padding:8px; background:#fff; color:#173246; text-align:left; cursor:pointer; transition:border-color .15s ease,background .15s ease,transform .08s ease; }
    .sim-input-control:hover { border-color:#258d7d; background:#f5fffc; }
    .sim-input-control:active { transform:translateY(1px); }
    .sim-input-control.on { border-color:#10a48e; border-left-color:#10a48e; background:#eafaf6; box-shadow:inset 0 0 0 1px rgba(16,164,142,.18); }
    .sim-input-control:disabled { opacity:.48; cursor:not-allowed; }
    .sim-control-visual { position:relative; display:block; width:38px; height:38px; }
    .sim-control-visual.momentary { border:2px solid #314b5d; border-radius:50%; background:radial-gradient(circle at 40% 35%,#f8fafb 0 22%,#b7c3ca 24% 54%,#657986 56% 100%); box-shadow:inset 0 0 0 4px #dbe2e6; }
    .sim-input-control.momentary.on .sim-control-visual { background:radial-gradient(circle at 45% 45%,#fff 0 15%,#41d2b8 18% 55%,#087a6c 58% 100%); box-shadow:inset 0 0 0 4px #bdf2e8,0 0 8px rgba(23,190,160,.55); }
    .sim-control-visual.switch { width:40px; height:24px; border:2px solid #526775; border-radius:999px; background:#cbd4da; }
    .sim-control-visual.switch i { position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:left .16s ease; }
    .sim-input-control.switch.on .sim-control-visual { border-color:#078274; background:#39c9b1; }
    .sim-input-control.switch.on .sim-control-visual i { left:19px; }
    .sim-control-visual.selector { border:3px solid #536a79; border-radius:50%; background:radial-gradient(circle,#f8fafb 0 35%,#c0cbd1 37% 64%,#758793 66% 100%); }
    .sim-control-visual.selector i { position:absolute; left:17px; top:3px; width:4px; height:15px; border-radius:2px; background:#1f3747; transform-origin:2px 16px; transform:rotate(-42deg); }
    .sim-input-control.selector.on .sim-control-visual { border-color:#8d6324; box-shadow:0 0 0 3px #f5dfb9; }
    .sim-input-control.selector.on .sim-control-visual i { transform:rotate(42deg); background:#a45d0e; }
    .sim-input-copy { min-width:0; }
    .sim-input-copy strong,.sim-input-copy small,.sim-input-copy em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .sim-input-copy strong { font:900 14px/1.1 Consolas,monospace; }
    .sim-input-copy small { margin-top:4px; color:#4f6675; font-size:11px; }
    .sim-input-copy em { margin-top:4px; color:#738591; font-size:9px; font-style:normal; }
    .sim-input-state { display:flex; min-width:48px; flex-direction:column; align-items:center; gap:5px; }
    .sim-input-state b { border-radius:4px; padding:4px 6px; background:#e4edf2; color:#17668f; font:900 12px/1 Consolas,monospace; }
    .sim-input-state small { color:#778792; font:900 9px/1 Consolas,monospace; }
    .sim-input-control.on .sim-input-state small { color:#078372; }
    .machine-scene { position:relative; min-height:350px; padding:26px; display:grid; place-items:center; }
    .machine-visual { width:min(640px,92%); min-height:270px; border:2px solid #263e50; background:#f8fafb; box-shadow:0 12px 25px rgba(27,53,72,.14); position:relative; overflow:hidden; }
    .machine-titlebar { display:flex; justify-content:space-between; padding:8px 10px; background:#203a4d; color:#fff; font:700 11px/1 Consolas,monospace; }
    .machine-body { position:relative; min-height:230px; padding:24px; }
    .sim-motor { position:absolute; width:72px; height:72px; border:7px solid #6d7d87; background:#d8e0e5; border-radius:50%; display:grid; place-items:center; color:#243c4d; font:800 12px/1 Consolas,monospace; }
    .sim-motor.on { border-color:#18a58f; animation:motorPulse .7s linear infinite; }
    .sim-lamp-row { display:flex; flex-wrap:wrap; gap:10px; position:absolute; left:20px; right:20px; bottom:16px; }
    .sim-lamp { min-width:44px; text-align:center; font:10px/1.2 Consolas,monospace; color:#5e707c; }
    .sim-lamp::before { content:''; display:block; margin:0 auto 4px; width:18px; height:18px; border-radius:50%; border:2px solid #5b6a75; background:#d3d9dd; }
    .sim-lamp.on::before { border-color:#0d8a78; background:#47e5c6; box-shadow:0 0 14px rgba(32,223,187,.8); }
    .sim-lamp.alarm.on::before { border-color:#a63333; background:#ff5555; box-shadow:0 0 14px rgba(255,70,70,.75); animation:alarmBlink .8s steps(1) infinite; }
    .sim-tank { position:absolute; left:50%; top:34px; transform:translateX(-50%); width:120px; height:150px; border:6px solid #596e7e; border-top-width:12px; background:#e8f3f6; overflow:hidden; }
    .sim-water { position:absolute; left:0; right:0; bottom:0; height:var(--level,25%); background:linear-gradient(#5ac7e9,#258dbb); transition:height .55s ease; }
    .sim-door-frame { position:absolute; left:50%; top:24px; transform:translateX(-50%); width:250px; height:180px; border:12px solid #485b69; border-bottom-width:8px; overflow:hidden; background:#d8e4e8; }
    .sim-door { position:absolute; top:0; bottom:0; width:50%; background:linear-gradient(90deg,#a9bbc7,#e4ebef); border:1px solid #738893; transition:transform .65s ease; }
    .sim-door.left { left:0; transform:translateX(calc(var(--open,0) * -100%)); }
    .sim-door.right { right:0; transform:translateX(calc(var(--open,0) * 100%)); }
    .sim-conveyor { position:absolute; left:45px; right:45px; top:105px; height:42px; border:4px solid #536878; background:repeating-linear-gradient(90deg,#758a98 0 22px,#526774 22px 28px); background-position:var(--belt,0) 0; transition:background-position .2s linear; }
    .sim-slider { position:absolute; top:69px; left:var(--position,10%); width:64px; height:56px; background:#f0a33b; border:4px solid #7a4f18; transition:left .65s ease; }
    .sim-hopper { position:absolute; left:50%; transform:translateX(-50%); top:25px; width:150px; height:90px; background:#aebdc7; border:5px solid #4e6472; clip-path:polygon(0 0,100% 0,72% 100%,28% 100%); }
    .sim-scale { position:absolute; left:50%; transform:translateX(-50%); top:130px; width:155px; height:55px; border:5px solid #506777; background:#e9eef1; display:grid; place-items:center; font:800 22px/1 Consolas,monospace; color:#163750; }
    @keyframes motorPulse { 50%{box-shadow:0 0 0 8px rgba(24,165,143,.16)} }
    @keyframes alarmBlink { 50%{opacity:.25} }
    .assessment-card { border:1px solid #acbac4; background:#fff; }
    .score-hero { display:grid; grid-template-columns:110px 1fr; gap:18px; align-items:center; padding:18px; background:#0d2f49; color:#fff; }
    .score-ring { width:96px; height:96px; border-radius:50%; display:grid; place-items:center; background:conic-gradient(#41d6bd var(--score,0%),#28485f 0); position:relative; }
    .score-ring::after { content:''; position:absolute; inset:9px; border-radius:50%; background:#0d2f49; }
    .score-ring strong { position:relative; z-index:1; font:800 24px/1 Consolas,monospace; }
    .rubric-list { padding:12px; display:grid; gap:8px; }
    .rubric-item { display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:start; border:1px solid #d7dfe5; padding:9px; }
    .rubric-state { width:22px; height:22px; border-radius:50%; display:grid; place-items:center; background:#e1e7ec; color:#607383; font-weight:800; }
    .rubric-item.pass .rubric-state { background:#c9f6ec; color:#087267; }
    .rubric-item.fail .rubric-state { background:#ffe0df; color:#a53535; }
    .rubric-item strong { display:block; font-size:12px; color:#19384d; }
    .rubric-item p { margin:3px 0 0; font-size:11px; color:#667988; }
    .rubric-weight { font:700 11px/1 Consolas,monospace; color:#687b89; }
    .right-stack { display:flex; flex-direction:column; gap:10px; }
    .mini-panel { border:1px solid #c8d3dc; background:#fff; padding:10px; }
    .mini-panel h3 { margin:0 0 8px; font-size:13px; color:#17364d; }
    .io-table-heading { display:grid; grid-template-columns:1fr auto; gap:8px; margin-bottom:5px; padding:0 9px; color:#748692; font-size:10px; }
    .io-live-grid { display:grid; grid-template-columns:1fr; gap:5px; }
    .io-live { display:grid; grid-template-columns:10px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:52px; border:1px solid #d5dde3; border-left:4px solid #2c84d8; background:#f8fafb; padding:7px 9px; font-family:Consolas,monospace; cursor:pointer; }
    .io-live.output { border-left-color:#df8a2a; }
    .io-live::before { content:''; width:9px; height:9px; border-radius:50%; background:#9caab4; }
    .io-live strong { display:block; color:#17364d; font-size:15px; line-height:1.1; }
    .io-live small { display:block; margin-top:3px; color:#687b88; font-family:"Microsoft JhengHei",sans-serif; font-size:10px; }
    .io-live > span { min-width:54px; border-radius:4px; padding:5px 7px; background:#e8eef2; color:#1d506e; text-align:center; font-size:14px; font-weight:800; }
    .io-live.on { border-color:#43bba7; background:#eafaf7; color:#096c63; }
    .io-live.on::before { background:#20c4a8; box-shadow:0 0 5px #20c4a8; }
    .compile-dialog { position:fixed; inset:0; z-index:4000; display:grid; place-items:center; background:rgba(4,20,32,.58); padding:24px; }
    .compile-dialog-card { width:min(560px,95vw); max-height:80vh; overflow:auto; background:#fff; border:1px solid #51697a; box-shadow:0 22px 55px rgba(0,0,0,.35); }
    .compile-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; color:#fff; background:#9e2e2e; }
    .compile-dialog-head.success { background:#08796e; }
    .compile-dialog-head button { border:0; background:transparent; color:#fff; font-size:20px; cursor:pointer; }
    .compile-dialog-body { padding:14px; }
    .compile-dialog-body p { margin:0 0 10px; color:#43586a; font-size:12px; }
    .compile-dialog-body .issue-item { display:block; margin-bottom:6px; }
    .back-home-button { border:1px solid rgba(255,255,255,.28); background:rgba(255,255,255,.08); color:#e7f2fa; border-radius:5px; padding:6px 9px; cursor:pointer; font-size:12px; }
    .back-home-button:hover { background:#fff; color:#0b2d47; }
    .workflow button.locked { cursor:not-allowed; opacity:.55; background:#e5e9ed; }
    .stage-notice { margin-top:6px; border-left:3px solid #d68a25; background:#fff7e8; color:#754b16; padding:7px 9px; font-size:11px; }

    .question-home { min-height:100vh; background:#eef2f4; color:#102b40; }
    .home-hero { position:relative; overflow:hidden; min-height:370px; padding:28px clamp(24px,6vw,92px) 42px; background:radial-gradient(circle at 82% 18%,rgba(51,218,194,.19),transparent 27%),linear-gradient(130deg,#061c2e 0%,#0a3551 63%,#0a5a62 100%); color:#fff; }
    .home-hero::after { content:'X0   X1   X2   Y0   Y1   M0   T0'; position:absolute; right:-24px; bottom:22px; color:rgba(255,255,255,.05); font:800 clamp(38px,6vw,84px)/1 Consolas,monospace; white-space:nowrap; transform:rotate(-4deg); }
    .home-brand { position:relative; z-index:1; display:flex; align-items:center; gap:12px; color:#bed5e5; font-size:13px; letter-spacing:.06em; }
    .home-hero-copy { position:relative; z-index:1; max-width:760px; margin-top:54px; }
    .home-eyebrow { color:#4fe3ce; font:700 11px/1.2 Consolas,monospace; letter-spacing:.15em; }
    .home-hero h1 { margin:10px 0 12px; font-size:clamp(34px,5vw,62px); line-height:1.04; letter-spacing:-.04em; }
    .home-hero p { max-width:700px; margin:0; color:#c4d9e7; font-size:15px; line-height:1.7; }
    .home-flow { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:4px; margin-top:34px; }
    .home-flow span { display:flex; align-items:center; gap:7px; padding:8px 12px; border:1px solid rgba(255,255,255,.17); background:rgba(255,255,255,.07); color:#d9e8f2; font-size:12px; }
    .home-flow b { display:grid; place-items:center; width:19px; height:19px; border-radius:50%; background:#39d2ba; color:#062a36; font:800 10px/1 Consolas,monospace; }
    .question-picker-section { padding:34px clamp(20px,5vw,76px) 64px; }
    .picker-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; margin-bottom:22px; }
    .picker-heading span { color:#087a70; font:700 10px/1 Consolas,monospace; letter-spacing:.13em; }
    .picker-heading h2 { margin:6px 0 0; font-size:26px; }
    .picker-heading p { margin:0; color:#607280; font-size:12px; }
    .question-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
    .question-card { --card-accent:#1b91be; position:relative; display:flex; flex-direction:column; min-height:380px; padding:18px; border:1px solid #c3cfd7; border-top:4px solid var(--card-accent); background:#fff; box-shadow:0 5px 18px rgba(22,50,69,.07); transition:transform .18s ease,box-shadow .18s ease; }
    .question-card:hover { transform:translateY(-3px); box-shadow:0 12px 28px rgba(22,50,69,.13); }
    .question-card.q2 { --card-accent:#2779c6; } .question-card.q3 { --card-accent:#7655c9; } .question-card.q4 { --card-accent:#d48424; } .question-card.q5 { --card-accent:#168c78; } .question-card.q6 { --card-accent:#1d6a91; }
    .question-card-top { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .question-number { color:var(--card-accent); font:800 28px/1 Consolas,monospace; }
    .question-code { color:#758693; font:10px/1 Consolas,monospace; }
    .question-card h3 { margin:18px 0 4px; font-size:19px; color:#15354c; }
    .question-card > p { margin:0 0 13px; color:var(--card-accent); font-size:12px; font-weight:700; }
    .question-card ul { flex:1; margin:0; padding-left:18px; color:#566b7b; font-size:12px; line-height:1.65; }
    .question-card-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:15px; }
    .question-card-meta span { border:1px solid #d7e0e6; background:#f6f9fa; border-radius:999px; padding:4px 7px; color:#526878; font-size:10px; }
    .progress-line { height:4px; margin:16px 0 9px; overflow:hidden; background:#e2e8ec; }
    .progress-line span { display:block; height:100%; background:var(--card-accent); }
    .question-card-foot { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .question-card-foot small { color:#7a8b97; font-size:10px; }
    .question-card-foot button { border:0; border-radius:4px; padding:8px 11px; background:#123b56; color:#fff; cursor:pointer; font-size:11px; }
    .question-card-foot button:hover { background:var(--card-accent); }

    .simulation-details { display:grid; grid-template-columns:1.05fr 1.25fr .95fr; gap:10px; padding:0 12px 12px; }
    .simulation-details > section { min-width:0; border:1px solid #bdc9d1; background:#fff; padding:12px; }
    .simulation-details h3 { margin:4px 0 10px; color:#183a51; font-size:14px; }
    .operation-guide ol { display:grid; gap:7px; margin:0; padding:0; list-style:none; }
    .operation-guide li { display:grid; grid-template-columns:23px 1fr; gap:8px; align-items:start; }
    .operation-guide li > span { display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#dff7f2; color:#08776c; font:800 10px/1 Consolas,monospace; }
    .operation-guide li p { margin:2px 0 0; color:#536878; font-size:11px; line-height:1.45; }
    .process-output-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; max-height:240px; overflow:auto; }
    .process-output { display:grid; grid-template-columns:9px 1fr auto; gap:6px; align-items:center; border:1px solid #d9e1e6; padding:6px; background:#f8fafb; }
    .process-led { width:8px; height:8px; border-radius:50%; background:#9daab3; }
    .process-output strong,.process-output small { display:block; font:10px/1.2 Consolas,monospace; }
    .process-output small { margin-top:2px; color:#7a8993; }
    .process-output > b { color:#81909a; font:800 9px/1 Consolas,monospace; }
    .process-output.on { border-color:#45b9a6; background:#eafaf7; }
    .process-output.on .process-led { background:#22c5aa; box-shadow:0 0 6px #22c5aa; }
    .process-output.on > b { color:#078070; }
    .log-list { display:grid; gap:5px; max-height:240px; overflow:auto; }
    .log-list > div { display:grid; grid-template-columns:56px 1fr; gap:7px; border-bottom:1px solid #e2e7ea; padding-bottom:5px; }
    .log-list time { color:#7b8c97; font:9px/1.4 Consolas,monospace; }
    .log-list p { margin:0; }
    .log-list strong,.log-list small { display:block; font-size:10px; line-height:1.3; }
    .log-list small { margin-top:2px; color:#748691; }
    .empty-log { color:#7c8b96; font-size:11px; }

    @media (max-width: 1180px) { .workspace { grid-template-columns:240px minmax(0,1fr); } .workspace.ladder-workspace { grid-template-columns:220px minmax(0,1fr); } .workspace > .panel:last-child,.workspace.ladder-workspace > .panel:last-child { grid-column:1 / -1; } .mission-strip { grid-template-columns:1fr; } .question-card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .simulation-details { grid-template-columns:repeat(2,minmax(0,1fr)); } .operation-log { grid-column:1 / -1; } }
    @media (max-width: 760px) { .academy-header-main,.mission-strip { padding-left:10px; padding-right:10px; } .header-status { display:flex; } .header-status .status-chip { display:none; } .question-tabs { padding:0 10px; } .workspace,.workspace.ladder-workspace { grid-template-columns:1fr; } .workspace > .panel:last-child,.workspace.ladder-workspace > .panel:last-child { grid-column:auto; } .workflow { grid-template-columns:repeat(2,1fr); } .wiring-columns { grid-template-columns:1fr; gap:12px; } .plc-rack { width:100%; } .home-hero { min-height:420px; } .question-card-grid,.simulation-details { grid-template-columns:1fr; } .operation-log { grid-column:auto; } .picker-heading { align-items:start; flex-direction:column; } .virtual-input-heading { align-items:flex-start; flex-direction:column; } .virtual-input-heading > small { text-align:left; } .sim-input-grid { grid-template-columns:1fr; } }
    @media (max-width: 760px) { .component-card-grid { grid-template-columns:1fr 1fr; } .plc-panel-center strong { font-size:28px; } .canvas-wrap { min-height:560px; } }

    /* Responsive workspace and readable PLC wiring board */
    html { font-size:clamp(14px,13.4px + .18vw,16px); }
    body { min-width:320px; overflow-x:hidden; }
    button { min-height:38px; }
    .app-shell { width:100%; }
    .toolbar { justify-content:space-between; min-height:58px; padding:9px clamp(12px,2vw,28px); background:#f4f7f9; border-bottom:1px solid #afbdc8; }
    .ladder-tool-strip { display:flex; flex:1 1 auto; flex-wrap:wrap; gap:6px; min-width:0; }
    .toolbar .ladder-tool-button { min-height:40px; border:1px solid #aebbc6; border-radius:6px; padding:7px 12px; background:#fff; color:#29465b; font-size:13px; font-weight:800; }
    .toolbar .ladder-tool-button.active { border-color:#168d80; background:#e6f8f5; color:#07695f; box-shadow:inset 0 0 0 1px #168d80; }
    .toolbar .compile-primary-button { min-width:132px; min-height:42px; border:1px solid #06756a; border-radius:6px; background:linear-gradient(180deg,#16a694,#08796e); color:#fff; font-size:15px; font-weight:900; box-shadow:0 4px 10px rgba(8,121,110,.2); }
    .toolbar .compile-primary-button:hover { border-color:#045d55; background:#076e64; }
    .workspace,.workspace.ladder-workspace,.workspace.wiring-workspace,.workspace.simulation-workspace,.workspace.assessment-workspace { width:100%; max-width:1920px; margin:0 auto; grid-template-columns:minmax(0,1fr); gap:clamp(8px,1vw,16px); padding:clamp(8px,1vw,16px); }
    .panel { padding:clamp(9px,1vw,14px); }
    .editor-area { width:100%; overflow:hidden; }
    .canvas-wrap { min-height:clamp(600px,calc(100dvh - 300px),940px); padding:clamp(8px,1vw,16px); scrollbar-gutter:stable both-edges; }
    .status-bar { font-size:clamp(11px,1vw,13px); }
    .info-panel .io-live-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
    .info-panel .compile-summary { margin-top:10px; }
    .il-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:12px 0 6px; color:#18364c; }
    .il-heading small { color:#6b7e8c; font-size:10px; text-align:right; }
    .info-panel .mono-box { min-height:92px; max-height:220px; }

    .wiring-board { width:100%; height:clamp(620px,calc(100dvh - 250px),960px); min-height:620px; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable both-edges; scroll-behavior:smooth; touch-action:pan-x pan-y; }
    .plc-external-panel,.wiring-component-zone { min-width:1240px; }
    .plc-external-panel { width:max(1240px,calc(100% - 36px)); height:390px; margin-top:180px; margin-bottom:205px; }
    .wiring-component-zone { width:max(1240px,calc(100% - 36px)); }
    .component-card-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; padding:11px; }
    .field-component { min-height:104px; grid-template-columns:62px minmax(100px,1fr) auto; padding:10px 11px; }
    .field-component .component-copy strong { font-size:18px; }
    .field-component .component-copy small { font-size:14px; }
    .field-component .terminal-code { font-size:14px; }
    .input-contact-symbol,.selector-switch-symbol { transform:scale(1.08); transform-origin:center; }
    .output-load-symbol { width:58px; height:58px; }
    .installed-device,.installed-name { width:124px; }
    .installed-name b { font-size:18px; }
    .installed-name small { font-size:13px; }
    .fixed-terminal,.plc-external-panel .plc-terminal { min-width:42px; height:76px; }
    .screw-head { width:34px; height:34px; font-size:28px; }
    .fixed-terminal b,.plc-address { font-size:18px; }
    .plc-panel-center strong { font-size:clamp(30px,3vw,42px); }

    .machine-stage { min-height:640px; overflow:visible; }
    .machine-toolbar { gap:8px; padding:12px; }
    .machine-toolbar button { min-height:40px; padding:8px 12px; }
    .machine-scene { min-height:430px; padding:clamp(12px,3vw,32px); }
    .machine-visual { width:min(900px,100%); min-height:350px; }
    .machine-titlebar { gap:12px; font-size:clamp(10px,1.1vw,13px); }
    .machine-body { min-height:310px; padding:24px; }
    .sim-motor { top:98px; width:82px; height:82px; border-width:8px; z-index:3; }
    .sim-motor span,.sim-motor small { display:block; text-align:center; }
    .sim-motor small { margin-top:3px; font:800 9px/1 Consolas,monospace; color:#667985; }
    .sim-motor.on small { color:#087568; }
    .sim-motor.motor-left { left:clamp(26px,8%,76px); }
    .sim-motor.motor-center { left:50%; transform:translateX(-50%); }
    .sim-motor.motor-right { right:clamp(26px,8%,76px); }
    .sim-conveyor { left:7%; right:7%; top:132px; }
    .sim-conveyor.on { animation:beltMove .65s linear infinite; }
    .sim-position-scale { position:absolute; left:7%; right:7%; top:62px; display:flex; justify-content:space-between; color:#506878; font:800 10px/1 Consolas,monospace; }
    .sim-slider { z-index:4; display:grid; place-items:center; gap:2px; }
    .sim-slider b,.sim-slider small { display:block; font:800 10px/1 Consolas,monospace; }
    .sim-slider.moving { box-shadow:0 0 0 7px rgba(240,163,59,.2); }
    .sim-tank { top:52px; width:150px; height:190px; }
    .sim-tank > b { position:absolute; z-index:2; inset:10px 0 auto; text-align:center; color:#34586d; font:900 12px/1 Consolas,monospace; }
    .sim-pipe-network { position:absolute; left:18%; right:18%; top:150px; height:6px; background:#607989; }
    .sim-door-frame { top:36px; width:min(300px,46%); height:215px; }
    .door-position { position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:3; border-radius:4px; padding:4px 7px; background:#17394e; color:#fff; font:800 10px/1 Consolas,monospace; }
    .sim-hopper { top:34px; width:180px; height:110px; transition:transform .25s ease; }
    .sim-hopper::after { content:''; position:absolute; left:50%; bottom:-30px; width:36px; height:34px; background:#536b79; transform:translateX(-50%); }
    .sim-hopper.gate-open::after { transform:translateX(-50%) rotate(28deg); transform-origin:top; }
    .sim-scale { top:185px; }
    .sim-gate-state { position:absolute; right:7%; top:94px; border:1px solid #9aaab5; padding:8px; color:#5d6f7b; font:800 10px/1 Consolas,monospace; }
    .sim-gate-state.on { border-color:#0e8e7e; background:#e7faf6; color:#087469; }
    .sim-valve { position:absolute; left:50%; top:20px; transform:translateX(-50%); width:58px; height:42px; display:grid; place-items:center; border:5px solid #667b87; border-radius:50%; background:#dce4e8; font:900 11px/1 Consolas,monospace; }
    .sim-valve.on { border-color:#d37b1d; background:#ffe0a9; box-shadow:0 0 12px rgba(211,123,29,.45); }
    .speed-state { position:absolute; right:7%; top:200px; display:flex; gap:5px; }
    .speed-state span { border:1px solid #9eacb5; padding:6px; color:#71808a; font:900 10px/1 Consolas,monospace; }
    .speed-state span.on { border-color:#0a8b7c; background:#e7faf6; color:#087469; }
    @keyframes beltMove { to { background-position:-56px 0; } }

    @media (max-width:1440px) {
      .info-panel .io-live-grid { grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); }
      .mission-strip { grid-template-columns:1fr; }
    }
    @media (max-width:900px) {
      .academy-header-main { align-items:flex-start; flex-direction:column; }
      .header-status { width:100%; justify-content:flex-start; }
      .mission-strip { padding:10px 12px; }
      .stage-heading { flex-direction:column; }
      .stage-badge { align-self:flex-start; }
      .simulation-details { grid-template-columns:1fr; }
      .operation-log { grid-column:auto; }
    }
    @media (max-width:600px) {
      .brand-title { font-size:16px; }
      .brand-subtitle { font-size:10px; }
      .toolbar { align-items:stretch; justify-content:stretch; }
      .ladder-tool-strip { display:grid; flex-basis:100%; grid-template-columns:repeat(2,minmax(0,1fr)); }
      .toolbar .ladder-tool-button { width:100%; padding-left:7px; padding-right:7px; }
      .toolbar .compile-primary-button { width:100%; }
      .workflow { grid-template-columns:1fr 1fr; }
      .mission-copy { display:none; }
      .wiring-board { height:calc(100dvh - 190px); min-height:560px; }
      .octal-address-notice { align-items:flex-start; flex-direction:column; }
      .component-card-grid { grid-template-columns:repeat(2,minmax(210px,1fr)); }
      .wiring-help { align-items:flex-start; flex-direction:column; min-width:700px; }
      .virtual-input-heading { align-items:flex-start; flex-direction:column; }
      .virtual-input-heading > small { text-align:left; }
      .sim-input-grid { grid-template-columns:1fr; }
      .machine-toolbar button { flex:1 1 140px; }
      .machine-titlebar { align-items:flex-start; flex-direction:column; }
      .machine-visual { min-width:680px; }
      .machine-scene { justify-content:start; overflow:auto; }
      .info-panel .io-live-grid { grid-template-columns:1fr; }
    }

    /* Ladder editor: full-width editor plus a non-overlapping live PLC/HMI sidebar. */
    .workspace.ladder-workspace { grid-template-columns:minmax(720px,1fr) minmax(360px,430px); align-items:start; }
    .ladder-workspace .editor-area { min-width:0; }
    .ladder-workspace .info-panel { position:sticky; top:8px; max-height:calc(100dvh - 16px); overflow:auto; scrollbar-gutter:stable; }
    .ladder-workspace .info-panel .io-live-grid { grid-template-columns:1fr; }

    .step-slot { border-color:#5d48a8; background:#f2efff; color:#34236f; font-size:13px; font-weight:900; }
    .instruction-output-slot { border-color:#1f5878; background:#edf7fc; color:#153f58; font-size:13px; font-weight:900; }
    .monitor-panel-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
    .monitor-panel-heading h3 { margin:0; }
    .monitor-panel-heading span { border-radius:999px; padding:3px 7px; background:#d9f8f1; color:#087466; font:900 9px/1 Consolas,monospace; }
    .hmi-register-note { margin:8px 0 10px; border-left:3px solid #7b61cf; background:#f5f2ff; padding:7px 8px; color:#56477f; font-size:10px; line-height:1.45; }
    .hmi-monitor-panel h4 { margin:12px 0 6px; color:#436075; font-size:11px; }
    .device-monitor-grid { display:grid; gap:5px; }
    .device-monitor-row { display:grid; grid-template-columns:9px minmax(0,1fr) auto; align-items:center; gap:8px; min-height:58px; border:1px solid #d5dde3; border-left:4px solid #7a5fc8; background:#faf9ff; padding:7px 8px; }
    .device-monitor-row.special { border-left-color:#1c8c7d; background:#f4fbfa; }
    .device-monitor-led { width:9px; height:9px; border-radius:50%; background:#a2adb5; }
    .device-monitor-row.on .device-monitor-led { background:#16b99f; box-shadow:0 0 6px #16b99f; }
    .device-monitor-row strong { display:block; color:#1b3650; font:900 15px/1 Consolas,monospace; }
    .device-monitor-row small,.device-monitor-row em { display:block; margin-top:3px; color:#657989; font-size:10px; font-style:normal; line-height:1.25; }
    .device-monitor-row em { color:#8a77b6; font-size:9px; }
    .device-monitor-value { min-width:62px; border-radius:4px; padding:6px 7px; background:#e8eef2; color:#164c6d; text-align:center; font:900 13px/1 Consolas,monospace; }
    .hmi-device-button,.hmi-word-control button { min-height:32px; border:1px solid #6f5ab0; border-radius:4px; background:#735dc0; color:#fff; padding:5px 8px; cursor:pointer; font-size:11px; font-weight:800; }
    .hmi-device-button:hover,.hmi-word-control button:hover { background:#59459d; }
    .hmi-word-control { display:flex; align-items:stretch; gap:4px; }
    .hmi-word-control input { width:82px; min-width:0; border:1px solid #aeb9c3; border-radius:4px; padding:5px 6px; background:#fff; color:#1c3548; font:800 12px/1 Consolas,monospace; }

    @media (max-width:1199px) {
      .workspace.ladder-workspace { grid-template-columns:minmax(0,1fr); }
      .ladder-workspace .info-panel { position:static; max-height:none; overflow:visible; }
      .ladder-workspace .info-panel .io-live-grid { grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
    }

    @media (max-width:600px) {
      .ladder-workspace .info-panel .io-live-grid { grid-template-columns:1fr; }
      .device-monitor-row { grid-template-columns:9px minmax(0,1fr); }
      .device-monitor-value,.hmi-device-button,.hmi-word-control { grid-column:2; justify-self:start; }
    }