.demo-body{color:#333;background:#f5f7fa;min-height:100vh;margin:0;font-family:Segoe UI,system-ui,-apple-system,sans-serif}.demo-app{min-height:100vh;position:relative}.demo-intro-slide{z-index:10050;opacity:0;visibility:hidden;background:linear-gradient(135deg,#e8f5e9f7 0%,#f5f7fafa 50%,#e3f2fdf7 100%);justify-content:center;align-items:center;padding:24px;transition:opacity .45s,visibility .45s;display:flex;position:fixed;inset:0}.demo-intro-slide.is-visible{opacity:1;visibility:visible}.demo-intro-slide-card{text-align:center;background:#fff;border:1px solid #e0e0e0;border-radius:18px;width:100%;max-width:480px;padding:40px 36px;animation:.55s demoIntroIn;box-shadow:0 16px 48px #0000001f}@keyframes demoIntroIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.demo-intro-eyebrow{letter-spacing:.06em;text-transform:uppercase;color:#2e7d32;margin:0 0 8px;font-size:.8rem;font-weight:700}.demo-intro-slide-card h1{color:#2e7d32;margin:0 0 14px;font-size:1.75rem}.demo-intro-text{color:#555;margin:0 0 12px;font-size:.95rem;line-height:1.55}.demo-intro-hint{color:#777;margin:0 0 24px;font-size:.85rem}.demo-intro-start-btn{width:auto;min-width:220px;padding:14px 28px}.demo-back-btn{z-index:10060;color:#424242;cursor:pointer;background:#fff;border:1px solid #bdbdbd;border-radius:8px;padding:8px 14px;font-size:.82rem;font-weight:600;line-height:1.2;text-decoration:none;position:fixed;top:14px;left:14px;box-shadow:0 2px 8px #00000014}.demo-back-btn:hover{color:#2e7d32;background:#f5f5f5;border-color:#66bb6a}.demo-exit-btn{z-index:10040;color:#c62828;cursor:pointer;background:#fff;border:1px solid #ef9a9a;border-radius:8px;padding:8px 14px;font-size:.82rem;font-weight:600;position:fixed;bottom:14px;right:14px;box-shadow:0 2px 8px #00000014}.demo-exit-btn:hover{background:#ffebee}.demo-screen{min-height:100vh;display:none}.demo-screen.is-active{display:block}body.demo-tour-active .demo-app,body.demo-tour-active .demo-app *{user-select:none;pointer-events:none!important}body.demo-tour-active .driver-popover,body.demo-tour-active .driver-popover *{user-select:auto;pointer-events:auto!important}body.demo-tour-active .demo-exit-btn,body.demo-tour-active .demo-back-btn{pointer-events:auto!important}body.demo-tour-active .driver-popover-close-btn{display:none!important}body.demo-tour-active .driver-active-element,body.demo-tour-active .driver-no-interaction{pointer-events:none!important}.demo-login{background:linear-gradient(135deg,#e8f5e9 0%,#f5f7fa 50%,#e3f2fd 100%);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.demo-login-box{background:#fff;border:1px solid #e0e0e0;border-radius:16px;width:100%;max-width:420px;padding:40px;box-shadow:0 8px 32px #00000014}.demo-login-header{text-align:center;margin-bottom:24px}.demo-login-brand{justify-content:center;align-items:center;gap:10px;margin-bottom:12px;display:flex}.demo-login-logo{flex-shrink:0;width:56px;height:auto;display:block}.demo-login-brand-text{color:#0f172a;letter-spacing:-.02em;font-size:2rem;font-weight:700}.demo-login-brand-text span{color:#10b981}.demo-login-header p{color:#666;margin:0 0 28px}.demo-form-group{margin-bottom:18px}.demo-form-group label{margin-bottom:6px;font-size:.9rem;font-weight:600;display:block}.demo-form-group input{box-sizing:border-box;border:1px solid #ccc;border-radius:8px;width:100%;padding:12px 14px;font-size:1rem}.demo-btn-primary{color:#fff;cursor:pointer;background:#66bb6a;border:none;border-radius:8px;width:100%;padding:14px;font-size:1rem;font-weight:600}.demo-btn-primary:hover{background:#57a85b}.demo-badge-demo{color:#795548;background:#fff8e1;border:1px solid #ffe082;border-radius:8px;margin-top:20px;padding:12px;font-size:.85rem}.demo-devices-header{background:#fff;border-bottom:1px solid #e8e8e8;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;padding:32px 40px;display:flex;box-shadow:0 2px 4px #0000000a}.demo-devices-header-text .demo-header-title{letter-spacing:-.5px;font-size:28px;font-weight:700}.demo-devices-header-text .demo-header-subtitle{color:#888;margin-top:8px;font-size:14px}.demo-view-controls{background:#f8f9fa;border-radius:8px;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:8px;padding:8px;display:flex}.demo-view-btn{color:#666;cursor:pointer;background:#fff;border:1px solid #ddd;border-radius:6px;justify-content:center;align-items:center;width:36px;height:36px;padding:0;display:inline-flex}.demo-view-btn--map{width:auto;padding:0 12px;font-size:13px;font-weight:600}.demo-view-btn.is-active{color:#2e7d32;background:#e8f5e9;border-color:#66bb6a}.demo-view-controls .demo-btn{min-height:36px;padding:0 14px;font-size:13px;font-weight:600}.demo-view-controls .demo-btn--admin{color:#ff8c00;background:#fff;border-color:orange}.demo-view-controls .demo-btn--history{color:#2e7d32;background:#fff;border-color:#66bb6a}#screen-devices{background:linear-gradient(135deg,#f5f7fa 0%,#e8ecf1 100%)}.demo-header{background:#fff;border-bottom:2px solid #66bb6a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;display:flex;box-shadow:0 1px 3px #0000000d}.demo-header-title{color:#333;margin:0;font-size:1.25rem}.demo-header-subtitle{color:#666;margin:4px 0 0;font-size:.85rem}.demo-header-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.demo-btn{cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #ccc;border-radius:8px;padding:8px 14px;font-size:.85rem}.demo-btn--admin{color:#2e7d32;border-color:#66bb6a}.demo-btn--history{color:#fff;background:#66bb6a;border-color:#66bb6a}.demo-btn--logout{color:#c62828;border-color:#ef9a9a}.demo-main{max-width:1400px;margin:0 auto;padding:20px}.demo-admin-toolbar{flex-wrap:wrap;gap:10px;margin-bottom:20px;display:flex}.demo-admin-toolbar .demo-btn{background:#e8f5e9;border-color:#a5d6a7;font-weight:600}.demo-map-section{background:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-bottom:24px;padding:20px;box-shadow:0 1px 3px #0000000f}.demo-map-section h2{margin:0 0 4px;font-size:1.1rem}.demo-map-section p{color:#666;margin:0 0 16px;font-size:.9rem}.demo-map{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;display:grid}.demo-map-zone{background:#fafafa;border:2px dashed #bdbdbd;border-radius:12px;min-height:140px;padding:16px}.demo-map-zone h3{color:#2e7d32;align-items:center;gap:6px;margin:0 0 12px;font-size:.95rem;display:flex}.demo-map-pin{background:#fff;border:1px solid #e0e0e0;border-radius:8px;align-items:center;gap:8px;margin-bottom:8px;padding:8px 10px;font-size:.85rem;display:flex}.demo-map-pin .pin-dot{background:#66bb6a;border-radius:50%;flex-shrink:0;width:10px;height:10px}.demo-map-pin.is-warning .pin-dot{background:#ffa726}.demo-devices-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;display:grid}.demo-device-card{cursor:pointer;background:#fff;border:2px solid #d0d0d0;border-radius:12px;padding:20px;transition:border-color .2s,box-shadow .2s}.demo-device-card:hover,.demo-device-card.is-highlighted{border-color:#66bb6a;box-shadow:0 4px 12px #66bb6a40}.demo-device-card-header{align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}.demo-device-card-header h3{margin:0;font-size:1rem}.demo-device-card-header p{color:#666;margin:4px 0 0;font-size:.8rem}.demo-status-badge{color:#2e7d32;background:#e8f5e9;border-radius:20px;margin-left:auto;padding:4px 10px;font-size:.75rem;font-weight:600}.demo-sensor-row{border-bottom:1px solid #f0f0f0;justify-content:space-between;padding:6px 0;font-size:.9rem;display:flex}.demo-device-card-footer{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:10px;margin-top:12px;display:flex}.demo-last-update{color:#888;margin:0;font-size:.8rem}.demo-device-actions{gap:6px;margin-left:auto;display:flex}.demo-btn-edit,.demo-btn-delete{cursor:pointer;border:1px solid;border-radius:6px;padding:5px 10px;font-size:.75rem;font-weight:600}.demo-btn-edit{color:#1565c0;background:#e3f2fd;border-color:#90caf9}.demo-btn-delete{color:#c62828;background:#ffebee;border-color:#ef9a9a}.demo-view-controls{flex-wrap:wrap;gap:8px;margin-bottom:16px;display:flex}.demo-btn--icon{min-width:40px;font-size:.9rem}.demo-btn--icon.is-active{color:#2e7d32;background:#e8f5e9;border-color:#66bb6a}.demo-modal-overlay[data-tour-panel]{z-index:100;background:#00000073;justify-content:center;align-items:center;padding:20px;display:none;position:fixed;inset:0}.demo-modal-overlay[data-tour-panel].is-tour-panel-visible{display:flex}.demo-modal{background:#fff;border-radius:14px;width:100%;max-width:520px;max-height:90vh;overflow:auto;box-shadow:0 12px 40px #0003}.demo-modal-header{padding:20px 24px 0}.demo-modal-header h2{margin:0;font-size:1.15rem}.demo-modal-body{padding:16px 24px}.demo-modal-footer{justify-content:flex-end;gap:10px;padding:0 24px 20px;display:flex}.demo-location-map-panel[data-tour-panel]{display:none}.demo-location-map-panel[data-tour-panel].is-tour-panel-visible{display:block}.demo-location-map-panel{background:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-bottom:24px;padding:20px;box-shadow:0 1px 3px #0000000f}.demo-map-panel-subtitle{color:#666;margin:0 0 16px;font-size:.9rem}.demo-real-map{border:1px solid #d0d0d0;border-radius:10px;height:280px;position:relative;overflow:hidden}.demo-real-map-bg{filter:saturate(.9);background:linear-gradient(#ffffff1a 0%,#ffffff4d 100%),url(https://tile.openstreetmap.org/6/20/38.png) 50%/cover no-repeat,linear-gradient(135deg,#c8e6c9 0%,#81c784 40%,#4fc3f7 70%,#29b6f6 100%);position:absolute;inset:0}.demo-map-marker{text-align:center;z-index:2;position:absolute;transform:translate(-50%,-100%)}.demo-map-marker span{background:#e53935;border:2px solid #fff;border-radius:50%;width:14px;height:14px;margin:0 auto;display:block;box-shadow:0 2px 6px #00000059}.demo-map-marker.is-warning span{background:#fb8c00}.demo-map-marker.is-selected span{background:#c62828;width:18px;height:18px}.demo-map-marker small{color:#333;white-space:nowrap;background:#ffffffeb;border-radius:4px;margin-top:4px;padding:2px 6px;font-size:.7rem;display:block}.demo-map-zone-label{color:#2e7d32;z-index:3;background:#ffffffd9;border-radius:6px;padding:3px 8px;font-size:.75rem;font-weight:700;position:absolute}body.demo-tour-completion .driver-active-element,body.demo-tour-completion .driver-highlighted-element{box-shadow:none!important;background:0 0!important;outline:none!important}body.demo-tour-completion .driver-popover{margin:0!important;position:fixed!important;inset:50% auto auto 50%!important;transform:translate(-50%,-50%)!important}.demo-info-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px;margin-bottom:24px;display:grid}.demo-info-card{background:#fff;border:1px solid #e0e0e0;border-radius:10px;padding:16px}.demo-info-card .label{color:#666;margin-bottom:6px;font-size:.8rem}.demo-info-card .value{font-size:1.1rem;font-weight:700}.demo-sensors-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;margin-bottom:24px;display:grid}.demo-sensor-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:18px}.demo-sensor-card .sensor-title{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.demo-sensor-card .sensor-title h3{margin:0;font-size:1rem}.demo-sensor-status{color:#2e7d32;background:#e8f5e9;border-radius:12px;padding:3px 8px;font-size:.75rem}.demo-sensor-value{color:#2e7d32;text-align:center;background:#f1f8e9;border-radius:8px;padding:16px;font-size:2.2rem;font-weight:700}.demo-sensor-value span{color:#666;font-size:1rem;font-weight:500}.demo-weather-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;margin-bottom:24px;padding:20px}.demo-weather-main{flex-wrap:wrap;align-items:center;gap:24px;display:flex}.demo-weather-temp{color:#1565c0;font-size:3rem;font-weight:700}.demo-weather-details{flex:1;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:12px;display:grid}.demo-weather-detail{font-size:.85rem}.demo-weather-detail .wd-label{color:#666;display:block}.demo-weather-detail .wd-value{font-weight:600}.demo-alerts-section{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px;overflow-x:auto}.demo-alerts-section h2{margin:0 0 14px;font-size:1.1rem}.demo-table{border-collapse:collapse;width:100%;font-size:.85rem}.demo-table th,.demo-table td{text-align:left;border-bottom:1px solid #eee;padding:10px 12px}.demo-table th{background:#f5f5f5;font-weight:600}.demo-table tr.alert-warning td{background:#fff8e1}.demo-table tr.alert-danger td{background:#ffebee}.demo-charts{gap:20px;margin-bottom:24px;display:grid}.demo-chart-card{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px}.demo-chart-card h3{margin:0 0 12px;font-size:1rem}.demo-chart-bars{align-items:flex-end;gap:6px;height:120px;padding-top:8px;display:flex}.demo-chart-bar{background:linear-gradient(#a5d6a7,#66bb6a);border-radius:4px 4px 0 0;flex:1;min-width:8px}.demo-section-title{color:#333;margin:0 0 16px;font-size:1.1rem}.demo-back-btn{cursor:pointer;color:#666;background:0 0;border:none;padding:4px 8px;font-size:1.2rem}.demo-header-left{align-items:center;gap:10px;min-width:0;display:flex}.demo-header-actions{flex-shrink:0}.demo-btn--admin.is-active-nav{color:#ff8c00;background:#fff3e0;border-color:orange}.demo-activity-section{background:#fff;border:1px solid #e0e0e0;border-radius:12px;padding:20px}.demo-activity-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.demo-activity-controls{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.demo-activity-window select{border:1px solid #d1d5db;border-radius:8px;margin-left:8px;padding:8px 10px}.demo-table-scroll{border:1px solid #e5e7eb;border-radius:6px;overflow:auto}.demo-activity-table{min-width:900px}.demo-history-header{background:#fff;border-bottom:2px solid #66bb6a;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 12px;padding:14px 20px;display:flex;box-shadow:0 1px 3px #0000000d}.demo-history-header-left{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.demo-source-badge{white-space:nowrap;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:600}.demo-source-badge--simulated{color:#e65100;background:#fff3e0}.demo-history-content{grid-template-columns:repeat(3,minmax(300px,1fr));align-items:start;gap:12px;max-width:100%;margin:0 auto;padding:16px;display:grid}.demo-sensor-chart{background:#fff;border-radius:8px;flex-direction:column;gap:6px;width:100%;padding:10px;display:flex;box-shadow:0 2px 4px #00000014}.demo-chart-title{justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px;display:flex}.demo-chart-title h3{color:#333;margin:0;font-size:14px;font-weight:600}.demo-period-buttons{gap:6px;display:flex}.demo-period-btn{white-space:nowrap;color:#666;cursor:default;background:#f0f0f0;border:1px solid #ddd;border-radius:4px;min-height:36px;padding:6px 8px;font-size:12px}.demo-period-btn.is-active{color:#fff;background:#66bb6a;border-color:#66bb6a}.demo-chart-container{background:linear-gradient(#66bb6a0f 0%,#0000 100%);width:100%;height:210px;position:relative}.demo-chart-svg{width:100%;height:100%}.demo-chart-stats{color:#666;border-top:1px solid #e8ecf1;justify-content:space-around;padding-top:6px;font-size:12px;display:flex}.demo-hist-table-wrapper{background:#fff;border-radius:8px;flex-direction:column;grid-column:1/-1;gap:10px;padding:12px;display:flex;box-shadow:0 2px 4px #00000014}.demo-hist-table-header{justify-content:space-between;align-items:center;gap:10px;display:flex}.demo-hist-table-header h3{color:#333;margin:0;font-size:15px}.demo-hist-table-meta{color:#6b7280;font-size:12px}.demo-hist-table-filters{background:#f8fafc;border:1px solid #e5e7eb;border-radius:6px;flex-wrap:wrap;align-items:flex-end;gap:12px 16px;padding:10px 12px;display:flex}.demo-hist-filter-field{flex-direction:column;gap:4px;min-width:160px;display:flex}.demo-hist-filter-field span{color:#4b5563;font-size:11px;font-weight:600}.demo-hist-filter-field select{background:#fff;border:1px solid #d1d5db;border-radius:6px;padding:7px 10px;font-size:14px}.demo-measurements-table{border-collapse:collapse;width:100%;min-width:760px}.demo-measurements-table th,.demo-measurements-table td{text-align:left;color:#333;border-bottom:1px solid #eef0f3;padding:9px 10px;font-size:12px}.demo-measurements-table thead th{background:#f8fafc;font-weight:600}.demo-alert-chip{border-radius:999px;padding:3px 8px;font-size:11px;font-weight:600}.demo-alert-chip.normal{color:#2e7d32;background:#e8f5e9}.demo-alert-chip.warning{color:#c62828;background:#ffebee}@media (width<=980px){.demo-history-content{grid-template-columns:1fr}}@media (width<=768px){.demo-devices-header{flex-direction:column;align-items:stretch;padding:12px 14px}.demo-view-controls{justify-content:center;width:100%}}@media (width<=640px){.demo-login-box{padding:28px 20px}.demo-header-actions{justify-content:flex-start;width:100%}.demo-back-btn{top:14px;left:14px}}.qawa-demo-popover{max-width:360px}.qawa-demo-popover--overview .driver-popover-title{font-size:1.1rem}.qawa-demo-popover--overview .driver-popover-description{line-height:1.55}.qawa-demo-popover--step-login{margin-left:12px}.qawa-demo-popover--step-devices{margin-top:16px}.qawa-demo-popover--completion{max-width:420px}