:root {
    --bg-color: #0d0d12;
    --text-color: #e0e0e0;
    --accent-color: #00ffcc;
    --terminal-bg: #1e1e24;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    cursor: none; /* Hide default cursor to use custom one */
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
    overflow-x: hidden;
    transition: background-color 0.5s ease;
}

/* Custom Cursor */
#cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 255, 204, 0.6);
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s;
    z-index: 9999;
    box-shadow: 0 0 15px var(--accent-color);
}

.hover-active {
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 255, 204, 0.2) !important;
}

/* Header and Navigation */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    background: rgba(0, 0, 0, 0.8);
    border-bottom: 1px solid var(--accent-color);
}

a.logo-container {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.logo-container {
    display: flex;
    align-items: center;
    gap: 15px;
}

#logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border: 1px dashed var(--accent-color);
    border-radius: 5px;
}

.logo-container .business-name {
    font-size: 1.8rem;
    font-weight: bold;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
}

nav a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--accent-color);
}

/* Main Sections */
section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    text-align: center;
}

h1, h2 {
    margin-bottom: 20px;
    font-size: 2.5rem;
}

/* Terminal Emulation */
.terminal {
    width: 100%;
    max-width: 600px;
    background: var(--terminal-bg);
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    margin-top: 30px;
    overflow: hidden;
    text-align: left;
}

.terminal-header {
    background: #333;
    padding: 10px;
    display: flex;
    align-items: center;
}

.terminal-header .btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-right: 8px;
}

