/* ==========================================================================
   Web-Based PLC Simulator - Industrial SCADA Dark Theme & Visual Design
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
    --bg-main: #0b0f17;
    --bg-card: #131b26;
    --bg-card-hover: #1b2636;
    --bg-card-alt: #1a2332;
    --border-color: #263345;
    --border-bright: #3d506d;
    
    --text-main: #f1f5f9;
    --text-muted: #94a3b8;
    --text-dim: #64748b;

    /* Industrial Status Colors */
    --power-hot: #00ffcc;
    --power-hot-glow: rgba(0, 255, 204, 0.45);
    --color-green: #10b981;
    --color-green-glow: rgba(16, 185, 129, 0.4);
    --color-red: #ef4444;
    --color-red-glow: rgba(239, 68, 68, 0.4);
    --color-amber: #f59e0b;
    --color-amber-glow: rgba(245, 158, 11, 0.4);
    --color-blue: #3b82f6;
    --color-cyan: #06b6d4;

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-sans);
    font-size: 13px;
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    user-select: none;
}

/* App Header & Navigation Bar */
.app-header {
    background: linear-gradient(180deg, #16202e 0%, #0f1722 100%);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-section {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo {
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 12px rgba(6, 182, 212, 0.4);
}

.brand-info h1 {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
}

.project-meta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
}

.project-name-chip {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-color);
    padding: 2px 10px;
    border-radius: 20px;
    font-weight: 600;
    color: #38bdf8;
}

.status-badge {
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.badge-saved {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-unsaved {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Simulation Toolbar */
.header-sim-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 16px;
    background: #0d141e;
    gap: 16px;
    flex-wrap: wrap;
}

.sim-controls-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-sim {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
    user-select: none;
    pointer-events: auto;
}
.btn-sim * {
    pointer-events: none;
}

.btn-sim-run {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border-color: rgba(16, 185, 129, 0.4);
}
.btn-sim-run:hover, .btn-sim-run.active {
    background: #10b981;
    color: #fff;
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.6);
}

.btn-sim-pause {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.4);
}
.btn-sim-pause:hover, .btn-sim-pause.active {
    background: #f59e0b;
    color: #fff;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.6);
}

.btn-sim-stop {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.4);
}
.btn-sim-stop:hover, .btn-sim-stop.active {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 14px rgba(239, 68, 68, 0.6);
}

.btn-sim-step {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}
.btn-sim-step:hover {
    background: #3b82f6;
    color: #fff;
}

.btn-sim-reset {
    background: #1e293b;
    color: #94a3b8;
    border-color: var(--border-color);
}
.btn-sim-reset:hover {
    background: #334155;
    color: #fff;
}

.status-pill {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
}
.status-running {
    background: #065f46;
    color: #6ee7b7;
    border: 1px solid #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}
.status-stopped {
    background: #7f1d1d;
    color: #fca5a5;
    border: 1px solid #ef4444;
}
.status-paused {
    background: #78350f;
    color: #fde68a;
    border: 1px solid #f59e0b;
}

.sim-diagnostics {
    display: flex;
    align-items: center;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--text-muted);
}
.diag-item {
    display: flex;
    gap: 6px;
}
.diag-val {
    color: #38bdf8;
    font-weight: 600;
}

/* Tabs Bar */
.nav-tabs-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0f1622;
    border-bottom: 1px solid var(--border-color);
    padding: 0 16px;
    position: relative;
    z-index: 100;
}

.tabs-list {
    display: flex;
    gap: 4px;
}

.nav-tab-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    padding: 10px 16px;
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
    user-select: none;
    pointer-events: auto;
}
.nav-tab-btn * {
    pointer-events: none;
}
.nav-tab-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.03);
}
.nav-tab-btn.active {
    color: #38bdf8;
    border-bottom-color: #38bdf8;
    font-weight: 600;
    background: rgba(56, 189, 248, 0.08);
}

/* Workspace Layout */
.main-workspace {
    min-height: calc(100vh - 130px);
    display: flex;
    flex-direction: column;
}

.workspace-tab-content {
    display: none;
    flex: 1;
}
.workspace-tab-content.active {
    display: block;
}

/* Split View Mode */
.split-view-active {
    display: flex !important;
    flex-direction: row;
    height: calc(100vh - 130px);
    overflow: hidden;
}
.split-view-active .split-pane {
    display: block !important;
    flex: 1;
    overflow-y: auto;
    border-right: 1px solid var(--border-color);
}

/* ==========================================================================
   Ladder Editor Styles
   ========================================================================== */
.ladder-editor-view {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
}

.ladder-toolbar-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: #141e2b;
    border-bottom: 1px solid var(--border-color);
    gap: 12px;
    flex-wrap: wrap;
}

.ladder-palette {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.palette-tool-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #1a2636;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    min-width: 54px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    pointer-events: auto;
}
.palette-tool-btn * {
    pointer-events: none;
}
.palette-tool-btn:hover {
    background: #243447;
    border-color: #38bdf8;
}
.palette-tool-btn.active {
    background: rgba(56, 189, 248, 0.2);
    border-color: #38bdf8;
    color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.3);
}
.tool-label {
    font-size: 9px;
    margin-top: 2px;
    white-space: nowrap;
}

.canvas-viewport {
    flex: 1;
    overflow: auto;
    background: #090d14;
    padding: 24px;
    position: relative;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

.ladder-workspace {
    display: flex;
    min-width: 800px;
}

.power-rail {
    width: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 12px 0;
}

.left-rail {
    background: #1e293b;
    border-right: 4px solid #475569;
    color: #94a3b8;
    transition: all 0.2s ease;
}
.left-rail.energized {
    border-right: 4px solid var(--power-hot);
    color: var(--power-hot);
    box-shadow: 4px 0 16px var(--power-hot-glow);
}

.right-rail {
    background: #1e293b;
    border-left: 4px solid #334155;
    color: #64748b;
}

.rungs-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 0 8px;
}

.ladder-rung {
    background: #111824;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    transition: all 0.15s ease;
}
.ladder-rung.selected {
    border-color: #38bdf8;
    box-shadow: 0 0 0 1px #38bdf8;
}
.ladder-rung.rung-error {
    border-color: var(--color-red);
}
.ladder-rung.rung-warning {
    border-color: var(--color-amber);
}

.rung-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.rung-num-badge {
    display: flex;
    align-items: center;
    gap: 6px;
}
.rung-num-badge .num {
    background: #1e293b;
    color: #e2e8f0;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}

.rung-comment-input {
    flex: 1;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
.rung-comment-input:focus {
    background: #1a2536;
    border-color: var(--border-color);
    color: #fff;
    outline: none;
}

.rung-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.btn-rung-tool {
    background: #1a2536;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 11px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.btn-rung-tool:hover {
    background: #243447;
    color: #fff;
}

.rung-circuit-area {
    display: flex;
    align-items: center;
    min-height: 80px;
    padding: 10px 0;
}

.rung-wire-in, .rung-wire-out {
    width: 24px;
    height: 3px;
    background: #334155;
    transition: background 0.15s ease;
}
.rung-wire-in.powered, .rung-wire-out.powered {
    background: var(--power-hot);
    box-shadow: 0 0 10px var(--power-hot-glow);
}

.rung-elements-flow {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0;
    overflow-x: auto;
    padding: 6px 0;
}

.wire-connector {
    width: 28px;
    height: 3px;
    background: #334155;
    flex-shrink: 0;
    transition: background 0.15s ease;
}
.wire-connector.powered {
    background: var(--power-hot);
    box-shadow: 0 0 10px var(--power-hot-glow);
}

/* Interactive Horizontal Wire Connector */
.wire-connector-interactive {
    display: inline-flex;
    align-items: center;
    position: relative;
    width: 38px;
    height: 32px;
    flex-shrink: 0;
    cursor: pointer;
    z-index: 5;
    padding: 0 2px;
}
.wire-half {
    height: 3px;
    flex: 1;
    background: #334155;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
.wire-half.powered {
    background: var(--power-hot);
    box-shadow: 0 0 10px var(--power-hot-glow);
}
.wire-action-point {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px dashed #475569;
    background: #111827;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    z-index: 2;
    transition: all 0.15s ease;
    user-select: none;
}
.wire-connector-interactive:hover .wire-action-point,
.wire-connector-interactive.drag-over .wire-action-point {
    border-color: #38bdf8;
    background: #0284c7;
    color: #ffffff;
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.7);
    border-style: solid;
}
.wire-connector-interactive:hover .wire-half {
    background: #475569;
}

.ladder-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 4px 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.node-tag-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 2px;
}
.tag-sym {
    font-size: 10px;
    font-weight: 700;
    color: #38bdf8;
    letter-spacing: -0.01em;
}
.tag-addr {
    font-family: var(--font-mono);
    font-size: 9px;
    color: var(--text-dim);
}
.tag-addr.addr-forced {
    color: #ef4444;
    font-weight: bold;
}
.force-tag-badge {
    background: #ef4444;
    color: #fff;
    padding: 0 3px;
    border-radius: 2px;
    margin-left: 2px;
}

.inst-svg {
    display: block;
}
.inst-wire {
    stroke: #334155;
    stroke-width: 2.5;
    transition: stroke 0.15s;
}
.inst-wire.powered {
    stroke: var(--power-hot);
    filter: drop-shadow(0 0 4px var(--power-hot-glow));
}
.inst-bar {
    stroke: #64748b;
    stroke-width: 2.5;
    transition: stroke 0.15s;
}
.inst-bar.conducting {
    stroke: var(--power-hot);
    filter: drop-shadow(0 0 6px var(--power-hot-glow));
}
.inst-slash {
    stroke: #64748b;
    stroke-width: 2;
    transition: stroke 0.15s;
}
.inst-slash.conducting {
    stroke: var(--power-hot);
}
.inst-coil-arc {
    fill: none;
    stroke: #64748b;
    stroke-width: 2.5;
    transition: stroke 0.15s;
}
.inst-coil-arc.coil-active {
    stroke: #34d399;
    filter: drop-shadow(0 0 8px rgba(52, 211, 153, 0.7));
}
.inst-letter {
    fill: #94a3b8;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: bold;
}

.node-hover-actions {
    position: absolute;
    top: -16px;
    display: none;
    gap: 2px;
    background: #1a2536;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1px 3px;
    z-index: 10;
}
.ladder-node:hover .node-hover-actions {
    display: flex;
}
.btn-node-act {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 10px;
    cursor: pointer;
    padding: 1px 3px;
}
.btn-node-act:hover {
    color: #fff;
}

/* Functional Blocks (Timers, Counters, Math) */
.fblock-card {
    background: #182232;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    width: 90px;
    padding: 4px;
    font-family: var(--font-mono);
    font-size: 9px;
    transition: all 0.15s ease;
}
.fblock-card.fblock-timing {
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.3);
}
.fblock-card.fblock-done {
    border-color: var(--color-green);
    box-shadow: 0 0 12px var(--color-green-glow);
}
.fb-header {
    background: #0f1722;
    font-weight: 700;
    text-align: center;
    padding: 2px 0;
    color: #38bdf8;
    border-radius: 2px;
}
.fb-param {
    display: flex;
    justify-content: space-between;
    margin-top: 2px;
}
.fb-param .lbl { color: var(--text-muted); }
.fb-param .val { color: #f1f5f9; font-weight: 600; }
.fb-progress-bar {
    height: 4px;
    background: #253347;
    border-radius: 2px;
    margin: 4px 0;
    overflow: hidden;
}
.fb-fill {
    height: 100%;
    background: #38bdf8;
    transition: width 0.1s linear;
}
.counter-fill {
    background: #a855f7;
}

/* Parallel Branching Structure */
.ladder-branch-block {
    display: inline-flex;
    align-items: stretch;
    position: relative;
    padding: 0 4px;
    margin: 0 2px;
}
.branch-split-bar, .branch-join-bar {
    width: 4px;
    min-height: 64px;
    background: #334155;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    transition: background 0.15s, box-shadow 0.15s;
    position: relative;
}
.branch-split-bar.powered, .branch-join-bar.powered {
    background: var(--power-hot);
    box-shadow: 0 0 10px var(--power-hot-glow);
}
.branch-legs-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 14px;
    padding: 6px 0;
}
.branch-leg {
    display: flex;
    align-items: center;
    position: relative;
    min-height: 48px;
}
.branch-leg.leg-powered {
    /* powered indicators are on wires and contacts */
}
.branch-leg-elements {
    display: flex;
    align-items: center;
}
.branch-toolbar {
    position: absolute;
    bottom: -16px;
    right: 6px;
    display: none;
    gap: 4px;
    background: #1a2536;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 1px 4px;
    z-index: 10;
}
.ladder-branch-block:hover .branch-toolbar {
    display: flex;
}

