*{margin:0;padding:0;box-sizing:border-box}:root{--primary-color: #808080;--primary-hover: #a0a0a0;--primary-light: #a0a0a0;--secondary-color: #606060;--text-primary: #e8e8e8;--text-secondary: #b8b8b8;--text-muted: #888888;--bg-primary: #2a2a2a;--bg-secondary: #1a1a1a;--bg-tertiary: #3a3a3a;--bg-hover: #4a4a4a;--bg-bubble: #3a3a3a;--border-color: #3a3a3a;--border-hover: #4a4a4a;--error-color: #dc2626;--success-color: #059669;--warning-color: #d97706;--streaming-color: #808080;--shadow: 0 1px 3px 0 rgb(0 0 0 / .3), 0 1px 2px -1px rgb(0 0 0 / .3);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .4), 0 2px 4px -2px rgb(0 0 0 / .4);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .5), 0 4px 6px -4px rgb(0 0 0 / .5)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:var(--bg-secondary);color:var(--text-primary);line-height:1.6}#root{min-height:100vh}@media(max-width:768px){body{font-size:14px}}.app{min-height:100vh;display:flex;flex-direction:column}@media(min-width:769px){.app{align-items:flex-start}}@media(max-width:768px){.app{align-items:center;justify-content:center}}.header{background-color:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:2rem 1.5rem;width:100%}.header-content{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:1.5rem}.header-logo{height:50px;width:auto;flex-shrink:0}.header-text{display:flex;flex-direction:column;gap:.25rem}.title{font-size:2rem;font-weight:700;color:var(--text-primary);letter-spacing:-.5px;line-height:1.2}.subtitle{font-size:.9rem;color:var(--text-secondary);font-weight:400}.main{flex:1;max-width:1400px;width:100%;margin:0 auto;padding:2rem 1.5rem}.search-container{margin-bottom:2rem}.search-bar-bubble{display:flex;align-items:center;gap:12px;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:12px 16px;max-width:600px;width:100%;transition:all .2s}.search-bar-bubble:focus-within{border-color:var(--primary-color)}.search-icon{font-size:18px;opacity:.6;flex-shrink:0;color:var(--text-muted)}.search-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:14px;outline:none;min-width:0}.search-input::placeholder{color:var(--text-muted)}.search-clear{width:20px;height:20px;border-radius:50%;background:var(--bg-tertiary);border:none;color:var(--text-secondary);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;padding:0}.search-clear:hover{background:var(--bg-hover);color:var(--text-primary)}.error-message{background-color:#dc26261a;border:1px solid var(--error-color);border-radius:12px;padding:12px 16px;margin-bottom:1.5rem;color:var(--error-color);font-size:.9rem}.loading{text-align:center;padding:3rem;color:var(--text-secondary);font-size:1.1rem}.empty-state{text-align:center;padding:3rem 1.5rem;background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;color:var(--text-secondary)}.empty-state p{font-size:1.1rem;margin-bottom:.5rem}.empty-subtitle{font-size:.9rem;color:var(--text-muted)}.devices-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem}.device-card{background:var(--bg-primary);border:1px solid var(--border-color);border-radius:12px;padding:1.5rem;transition:all .2s}.device-card:hover{border-color:var(--primary-color);box-shadow:var(--shadow-md)}.device-card.streaming{border-left:3px solid var(--streaming-color)}.device-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:1.25rem;gap:1rem}.device-name{font-size:1.25rem;font-weight:600;color:var(--text-primary);flex:1;word-break:break-word}.device-status{display:inline-block;padding:.25rem .75rem;border-radius:64px;font-size:.75rem;font-weight:500;white-space:nowrap;flex-shrink:0}.status-online{background-color:#05966926;color:var(--success-color);border:1px solid rgba(5,150,105,.3)}.status-streaming{background-color:#80808026;color:var(--streaming-color);border:1px solid rgba(128,128,128,.3)}.device-info{margin-bottom:1.25rem}.info-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid var(--border-color)}.info-row:last-child{border-bottom:none}.info-label{font-size:.875rem;color:var(--text-muted);font-weight:500}.info-value{font-size:.875rem;color:var(--text-secondary);text-align:right;word-break:break-all;max-width:60%}.connect-button{width:100%;padding:12px 24px;font-size:14px;font-weight:500;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}.connect-button:hover:not(:disabled){background:var(--primary-hover)}.connect-button:disabled{background:var(--bg-tertiary);color:var(--text-muted);cursor:not-allowed;opacity:.6}@media(max-width:768px){.header{padding:1.5rem 1rem}.header-content{flex-direction:column;align-items:flex-start;gap:1rem}.header-logo{height:40px}.title{font-size:1.5rem}.main{padding:1.5rem 1rem}.devices-grid{grid-template-columns:1fr;gap:1rem}.device-card{padding:1.25rem}.device-header{flex-direction:column;gap:.75rem}.device-status{align-self:flex-start}.search-bar-bubble{max-width:100%}}.video-stream-container{position:fixed;inset:0;background:var(--bg-secondary);z-index:1000;display:flex;flex-direction:column}.video-stream-header{background:var(--bg-primary);border-bottom:1px solid var(--border-color);padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center}.video-stream-title{display:flex;align-items:center;gap:1rem}.video-stream-title h2{font-size:1.25rem;font-weight:600;color:var(--text-primary);margin:0}.video-status{padding:.25rem .75rem;border-radius:64px;font-size:.75rem;font-weight:500;background:var(--bg-tertiary);color:var(--text-secondary);border:1px solid var(--border-color)}.video-close-button{width:40px;height:40px;border-radius:8px;background:transparent;border:1px solid var(--border-color);color:var(--text-primary);font-size:24px;line-height:1;cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.video-close-button:hover{background:var(--bg-tertiary);border-color:var(--error-color);color:var(--error-color)}.video-error{background:#dc26261a;border:1px solid var(--error-color);border-radius:8px;padding:12px 16px;margin:1rem 1.5rem;color:var(--error-color);font-size:.9rem}.video-wrapper{flex:1;position:relative;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.video-element{width:100%;height:100%;object-fit:contain;background:#000}.video-overlay{position:absolute;inset:0;background:#000c;display:flex;align-items:center;justify-content:center;z-index:10}.video-loading{text-align:center;color:var(--text-primary)}.spinner{width:40px;height:40px;border:3px solid var(--border-color);border-top-color:var(--primary-color);border-radius:50%;animation:spin 1s linear infinite;margin:0 auto 1rem}@keyframes spin{to{transform:rotate(360deg)}}.video-loading p{color:var(--text-secondary);font-size:.9rem}.video-error-message{text-align:center;max-width:500px;padding:20px}.video-error-message ul{list-style-position:inside;padding-left:0}.video-error-message li{margin:5px 0}.actions-panel{background:var(--bg-primary);border-top:1px solid var(--border-color);padding:20px;display:flex;flex-direction:column;gap:24px;max-height:40vh;overflow-y:auto}.actions-group{display:flex;flex-direction:column;gap:12px}.actions-title{font-size:14px;font-weight:600;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin:0;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.actions-buttons{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px}.action-button{flex:1;min-width:150px;padding:12px 16px;border-radius:6px;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;text-align:center}.action-button:hover{background:var(--bg-tertiary);border-color:var(--primary-color)}.action-button:active{transform:scale(.98);background:var(--primary-color);color:#fff;border-color:var(--primary-color)}@media(max-width:768px){.video-stream-header{padding:.75rem 1rem}.video-stream-title h2{font-size:1rem}.video-close-button{width:36px;height:36px;font-size:20px}.actions-panel{padding:16px;max-height:50vh}.actions-title{font-size:12px}.action-button{padding:10px 12px;font-size:13px}}.response-log{margin-top:16px;padding:16px;background:var(--bg-secondary);border:1px solid var(--border-color);border-radius:6px;font-size:13px}.response-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid var(--border-color)}.response-type{font-weight:600;color:var(--text-primary);text-transform:uppercase;font-size:12px;letter-spacing:.5px}.response-time{color:var(--text-secondary);font-size:11px}.response-status{display:inline-block;padding:4px 12px;border-radius:4px;font-size:12px;font-weight:500;margin-bottom:8px}.response-status.success{background:#22c55e1a;color:#22c55e;border:1px solid rgba(34,197,94,.3)}.response-status.error{background:#dc26261a;color:var(--error-color);border:1px solid rgba(220,38,38,.3)}.response-message{color:var(--text-primary);margin-bottom:12px;line-height:1.5}.response-data{margin-top:12px;padding:12px;background:var(--bg-tertiary);border-radius:4px;border:1px solid var(--border-color);overflow-x:auto}.response-data pre{margin:8px 0 0;color:var(--text-primary);font-size:12px;font-family:Courier New,monospace;white-space:pre-wrap;word-wrap:break-word;background:var(--bg-tertiary);padding:8px;border-radius:4px;max-height:300px;overflow-y:auto}.response-data strong{display:block;margin-bottom:8px;color:var(--text-primary);font-size:13px;font-weight:600}.response-message strong{color:var(--text-primary);font-weight:600}