.btn.close { background: #ff5f56; }
.btn.min { background: #ffbd2e; }
.btn.max { background: #27c93f; }
.terminal-header .title {
    color: #ccc;
    margin-left: auto;
    margin-right: auto;
    font-size: 0.9rem;
}

.terminal-body {
    padding: 20px;
    color: var(--accent-color);
    min-height: 150px;
    line-height: 1.5;
}

/* Interactive Button */
#surprise-btn {
    margin-top: 30px;
    padding: 15px 30px;
    font-size: 1.2rem;
    background: transparent;
    color: var(--accent-color);
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    transition: all 0.3s ease;
}

#surprise-btn:hover {
    background: var(--accent-color);
    color: var(--bg-color);
    box-shadow: 0 0 20px var(--accent-color);
}

/* Demo Grid & Cards */
.demo-grid {
    display: flex;
    gap: 20px;
    margin-top: 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.demo-card {
    padding: 15px 30px;
    font-size: 1.2rem;
    background: rgba(0, 255, 204, 0.05);
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
    border-radius: 5px;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
}

/* Contact Form Styles */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    max-width: 500px;
    margin-top: 30px;
}

.contact-form input, .contact-form textarea {
    padding: 12px;
    background: var(--terminal-bg);
    border: 1px solid #333;
    color: var(--text-color);
    border-radius: 5px;
}

/* Map Container */
.map-container {
    width: 100%;
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.map-container iframe {
    width: 100%;
    height: 350px;
    border: 2px solid var(--accent-color);
    border-radius: 8px;
}

.demo-card:hover {
    background: var(--accent-color);
    color: var(--bg-color);
    box-shadow: 0 0 20px var(--accent-color);
}

.demo-card.active {
    background: var(--accent-color);
    color: var(--bg-color);
    box-shadow: 0 0 20px var(--accent-color);
}

/* Industry 4.0 Layout */
.demo-container {
    width: 80%;
    max-width: 1000px;
    text-align: left;
}

/* Instructions Styling */
.instructions {
    background: rgba(0, 255, 204, 0.05);
    border-left: 4px solid var(--accent-color);
    padding: 15px;
    margin: 15px auto 30px;
    max-width: 800px;
    text-align: left;
    font-size: 0.95rem;
    line-height: 1.5;
    border-radius: 0 5px 5px 0;
}
.instructions strong { color: var(--accent-color); display: block; margin-bottom: 5px; font-size: 1.05rem; }

/* Conveyor Belt Animation */
.factory-floor {
    border: 1px solid var(--accent-color);
    height: 150px;
    position: relative;
    overflow: hidden;
    margin: 30px 0;
    background: #111;
    border-radius: 5px;
}

.conveyor {
    position: absolute;
    bottom: 20px;
    width: 100%;
    height: 8px;
    background: #555;
    box-shadow: 0 5px 10px rgba(0,0,0,0.8);
}

.box {
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    position: absolute;
    bottom: 28px;
    left: -50px;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
    animation: moveRight 4s linear infinite;
}

@keyframes moveRight {
    to { left: 100%; }
}

/* Data Logging Table */
.data-log {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background: var(--terminal-bg);
}

.data-log th, .data-log td {
    border: 1px solid #333;
    padding: 12px;
    text-align: left;
}

.data-log th {
    background: #222;
    color: var(--accent-color);
}

/* Scrollable Chart Containers */
.chart-wrapper {
    width: 100%;
    overflow-x: auto;
    margin-top: 30px;
    background: var(--terminal-bg);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid #333;
}

.chart-container {
    min-width: 1000px;
    height: 350px;
    position: relative;
    background: var(--terminal-bg);
}

/* PLC & Drive Demo */
.plc-container {
    position: relative; /* Changed to relative for gear-assembly positioning */
    width: 400px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.plc-stage {
    border: 1px dashed var(--accent-color);
    padding: 20px;
    margin: 30px 0;
    background: #111;
    border-radius: 5px;
    overflow: hidden; /* Ensure gears don't go out of bounds */
}

.gear-assembly {
    position: absolute;
    /* transition: transform 1s ease-in-out; */ /* Controlled by JS now */
}

.gear {
    width: 100px;
    height: 100px;
    border: 12px dashed var(--accent-color);
    border-radius: 50%;
    /* transition: transform 0.1s linear; */ /* Controlled by JS for smoother animation */
}

.controls {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.controls button {
    margin: 0; /* Removed margin to use gap from flexbox */
}

.controls input[type="range"] {
    width: 250px;
    accent-color: var(--accent-color); /* Style the slider thumb */
}

/* PID Control Specifics */
.pid-track-container {
    margin: 40px 0;
    position: relative;
    width: 100%;
    height: 60px;
    background: #111;
    border: 1px solid var(--accent-color);
    border-radius: 5px;
}

.pid-track-container input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
    position: absolute;
    top: -20px;
    left: 0;
    z-index: 10;
}

.pid-track-container input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    background: #ff5f56;
    cursor: pointer;
    border-radius: 2px; /* Small square */
    margin-top: -9px; 
}

.pid-track-container input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
}

#actual-position-marker {
    position: absolute;
    width: 40px;
    height: 40px;
    background: var(--accent-color);
    border-radius: 50%;
    top: 10px;
    left: 0;
    transform: translateX(-50%);
    box-shadow: 0 0 15px var(--accent-color);
    pointer-events: none;
}

#setpoint-marker {
    position: absolute;
    width: 2px;
    height: 60px;
    background: #ff5f56;
    top: 0;
    left: 0;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
}

/* Industry 4.0 Vertical Layout */
.dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    max-width: 1000px;
    min-height: auto;
    padding: 30px 20px 10px 20px;
    margin: 0 auto;
}
.header-left { font-size: 1.2rem; font-weight: bold; text-align: left; }
.header-center { font-size: 1.5rem; font-weight: bold; color: var(--text-color); text-align: center; }
.header-right { font-size: 1.2rem; font-weight: bold; text-align: right; line-height: 1.5; }
.accent-text { color: var(--accent-color); }

/* Time Travel Wheel Controls */
.time-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
}
.wheel-wrapper {
    position: relative;
    display: inline-block;
    margin: 0 40px;
}
.scale-mark {
    position: absolute;
    font-size: 0.85rem;
    color: #888;
    font-weight: bold;
    pointer-events: none;
}
.scale-mark.left { left: -65px; top: 50%; transform: translateY(-50%); }
.scale-mark.top { top: -25px; left: 50%; transform: translateX(-50%); }

