.web-app-service-browser{background-color:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.1);overflow:hidden}.web-app-browser-header{align-items:center;background-color:#f1f5f9;border-bottom:1px solid #e2e8f0;display:flex;padding:.75rem 1rem}.web-app-browser-controls{display:flex;gap:6px;margin-right:1rem}.web-app-browser-dot{background-color:#cbd5e1;border-radius:50%;height:12px;width:12px}.web-app-browser-dot:first-child{background-color:#ef4444}.web-app-browser-dot:nth-child(2){background-color:#f59e0b}.web-app-browser-dot:nth-child(3){background-color:#10b981}.web-app-browser-address{background-color:#fff;border:1px solid #cbd5e1;border-radius:4px;color:#64748b;flex:1;font-size:.875rem;padding:.375rem .75rem}.web-app-browser-url{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.web-app-browser-content{padding:1rem}.web-app-header{align-items:center;display:flex;margin-bottom:1.5rem}.web-app-logo{margin-right:.75rem}.web-app-title{color:var(--dark);font-size:1.25rem;font-weight:600;margin-right:auto}.web-app-menu{display:flex;gap:1rem}.web-app-menu-item{color:var(--gray);cursor:pointer;padding:.5rem 0;position:relative;transition:all .2s ease}.web-app-menu-item:hover{color:var(--primary);transform:translateY(-1px)}.web-app-menu-item.active{color:var(--primary);font-weight:500}.web-app-menu-item.active:after{background-color:var(--primary);bottom:0;content:"";height:2px;left:0;position:absolute;width:100%}.web-app-content{display:grid;gap:1.5rem;grid-template-columns:1fr;width:100%}.web-app-card{background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;margin-bottom:0;overflow:hidden;width:100%}.web-app-card-header{align-items:center;background-color:#f1f5f9;border-bottom:1px solid #e2e8f0;color:var(--dark);display:flex;font-weight:500;justify-content:space-between;padding:.75rem 1rem}.web-app-card-body{padding:1rem}.web-app-status-item{align-items:center;display:flex;justify-content:space-between;margin-bottom:.75rem}.web-app-status-item:last-child{margin-bottom:0}.web-app-status-label{color:var(--gray)}.web-app-status-value{color:var(--dark);font-weight:500}.web-app-button{align-items:center;background-color:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;color:var(--gray);cursor:pointer;display:inline-flex;font-size:.9rem;font-weight:500;gap:.5rem;padding:.5rem 1rem;transition:all .2s}.web-app-button:hover{background-color:#e2e8f0;color:var(--dark)}.web-app-button.primary{background-color:var(--primary);border-color:var(--primary);color:#fff}.web-app-button.primary:hover{background-color:var(--primary-dark)}.web-app-control-group{margin-bottom:1.5rem}.web-app-control-label{color:var(--dark);display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem}.web-app-control-slider{-webkit-appearance:none;background:#e2e8f0;border-radius:3px;height:6px;margin-bottom:.5rem;outline:none;width:100%}.web-app-control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;background:var(--primary);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:18px;width:18px}.web-app-control-slider::-moz-range-thumb{background:var(--primary);border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2);cursor:pointer;height:18px;width:18px}.web-app-slider-container{align-items:center;display:flex;gap:1rem}.web-app-slider-value{color:var(--primary);font-size:1rem;font-weight:600;min-width:50px;text-align:center}.web-app-system-controls{display:flex;flex-direction:column;gap:.75rem;width:100%}.web-app-system-control-item{align-items:center;background-color:#fff;border:1px solid #e2e8f0;border-radius:6px;display:flex;justify-content:space-between;padding:.75rem}.web-app-control-info{align-items:center;display:flex;gap:.5rem}.web-app-control-name{color:var(--dark);font-size:.9rem;font-weight:500}.web-app-toggle-btn{align-items:center;border:none;border-radius:4px;cursor:pointer;display:inline-flex;font-size:.8rem;font-weight:500;justify-content:center;min-width:60px;padding:.375rem .75rem;transition:all .2s ease}.web-app-toggle-btn.active{background-color:#10b981;color:#fff}.web-app-toggle-btn:not(.active){background-color:#ef4444;color:#fff}.web-app-toggle-btn:hover{box-shadow:0 2px 4px rgba(0,0,0,.1);transform:translateY(-1px)}.web-app-status-indicator{align-items:center;border-radius:4px;display:inline-flex;font-size:.85rem;font-weight:500;gap:.5rem;padding:.375rem .75rem}.web-app-status-indicator.online{background-color:#dcfce7;color:#166534}.web-app-status-indicator.offline{background-color:#fee2e2;color:#991b1b}.web-app-status-led{animation:web-app-pulse 2s infinite;background-color:currentColor;border-radius:50%;height:8px;width:8px}.web-app-status-led.active{background-color:#10b981}.web-app-status-led:not(.active){background-color:#ef4444}@keyframes web-app-pulse{0%,to{opacity:1}50%{opacity:.5}}.web-app-settings-input{background-color:#fff;border:1px solid #e2e8f0;border-radius:4px;color:var(--dark);font-size:.9rem;padding:.5rem .75rem;width:100%}.web-app-settings-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,142,254,.1);outline:none}.web-app-settings-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");background-position:right .5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;border:1px solid #e2e8f0;border-radius:4px;color:var(--dark);font-size:.9rem;padding:.5rem 2.5rem .5rem .75rem;width:100%}.web-app-settings-select:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(31,142,254,.1);outline:none}.web-app-settings-group{margin-bottom:1.5rem}.web-app-settings-label{color:var(--dark);display:block;font-size:.9rem;font-weight:500;margin-bottom:.5rem}.web-app-settings-actions{display:flex;gap:.75rem;justify-content:flex-end}.web-app-system-alerts{border-top:1px solid #e2e8f0;margin-top:1rem;padding-top:1rem}.web-app-alert-item{align-items:center;color:#10b981;display:flex;font-size:.9rem;gap:.5rem}