.app{min-height:100vh;display:flex;flex-direction:column}.app-header{background:#f58342!important;background-color:#f58342!important;color:#fff!important;padding:30px 0;min-height:80px;box-shadow:0 2px 10px #0000001a}.header-content{max-width:1400px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px}.app-header h1{font-size:28px;margin-bottom:20px;font-weight:600}.nav-tabs{display:flex;gap:10px;flex-wrap:wrap}.nav-tabs button{background:#fff3;border:none;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s}.nav-tabs button:hover{background:#ffffff4d}.nav-tabs button.active{background:#fff;color:#f58342}.live-view-btn{background:#fff3;border:2px solid white;color:#fff;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all .3s;display:flex;align-items:center;gap:8px}.live-view-btn:hover{background:#fff;color:#f58342;transform:translateY(-2px);box-shadow:0 4px 12px #0003}.app-main{flex:1;max-width:1400px;width:100%;margin:0 auto;padding:30px 20px}.card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000001a;margin-bottom:24px}.card h2{font-size:20px;margin-bottom:20px;color:#333}.btn{padding:10px 20px;border:none;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s}.btn-primary{background:#f58342;color:#fff}.btn-primary:hover{background:#e0722f}.btn-danger{background:#ef4444;color:#fff}.btn-danger:hover{background:#dc2626}.btn-secondary{background:#6b7280;color:#fff}.btn-secondary:hover{background:#4b5563}.form-group{margin-bottom:20px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333}.form-group input,.form-group select{width:100%;padding:10px;border:1px solid #ddd;border-radius:8px;font-size:14px}.form-group input:focus,.form-group select:focus{outline:none;border-color:#f58342}.table{width:100%;border-collapse:collapse;margin-top:20px}.table th,.table td{padding:12px;text-align:left;border-bottom:1px solid #eee}.table th{background:#f9fafb;font-weight:600;color:#333}.table tr:hover{background:#f9fafb}.badge{display:inline-block;padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600}.badge-success{background:#d1fae5;color:#065f46}.badge-danger{background:#fee2e2;color:#991b1b}.badge-warning{background:#fef3c7;color:#92400e}.modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;padding:24px;max-width:500px;width:90%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal-content::-webkit-scrollbar{width:8px}.modal-content::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.modal-content::-webkit-scrollbar-thumb{background:#f58342;border-radius:4px}.modal-content::-webkit-scrollbar-thumb:hover{background:#e0722f}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.modal-header h3{font-size:20px;color:#333}.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:#999}.close-btn:hover{color:#333}.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.video-selection-grid::-webkit-scrollbar{width:10px}.video-selection-grid::-webkit-scrollbar-track{background:#f1f1f1;border-radius:5px}.video-selection-grid::-webkit-scrollbar-thumb{background:#f58342;border-radius:5px}.video-selection-grid::-webkit-scrollbar-thumb:hover{background:#e0722f}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;gap:20px}.stat-icon{font-size:48px}.stat-content{flex:1}.stat-value{font-size:32px;font-weight:700;color:#333;margin-bottom:4px}.stat-label{font-size:14px;color:#666;font-weight:500}.live-view-page{width:100%}.live-view-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000e6;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto}.live-view-container{background:#1a1a1a;border-radius:12px;width:100%;max-width:1400px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #00000080}.live-view-header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;border-bottom:2px solid #333;background:#f58342;border-radius:12px 12px 0 0}.live-view-header h2{margin:0;color:#fff;font-size:24px}.live-view-header .close-btn{background:#fff3;border:none;color:#fff;font-size:24px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.live-view-header .close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.live-view-loading,.live-view-empty{padding:60px 20px;text-align:center;color:#ccc}.live-view-loading .spinner{animation:spin 1s linear infinite;font-size:48px;color:#f58342;margin-bottom:20px}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.live-view-content{flex:1;overflow-y:auto;padding:30px}.live-view-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}.live-view-grid-large{display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:30px;padding:0}.live-view-thumbnail{background:#2a2a2a;border-radius:12px;overflow:hidden;cursor:pointer;transition:all .3s;border:2px solid transparent;display:flex;flex-direction:column}.live-view-thumbnail-large{background:#2a2a2a;border-radius:16px;overflow:hidden;cursor:pointer;transition:all .3s;border:3px solid transparent;display:flex;flex-direction:column;box-shadow:0 4px 12px #0000004d}.live-view-thumbnail:hover{transform:translateY(-5px);border-color:#f58342;box-shadow:0 8px 20px #f583424d}.live-view-thumbnail-large:hover{transform:translateY(-8px);border-color:#f58342;box-shadow:0 12px 30px #f5834266}.thumbnail-header{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#333;border-bottom:1px solid #444}.thumbnail-header-large{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;background:#333;border-bottom:2px solid #444}.tv-name{color:#fff;font-weight:600;font-size:14px}.tv-name-large{color:#fff;font-weight:700;font-size:18px}.status-badge{font-size:12px;padding:4px 8px;border-radius:12px;font-weight:700}.status-badge-large{font-size:14px;padding:6px 12px;border-radius:16px;font-weight:700}.status-badge.online{color:#4ade80}.status-badge.offline{color:#ef4444}.thumbnail-content{position:relative;width:100%;aspect-ratio:16/9;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden}.thumbnail-content-large{position:relative;width:100%;background:#000;display:flex;align-items:center;justify-content:center;overflow:hidden;aspect-ratio:16/9}.thumbnail-video,.thumbnail-image{width:100%;height:100%;object-fit:cover}.thumbnail-video-large,.thumbnail-image-large{width:100%;height:100%;object-fit:cover;pointer-events:none}.thumbnail-loading,.thumbnail-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#666;gap:10px}.thumbnail-loading .spinner{animation:spin 1s linear infinite;font-size:32px;color:#f58342}.thumbnail-empty svg{font-size:48px;color:#444}.thumbnail-footer{padding:12px 15px;background:#333;border-top:1px solid #444}.thumbnail-footer-large{padding:16px 20px;background:#333;border-top:2px solid #444}.content-name{color:#ccc;font-size:12px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.content-name-large{color:#ccc;font-size:16px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:500}.live-view-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:#000000f2;z-index:3000;display:flex;align-items:center;justify-content:center;padding:20px}.live-view-modal-content{background:#1a1a1a;border-radius:12px;width:100%;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 10px 40px #000c}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px 30px;border-bottom:2px solid #333;background:#f58342;border-radius:12px 12px 0 0}.modal-header h3{margin:0;color:#fff;font-size:22px}.modal-header .close-btn{background:#fff3;border:none;color:#fff;font-size:24px;width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.modal-header .close-btn:hover{background:#ffffff4d;transform:scale(1.1)}.modal-body{padding:30px;flex:1;overflow-y:auto;display:flex;align-items:center;justify-content:center}.modal-loading,.modal-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#ccc;gap:20px;padding:60px}.modal-loading .spinner{animation:spin 1s linear infinite;font-size:64px;color:#f58342}.modal-empty svg{font-size:64px;color:#666}.modal-video-container,.modal-image-container{width:100%;display:flex;flex-direction:column;gap:20px}.modal-video{width:100%;max-height:70vh;background:#000;border-radius:8px}.modal-image{width:100%;max-height:70vh;object-fit:contain;border-radius:8px}.modal-info{background:#2a2a2a;padding:20px;border-radius:8px;color:#ccc}.modal-info p{margin:8px 0;font-size:14px}.modal-info strong{color:#f58342}.live-view-grid::-webkit-scrollbar,.modal-body::-webkit-scrollbar{width:8px}.live-view-grid::-webkit-scrollbar-track,.modal-body::-webkit-scrollbar-track{background:#1a1a1a}.live-view-grid::-webkit-scrollbar-thumb,.modal-body::-webkit-scrollbar-thumb{background:#f58342;border-radius:4px}.live-view-grid::-webkit-scrollbar-thumb:hover,.modal-body::-webkit-scrollbar-thumb:hover{background:#e0722f}*{margin:0;padding:0;box-sizing:border-box}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:#f5f5f5;color:#333}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}