.wheel-container {
    position: relative;
    width: 120px; height: 120px;
    border-radius: 50%;
    background: #222;
    border: 2px solid var(--accent-color);
    cursor: grab;
}
.wheel { width: 100%; height: 100%; border-radius: 50%; transform: rotate(0deg); pointer-events: none; }
.wheel-marker { width: 6px; height: 25px; background: var(--accent-color); margin: 0 auto; border-radius: 3px; }
.wheel-label { font-size: 0.8rem; color: #888; text-align: center; }
#time-speed { font-size: 1.2rem; font-weight: bold; color: var(--accent-color); width: 60px; text-align: left; }

.factory-layout-section {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

#factory-layout {
    position: relative;
    width: 1000px; /* Fixed width to maintain grid consistency */
    min-height: 2000px; /* Make it vertically scrollable */
    border: 2px solid var(--accent-color);
    background-color: #0a0a0e;
    margin: 60px auto; /* Margin to show outward logistics */
    box-shadow: inset 0 0 50px rgba(0,0,0,0.8);
}

.station-box {
    position: absolute;
    background-color: #1a1a20;
    border: 2px solid #333;
    border-radius: 5px;
    padding: 8px;
    font-size: 0.75rem;
    text-align: center;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #ccc;
    z-index: 4;
}

.station-box .process-name {
    font-weight: bold;
    color: var(--accent-color);
    margin-bottom: 5px;
}

.station-box .data-item {
    display: block;
    margin-bottom: 2px;
}

.station-box .data-value {
    color: #fff;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0.7rem;
    text-overflow: ellipsis;
}

/* Dynamic Status Colors */
.status-bg-ok { background-color: #1a1a20 !important; border: 2px solid #00ffcc !important; }
.status-bg-maint { background-color: #1a1a20 !important; border: 2px solid #ff5f56 !important; }
.status-bg-wait { background-color: #1a1a20 !important; border: 2px solid yellow !important; }

.station-box .status-ok { color: #00ffcc; }
.station-box .status-maint { color: #ff5f56; }
.station-box .status-wait { color: yellow; }

.flow-arrow-h, .flow-arrow-v {
    position: absolute;
    background-color: rgba(0, 255, 204, 0.7);
    z-index: 2;
    animation: flow-pulse 1.5s infinite alternate;
}
.flow-arrow-h { height: 4px; } /* Doubled thickness */
.flow-arrow-v { width: 4px; }  /* Doubled thickness */

/* Arrowheads applied via classes based on direction */
.arrow-down::after { content: ''; position: absolute; bottom: -8px; left: -6px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 12px solid rgba(0, 255, 204, 0.7); }
.arrow-up::after { content: ''; position: absolute; top: -8px; left: -6px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 12px solid rgba(0, 255, 204, 0.7); }
.arrow-right::after { content: ''; position: absolute; right: -8px; top: -6px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 12px solid rgba(0, 255, 204, 0.7); }
.arrow-left::after { content: ''; position: absolute; left: -8px; top: -6px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 12px solid rgba(0, 255, 204, 0.7); }

@keyframes flow-pulse {
    from { opacity: 0.5; }
    to { opacity: 1; }
}

.walkway {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.03);
    z-index: 1;
    border: 1px dashed rgba(255, 255, 255, 0.1);
    pointer-events: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.15);
    font-size: 1.2rem;
}

.shop-partition {
    position: absolute;
    border-top: 2px dashed yellow;
    z-index: 3;
    opacity: 0.8;
    pointer-events: none;
}

.factory-icon {
    position: absolute;
    background-color: #111;
    color: #fff;
    border: 2px solid #fff;
    padding: 5px 10px;
    font-weight: bold;
    z-index: 7;
    border-radius: 4px;
}

.entrance-icon { border-color: #00ffcc; color: #00ffcc; }
.exit-icon { border-color: #ff5f56; color: #ff5f56; }

/* Remove previous station styles as they are no longer used */
.station, .station-header, .station-body, .station-data, .station-activity,
.scanner-animation, .assembly-animation, .assembly-animation .arm, .assembly-animation .part,
.welding-animation, .welding-animation .spark {
    display: none; /* Hide old elements */
}

/* --- PLC System Sorting Styling --- */
.sorting-system-container {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    justify-content: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.plc-io-panel {
    background: #111;
    border: 2px solid var(--accent-color);
    border-radius: 5px;
    padding: 20px;
    min-width: 300px;
    text-align: left;
}
.io-section h4 { margin-bottom: 10px; color: var(--accent-color); border-bottom: 1px solid #333; padding-bottom: 5px; }
.io-section { margin-bottom: 15px; }
.io-section-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 15px; }

.led-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 0.9rem; }
.led { width: 16px; height: 16px; border-radius: 50%; background: #333; border: 1px solid #555; transition: background 0.1s, box-shadow 0.1s; }
.led.on { background: #00ffcc; box-shadow: 0 0 12px #00ffcc; border-color: #00ffcc; }
.led.ng-on { background: #ff5f56; box-shadow: 0 0 12px #ff5f56; border-color: #ff5f56; }
.led.metal-on { background: #ffbd2e; box-shadow: 0 0 12px #ffbd2e; border-color: #ffbd2e; } /* Distinct LED color */

.sorting-wrapper {
    position: relative;
    width: 850px;
    height: 700px;
    background: var(--terminal-bg);
    border: 1px solid #333;
    border-radius: 5px;
    overflow: hidden;
}

.conveyor-track { position: absolute; top: 80px; left: 0; width: 100%; height: 60px; background: #3d3d3d; border-top: 1px solid #555; border-bottom: 1px solid #222; }
.conveyor-belt {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 50px;
    background-image: linear-gradient(45deg, #282828 25%, #222 25%, #222 50%, #282828 50%, #282828 75%, #222 75%, #222 100%);
    background-size: 20px 20px;
}
.conveyor-track.running .conveyor-belt { animation: belt-move 0.5s linear infinite; }
@keyframes belt-move { from { background-position: 0 0; } to { background-position: -20px 0; } }

.vertical-conveyor { position: absolute; width: 60px; height: 400px; background: #3d3d3d; border-left: 1px solid #555; border-right: 1px solid #222; }
.v-belt { position: absolute; width: 50px; left: 5px; height: 100%; background-image: linear-gradient(180deg, #282828 25%, #222 25%, #222 50%, #282828 50%, #282828 75%, #222 75%, #222 100%); background-size: 20px 20px; }
.conveyor-track.running ~ .vertical-conveyor .v-belt { animation: v-belt-move 0.5s linear infinite; }
@keyframes v-belt-move { from { background-position: 0 0; } to { background-position: 0 20px; } }

.laser-station { position: absolute; width: 100px; height: 40px; background: #444; border: 2px solid var(--accent-color); border-radius: 5px; z-index: 6; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 5px; font-size: 0.7rem; color: #fff; }
.laser-beam { position: absolute; width: 2px; height: 50px; background: #ff5f56; top: 38px; left: 49px; display: none; box-shadow: 0 0 10px #ff5f56; }
.laser-station.active .laser-beam { display: block; }
.laser-led { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #333; top: 10px; left: 105px; border: 1px solid #000; transition: background 0.1s; }
.laser-led.ok { background: #00ffcc; box-shadow: 0 0 12px #00ffcc; }

.sensor-arch { position: absolute; top: 60px; left: 150px; width: 40px; height: 90px; border: 2px dashed rgba(0, 255, 204, 0.4); pointer-events: none; z-index: 5; }
.sensor-arch::after { content: 'SENSORS'; position: absolute; top: -20px; left: -10px; font-size: 0.6rem; color: #888; }

.sorting-part { position: absolute; top: 85px; width: 40px; height: 40px; border-radius: 4px; display: flex; flex-direction: column; justify-content: center; align-items: center; font-weight: bold; color: #000; z-index: 10; line-height: 1; }
.part-plastic { background: #00ffcc; border: 2px solid #00b38f; }
.part-metal { background: #ffbd2e; border: 2px solid #b38420; }
.qr-code { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 0.5rem; background: #fff; color: #000; padding: 2px 4px; border: 1px solid #000; border-radius: 2px; font-weight: bold; }

.bin { position: absolute; width: 100px; height: 70px; border: 2px solid; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: bold; z-index: 1; border-top: none; padding-top: 10px; }
.bin-good.metal { border-color: #ffbd2e; color: #ffbd2e; background: rgba(255, 189, 46, 0.1); }
.bin-good.plastic { border-color: #00ffcc; color: #00ffcc; background: rgba(0, 255, 204, 0.1); }
.bin-ng { border-color: #ff5f56; color: #ff5f56; background: rgba(255, 95, 86, 0.1); width: 80px; height: 60px; }

.cyl-led-group { position: absolute; display: flex; gap: 4px; z-index: 6; }
.cyl-led-group.vertical { top: 10px; left: 25px; flex-direction: column; }
.cyl-led-group.horizontal { top: -20px; left: 10px; flex-direction: row; }
.small-led { width: 10px; height: 10px; border-radius: 50%; border: 1px solid #000; background: #222; transition: background 0.1s; }
.small-led.fwd.on { background: #00ffcc; box-shadow: 0 0 8px #00ffcc; border-color: #00ffcc; }
.small-led.rev.on { background: #ffbd2e; box-shadow: 0 0 8px #ffbd2e; border-color: #ffbd2e; }
.small-led.home.on { background: #00ffcc; box-shadow: 0 0 8px #00ffcc; border-color: #00ffcc; }
.small-led.pick.on { background: #ff5f56; box-shadow: 0 0 8px #ff5f56; border-color: #ff5f56; }
.small-led.drop.on { background: #ffbd2e; box-shadow: 0 0 8px #ffbd2e; border-color: #ffbd2e; }

.counter {
    font-size: 1.5rem;
    margin-top: 5px;
    color: #fff;
    font-weight: bold;
}

.diverter-arm { display: none; }

.cylinder {
    position: absolute;
    width: 20px;
    height: 100px;
    z-index: 4;
}
.cylinder-body {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: #888;
    border: 1px solid #aaa;
    border-radius: 2px;
}
.piston-rod {
    position: absolute;
    top: 40px;
    left: 6px;
    width: 8px;
    height: 30px;
    background: #ccc;
    border-radius: 2px;
    transition: height 0.2s ease-out;
}
.cylinder.active .piston-rod {
    height: 80px;
    background: #ff5f56;
}

.cylinder.horizontal { width: 100px; height: 20px; }
.cylinder.horizontal .cylinder-body { width: 40px; height: 20px; top: 0; left: 0; }
.cylinder.horizontal .piston-rod { width: 30px; height: 8px; top: 6px; left: 40px; transition: width 0.2s ease-out; }
.cylinder.horizontal.active .piston-rod { width: 80px; }

/* Robot Arm 3 DOF Styling */
.robot-arm { position: absolute; z-index: 15; width: 20px; height: 20px; }
.robot-base { position: absolute; width: 30px; height: 30px; background: #555; border-radius: 50%; z-index: 16; top: -5px; left: -5px; border: 2px solid var(--accent-color); }
.robot-link1 { position: absolute; top: 10px; left: 10px; width: 60px; height: 10px; background: #ccc; transform-origin: 5px 5px; transition: transform 0.5s ease-in-out; border-radius: 5px; z-index: 15; }
.robot-link2 { position: absolute; top: 1px; left: 55px; width: 50px; height: 8px; background: #aaa; transform-origin: 4px 4px; transition: transform 0.5s ease-in-out; border-radius: 4px; }
.robot-gripper { position: absolute; top: -6px; left: 45px; width: 20px; height: 20px; border: 3px solid #00ffcc; border-left: none; transition: border-width 0.2s ease-in-out, transform 0.5s ease-in-out, border-color 0.5s ease; transform-origin: left center; }

#robot-metal.home .robot-link1 { transform: rotate(90deg); }
#robot-metal.home .robot-link2 { transform: rotate(0deg); }
#robot-metal.home .robot-gripper { transform: scaleY(1); }

#robot-metal.picking .robot-link1 { transform: rotate(20deg); }
#robot-metal.picking .robot-link2 { transform: rotate(70deg); }
#robot-metal.picking .robot-gripper { transform: scaleY(0.4); border-color: #ff5f56; } /* Close gripper */

#robot-metal.placing .robot-link1 { transform: rotate(160deg); }
#robot-metal.placing .robot-link2 { transform: rotate(-70deg); }
#robot-metal.placing .robot-gripper { transform: scaleY(1); border-color: #00ffcc; } /* Open gripper */

#robot-plastic.home .robot-link1 { transform: rotate(90deg); }
#robot-plastic.home .robot-link2 { transform: rotate(0deg); }
#robot-plastic.home .robot-gripper { transform: scaleY(1); }

#robot-plastic.picking .robot-link1 { transform: rotate(160deg); }
#robot-plastic.picking .robot-link2 { transform: rotate(-70deg); }
#robot-plastic.picking .robot-gripper { transform: scaleY(0.4); border-color: #ff5f56; }

#robot-plastic.placing .robot-link1 { transform: rotate(20deg); }
#robot-plastic.placing .robot-link2 { transform: rotate(70deg); }
#robot-plastic.placing .robot-gripper { transform: scaleY(1); border-color: #00ffcc; }

#diverter-metal { left: 260px; top: 0px; }
#diverter-plastic { left: 580px; top: 0px; }

/* --- QR Marking Demo --- */
.qr-controls {
    display: flex;
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 40px;
    align-items: center;
    justify-content: center;
}
.qr-input {
    padding: 10px 15px;
    font-size: 1.1rem;
    background: var(--terminal-bg);
    border: 1px solid var(--accent-color);
    color: var(--text-color);
    border-radius: 5px;
    width: 350px;
}
.qr-simulation-wrapper {
    position: relative;
    width: 500px;
    height: 800px;
    background: #111;
    border: 2px solid #333;
    border-radius: 5px;
    overflow: hidden;
    margin: 0 auto;
}
.qr-simulation-wrapper.running .v-belt { animation: v-belt-move 0.5s linear infinite; }

.qr-part {
    position: absolute;
    left: 160px; /* (500 - 180) / 2 */
    top: -150px;
    width: 180px;
    height: 150px;
    background: #ccc;
    border: 2px solid #888;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 5;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.qr-laser { 
    top: 360px; left: 0px; width: 60px; height: 40px; z-index: 10; 
    justify-content: flex-end; padding-right: 5px; display: flex; align-items: center; 
    background: #222; border: 2px solid var(--accent-color); border-left: none; 
    border-radius: 0 5px 5px 0;
}
.qr-laser .laser-head { 
    width: 8px; height: 8px; background: #ff5f56; border-radius: 50%; 
    box-shadow: 0 0 5px #ff5f56; position: relative; 
}

#qr-laser-beam {
    position: absolute;
    display: none;
    height: 2px;
    background: #ff5f56;
    box-shadow: 0 0 10px #ff5f56, 0 0 20px #ff5f56;
    z-index: 11;
    transform-origin: 0 50%;
    left: 55px;
    top: 380px;
}

#qr-laser-dot {
    position: absolute;
    display: none;
    width: 4px;
    height: 4px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 10px #ff5f56, 0 0 20px #ff5f56;
    z-index: 12;
    transform: translate(-50%, -50%);
}

.qr-code-wrapper { position: relative; width: 120px; height: 120px; background: #fff; overflow: hidden; border-radius: 2px; }
.qr-container { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.qr-container img, .qr-container canvas { width: 100%; height: 100%; display: block; }

/* --- Mobile Responsiveness --- */
.scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px; /* space for scrollbar */
}

@media (max-width: 768px) {
    header {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
    }
    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }
    section { padding: 30px 15px; }
    h1 { font-size: 1.8rem; }
    h2 { font-size: 1.5rem; }
    
    .dashboard-header { flex-direction: column; align-items: center; gap: 15px; text-align: center; }
    .header-left, .header-right { text-align: center; }
    
    .sorting-system-container { flex-direction: column; align-items: center; }
    .plc-io-panel { width: 100%; min-width: auto; }
    
    .qr-input { width: 100%; max-width: 350px; }
    .qr-controls { flex-direction: column; }
    
    .pid-controls { flex-direction: column; }
    .demo-grid { flex-direction: column; width: 100%; }
    .time-controls { flex-wrap: wrap; }
}