*{box-sizing:border-box;margin:0;padding:0}:root{--bg:#f4f7fa;--card-bg:#fff;--primary:#4a90e2;--text:#333;--muted:#666;--success:#2ecc71;--danger:#e74c3c;--warning:#f1c40f;--shadow:rgba(0,0,0,.1);--shadow-hover:rgba(0,0,0,.2);--footer-bg:#2c3e50}body{background:var(--bg);color:var(--text);display:flex;flex-direction:column;font-family:Inter,sans-serif;min-height:100vh;padding-bottom:40px;position:relative}.container{background-color:#fff;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.15);flex:1;margin:auto;max-width:1200px;padding:20px;width:100%}.site-footer{background-color:var(--footer-bg);bottom:0;color:#fff;font-size:.9rem;left:0;padding:10px 0;position:absolute;width:100%}.site-footer,h1{text-align:center}h1{margin-bottom:20px}h1,h2{color:var(--primary)}h2{margin-bottom:1rem}#login-section{background:var(--card-bg);border-radius:8px;box-shadow:0 2px 6px var(--shadow);margin:2rem auto;max-width:400px;padding:1.5rem;width:100%}#login-section h2{margin-bottom:1rem;text-align:center}#login-section label{display:block;font-weight:700;margin-top:.75rem}#login-section input{border:1px solid #ccc;border-radius:4px;margin-top:4px;padding:8px;width:100%}#login-section button{background-color:var(--primary);border:none;border-radius:4px;color:#fff;cursor:pointer;margin-top:1rem;padding:10px;transition:background .2s;width:100%}#login-section button:hover{background-color:#357ab8}.error-message{color:var(--danger);font-size:.9em;margin-top:.5rem;text-align:center}.header{margin-bottom:1.5rem;max-width:1200px;width:100%}.header h1{align-items:center;color:var(--primary);display:flex;font-size:2rem;justify-content:center;text-align:center}.header-logo{height:40px;margin-right:15px;width:auto}.config{background:var(--card-bg);border-radius:12px;box-shadow:0 4px 12px var(--shadow);margin-bottom:2rem;max-width:480px;padding:1.5rem;width:100%}.config h2{color:var(--primary);margin-bottom:1rem}.form-row{display:flex;flex-direction:column;margin-bottom:1rem}.form-row label{font-weight:700;margin-bottom:.25rem}.form-row input{border:1px solid #ccc;border-radius:4px;padding:8px}.btn{background:var(--primary);border:none;border-radius:6px;color:#fff;cursor:pointer;margin-top:.5rem;padding:.6rem 1rem;transition:background .2s ease}.btn:hover{background:#357ab8}.status-row{align-items:center;display:flex;margin-top:.75rem}.status-row .indicator{background:var(--danger);border-radius:50%;display:inline-block;height:12px;margin-right:.5rem;width:12px}.status-row .indicator.online{background:var(--success)}.status-row .indicator.connecting{background:var(--warning)}.status-row .status{color:var(--text);font-size:.95rem}.layout{display:flex;margin-top:1rem;max-width:1200px;width:100%}.sidebar{background:var(--card-bg);border-radius:8px;box-shadow:0 2px 8px var(--shadow);margin-right:1rem;padding:1rem;width:200px}.sidebar h3{color:var(--primary);font-size:1rem;font-weight:700;margin-bottom:.5rem;text-transform:uppercase}.sidebar ul{list-style:none;margin:0;padding-left:0}.sidebar>ul>li{border-radius:4px;color:var(--primary);cursor:pointer;font-size:.95rem;font-weight:700;padding:.3rem .5rem;transition:background .2s}.sidebar>ul>li.active,.sidebar>ul>li:hover{background:var(--primary);color:#fff}.sidebar ul ul>li{align-items:center;border-radius:4px;color:var(--text);cursor:pointer;display:flex;font-size:.85rem;font-weight:400;padding:.3rem .5rem .3rem 1.5rem;transition:background .2s}.sidebar ul ul>li.active,.sidebar ul ul>li:hover{background:var(--primary);color:#fff}.status-dot{background:var(--danger);border-radius:50%;display:inline-block;height:10px;margin-right:.5rem;width:10px}.status-dot.online{background:var(--success)}.status-dot.offline{background:var(--danger)}.cards{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));width:100%}.card{background:var(--card-bg);border-radius:12px;box-shadow:0 2px 8px var(--shadow);padding:1rem;position:relative;text-align:center;transition:transform .2s ease,box-shadow .2s ease}.card:focus-within,.card:hover{box-shadow:0 4px 16px var(--shadow-hover);cursor:pointer;transform:translateY(-4px)}.card h3{color:var(--primary);font-size:1.1rem;margin-bottom:.5rem}.card p.val{font-size:1.6rem;font-weight:700;margin-bottom:.75rem}.card .unit{color:#555;font-size:.9em;margin-left:4px}.card.boolean.on{background:var(--success);color:#fff}.card.boolean.off{background:var(--danger);color:#fff}.card-controls{display:flex;justify-content:center;margin-top:.5rem}.card-controls input{margin-right:.5rem;width:60px}.card-controls button{background:var(--primary);border:none;border-radius:6px;color:#fff;cursor:pointer;padding:.4rem .8rem;transition:background .2s ease}.card-controls button:hover{background:#357ab8}.debug-console{background:#1e1e1e;border-radius:8px;color:#c5c5c5;font-family:monospace;font-size:.85rem;margin-top:1rem;max-height:200px;max-width:1200px;overflow-y:auto;padding:.5rem;width:100%}.debug-console h3{color:var(--primary);margin-bottom:.5rem}.debug-console pre{white-space:pre-wrap;word-wrap:break-word}#data-section{background:var(--card-bg);border-radius:8px;box-shadow:0 4px 12px var(--shadow);margin-top:2rem;max-width:1200px;padding:1.5rem;width:100%}#data-section h2{color:var(--primary);margin-bottom:1rem}#data-section label{font-weight:700;margin-right:8px}#data-section button,#data-section input[type=datetime-local],#data-section select{border:1px solid #ccc;border-radius:4px;margin-right:16px;margin-top:.25rem;padding:6px}#data-section button{background-color:var(--primary);border:none;color:#fff;cursor:pointer;transition:background .2s ease}#data-section button:hover{background-color:#357ab8}#export-controls{margin-top:1rem}#export-controls button{background-color:#28a745;border:none;border-radius:4px;color:#fff;cursor:pointer;margin-right:8px;padding:6px 12px;transition:background .2s}#export-controls button:hover{background-color:#1e7e34}#data-table{margin-top:1rem}@media (max-width:768px){.layout{flex-direction:column}.sidebar{margin-bottom:1rem;width:100%}.cards{grid-template-columns:1fr}body{padding-bottom:60px}}.card .settings-icon{align-items:center;background-color:rgba(0,0,0,.1);border-radius:50%;color:var(--muted);cursor:pointer;display:flex;font-style:normal;font-weight:700;height:24px;justify-content:center;position:absolute;right:8px;top:8px;transition:background-color .2s,color .2s;width:24px;z-index:10}.card .settings-icon:hover{background-color:var(--primary);color:#fff}.modal-overlay{align-items:center;background-color:rgba(0,0,0,.6);display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%;z-index:1000}.modal-content{background:#fff;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,.3);display:flex;flex-direction:column;max-height:90vh;max-width:500px;padding:20px;width:90%}.modal-header{align-items:center;border-bottom:1px solid #eee;display:flex;justify-content:space-between;margin-bottom:15px;padding-bottom:10px}.modal-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:1.5rem}.modal-preview-area{align-items:center;background-color:var(--bg);border-radius:8px;display:flex;flex-direction:column;margin-bottom:20px;padding:15px}#modal-preview-card{box-shadow:0 2px 8px var(--shadow);cursor:default!important;min-width:240px;transform:scale(.9)}.modal-body{overflow-y:auto;padding-right:10px}.pref-group{margin-bottom:15px}.pref-group label{display:block;font-weight:700;margin-bottom:5px}.pref-group input[type=number],.pref-group input[type=text]{border:1px solid #ccc;border-radius:4px;padding:8px;width:100%}.pref-group .size-inputs{display:flex;gap:10px}.btn-secondary{background-color:#ccc;border:none;border-radius:6px;color:var(--text);cursor:pointer;margin-top:5px;padding:.6rem 1rem}.modal-footer{border-top:1px solid #eee;display:flex;gap:10px;justify-content:flex-end;margin-top:10px;padding-top:15px}#pref-resize-handle{cursor:nwse-resize}.card .chart-container{align-items:center;display:flex;height:120px;justify-content:center;margin-bottom:10px;position:relative;width:100%}.card .chart-value{font-size:1.8rem;font-weight:700;z-index:2}.gauge-body{background:#e0e0e0;height:50%;top:50%}.gauge-body,.gauge-fill{border-top-left-radius:120px;border-top-right-radius:120px;left:0;position:absolute;width:100%}.gauge-fill{background:linear-gradient(to right,var(--success),var(--warning),var(--danger));height:100%;top:0}.gauge-cover{align-items:center;background:var(--card-bg);border-radius:50%;display:flex;height:80%;justify-content:center;left:10%;position:absolute;top:25%;width:80%;z-index:1}.gauge-needle{background:#333;border-radius:2px;bottom:50%;height:45%;left:50%;position:absolute;transform-origin:bottom center;transition:transform .5s ease-out;width:4px;z-index:2}.bar-track{background-color:#e0e0e0;border-radius:15px;height:30px;position:relative;width:90%}.bar-fill{background-color:var(--primary);border-radius:15px;height:100%;transition:width .5s ease-out}.battery-outline{border:4px solid #333;border-radius:10px;height:120px;padding:4px;position:relative;width:80px}.battery-outline:after{background-color:#333;border-radius:2px;content:"";height:4px;left:50%;position:absolute;top:-8px;transform:translateX(-50%);width:20px}.battery-level{background-color:var(--success);bottom:4px;left:4px;position:absolute;right:4px;transition:height .5s ease-out}.v-bar-track{background-color:#e0e0e0;border-radius:15px;height:100%;position:relative;width:30px}.v-bar-fill{background-color:var(--primary);border-radius:15px;bottom:0;position:absolute;transition:height .5s ease-out;width:100%}.donut-chart{background-image:conic-gradient(var(--primary) 0deg,#e0e0e0 0deg);border-radius:50%;height:100px;transition:background-image .5s;width:100px}.thermo-outline{border:3px solid #333;border-radius:15px 15px 0 0;height:100px;position:relative;width:30px}.thermo-level{background:linear-gradient(0deg,#ff5f6d,#ffc371);bottom:0;left:0;position:absolute;right:0;transition:height .5s ease-out}.thermo-bulb{background:#ff5f6d;border:3px solid #333;border-radius:50%;bottom:-20px;height:40px;left:50%;position:absolute;transform:translateX(-50%);width:40px}.tank-outline{border:3px solid #333;border-radius:5px;height:120px;overflow:hidden;position:relative;width:100px}.tank-level{background-color:#3498db;bottom:0;left:0;position:absolute;right:0;transition:height .5s ease-out}.traffic-light-box{align-items:center;background:#2c3e50;border-radius:8px;display:flex;flex-direction:column;height:110px;justify-content:space-around;padding:5px;width:40px}.traffic-light{background:#4d4d4d;border-radius:50%;height:25px;width:25px}.traffic-light.red.active{background-color:#e74c3c}.traffic-light.yellow.active{background-color:#f1c40f}.traffic-light.green.active{background-color:#2ecc71}.sound-bars{align-items:flex-end;display:flex;gap:4px;height:100%}.sound-bar{background-color:#e0e0e0;border-radius:2px;width:10px}.sound-bar.active{background:linear-gradient(to top,var(--success),var(--warning),var(--danger))}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes flow{0%{background-position:0 0}to{background-position:50px 50px}}@keyframes pulse{0%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@keyframes slide{0%{transform:translateX(-100%)}to{transform:translateX(100%)}}@keyframes subtle-float{0%{transform:translateY(0)}50%{transform:translateY(-3px)}to{transform:translateY(0)}}@keyframes alert-pulse-green{0%{box-shadow:0 0 10px rgba(46,204,113,.7)}50%{box-shadow:0 0 25px #2ecc71}to{box-shadow:0 0 10px rgba(46,204,113,.7)}}@keyframes alert-pulse-red{0%{box-shadow:0 0 10px rgba(231,76,60,.7)}50%{box-shadow:0 0 25px #e74c3c}to{box-shadow:0 0 10px rgba(231,76,60,.7)}}.lamp-container .lamp-body{background-color:#7f8c8d;border-radius:50%;height:60px;position:relative;width:60px}.lamp-container.on .lamp-body{background-color:#f1c40f;box-shadow:0 0 25px #f1c40f}.motor-container .gear{color:#34495e;font-size:50px}.motor-container.on .gear{animation:rotate 2s linear infinite}.pump-container .pump-body{background-color:#95a5a6;border-radius:50%;height:60px;width:60px}.pump-container .pump-flow{background:linear-gradient(45deg,#3498db,#8e44ad);height:0;transition:height .3s;width:20px}.pump-container.on .pump-flow{animation:flow 1s linear infinite;height:40px}.switch-container .switch-body{background-color:#7f8c8d;border-radius:15px;cursor:pointer;height:30px;position:relative;width:60px}.switch-container .switch-handle{background-color:#fff;border-radius:50%;height:26px;left:2px;position:absolute;top:2px;transition:transform .2s;width:26px}.switch-container.on .switch-body{background-color:var(--success)}.switch-container.on .switch-handle{transform:translateX(30px)}.valve-container .pipe{background-color:#bdc3c7;height:20px;position:relative;width:100px}.valve-container .handle{background-color:#c0392b;height:40px;left:50%;position:absolute;top:-10px;transform:translateX(-50%);transition:transform .2s;width:10px}.valve-container.on .handle{transform:translateX(-50%) rotate(90deg)}.conveyor-container .conveyor-belt{background-color:#34495e;height:30px;overflow:hidden;position:relative;width:120px}.conveyor-container .package{background-color:#e67e22;height:20px;left:0;position:absolute;top:5px;width:20px}.conveyor-container.on .package{animation:slide 3s linear infinite}.connection-container .node{background-color:#2c3e50;border-radius:50%;height:20px;width:20px}.connection-container .line{background-color:#e74c3c;height:4px;width:80px}.connection-container.on .line{animation:pulse 1.5s infinite;background-color:var(--success)}.security-container .shield{color:#bdc3c7;font-size:60px;transition:color .3s}.security-container.on .shield{animation:subtle-float 2s ease-in-out infinite;color:var(--success)}.security-container.off .shield{color:var(--danger)}.transformer-container .coil{border:4px solid #34495e;border-radius:5px;height:80px;width:50px}.transformer-container.on .coil{border-color:#f1c40f;box-shadow:0 0 15px #f1c40f}.butterfly-valve-container .pipe{border:4px solid #34495e;border-radius:50%;height:80px;position:relative;width:80px}.butterfly-valve-container .disc{background-color:#95a5a6;height:10px;left:5%;position:absolute;top:50%;transform:translateY(-50%) rotate(90deg);transition:transform .3s;width:90%}.butterfly-valve-container.on .disc{transform:translateY(-50%) rotate(0deg)}.breaker-container .breaker-box{background-color:#ecf0f1;border:2px solid #95a5a6;height:80px;width:50px}.breaker-container .breaker-switch{background-color:#e74c3c;height:30px;margin:5px auto;transition:transform .2s;width:20px}.breaker-container.on .breaker-switch{background-color:var(--success);transform:translateY(-15px)}.alert-container .alert-dot{border-radius:50%;height:50px;width:50px}.alert-container.on .alert-dot{animation:alert-pulse-green 1.5s infinite;background-color:var(--success)}.alert-container.off .alert-dot{animation:alert-pulse-red 1.5s infinite;background-color:var(--danger)}.signal-bars-container{align-items:flex-end;display:flex;gap:3px;height:60px}.signal-bar{background-color:#e0e0e0;border-radius:2px;transition:background-color .3s;width:12px}.signal-arc-container{background-color:#e0e0e0;border-top-left-radius:100px;border-top-right-radius:100px;height:50px;overflow:hidden;position:relative;width:100px}.signal-arc-fill{background:linear-gradient(to right,var(--danger),var(--warning),var(--success));bottom:0;height:200%;left:-50%;position:absolute;transform-origin:bottom center;transition:transform .5s;width:200%}.value-chart-wrapper{align-items:center;display:flex;gap:10px;justify-content:center;width:100%}.value-chart-wrapper.pos-left{flex-direction:row-reverse}.value-chart-wrapper.pos-right{flex-direction:row}.value-chart-wrapper.pos-top{flex-direction:column-reverse}.value-chart-wrapper.pos-bottom{flex-direction:column}.value-chart-wrapper.pos-left .chart-container,.value-chart-wrapper.pos-left .chart-value,.value-chart-wrapper.pos-right .chart-container,.value-chart-wrapper.pos-right .chart-value{margin-left:15px;margin-right:15px}#loading-indicator{align-items:center;display:flex;justify-content:center;padding:20px}#loading-indicator.hidden{display:none}.dot{animation:dot-blink 1.4s infinite both;background-color:#f1c40f;border-radius:50%;display:inline-block;height:10px;margin:0 5px;width:10px}.dot:nth-child(2){animation-delay:.2s}.dot:nth-child(3){animation-delay:.4s}@keyframes dot-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}