/* Drop Target Slots */
.drop-target-slot {
    width: 24px;
    height: 24px;
    border: 1px dashed #334155;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 14px;
    cursor: pointer;
    margin: 0 4px;
    transition: all 0.15s;
}
.drop-target-slot:hover, .drop-target-slot.drag-over {
    border-color: #38bdf8;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.1);
    transform: scale(1.1);
}

/* ==========================================================================
   Virtual Hardware Control Desk & Actuators
   ========================================================================== */
.hw-dashboard-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 16px;
}

@media (max-width: 1024px) {
    .hw-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

.hw-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.hw-card-header {
    background: #182230;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
}
.hw-card-title {
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #f1f5f9;
}

.hw-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

/* Pushbuttons */
.pushbuttons-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.pb-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pb-btn {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 4px solid #334155;
    background: #1e293b;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5), inset 0 2px 4px rgba(255, 255, 255, 0.2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s ease, box-shadow 0.08s ease;
    outline: none;
}
.pb-btn:active, .pb-btn.pressed {
    transform: translateY(4px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6), inset 0 3px 6px rgba(0, 0, 0, 0.6);
}
.pb-cap {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.pb-green {
    background: radial-gradient(circle, #22c55e 0%, #15803d 100%);
    color: #fff;
}
.pb-red {
    background: radial-gradient(circle, #ef4444 0%, #b91c1c 100%);
    color: #fff;
}
.pb-amber {
    background: radial-gradient(circle, #f59e0b 0%, #b45309 100%);
    color: #fff;
}
.pb-estop {
    width: 78px;
    height: 78px;
    background: radial-gradient(circle, #dc2626 30%, #7f1d1d 100%);
    border: 5px solid #eab308;
    color: #fff;
}
.pb-estop.latched {
    transform: translateY(6px);
    box-shadow: inset 0 4px 10px rgba(0, 0, 0, 0.8);
    border-color: #ef4444;
}
.estop-cap {
    font-size: 10px;
    font-weight: 900;
}
.pb-label {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-muted);
}

/* 8x Toggle Switches */
.switches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.switch-box {
    background: #192333;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.switch-pin {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #334155;
    transition: .2s;
    border-radius: 24px;
    border: 1px solid #475569;
}
.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: #cbd5e1;
    transition: .2s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
input:checked + .toggle-slider {
    background-color: #10b981;
    border-color: #059669;
}
input:checked + .toggle-slider:before {
    transform: translateX(20px);
    background-color: #ffffff;
}
.switch-status {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    color: var(--text-dim);
}

/* Analog Sliders */
.analog-inputs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.analog-slider-card {
    background: #192333;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
}
.analog-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}
.analog-title { font-size: 11px; font-weight: 600; color: #38bdf8; }
.analog-readout { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #fff; }
.form-range {
    width: 100%;
    accent-color: #38bdf8;
    cursor: pointer;
}
.analog-scale {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 4px;
}

/* Pilot Lights */
.lamps-row {
    display: grid;
    grid-template-columns: repeat(8, minmax(34px, 1fr));
    gap: 8px;
    align-items: center;
    justify-items: center;
    width: 100%;
}
.lamp-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.pilot-lamp {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 3px solid #475569;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 2px 4px rgba(0,0,0,0.6);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
    background: radial-gradient(circle, #334155 0%, #0f172a 100%);
}
.lamp-bezel-ring {
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1.5px solid #64748b;
    pointer-events: none;
}
.pilot-lamp .lamp-lens {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #1e293b;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.9);
    transition: all 0.15s ease;
}
.pilot-lamp.lamp-green.off .lamp-lens { background: #064e3b; }
.pilot-lamp.lamp-green.on .lamp-lens {
    background: radial-gradient(circle, #86efac 15%, #22c55e 60%, #15803d 100%);
    box-shadow: 0 0 18px #22c55e, inset 0 0 6px #ffffff;
}
.pilot-lamp.lamp-green.on {
    border-color: #86efac;
    box-shadow: 0 0 16px rgba(34, 197, 94, 0.6);
}

.pilot-lamp.lamp-yellow.off .lamp-lens { background: #713f12; }
.pilot-lamp.lamp-yellow.on .lamp-lens {
    background: radial-gradient(circle, #fde68a 15%, #f59e0b 60%, #b45309 100%);
    box-shadow: 0 0 18px #f59e0b, inset 0 0 6px #ffffff;
}
.pilot-lamp.lamp-yellow.on {
    border-color: #fde68a;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.6);
}

.pilot-lamp.lamp-red.off .lamp-lens { background: #7f1d1d; }
.pilot-lamp.lamp-red.on .lamp-lens {
    background: radial-gradient(circle, #fca5a5 15%, #ef4444 60%, #991b1b 100%);
    box-shadow: 0 0 18px #ef4444, inset 0 0 6px #ffffff;
}
.pilot-lamp.lamp-red.on {
    border-color: #fca5a5;
    box-shadow: 0 0 16px rgba(239, 68, 68, 0.6);
}

.pilot-lamp.lamp-blue.off .lamp-lens { background: #1e3a8a; }
.pilot-lamp.lamp-blue.on .lamp-lens {
    background: radial-gradient(circle, #93c5fd 15%, #3b82f6 60%, #1d4ed8 100%);
    box-shadow: 0 0 18px #3b82f6, inset 0 0 6px #ffffff;
}
.pilot-lamp.lamp-blue.on {
    border-color: #93c5fd;
    box-shadow: 0 0 16px rgba(59, 130, 246, 0.6);
}

.pilot-lamp.lamp-white.off .lamp-lens { background: #334155; }
.pilot-lamp.lamp-white.on .lamp-lens {
    background: radial-gradient(circle, #ffffff 15%, #e2e8f0 60%, #94a3b8 100%);
    box-shadow: 0 0 18px #ffffff, inset 0 0 6px #ffffff;
}
.pilot-lamp.lamp-white.on {
    border-color: #ffffff;
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.6);
}

.lamp-label {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 700;
    color: #94a3b8;
}

/* Plant Widgets Grid */
.plant-widgets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}
.actuator-widget {
    background: #192333;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.widget-title { font-size: 11px; font-weight: 700; color: #38bdf8; }
.motor-rpm-badge, .tank-level-badge, .buzzer-state-badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 4px;
    background: #0f1722;
    color: #34d399;
}

/* Industrial 3-Phase Induction Motor */
.motor-vis-container {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #080d19;
    border: 1px solid #1e293b;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
    position: relative;
}

.industrial-motor-body {
    position: relative;
    width: 220px;
    height: 96px;
    display: flex;
    align-items: center;
}

.motor-terminal-box {
    position: absolute;
    top: 0px;
    left: 45px;
    width: 52px;
    height: 20px;
    background: linear-gradient(180deg, #334155 0%, #1e293b 100%);
    border: 1.5px solid #64748b;
    border-radius: 3px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.6);
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 5px;
}

.term-box-screws {
    font-size: 7.5px;
    color: #94a3b8;
    letter-spacing: 2px;
}

.term-box-tag {
    font-size: 8px;
    font-weight: 800;
    color: #38bdf8;
    font-family: var(--font-mono);
}

.motor-stator-core {
    position: absolute;
    left: 28px;
    top: 18px;
    width: 120px;
    height: 64px;
    background: linear-gradient(180deg, #0284c7 0%, #0369a1 40%, #075985 80%, #0c4a6e 100%);
    border: 2px solid #38bdf8;
    border-radius: 6px;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.2), 0 8px 16px rgba(0,0,0,0.5);
    z-index: 3;
    overflow: visible;
}

.stator-cooling-fins {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(90deg, transparent, transparent 8px, rgba(0,0,0,0.3) 8px, rgba(0,0,0,0.3) 12px);
    border-radius: 4px;
}

.motor-mount-feet {
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 8px;
}

.mount-foot {
    width: 22px;
    height: 7px;
    background: #334155;
    border: 1px solid #475569;
    border-radius: 0 0 2px 2px;
}

.motor-fan-shroud {
    position: absolute;
    left: 0px;
    top: 22px;
    width: 30px;
    height: 56px;
    background: linear-gradient(180deg, #475569 0%, #1e293b 100%);
    border: 2px solid #64748b;
    border-radius: 8px 0 0 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -2px 0 6px rgba(0,0,0,0.5);
    z-index: 4;
}

.motor-spinning-fan {
    position: relative;
    width: 22px;
    height: 22px;
    border-radius: 50%;
}

.motor-spinning-fan.spinning {
    animation: motorFanSpin 0.25s linear infinite;
}

@keyframes motorFanSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.fan-blade {
    position: absolute;
    left: 9px;
    top: 0;
    width: 4px;
    height: 11px;
    background: #cbd5e1;
    border-radius: 2px;
    transform-origin: bottom center;
}
.fb-1 { transform: rotate(0deg); }
.fb-2 { transform: rotate(60deg); }
.fb-3 { transform: rotate(120deg); }
.fb-4 { transform: rotate(180deg); }
.fb-5 { transform: rotate(240deg); }
.fb-6 { transform: rotate(300deg); }

.fan-shaft-hub {
    position: absolute;
    left: 7px;
    top: 7px;
    width: 8px;
    height: 8px;
    background: #0f172a;
    border: 1.5px solid #38bdf8;
    border-radius: 50%;
}

.motor-drive-shaft {
    position: absolute;
    right: 36px;
    top: 42px;
    width: 36px;
    height: 16px;
    background: linear-gradient(180deg, #cbd5e1 0%, #94a3b8 50%, #475569 100%);
    border: 1px solid #64748b;
    border-radius: 0 3px 3px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
    z-index: 2;
}

.shaft-keyway {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 12px;
    height: 3.5px;
    background: #1e293b;
    border-radius: 1px;
}

.motor-telemetry-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 6px 12px;
    background: #080d19;
    border-radius: 4px;
    border: 1px solid #1e293b;
    font-size: 11px;
}
.telemetry-rpm { font-family: var(--font-mono); color: #38bdf8; font-weight: 700; }
.telemetry-status { font-family: var(--font-mono); font-weight: 700; }

/* Process Water Tank Revamped */
.tank-vis-container {
    width: 100%;
    height: 185px;
    background: #080d19;
    border: 1px solid #1e293b;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    padding: 10px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tank-frame {
    width: 140px;
    height: 165px;
    border: 3px solid #64748b;
    border-top: none;
    border-radius: 0 0 10px 10px;
    position: relative;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.85);
    box-shadow: inset 0 0 16px rgba(0,0,0,0.9), 0 4px 12px rgba(0,0,0,0.4);
}
.tank-scale-ticks {
    position: absolute;
    right: 6px;
    top: 6px;
    bottom: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 700;
    color: #94a3b8;
    z-index: 5;
    text-shadow: 0 1px 2px #000;
    pointer-events: none;
}
.tank-water {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(180deg, rgba(56, 189, 248, 0.88) 0%, rgba(14, 116, 144, 0.96) 100%);
    transition: height 0.12s linear;
    box-shadow: inset 0 2px 8px rgba(255,255,255,0.4);
}
.water-waves {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
}
.inflow-pipe {
    position: absolute;
    top: 0;
    left: 14px;
    width: 10px;
    height: 20px;
    background: #64748b;
    border: 1px solid #94a3b8;
    border-top: none;
    z-index: 6;
}
.inflow-pipe.flowing:after {
    content: "";
    position: absolute;
    top: 20px;
    left: 1px;
    width: 8px;
    height: 140px;
    background: linear-gradient(180deg, #38bdf8 0%, rgba(56, 189, 248, 0.4) 100%);
    opacity: 0.9;
    animation: water-flow-anim 0.3s linear infinite;
}
@keyframes water-flow-anim {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}
.outflow-pipe {
    position: absolute;
    bottom: 8px;
    right: 0px;
    width: 14px;
    height: 12px;
    background: #64748b;
    border: 1px solid #94a3b8;
    z-index: 6;
}
.outflow-pipe.flowing:after {
    content: "";
    position: absolute;
    top: 2px;
    right: -12px;
    width: 12px;
    height: 8px;
    background: #38bdf8;
    opacity: 0.9;
}
.tank-control-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: #080d19;
    border: 1px solid #1e293b;
    border-radius: 6px;
    margin-top: 4px;
}
.tank-meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tank-readout-title {
    font-size: 11px;
    font-weight: 700;
    color: #94a3b8;
}
.tank-level-badge {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 800;
    color: #38bdf8;
    background: #040711;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #0284c7;
}
.hmi-tank-slider {
    width: 100%;
    cursor: pointer;
    accent-color: #38bdf8;
}
.tank-status-badges {
    display: flex;
    justify-content: space-between;
    font-size: 10.5px;
    color: #94a3b8;
}
.tank-badge-item {
    display: flex;
    gap: 4px;
    align-items: center;
}

/* Alarm Siren */
.buzzer-vis-container {
    height: 100px;
    background: #0e1520;
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.siren-beacon {
    width: 50px;
    height: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.siren-light {
    width: 36px;
    height: 40px;
    background: #7f1d1d;
    border-radius: 18px 18px 4px 4px;
    border: 2px solid #b91c1c;
    transition: all 0.15s;
}
.siren-beacon.active .siren-light {
    background: #ef4444;
    box-shadow: 0 0 24px #ef4444, inset 0 0 8px #fee2e2;
    animation: siren-pulse 0.4s infinite alternate;
}
@keyframes siren-pulse {
    from { opacity: 0.5; filter: brightness(1); }
    to { opacity: 1; filter: brightness(1.6); }
}
.siren-base {
    width: 46px;
    height: 14px;
    background: #334155;
    border-radius: 2px;
}

.widget-metrics {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 10px;
}
.metric {
    display: flex;
    justify-content: space-between;
}
.m-label { color: var(--text-dim); }
.m-val { font-family: var(--font-mono); font-weight: 600; color: #e2e8f0; }

/* ==========================================================================
   Hardware Configurator (DIN Rail & Rack)
   ========================================================================== */
.din-rail {
    background: #131b26;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 20px 16px;
    position: relative;
    overflow-x: auto;
    margin-bottom: 16px;
}
.rail-bar {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 35px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, #94a3b8 0%, #475569 50%, #1e293b 100%);
    border-top: 2px solid #cbd5e1;
    border-bottom: 2px solid #334155;
    z-index: 1;
}
.modules-flex {
    display: flex;
    gap: 8px;
    position: relative;
    z-index: 2;
}
.rack-module {
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 8px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    transition: transform 0.15s, border-color 0.15s;
    display: flex;
    flex-direction: column;
}
.rack-module:hover {
    transform: translateY(-4px);
    border-color: #38bdf8;
}
.rack-module.selected {
    border-color: #38bdf8;
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.4);
}
.mod-header {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    margin-bottom: 4px;
}
.slot-badge {
    background: #0f172a;
    color: #38bdf8;
    padding: 1px 4px;
    border-radius: 2px;
    font-weight: 700;
}
.mod-name { font-size: 11px; font-weight: 700; color: #fff; }
.mod-desc { font-size: 9px; color: var(--text-dim); }

.cpu-leds {
    margin-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 9px;
    color: var(--text-muted);
}
.led-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.led-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.led-off { background: #334155; }
.led-green { background: #22c55e; box-shadow: 0 0 6px #22c55e; }
.led-red { background: #ef4444; box-shadow: 0 0 6px #ef4444; }
.led-amber { background: #f59e0b; box-shadow: 0 0 6px #f59e0b; }

.module-io-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    margin-top: 8px;
}
.pin-indicator {
    font-family: var(--font-mono);
    font-size: 8px;
    background: #0f172a;
    padding: 2px;
    text-align: center;
    border-radius: 2px;
    color: var(--text-dim);
}

/* Data Tables */
.table-responsive {
    overflow-x: auto;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.data-table th {
    background: #141e2b;
    color: var(--text-muted);
    font-weight: 600;
    text-align: left;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
}
.data-table td {
    padding: 8px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    vertical-align: middle;
}
.data-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.live-val-badge, .live-watch-val {
    font-family: var(--font-mono);
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}
.val-true { background: rgba(16, 185, 129, 0.2); color: #34d399; }
.val-false { background: rgba(100, 116, 139, 0.2); color: #94a3b8; }
.val-number { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }

/* Dashboard & Templates */
.dashboard-container {
    padding: 24px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.dash-hero {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 24px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.hero-text h2 { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.hero-text p { color: var(--text-muted); font-size: 13px; max-width: 700px; }

.dash-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.section-title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.template-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: transform 0.15s, border-color 0.15s;
}
.template-card:hover {
    transform: translateY(-2px);
    border-color: #38bdf8;
}
.tmpl-header h4 { font-size: 14px; font-weight: 700; color: #fff; }
.tmpl-desc { font-size: 12px; color: var(--text-muted); flex: 1; }
.tmpl-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.tmpl-stat { font-size: 11px; color: var(--text-dim); }

.projects-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.project-vault-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pvc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.pvc-title { font-weight: 700; font-size: 14px; color: #fff; }
.pvc-desc { font-size: 12px; color: var(--text-muted); }
.pvc-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: var(--text-dim);
}
.pvc-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Modals & Dialogs */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-overlay.active {
    display: flex;
}
.modal-box {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    width: 440px;
    max-width: 90vw;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}
.modal-header {
    background: #182230;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color);
}
.modal-header h3 { font-size: 14px; font-weight: 700; color: #fff; }
.modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.modal-footer {
    padding: 12px 16px;
    background: #141d2a;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    border-top: 1px solid var(--border-color);
}

/* Form Controls */
.form-input, .form-select {
    background: #0f1724;
    border: 1px solid var(--border-color);
    color: #fff;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    font-size: 12px;
    width: 100%;
}
.form-input:focus, .form-select:focus {
    border-color: #38bdf8;
    outline: none;
    box-shadow: 0 0 0 1px #38bdf8;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.15s ease;
}
.btn-primary { background: #0284c7; color: #fff; }
.btn-primary:hover { background: #0369a1; }
.btn-success { background: #16a34a; color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-danger { background: #dc2626; color: #fff; }
.btn-danger:hover { background: #b91c1c; }
.btn-secondary { background: #334155; color: #fff; }
.btn-secondary:hover { background: #475569; }
.btn-outline-primary {
    background: transparent;
    border-color: #38bdf8;
    color: #38bdf8;
}
.btn-outline-primary:hover {
    background: #38bdf8;
    color: #fff;
}
.btn-sm { padding: 4px 8px; font-size: 11px; }
.btn-micro { padding: 2px 6px; font-size: 10px; border-radius: 2px; border: 1px solid transparent; cursor: pointer; }

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 2000;
}
.toast {
    background: #1e293b;
    border: 1px solid var(--border-color);
    border-left: 4px solid #38bdf8;
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: #fff;
    min-width: 260px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.5);
    animation: toast-in 0.25s ease;
}
.toast-success { border-left-color: #10b981; }
.toast-danger { border-left-color: #ef4444; }
.toast-title { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.toast-message { font-size: 11px; color: var(--text-muted); }
.toast.fade-out { opacity: 0; transform: translateY(10px); transition: all 0.3s; }
@keyframes toast-in {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Utilities */
.text-success { color: #34d399 !important; }
.text-danger { color: #f87171 !important; }
.text-warning { color: #fbbf24 !important; }
.text-muted { color: var(--text-muted) !important; }
.font-mono { font-family: var(--font-mono) !important; }
.font-bold { font-weight: 700 !important; }
.blink { animation: blink-anim 1s infinite; }
@keyframes blink-anim { 50% { opacity: 0.3; } }

/* ==========================================================================
   INTERACTIVE WIRING CANVAS & MODULAR PLC HARDWARE STYLES
   ========================================================================== */

.wiring-workbench {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 130px);
    background: #080c14;
    overflow: hidden;
    position: relative;
}

/* Wiring Toolbar */
.wiring-toolbar {
    background: #111827;
    border-bottom: 1px solid #1f293d;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tool-group-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wire-color-picker {
    display: flex;
    align-items: center;
    gap: 5px;
    background: #0b0f17;
    padding: 3px 6px;
    border-radius: 20px;
    border: 1px solid #1e293b;
}

.btn-color-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    outline: 1px solid rgba(0, 0, 0, 0.4);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.btn-color-dot:hover {
    transform: scale(1.22);
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.7);
}

.btn-color-dot.active {
    border-color: #38bdf8;
    box-shadow: 0 0 10px #38bdf8, 0 0 2px #ffffff;
    transform: scale(1.22);
}

.toolbar-status-right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.circuit-ok-badge {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.35);
    color: #34d399;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.short-circuit-badge {
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid #ef4444;
    color: #fca5a5;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 0 12px rgba(239, 68, 68, 0.5);
}

/* Wiring Viewport & Pan Layer */
.wiring-viewport {
    flex: 1;
    position: relative;
    overflow: hidden;
    background-color: #0b0f17;
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 24px 24px;
    cursor: default;
}

.wiring-pan-layer {
    position: absolute;
    width: 2800px;
    height: 1800px;
    left: 0;
    top: 0;
    transform-origin: 0 0;
}

/* SVG Wires Layer */
.wires-svg-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
}

.wire-hit-path {
    pointer-events: stroke !important;
    cursor: pointer !important;
}

.wire-item:hover .wire-conductor {
    stroke-width: 5px !important;
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.85)) !important;
}

.wire-conductor {
    pointer-events: none;
    transition: stroke 0.2s;
}

.wire-conductor.wire-hot {
    filter: drop-shadow(0 0 4px #38bdf8);
}

.wire-conductor.wire-sparking {
    animation: wire-spark-anim 0.2s infinite;
}

@keyframes wire-spark-anim {
    0% { stroke: #ef4444; stroke-width: 4px; }
    50% { stroke: #ffea00; stroke-width: 6px; }
    100% { stroke: #ef4444; stroke-width: 4px; }
}

.wire-item.selected .wire-conductor {
    stroke: #38bdf8 !important;
    stroke-dasharray: 6, 3;
    animation: wire-dash-flow 0.5s linear infinite;
}

@keyframes wire-dash-flow {
    to { stroke-dashoffset: -9; }
}

/* ==================== DIN RAIL & MODULAR PLC RACK ==================== */
.din-rail-assembly {
    position: absolute;
    top: 30px;
    left: 40px;
    z-index: 5;
}

.din-rail-track {
    position: absolute;
    top: 70px;
    left: -20px;
    width: 1200px;
    height: 38px;
    background: linear-gradient(180deg, #94a3b8 0%, #cbd5e1 35%, #64748b 70%, #475569 100%);
    border: 1px solid #334155;
    border-radius: 3px;
    box-shadow: 0 6px 14px rgba(0,0,0,0.6);
}

.din-rail-metal {
    width: 100%;
    height: 12px;
    margin-top: 13px;
    background: repeating-linear-gradient(90deg, #334155 0px, #334155 12px, transparent 12px, transparent 24px);
    opacity: 0.5;
}

.din-modules-rack {
    display: flex;
    align-items: flex-start;
    gap: 3px;
    position: relative;
    z-index: 6;
}

/* PLC Module Housing */
.din-module-card {
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 1px solid #334155;
    border-top: 3px solid #0284c7;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
    position: relative;
    color: #fff;
    padding: 6px 8px;
}

.din-module-card.mod-cpu {
    border-top-color: #10b981;
}

.btn-remove-module {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(239, 68, 68, 0.2);
    border: 1px solid rgba(239, 68, 68, 0.4);
    color: #f87171;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
}

.din-module-card:hover .btn-remove-module {
    opacity: 1;
}

.mod-top-label {
    display: flex;
    justify-content: space-between;
    font-size: 9px;
    color: var(--text-dim);
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-bottom: 2px;
}

.mod-badge {
    background: #0b0f17;
    padding: 1px 4px;
    border-radius: 2px;
    color: #38bdf8;
    font-weight: 700;
}

.mod-title {
    font-size: 11px;
    font-weight: 700;
    color: #f1f5f9;
}

.mod-subtitle {
    font-size: 9px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* CPU Controls Strip */
.cpu-controls-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0b0f17;
    padding: 4px 8px;
    border-radius: 3px;
    margin: 6px 0;
    border: 1px solid #1e293b;
}

.cpu-leds-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpu-led-item {
    display: flex;
    align-items: center;
    gap: 3px;
}

.led-lbl {
    font-size: 9px;
    font-weight: 700;
    color: var(--text-dim);
}

.btn-mode-switch {
    background: #334155;
    border: 1px solid #475569;
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 2px;
    cursor: pointer;
}

.btn-mode-switch.active-run {
    background: #065f46;
    border-color: #10b981;
    color: #34d399;
}

.btn-mode-switch.active-stop {
    background: #7f1d1d;
    border-color: #ef4444;
    color: #fca5a5;
}

/* PLC Controls Strip Branding */
.cpu-brand-block {
    display: flex;
    flex-direction: column;
}

.cpu-brand-logo {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1.5px;
    color: #38bdf8;
    line-height: 1;
}

.cpu-brand-type {
    font-size: 8px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.cpu-model-selector {
    font-size: 8.5px;
    font-weight: 700;
    color: #38bdf8;
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 3px;
    padding: 2px 4px;
    margin-top: 2px;
    cursor: pointer;
    outline: none;
    font-family: inherit;
    transition: border-color 0.2s, background-color 0.2s;
}

.cpu-model-selector:hover {
    border-color: #38bdf8;
    background: #1e293b;
}

.cpu-model-selector:focus {
    border-color: #0284c7;
    box-shadow: 0 0 0 1px #0284c7;
}

/* PLC Terminal Sections & Structured Bays */
.plc-term-section {
    background: #090e17;
    border: 1px solid #1e293b;
    border-radius: 4px;
    padding: 5px 6px;
    margin-top: 6px;
}

.plc-term-section.top-terminals {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.plc-term-section.bottom-terminals {
    margin-top: 6px;
}

.plc-term-block {
    background: #0d1522;
    border: 1px solid #1e293b;
    border-radius: 3px;
    padding: 5px 6px;
    flex: 1;
}

.plc-term-block.block-power {
    flex: 0 0 96px;
}

.plc-term-block.block-di {
    flex: 1;
}

.plc-block-title {
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 5px;
    text-align: center;
    text-transform: uppercase;
}

.plc-term-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
}

.plc-term-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.plc-cell-tag-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.plc-pin-badge {
    font-size: 8.5px;
    font-weight: 700;
    color: #cbd5e1;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

.plc-pin-badge.badge-pwr {
    color: #f87171;
}

.plc-pin-badge.badge-com {
    color: #60a5fa;
}

.plc-pin-badge.badge-pe {
    color: #4ade80;
}

.plc-relay-grid {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
}

.plc-relay-pair {
    display: flex;
    gap: 4px;
    background: #080d15;
    padding: 3px 5px;
    border-radius: 3px;
    border: 1px solid #1e293b;
}

/* Field Components Terminal Strips */
.comp-term-strip {
    background: #0b111c;
    border-top: 1px solid #1e293b;
    border-bottom: 1px solid #1e293b;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 6px;
}

.comp-term-strip.top-strip {
    border-top: none;
    border-bottom: 1px solid #1e293b;
}

.comp-term-strip.bottom-strip {
    border-bottom: none;
    border-top: 1px solid #1e293b;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.comp-term-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex: 1;
}

.pin-cell-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 4px;
    border-radius: 2px;
    background: #1e293b;
    color: #cbd5e1;
    white-space: nowrap;
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: 0.2px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 1px 2px rgba(0,0,0,0.3);
    text-align: center;
}

/* Color coded badges for field terminals */
.pin-cell-badge.badge-dc_pos, 
.pin-cell-badge.badge-pwr {
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.35);
    background: rgba(239, 68, 68, 0.12);
}

.pin-cell-badge.badge-dc_neg {
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.35);
    background: rgba(59, 130, 246, 0.12);
}

.pin-cell-badge.badge-ac_l {
    color: #fb923c;
    border-color: rgba(249, 115, 22, 0.35);
    background: rgba(249, 115, 22, 0.12);
}

.pin-cell-badge.badge-ac_n {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
}

.pin-cell-badge.badge-pe {
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.35);
    background: rgba(34, 197, 94, 0.12);
}

.pin-cell-badge.badge-signal {
    color: #facc15;
    border-color: rgba(250, 204, 21, 0.35);
    background: rgba(250, 204, 21, 0.12);
}

.pin-cell-badge.badge-contact {
    color: #c084fc;
    border-color: rgba(192, 132, 252, 0.35);
    background: rgba(192, 132, 252, 0.12);
}

.pin-cell-badge.badge-load, 
.pin-cell-badge.badge-coil {
    color: #38bdf8;
    border-color: rgba(56, 189, 248, 0.35);
    background: rgba(56, 189, 248, 0.12);
}

/* Industrial Screw Terminal Elements */
.screw-terminal {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    background: radial-gradient(circle at 35% 35%, #94a3b8 0%, #475569 55%, #1e293b 100%);
    border: 1.5px solid #64748b;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: crosshair;
    position: relative;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.9), 0 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    user-select: none;
    z-index: 5;
}

.screw-terminal:hover {
    transform: scale(1.22);
    border-color: #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.9), inset 0 1px 2px rgba(255,255,255,0.4);
    z-index: 25;
}

.screw-terminal.wiring-origin {
    border-color: #facc15 !important;
    box-shadow: 0 0 12px rgba(250, 204, 21, 0.9) !important;
    animation: origin-pulse 0.8s infinite alternate;
}

@keyframes origin-pulse {
    from { transform: scale(1.1); }
    to { transform: scale(1.25); }
}

.screw-head {
    width: 13px;
    height: 13px;
    background: radial-gradient(circle at 30% 30%, #f1f5f9 0%, #cbd5e1 60%, #94a3b8 100%);
    border-radius: 50%;
    position: relative;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.9), 0 1px 2px rgba(0,0,0,0.8);
    pointer-events: none;
}

/* Cross slot in screw head */
.screw-head::before, .screw-head::after {
    content: '';
    position: absolute;
    background: #1e293b;
    box-shadow: inset 0 0.5px 1px rgba(0,0,0,0.8);
}
.screw-head::before {
    width: 7px;
    height: 2px;
    left: 3px;
    top: 5.5px;
}
.screw-head::after {
    width: 2px;
    height: 7px;
    left: 5.5px;
    top: 3px;
}

.pin-led {
    width: 6px;
    height: 6px;
    min-width: 6px;
    min-height: 6px;
    background: #1e293b;
    border-radius: 50%;
    border: 1px solid #334155;
    display: inline-block;
    pointer-events: none;
}

.pin-led.pin-active {
    background: #22c55e;
    border-color: #4ade80;
    box-shadow: 0 0 6px #22c55e, 0 0 10px #22c55e;
}

/* ==================== FIELD COMPONENTS LAYER ==================== */
.workbench-components-layer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 8;
}

.field-comp-box {
    position: absolute;
    background: #1e293b;
    border: 1px solid #334155;
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    pointer-events: auto;
    cursor: default;
    display: flex;
    flex-direction: column;
}

.comp-header {
    background: #0f172a;
    border-bottom: 1px solid #334155;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: move;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.comp-title-text {
    font-size: 10px;
    font-weight: 700;
    color: #f1f5f9;
}

.comp-ctrls {
    display: flex;
    gap: 4px;
}

.btn-comp-cfg, .btn-comp-del {
    background: transparent;
    border: none;
    color: var(--text-dim);
    cursor: pointer;
    font-size: 10px;
    padding: 0 2px;
}

.btn-comp-del:hover { color: #ef4444; }
.btn-comp-cfg:hover { color: #38bdf8; }

/* Component Terminal Strips & Badges */
.comp-term-strip {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 3px 6px;
    background: #0f172a;
    gap: 4px;
    flex-wrap: nowrap;
}
.comp-term-strip.top-strip {
    border-bottom: 1px solid #334155;
}
.comp-term-strip.bottom-strip {
    border-top: 1px solid #334155;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}
.comp-term-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
}
.pin-cell-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 3px;
    border-radius: 3px;
    white-space: nowrap;
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}
.badge-ac_l { background: #7c2d12; color: #fdba74; }
.badge-ac_r { background: #b91c1c; color: #fecaca; }
.badge-ac_s { background: #854d0e; color: #fef08a; }
.badge-ac_t { background: #1e3a8a; color: #bfdbfe; }
.badge-ac_n { background: #0369a1; color: #bae6fd; }
.badge-pe { background: #14532d; color: #86efac; }
.badge-pwr { background: #831843; color: #fbcfe8; }
.badge-contact { background: #334155; color: #cbd5e1; }
.badge-coil { background: #4c1d95; color: #ddd6fe; }
.badge-load { background: #374151; color: #d1d5db; }
.badge-meter_pos { background: #991b1b; color: #fee2e2; }
.badge-meter_neg { background: #0f172a; color: #94a3b8; border: 1px solid #475569; }

.comp-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50px;
}

/* SMPS Unit */
.smps-display {
    background: #0f172a;
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 8px;
    width: 100%;
    text-align: center;
}

.smps-vents {
    letter-spacing: 2px;
    color: #334155;
    font-size: 11px;
    font-weight: bold;
}

.smps-led-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 6px;
}

.smps-lbl { font-size: 9px; font-weight: 700; color: #10b981; }

/* AC Grids (1-Phase & 3-Phase) */
.ac-display {
    text-align: center;
    padding: 4px;
    width: 100%;
}

.ac-icon { font-size: 20px; color: #f59e0b; margin-bottom: 2px; }
.ac-voltage { font-size: 11px; font-weight: 800; color: #ef4444; }

.ac-3p-display .ac-phase-labels {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin: 4px 0;
}
.phase-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 3px;
}
.phase-badge.phase-r { background: #dc2626; color: #fff; }
.phase-badge.phase-s { background: #eab308; color: #000; }
.phase-badge.phase-t { background: #2563eb; color: #fff; }
.phase-badge.phase-n { background: #0284c7; color: #fff; }
.phase-badge.phase-pe { background: #16a34a; color: #fff; }

/* MCB Unit Multi-Pole (1P, 2P, 3P, 4P) */
.mcb-unit {
    height: 80px;
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
}
.mcb-unit.mcb-poles-1 { width: 50px; }
.mcb-unit.mcb-poles-2 { width: 75px; }
.mcb-unit.mcb-poles-3 { width: 110px; }
.mcb-unit.mcb-poles-4 { width: 145px; }

.mcb-lever {
    width: calc(100% - 8px);
    height: 38px;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 3px;
    cursor: pointer;
    position: relative;
}

.mcb-handle {
    width: 100%;
    height: 16px;
    background: #0284c7;
    border-radius: 2px;
    position: absolute;
    top: 0;
    transition: top 0.15s, background 0.15s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

.mcb-lever.lever-down .mcb-handle {
    top: 20px;
    background: #64748b;
}

.mcb-specs {
    font-size: 8px;
    font-weight: 800;
    color: #64748b;
    margin: 1px 0;
}

.mcb-status-flag {
    font-size: 9px;
    font-weight: 800;
    color: #38bdf8;
}

.mcb-tripped .mcb-status-flag {
    color: #ef4444;
}


/* Pushbutton Operator */
.pb-operator-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.pb-actuator-circle {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 4px solid #334155;
    box-shadow: inset 0 4px 6px rgba(255,255,255,0.4), 0 6px 12px rgba(0,0,0,0.6);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.08s, box-shadow 0.08s;
}

.pb-actuator-circle:active, .pb-actuator-circle.pressed {
    transform: translateY(3px) scale(0.96);
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 2px 4px rgba(0,0,0,0.4);
}

.pb-text {
    color: #fff;
    font-weight: 800;
    font-size: 10px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}

.pb-contact-type {
    font-size: 9px;
    color: var(--text-dim);
    font-weight: 700;
}

/* E-Stop Mushroom */
.estop-operator-face {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.estop-mushroom {
    width: 66px;
    height: 66px;
    background: radial-gradient(circle, #f87171 0%, #ef4444 60%, #b91c1c 100%);
    border-radius: 50%;
    border: 3px solid #7f1d1d;
    box-shadow: inset 0 3px 6px rgba(255,255,255,0.5), 0 8px 16px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.estop-mushroom.mushroom-latched {
    transform: translateY(5px) scale(0.94);
    box-shadow: inset 0 4px 8px rgba(0,0,0,0.7), 0 2px 4px rgba(0,0,0,0.4);
    background: #991b1b;
}

.mushroom-cap {
    font-size: 10px;
    font-weight: 900;
    color: #fff;
    letter-spacing: 0.5px;
}

.estop-collar {
    margin-top: 4px;
    background: #facc15;
    color: #000;
    font-size: 7px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 2px;
}

/* Selector Switch */
.selector-switch-face {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.knob-rotator {
    width: 46px;
    height: 46px;
    background: #0f172a;
    border: 3px solid #475569;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    transition: transform 0.2s;
}

.knob-rotator.knob-off { transform: rotate(-45deg); }
.knob-rotator.knob-on { transform: rotate(45deg); }

.knob-notch {
    width: 4px;
    height: 18px;
    background: #f1f5f9;
    position: absolute;
    top: 2px;
    left: 18px;
    border-radius: 2px;
}

.knob-labels {
    display: flex;
    justify-content: space-between;
    width: 44px;
    margin-top: 4px;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Pilot Lamps */
.lamp-lens-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.lamp-lens {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid #475569;
    background-color: #334155;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.6);
    transition: background-color 0.2s, box-shadow 0.2s;
}

.lamp-lens.lamp-glow {
    box-shadow: 0 0 24px var(--lamp-color), inset 0 0 12px rgba(255,255,255,0.8);
}

.lamp-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Motor Impeller Rotor Animation */
.motor-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 4px;
    width: 100%;
}

.motor-impeller {
    width: 56px;
    height: 56px;
    background: #0f172a;
    border: 3px solid #475569;
    border-radius: 50%;
    position: relative;
    will-change: transform;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 2px 4px rgba(0,0,0,0.5);
}

.motor-status-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 100%;
}

.motor-conn-badge {
    font-size: 8px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.3px;
    text-align: center;
    border: 1px solid transparent;
}
.motor-conn-badge.conn-vsd {
    background: rgba(147, 51, 234, 0.25);
    color: #c084fc;
    border-color: #a855f7;
    box-shadow: 0 0 6px rgba(168, 85, 247, 0.4);
}
.motor-conn-badge.conn-dol {
    background: rgba(2, 132, 199, 0.25);
    color: #38bdf8;
    border-color: #0284c7;
    box-shadow: 0 0 6px rgba(2, 132, 199, 0.4);
}
.motor-conn-badge.conn-standby {
    background: rgba(71, 85, 105, 0.3);
    color: #94a3b8;
    border-color: #475569;
}

.motor-nameplate-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 8px;
    font-weight: 700;
    color: #94a3b8;
    background: rgba(15, 23, 42, 0.6);
    padding: 2px 4px;
    border-radius: 4px;
    border: 1px solid #334155;
    width: 95%;
}

.motor-rated-rpm-select {
    background: #0b0f17;
    color: #38bdf8;
    border: 1px solid #475569;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 3px;
    cursor: pointer;
    outline: none;
}
.motor-rated-rpm-select:focus {
    border-color: #38bdf8;
}

.motor-phase-info {
    font-size: 8px;
    color: #64748b;
    font-weight: 700;
}

.blade {
    position: absolute;
    width: 6px;
    height: 22px;
    background: #38bdf8;
    left: 22px;
    top: 14px;
    border-radius: 3px;
}
.blade1 { transform: rotate(0deg); }
.blade2 { transform: rotate(90deg); }
.blade3 { transform: rotate(180deg); }
.blade4 { transform: rotate(270deg); }

.motor-rpm-badge {
    font-size: 9px;
    font-weight: 800;
    background: #0b0f17;
    padding: 2px 6px;
    border-radius: 10px;
    color: #38bdf8;
    border: 1px solid #1e293b;
}
.motor-rpm-badge.badge-fwd { color: #10b981; border-color: #10b981; }
.motor-rpm-badge.badge-rev { color: #f59e0b; border-color: #f59e0b; }
.motor-rpm-badge.badge-warning { color: #ef4444; border-color: #ef4444; animation: pulse-warn 1s infinite alternate; }

@keyframes pulse-warn {
    from { opacity: 0.7; transform: scale(0.98); }
    to { opacity: 1; transform: scale(1.02); }
}

/* Buzzer waves */
.buzzer-face {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
}

.buzzer-speaker {
    width: 44px;
    height: 44px;
    background: #0f172a;
    border: 3px solid #475569;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.grill-lines {
    width: 20px;
    height: 2px;
    background: #334155;
    box-shadow: 0 4px 0 #334155, 0 -4px 0 #334155;
}

.buzz-wave {
    position: absolute;
    border: 2px solid #ef4444;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}

.buzzer-face.buzzing .wave1 {
    animation: buzz-ripple 0.8s ease-out infinite;
}
.buzzer-face.buzzing .wave2 {
    animation: buzz-ripple 0.8s ease-out 0.4s infinite;
}

@keyframes buzz-ripple {
    0% { width: 30px; height: 30px; opacity: 1; }
    100% { width: 70px; height: 70px; opacity: 0; }
}

/* Magnetic Contactor 3-Phase */
.contactor-face, .contactor-3p-face {
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 4px;
    padding: 6px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.contactor-top-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 8.5px;
    font-weight: 800;
}
.contactor-name-badge { color: #f59e0b; }
.contactor-coil-rating { color: #94a3b8; }

.contactor-armature-window {
    width: 58px;
    height: 32px;
    background: #1e293b;
    border: 2px solid #475569;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.armature-flag {
    font-size: 11px;
    font-weight: 900;
    color: #64748b;
}

.contactor-3p-face.contactor-pulled .contactor-armature-window {
    background: #ea580c;
    border-color: #fb923c;
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.7);
}
.contactor-3p-face.contactor-pulled .armature-flag {
    color: #ffffff;
    transform: scale(1.08);
}

.contactor-labels-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 7.5px;
    font-weight: 700;
    color: #64748b;
}

.contactor-window {
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 3px;
    padding: 4px;
    margin-bottom: 4px;
}

.contactor-indicator {
    display: inline-block;
    width: 16px;
    height: 8px;
    background: #64748b;
    border-radius: 2px;
}

.contactor-indicator.ind-on {
    background: #22c55e;
    box-shadow: 0 0 6px #22c55e;
}

.contactor-rating {
    font-size: 8px;
    color: var(--text-dim);
}

/* Control Relay DPDT */
.relay-dpdt-face {
    width: 100%;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid #38bdf8;
    border-radius: 4px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.relay-cover {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}
.relay-coil-icon { font-size: 9px; font-weight: 800; color: #38bdf8; }
.relay-led-indicator {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #334155;
    border: 1px solid #475569;
    transition: all 0.2s;
}
.relay-led-indicator.led-on {
    background: #22c55e;
    border-color: #4ade80;
    box-shadow: 0 0 8px #22c55e;
}
.relay-contacts-schematic .rel-lbl { font-size: 8px; font-weight: 800; color: #94a3b8; }
.relay-flag { font-size: 8.5px; font-weight: 800; color: #64748b; }
.relay-dpdt-face.relay-energized .relay-flag { color: #22c55e; }

/* Measuring Meters (Voltmeter, Ammeter, Frequency Meter) */
.meter-face {
    width: 100%;
    background: #0f172a;
    border: 2px solid #334155;
    border-radius: 5px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.meter-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.meter-brand { font-size: 8.5px; font-weight: 900; letter-spacing: 0.5px; color: #94a3b8; }
.meter-subtag { font-size: 7.5px; font-weight: 800; color: #64748b; }
.btn-meter-mode {
    font-size: 8px;
    font-weight: 900;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #475569;
    background: #1e293b;
    cursor: pointer;
}
.btn-meter-mode.mode-dc { color: #f59e0b; border-color: #f59e0b; background: rgba(245, 158, 11, 0.15); }
.btn-meter-mode.mode-ac { color: #38bdf8; border-color: #38bdf8; background: rgba(56, 189, 248, 0.15); }
.meter-screen {
    width: 100%;
    height: 46px;
    background: #022c22;
    border: 2px solid #065f46;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}
.meter-digits {
    font-family: 'Courier New', monospace;
    font-size: 17px;
    font-weight: 900;
    color: #34d399;
    letter-spacing: 1px;
    text-shadow: 0 0 6px rgba(52, 211, 153, 0.7);
}
.meter-unit {
    font-size: 8px;
    font-weight: 800;
    color: #6ee7b7;
}
.meter-probe-legend {
    display: flex;
    justify-content: space-around;
    width: 100%;
    font-size: 7.5px;
    font-weight: 700;
    color: #64748b;
    margin-top: 2px;
}
.probe-red { color: #f87171; }
.probe-black { color: #cbd5e1; }

/* Voltmeter Explosion & Cracked Screen */
.meter-face.meter-exploded .meter-screen {
    background: #450a0a !important;
    border-color: #dc2626 !important;
    box-shadow: 0 0 16px #dc2626, inset 0 0 12px rgba(0,0,0,0.9);
}
.meter-boom-text {
    font-size: 13px;
    font-weight: 900;
    color: #fee2e2;
    animation: flash-boom 0.5s infinite alternate;
}
.meter-error-sub {
    font-size: 7.5px;
    font-weight: 800;
    color: #f87171;
}
@keyframes flash-boom {
    from { transform: scale(1); filter: drop-shadow(0 0 2px #ef4444); }
    to { transform: scale(1.08); filter: drop-shadow(0 0 8px #f87171); }
}
.btn-meter-repair {
    margin-top: 2px;
    background: #b91c1c;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
    padding: 3px 8px;
    cursor: pointer;
    animation: pulse-repair-btn 1s infinite alternate;
}
@keyframes pulse-repair-btn {
    0% { transform: scale(0.97); }
    100% { transform: scale(1.03); box-shadow: 0 0 8px #ef4444; }
}

/* Universal Component Explosion & Overcapacity Damage Styles */
.field-comp-box.comp-exploded {
    border-color: #ef4444 !important;
    box-shadow: 0 0 22px rgba(239, 68, 68, 0.85), inset 0 0 15px rgba(0, 0, 0, 0.85) !important;
    animation: comp-burn-shake 0.4s ease-in-out;
}

@keyframes comp-burn-shake {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    20% { transform: translate(-3px, 2px) rotate(-1deg); }
    40% { transform: translate(3px, -2px) rotate(1deg); }
    60% { transform: translate(-2px, -1px) rotate(-0.5deg); }
    80% { transform: translate(2px, 1px) rotate(0.5deg); }
}

.comp-explosion-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 80px;
    background: radial-gradient(circle, #7f1d1d 0%, #450a0a 70%, #1a0505 100%);
    border: 2px solid #ef4444;
    border-radius: 6px;
    padding: 6px 8px;
    text-align: center;
    box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9), 0 0 10px rgba(239, 68, 68, 0.6);
    animation: comp-burn-glow 0.8s ease-in-out infinite alternate;
    box-sizing: border-box;
}

@keyframes comp-burn-glow {
    from { box-shadow: inset 0 0 14px rgba(0, 0, 0, 0.9), 0 0 8px rgba(239, 68, 68, 0.5); }
    to { box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.95), 0 0 18px rgba(239, 68, 68, 0.9); }
}

.comp-boom-title {
    font-size: 11px;
    font-weight: 900;
    color: #fef2f2;
    letter-spacing: 0.5px;
    text-shadow: 0 0 8px #ef4444;
    animation: flash-boom 0.5s infinite alternate;
}

.comp-boom-desc {
    font-size: 7.5px;
    font-weight: 700;
    color: #fca5a5;
    margin: 3px 0 6px 0;
    line-height: 1.25;
    max-width: 95%;
}

.btn-comp-repair {
    background: linear-gradient(135deg, #ef4444, #b91c1c);
    color: #ffffff;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 8px;
    cursor: pointer;
    transition: all 0.2s;
    animation: pulse-repair-btn 1s infinite alternate;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

.btn-comp-repair:hover {
    background: linear-gradient(135deg, #dc2626, #991b1b);
    transform: scale(1.06);
    box-shadow: 0 0 12px #ef4444;
}

/* PLC Rack Explosion */
.din-module-card.plc-exploded {
    border: 2px solid #ef4444 !important;
    box-shadow: 0 0 25px rgba(239, 68, 68, 0.85) !important;
}

.plc-explosion-banner {
    background: linear-gradient(90deg, #7f1d1d, #450a0a);
    border: 1px solid #ef4444;
    border-radius: 4px;
    padding: 4px 8px;
    margin: 4px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.plc-boom-text {
    font-size: 9px;
    font-weight: 800;
    color: #fee2e2;
}

.btn-plc-repair {
    background: #b91c1c;
    color: #fff;
    border: 1px solid #f87171;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 6px;
    cursor: pointer;
    animation: pulse-repair-btn 1s infinite alternate;
}


/* Solenoid */
.solenoid-face {
    width: 100%;
    display: flex;
    justify-content: center;
}

.cylinder-body {
    width: 70px;
    height: 26px;
    background: linear-gradient(180deg, #64748b 0%, #334155 100%);
    border: 1px solid #94a3b8;
    border-radius: 3px;
    position: relative;
}

.piston-rod {
    width: 30px;
    height: 8px;
    background: #e2e8f0;
    position: absolute;
    right: -10px;
    top: 8px;
    transition: transform 0.2s ease-out;
}

.piston-rod.rod-extended {
    transform: translateX(25px);
}

/* Sparks particles */
.sparks-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
}

.spark-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    box-shadow: 0 0 6px #ffdd00;
}

/* Footer Tips */
.wiring-footer-bar {
    background: #0f172a;
    border-top: 1px solid #1e293b;
    padding: 6px 16px;
    font-size: 11px;
    color: var(--text-muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   Clean Empty Rung & Empty Branch Styling
   ========================================================================== */
.rung-circuit-area.empty-rung-area {
    min-height: 56px;
    padding: 6px 0;
}
.empty-rung-rail {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
}
.empty-rail-line {
    flex: 1;
    height: 3px;
    background: #334155;
}
.drop-target-slot.empty-rung-drop-slot {
    width: auto;
    padding: 6px 16px;
    height: 34px;
    border: 1.5px dashed #475569;
    background: rgba(30, 41, 59, 0.6);
    color: #94a3b8;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}
.drop-target-slot.empty-rung-drop-slot:hover {
    border-color: #38bdf8;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    transform: none;
}
.empty-leg-rail {
    display: flex;
    align-items: center;
    min-width: 140px;
    width: 100%;
    height: 48px;
}
.empty-leg-line {
    flex: 1;
    height: 3px;
    background: #334155;
}
.drop-target-slot.empty-leg-drop {
    width: auto;
    padding: 4px 10px;
    height: 28px;
    border: 1.5px dashed #475569;
    background: rgba(30, 41, 59, 0.5);
    color: #94a3b8;
    font-size: 11px;
    border-radius: var(--radius-sm);
    transition: all 0.15s ease;
}
.drop-target-slot.empty-leg-drop:hover {
    border-color: #38bdf8;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
    transform: none;
}
.ladder-node.selected-node, .ladder-branch-block.selected-node {
    outline: 2px solid #38bdf8 !important;
    outline-offset: 3px;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 14px rgba(56, 189, 248, 0.45);
}

/* Floating Action Bar on Selected Node */
.selected-node-action-bar {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    background: #0b1329;
    border: 1.5px solid #38bdf8;
    border-radius: 8px;
    padding: 3px 6px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7), 0 0 14px rgba(56, 189, 248, 0.4);
    z-index: 100;
    white-space: nowrap;
    animation: barPopIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
.selected-node-action-bar::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: #38bdf8 transparent transparent transparent;
}
@keyframes barPopIn {
    from {
        opacity: 0;
        transform: translate(-50%, 6px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0) scale(1);
    }
}
.node-act-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #1e293b;
    border: 1px solid #334155;
    color: #f1f5f9;
    font-size: 10.5px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.12s ease;
}
.node-act-btn:hover {
    background: #0284c7;
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.6);
    transform: translateY(-1px);
}
.node-act-btn.btn-branch-under {
    background: #0369a1;
    border-color: #38bdf8;
    color: #f0f9ff;
}
.node-act-btn.btn-branch-under:hover {
    background: #0284c7;
    color: #fff;
}
.node-act-btn.btn-danger:hover {
    background: #dc2626;
    border-color: #ef4444;
    color: #fff;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

/* Quick Insertion Menu on Wire Click */
.wire-quick-menu {
    position: fixed;
    z-index: 1000;
    background: #0b1329;
    border: 1.5px solid #38bdf8;
    border-radius: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 16px rgba(56, 189, 248, 0.35);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 195px;
    animation: barPopIn 0.12s ease-out;
}
.wire-quick-header {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    padding: 4px 8px;
    border-bottom: 1px solid #1e293b;
    margin-bottom: 2px;
}
.wire-quick-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: transparent;
    border: none;
    color: #f1f5f9;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 4px;
    text-align: left;
    transition: all 0.1s ease;
}
.wire-quick-item:hover {
    background: #1e293b;
    color: #38bdf8;
    padding-left: 12px;
}
.wire-quick-item .quick-icon {
    font-size: 12px;
    color: #38bdf8;
    min-width: 18px;
    text-align: center;
}

/* ==========================================================================
   HMI Simulator & Component Library
   ========================================================================== */
.hmi-workspace-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
}
.hmi-top-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #111827;
    border: 1px solid #1f2937;
    border-radius: var(--radius-md);
    padding: 10px 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.hmi-library-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}
.hmi-library-title {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    margin-right: 4px;
}
.btn-hmi-lib {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
    font-size: 11px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: all 0.15s ease;
}
.btn-hmi-lib:hover {
    background: #334155;
    border-color: #38bdf8;
    color: #fff;
    transform: translateY(-1px);
}
.hmi-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
}
.hmi-sync-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.4);
    color: #4ade80;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 9999px;
}

.hmi-widgets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}
.hmi-widget-card {
    background: #0f172a;
    border: 1px solid #1e293b;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.hmi-widget-card:hover {
    border-color: #334155;
}
.hmi-widget-card.wide-card {
    grid-column: span 2;
}
@media (max-width: 900px) {
    .hmi-widget-card.wide-card {
        grid-column: span 1;
    }
}
.hmi-card-header {
    background: #1e293b;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #334155;
}
.hmi-card-title-block {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: #f8fafc;
}
.hmi-addr-badge {
    background: #090d16;
    border: 1px solid #3b82f6;
    color: #60a5fa;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
}
.hmi-card-tools {
    display: flex;
    align-items: center;
    gap: 4px;
}
.btn-hmi-cfg, .btn-hmi-del {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    padding: 2px 5px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.btn-hmi-cfg:hover {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}
.btn-hmi-del:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, 0.15);
}
.hmi-card-body {
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 120px;
}

/* Alternate / Latching Button */
.hmi-alt-btn {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #1e293b;
    border: 4px solid #475569;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    outline: none;
    box-shadow: 0 6px 14px rgba(0,0,0,0.5), inset 0 2px 4px rgba(255,255,255,0.1);
    transition: all 0.12s ease;
}
.hmi-alt-btn:hover {
    border-color: #94a3b8;
}
.hmi-alt-btn.alt-on {
    border-color: #38bdf8;
    box-shadow: 0 0 16px rgba(56, 189, 248, 0.6), inset 0 0 10px rgba(56, 189, 248, 0.4);
    transform: translateY(2px);
}
.hmi-alt-ring {
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 2.5px solid #334155;
    pointer-events: none;
    transition: all 0.2s;
}
.hmi-alt-btn.alt-on .hmi-alt-ring {
    border-color: #38bdf8;
    box-shadow: 0 0 10px #38bdf8;
}
.hmi-alt-label {
    font-size: 10px;
    font-weight: 800;
    color: #e2e8f0;
    text-align: center;
    line-height: 1.1;
    z-index: 1;
}
.hmi-alt-state-led {
    font-size: 9px;
    font-weight: 900;
    color: #64748b;
    margin-top: 3px;
    z-index: 1;
}
.hmi-alt-btn.alt-on .hmi-alt-state-led {
    color: #38bdf8;
    text-shadow: 0 0 6px #38bdf8;
}

/* Level Bar Bargraph Gauge */
.hmi-bar-gauge-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.hmi-bar-track {
    width: 100%;
    height: 28px;
    background: #1e293b;
    border: 2px solid #334155;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
.hmi-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0284c7, #38bdf8);
    transition: width 0.15s ease-out;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}
.hmi-bar-ticks {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-family: var(--font-mono);
    color: #94a3b8;
}
.hmi-bar-digital-badge {
    align-self: center;
    background: #0b1120;
    border: 1px solid #334155;
    padding: 3px 12px;
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 800;
    color: #38bdf8;
    letter-spacing: 0.05em;
}

/* Digital 7-Segment / Word Readout */
.hmi-digital-readout-box {
    background: #030712;
    border: 2px solid #1f2937;
    border-radius: 8px;
    padding: 12px 20px;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    box-shadow: inset 0 3px 8px rgba(0,0,0,0.8), 0 0 12px rgba(16, 185, 129, 0.2);
}
.hmi-digital-value {
    font-family: 'Courier New', Courier, monospace;
    font-size: 32px;
    font-weight: 900;
    color: #10b981;
    text-shadow: 0 0 10px rgba(16, 185, 129, 0.8);
    letter-spacing: 0.08em;
}
.hmi-digital-unit {
    font-size: 14px;
    font-weight: 700;
    color: #6ee7b7;
}

/* Pilot Lamp Enhancements */
.hmi-pilot-lamp-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.hmi-lamp-bezel {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: radial-gradient(circle, #334155 0%, #0f172a 100%);
    border: 4px solid #475569;
    box-shadow: 0 6px 14px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hmi-lamp-core {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #1e293b;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.7);
    transition: all 0.15s ease;
}
.hmi-lamp-core.lamp-on-green {
    background: radial-gradient(circle, #86efac 10%, #22c55e 60%, #15803d 100%);
    box-shadow: 0 0 24px #22c55e, inset 0 0 8px #ffffff;
}
.hmi-lamp-core.lamp-on-red {
    background: radial-gradient(circle, #fca5a5 10%, #ef4444 60%, #991b1b 100%);
    box-shadow: 0 0 24px #ef4444, inset 0 0 8px #ffffff;
}
.hmi-lamp-core.lamp-on-yellow {
    background: radial-gradient(circle, #fde68a 10%, #f59e0b 60%, #b45309 100%);
    box-shadow: 0 0 24px #f59e0b, inset 0 0 8px #ffffff;
}
.hmi-lamp-core.lamp-on-blue {
    background: radial-gradient(circle, #93c5fd 10%, #3b82f6 60%, #1d4ed8 100%);
    box-shadow: 0 0 24px #3b82f6, inset 0 0 8px #ffffff;
}
.hmi-lamp-core.lamp-on-white {
    background: radial-gradient(circle, #ffffff 10%, #e2e8f0 60%, #94a3b8 100%);
    box-shadow: 0 0 24px #ffffff, inset 0 0 8px #ffffff;
}

/* ==========================================================================
   Schneider Electric EcoStruxure Machine Expert - Basic Grid Ladder Editor
   ========================================================================== */

.cursor-pencil, .cursor-pencil .grid-cell {
    cursor: crosshair !important;
}

.cursor-eraser, .cursor-eraser .grid-cell {
    cursor: not-allowed !important;
}

.ecostruxure-rung {
    background: #0d131f;
    border: 1px dashed #223249;
    border-radius: 6px;
    padding: 10px 14px;
    margin-bottom: 14px;
    transition: all 0.15s ease;
}

.ecostruxure-rung.selected {
    border: 1px solid #38bdf8;
    box-shadow: 0 0 12px rgba(56, 189, 248, 0.2);
}

.rung-grid-canvas-wrapper {
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    background: #090e17;
    border: 1px solid #1a2638;
    border-radius: 4px;
    padding: 6px 12px;
}

/* Grid Column Numbers Header (0 .. 10) */
.grid-col-header-row {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 0 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 4px;
}

.grid-col-hdr {
    width: 88px;
    flex-shrink: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 700;
    color: #475569;
    letter-spacing: 0.05em;
}

.grid-col-hdr.col-hdr-out {
    color: #38bdf8;
}

/* 2D Matrix of Dotted Cells */
.rung-grid-matrix {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rung-grid-row {
    display: flex;
    align-items: center;
    gap: 2px;
}

/* Dotted Grid Cell */
.grid-cell {
    position: relative;
    width: 88px;
    height: 64px;
    flex-shrink: 0;
    background: #0d1421;
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    transition: background 0.12s, border-color 0.12s;
}

.grid-cell:hover {
    background: #141f32;
    border-color: #334155;
}

.grid-cell.col-out-cell {
    background: #0e1726;
    border-left: 1px dashed rgba(56, 189, 248, 0.2);
}

.grid-cell.cell-selected {
    border-color: #38bdf8;
    box-shadow: inset 0 0 0 1px #38bdf8;
}

/* Drawing Preview and Sources */
.grid-cell.cell-draw-preview {
    background: rgba(16, 185, 129, 0.2) !important;
    border-color: #10b981 !important;
}

.grid-cell.wire-drawing-source {
    border-color: #00ffcc !important;
    box-shadow: 0 0 8px rgba(0, 255, 204, 0.5);
}

.grid-cell.drag-over-cell {
    background: rgba(56, 189, 248, 0.25) !important;
    border-color: #38bdf8 !important;
}

/* Dotted Matrix Background in Each Cell (EcoStruxure dots) */
.cell-dots-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.cell-dots-layer .dot {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #253347;
    border-radius: 50%;
}

.cell-dots-layer .dt-tl { top: 4px; left: 4px; }
.cell-dots-layer .dt-tr { top: 4px; right: 4px; }
.cell-dots-layer .dt-bl { bottom: 4px; left: 4px; }
.cell-dots-layer .dt-br { bottom: 4px; right: 4px; }

/* SVG Wire & Instruction Graphic Layer inside Cell */
.cell-wire-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.grid-wire {
    stroke: #334155;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke 0.15s, filter 0.15s;
}

.grid-wire.powered {
    stroke: var(--power-hot);
    filter: drop-shadow(0 0 4px var(--power-hot-glow));
}

.grid-wire-dot {
    fill: #334155;
    transition: fill 0.15s;
}

.grid-wire-dot.powered {
    fill: var(--power-hot);
    filter: drop-shadow(0 0 5px var(--power-hot-glow));
}

/* Instruction Elements rendered inside SVG */
.inst-bar {
    stroke: #e2e8f0;
    stroke-width: 2.5;
    stroke-linecap: square;
    transition: stroke 0.15s, filter 0.15s;
}

.inst-bar.conducting {
    stroke: var(--power-hot);
    filter: drop-shadow(0 0 4px var(--power-hot-glow));
}

.inst-slash {
    stroke: #e2e8f0;
    stroke-width: 2.5;
    stroke-linecap: round;
    transition: stroke 0.15s, filter 0.15s;
}

.inst-slash.conducting {
    stroke: var(--power-hot);
    filter: drop-shadow(0 0 4px var(--power-hot-glow));
}

.inst-coil-arc {
    stroke: #e2e8f0;
    stroke-width: 2.5;
    fill: none;
    stroke-linecap: round;
    transition: stroke 0.15s, filter 0.15s;
}

.inst-coil-arc.coil-active {
    stroke: var(--power-hot);
    filter: drop-shadow(0 0 6px var(--power-hot-glow));
}

.inst-letter {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 900;
    fill: #e2e8f0;
}

.inst-letter.letter-active {
    fill: var(--power-hot);
    filter: drop-shadow(0 0 4px var(--power-hot-glow));
}

.inst-block-box {
    fill: #1e293b;
    stroke: #475569;
    stroke-width: 1.5;
}

.inst-block-box.fblock-done {
    stroke: #10b981;
    fill: #064e3b;
    filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.4));
}

.inst-block-text {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 800;
    fill: #38bdf8;
}

.inst-block-sub {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 700;
    fill: #94a3b8;
}

/* Cell Tag Header - positioned strictly above wire axis */
.cell-tag-header {
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    font-family: var(--font-mono);
    line-height: 1.05;
    z-index: 6;
    pointer-events: auto;
    cursor: pointer;
}

.cell-tag-sym {
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
    max-width: 82px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cell-tag-addr {
    font-size: 10px;
    font-weight: 800;
    color: #e2e8f0;
    position: relative;
    letter-spacing: -0.02em;
}

.cell-tag-addr.addr-forced {
    color: #f59e0b;
}

.force-dot {
    display: inline-block;
    background: #f59e0b;
    color: #000;
    font-size: 8px;
    font-weight: 900;
    padding: 0 3px;
    border-radius: 2px;
    margin-left: 2px;
}

.cell-mini-param-bottom {
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 9px;
    font-family: var(--font-mono);
    color: #38bdf8;
    font-weight: 700;
    z-index: 6;
    pointer-events: none;
}

/* Quick Vertical Branch Connector Handle (Right edge junction of cell) */
.cell-v-handle {
    position: absolute;
    bottom: -7px;
    right: -11px;
    width: 22px;
    height: 14px;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.15s, background 0.15s, transform 0.15s;
}

.grid-cell:hover .cell-v-handle,
.cursor-pencil .cell-v-handle {
    opacity: 0.85;
}

.cell-v-handle:hover {
    opacity: 1 !important;
    background: #0284c7;
    border-color: #38bdf8;
    transform: scale(1.18);
}

.v-handle-icon {
    font-size: 8px;
    color: #e2e8f0;
    line-height: 1;
}

/* Floating Quick Toolbar for Selected Cell */
.cell-quick-toolbar {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #0b1120;
    border: 1px solid #38bdf8;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 2px 4px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.7);
}

.btn-cell-act {
    background: #1e293b;
    border: 1px solid #334155;
    color: #e2e8f0;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 3px;
    cursor: pointer;
}

.btn-cell-act:hover {
    background: #38bdf8;
    color: #000;
}

/* Mini Function Block inside Cell */
.fblock-card-mini {
    background: #1e293b;
    border: 1.5px solid #475569;
    border-radius: 3px;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fblock-card-mini .fb-title {
    font-size: 9px;
    font-weight: 800;
    color: #38bdf8;
}

.fblock-card-mini.fblock-done {
    border-color: #10b981;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.4);
}

/* =========================================================================
   Interactive Wire Selection, Floating Action Bubble, & Config Modal
   ========================================================================= */

/* Selected Wire Pulsating Glow Halo */
.wire-selection-halo {
    animation: wire-pulse 1.2s infinite ease-in-out;
}

@keyframes wire-pulse {
    0%, 100% { stroke-opacity: 0.4; stroke-width: 8; }
    50% { stroke-opacity: 0.9; stroke-width: 10; }
}

/* Floating Wire Action Bubble attached to wire curve */
.wire-floating-bubble {
    position: absolute;
    transform: translate(-50%, -125%);
    background: rgba(15, 23, 42, 0.96);
    backdrop-filter: blur(10px);
    border: 1.5px solid #38bdf8;
    border-radius: 8px;
    padding: 8px 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.85), 0 0 16px rgba(56, 189, 248, 0.35);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 240px;
    user-select: none;
    pointer-events: auto;
    animation: wire-bubble-pop 0.16s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes wire-bubble-pop {
    from { opacity: 0; transform: translate(-50%, -110%) scale(0.92); }
    to { opacity: 1; transform: translate(-50%, -125%) scale(1); }
}

.wire-bubble-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 5px;
}

.wire-bubble-title {
    font-size: 10.5px;
    font-weight: 700;
    color: #38bdf8;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.wire-bubble-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 0 3px;
    line-height: 1;
}
.wire-bubble-close:hover { color: #f87171; }

.wire-bubble-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wire-bubble-color-picker {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.wire-bubble-lbl {
    font-size: 9px;
    font-weight: 700;
    color: #cbd5e1;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.wire-colors-palette {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.wire-color-chip {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    outline: 1px solid rgba(0, 0, 0, 0.4);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.wire-color-chip:hover {
    transform: scale(1.25);
    border-color: #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.8);
}

.wire-color-chip.active {
    border-color: #38bdf8;
    box-shadow: 0 0 12px #38bdf8, 0 0 2px #ffffff;
    transform: scale(1.25);
}

.btn-wire-bubble-del {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
}

.btn-wire-bubble-del:hover {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.6);
}

/* Modal Component Configuration */
.comp-config-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.15s ease-out;
}

.comp-config-modal-card {
    background: #0f172a;
    border: 1.5px solid #38bdf8;
    border-radius: 10px;
    width: 420px;
    max-width: 92vw;
    box-shadow: 0 24px 48px rgba(0,0,0,0.9), 0 0 25px rgba(56, 189, 248, 0.25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: compModalPop 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes compModalPop {
    from { opacity: 0; transform: scale(0.93) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.comp-config-header {
    background: #1e293b;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #334155;
}

.comp-config-header h3 {
    margin: 0;
    font-size: 13.5px;
    font-weight: 700;
    color: #f1f5f9;
    display: flex;
    align-items: center;
    gap: 6px;
}

.btn-close-modal {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 16px;
    cursor: pointer;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.btn-close-modal:hover { color: #ef4444; background: rgba(239, 68, 68, 0.1); }

.comp-config-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cfg-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cfg-form-group label {
    font-size: 11.5px;
    font-weight: 600;
    color: #e2e8f0;
}

.cfg-hint {
    font-size: 10px;
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.08);
    border-left: 2px solid #38bdf8;
    padding: 4px 8px;
    border-radius: 3px;
    margin-top: 4px;
    line-height: 1.4;
}

.comp-config-footer {
    padding: 12px 18px;
    background: #1e293b;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid #334155;
}

/* =========================================================================
   Potentiometer 0-10V Analog Dial Component
   ========================================================================= */
.potentiometer-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 10px 8px;
    background: #090f1a;
    border-radius: 4px;
}

.pot-dial-container {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #475569 0%, #1e293b 70%, #0f172a 100%);
    border: 2.5px solid #64748b;
    box-shadow: 0 4px 10px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.pot-knob {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #334155 0%, #1e293b 100%);
    border: 2px solid #475569;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: transform 0.05s ease-out;
}

.pot-indicator-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 6px #38bdf8;
    position: absolute;
    top: 5px;
    left: calc(50% - 2.5px);
}

.pot-readout {
    display: flex;
    align-items: baseline;
    gap: 4px;
    background: #030712;
    padding: 2px 10px;
    border-radius: 4px;
    border: 1px solid #1e293b;
}

.pot-volt-num {
    font-family: var(--font-mono);
    font-size: 16px;
    font-weight: 900;
    color: #38bdf8;
}

.pot-volt-unit {
    font-size: 10px;
    font-weight: 700;
    color: #64748b;
}

.pot-slider-row {
    width: 100%;
}

.pot-slider-input {
    width: 100%;
    cursor: pointer;
    accent-color: #38bdf8;
}

/* =========================================================================
   Inverter Variable Speed Drive (VSD 1-Phase / 3-Phase)
   ========================================================================= */
.vsd-face {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    background: linear-gradient(180deg, #182234 0%, #0d1522 100%);
    border-radius: 6px;
    border: 1px solid #334155;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}

.vsd-top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 4px;
}

.vsd-brand {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    color: #38bdf8;
}

.vsd-model-badge {
    font-size: 8px;
    font-weight: 800;
    background: #0284c7;
    color: #fff;
    padding: 1px 5px;
    border-radius: 3px;
    letter-spacing: 0.3px;
}

.vsd-screen-bezel {
    background: #020617;
    border: 2px solid #334155;
    border-radius: 5px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.8);
}

.vsd-digital-screen {
    text-align: center;
}

.vsd-hz-digits {
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
    font-weight: 900;
    color: #10b981;
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.8);
    letter-spacing: 1px;
}

.vsd-status-leds {
    display: flex;
    justify-content: space-around;
    font-size: 8px;
    font-weight: 800;
}

.vsd-led {
    padding: 1px 4px;
    border-radius: 2px;
    color: #475569;
}

.vsd-led.led-on-green {
    background: #065f46;
    color: #34d399;
    box-shadow: 0 0 6px #10b981;
}

.vsd-led.led-on-red {
    background: #7f1d1d;
    color: #fca5a5;
    box-shadow: 0 0 6px #ef4444;
}

.vsd-led.led-on-amber {
    background: #78350f;
    color: #fcd34d;
    box-shadow: 0 0 6px #f59e0b;
}

.vsd-keypad {
    display: flex;
    gap: 6px;
    justify-content: center;
}

.btn-vsd-key {
    flex: 1;
    padding: 4px 6px;
    font-size: 10px;
    font-weight: 800;
    border-radius: 3px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.12s;
}

.btn-vsd-run {
    background: #064e3b;
    color: #34d399;
    border-color: #059669;
}

.btn-vsd-run:hover, .btn-vsd-run.active {
    background: #10b981;
    color: #000;
    box-shadow: 0 0 10px #10b981;
}

.btn-vsd-stop {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #b91c1c;
}

.btn-vsd-stop:hover, .btn-vsd-stop.active {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 0 10px #ef4444;
}

.btn-vsd-rev {
    background: #334155;
    color: #e2e8f0;
    border-color: #475569;
}

.btn-vsd-rev:hover {
    background: #475569;
    color: #fff;
}

.vsd-speed-bar {
    text-align: center;
    padding-top: 2px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.vsd-speed-lbl {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 700;
    color: #94a3b8;
}

/* VSD Mode Toggles */
.vsd-mode-toggles {
    display: flex;
    gap: 4px;
    background: rgba(15, 23, 42, 0.6);
    padding: 3px 5px;
    border-radius: 4px;
    border: 1px solid #334155;
    justify-content: space-between;
}

.btn-vsd-toggle {
    background: #1e293b;
    border: 1px solid #475569;
    color: #94a3b8;
    font-size: 8px;
    font-weight: 800;
    padding: 2px 5px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 3px;
}

.btn-vsd-toggle:hover {
    background: #334155;
    color: #fff;
}

.btn-vsd-toggle.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #fff;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.btn-vsd-toggle.active-green {
    background: #059669;
    border-color: #34d399;
    color: #fff;
    box-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
}

/* VSD Jog Dial Potentiometer */
.vsd-jog-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 4px 8px;
    gap: 8px;
}

.vsd-jog-knob-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.vsd-jog-knob {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, #334155 0%, #0f172a 100%);
    border: 2px solid #64748b;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.2), 0 3px 6px rgba(0,0,0,0.6);
    position: relative;
    cursor: pointer;
    transition: transform 0.1s ease-out;
}

.vsd-jog-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: 0 0 4px #38bdf8;
    position: absolute;
    top: 4px;
    left: 12px;
}

.vsd-jog-controls {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.vsd-jog-header {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    font-weight: 800;
}

.vsd-jog-title {
    color: #94a3b8;
}

.vsd-jog-val {
    color: #38bdf8;
    font-family: var(--font-mono);
}

.vsd-pot-slider {
    width: 100%;
    height: 4px;
    accent-color: #38bdf8;
    cursor: pointer;
}

.vsd-term-info {
    font-size: 8px;
    color: #38bdf8;
    font-family: var(--font-mono);
    text-align: center;
    padding: 2px;
    background: rgba(56, 189, 248, 0.1);
    border-radius: 3px;
    border: 1px dashed rgba(56, 189, 248, 0.3);
}

/* VSD Acceleration / Deceleration (ACC / DEC) Delay Controls */
.vsd-ramp-settings {
    display: flex;
    gap: 4px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid #334155;
    border-radius: 4px;
    padding: 3px 6px;
    justify-content: space-between;
}

.vsd-ramp-box {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vsd-ramp-lbl {
    font-size: 8px;
    font-weight: 800;
    color: #94a3b8;
    letter-spacing: 0.3px;
}

.vsd-ramp-btns {
    display: flex;
    align-items: center;
    gap: 2px;
    background: #0b0f17;
    border: 1px solid #1e293b;
    border-radius: 3px;
    padding: 1px 2px;
}

.btn-vsd-ramp {
    background: #1e293b;
    border: 1px solid #334155;
    color: #cbd5e1;
    font-size: 8px;
    font-weight: 900;
    width: 15px;
    height: 15px;
    line-height: 12px;
    padding: 0;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;
    transition: all 0.1s;
}
.btn-vsd-ramp:hover {
    background: #38bdf8;
    color: #000;
    border-color: #38bdf8;
}

.vsd-acc-val, .vsd-dec-val {
    font-family: var(--font-mono);
    font-size: 8px;
    font-weight: 800;
    color: #facc15;
    min-width: 24px;
    text-align: center;
}

.vsd-ramp-indicator {
    font-size: 7px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 2px;
    text-align: center;
    letter-spacing: 0.3px;
    display: inline-block;
}
.vsd-ramp-indicator.ramp-acc {
    background: #065f46;
    color: #34d399;
    box-shadow: 0 0 5px #10b981;
}
.vsd-ramp-indicator.ramp-dec {
    background: #78350f;
    color: #fcd34d;
    box-shadow: 0 0 5px #f59e0b;
}
.vsd-ramp-indicator.ramp-steady {
    background: #0369a1;
    color: #7dd3fc;
}
.vsd-ramp-indicator.ramp-idle {
    background: #1e293b;
    color: #64748b;
}

/* ==========================================================================
   3-Phase Power Meter Component Styles
   ========================================================================== */
.power-meter-face {
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #334155;
    border-radius: 6px;
    padding: 6px 8px;
    gap: 6px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 6px 16px rgba(0,0,0,0.5);
}

.pm-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding-bottom: 4px;
}

.pm-brand {
    font-size: 10px;
    font-weight: 900;
    color: #e2e8f0;
    letter-spacing: 0.5px;
}

.pm-model-tag {
    font-size: 8px;
    font-weight: 800;
    background: #0369a1;
    color: #bae6fd;
    padding: 1px 5px;
    border-radius: 3px;
}

.pm-screen {
    background: #020617;
    border: 2px solid #1e293b;
    border-radius: 5px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.9);
}

.pm-page-indicator {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 8px;
    font-weight: 800;
    color: #64748b;
    border-bottom: 1px solid #1e293b;
    padding-bottom: 2px;
}

.pm-status-tag {
    color: #10b981;
}

.pm-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 8px;
}

.pm-cell {
    display: flex;
    flex-direction: column;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255,255,255,0.04);
    padding: 3px 5px;
    border-radius: 3px;
}

.pm-cell-lbl {
    font-size: 8px;
    font-weight: 800;
    color: #94a3b8;
}

.pm-cell-val {
    font-family: 'Courier New', Courier, monospace;
    font-size: 13px;
    font-weight: 900;
    color: #38bdf8;
    text-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.pm-cell-val.val-green {
    color: #34d399;
    text-shadow: 0 0 6px rgba(52, 211, 153, 0.6);
}

.pm-cell-val.val-amber {
    color: #fbbf24;
    text-shadow: 0 0 6px rgba(251, 191, 36, 0.6);
}

.pm-page-tabs {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.btn-pm-tab {
    flex: 1;
    background: #1e293b;
    border: 1px solid #475569;
    color: #cbd5e1;
    font-size: 9px;
    font-weight: 800;
    padding: 3px 4px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.12s;
}

.btn-pm-tab:hover {
    background: #334155;
    color: #fff;
}

.btn-pm-tab.active {
    background: #0284c7;
    border-color: #38bdf8;
    color: #fff;
    box-shadow: 0 0 6px rgba(56, 189, 248, 0.6);
}

.pm-wiring-info {
    font-size: 7.5px;
    font-weight: 700;
    color: #64748b;
    text-align: center;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 2px;
}

/* ==========================================================================
   Current Transformer (CT) Sensor Component Styles
   ========================================================================== */
.ct-face {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    border: 2px solid #334155;
    border-radius: 6px;
    padding: 5px 6px;
    gap: 4px;
    box-shadow: inset 0 2px 4px rgba(255,255,255,0.05), 0 4px 10px rgba(0,0,0,0.5);
}

.ct-badge-row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.ct-brand {
    font-size: 9px;
    font-weight: 900;
    color: #e2e8f0;
}

.ct-ratio-tag {
    font-size: 8px;
    font-weight: 800;
    background: #065f46;
    color: #a7f3d0;
    padding: 1px 4px;
    border-radius: 3px;
    box-shadow: 0 0 4px rgba(52, 211, 153, 0.4);
}

.ct-core-donut {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, #0f172a 35%, #334155 38%, #1e293b 70%, #0f172a 100%);
    border: 3px solid #64748b;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.8), 0 4px 8px rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.ct-hole {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #020617;
    border: 2px dashed #94a3b8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ct-conductor-line {
    width: 5px;
    height: 28px;
    background: linear-gradient(180deg, #b45309 0%, #f59e0b 50%, #b45309 100%);
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(245, 158, 11, 0.6);
}

.ct-conductor-line.active {
    background: linear-gradient(180deg, #dc2626 0%, #f87171 50%, #dc2626 100%);
    box-shadow: 0 0 8px #ef4444;
    animation: ctPulse 1s infinite alternate;
}

@keyframes ctPulse {
    from { opacity: 0.8; }
    to { opacity: 1; filter: brightness(1.2); }
}

.ct-info-box {
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 4px;
    padding: 3px 6px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    font-weight: 800;
}

.ct-pri-val {
    color: #38bdf8;
    font-family: var(--font-mono);
}

.ct-sec-val {
    color: #34d399;
    font-family: var(--font-mono);
}

.ct-term-guide {
    font-size: 7.5px;
    color: #64748b;
    font-weight: 700;
}