@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
:root{--primary:#667eea;--secondary:#764ba2;--success:#10b981;--danger:#ef4444;--warning:#f59e0b;--dark:#1f2937}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;background:linear-gradient(135deg,var(--primary),var(--secondary));min-height:100vh;color:#fff}
.container{max-width:1400px;margin:0 auto;padding:20px}
.header{text-align:center;padding:40px 20px;background:rgba(0,0,0,0.3);backdrop-filter:blur(10px)}
.header h1{font-size:2.5rem;margin-bottom:10px}
.header p{font-size:1.1rem;opacity:0.9}
.nav{display:flex;gap:15px;flex-wrap:wrap;margin:20px 0;background:rgba(255,255,255,0.1);padding:15px;border-radius:12px;backdrop-filter:blur(10px)}
.nav a{padding:10px 20px;background:rgba(255,255,255,0.9);color:#333;text-decoration:none;border-radius:8px;font-weight:600;transition:all 0.3s}
.nav a:hover,.nav a.active{background:var(--primary);color:#fff;transform:translateY(-2px)}
.card{background:rgba(255,255,255,0.95);color:#333;padding:30px;border-radius:16px;margin:20px 0;box-shadow:0 10px 40px rgba(0,0,0,0.3)}
.btn{display:inline-block;padding:12px 28px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;border:none;border-radius:10px;cursor:pointer;font-weight:600;text-decoration:none;transition:all 0.3s;font-size:1rem}
.btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(102,126,234,0.4)}
.btn-secondary{background:linear-gradient(135deg,#6b7280,#4b5563)}
.btn-danger{background:var(--danger)}
.btn-success{background:var(--success)}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-weight:600;color:#374151}
input,select,textarea{width:100%;padding:12px;border:2px solid #d1d5db;border-radius:8px;font-size:1rem}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:20px 0}
.video-card{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:all 0.3s;cursor:pointer}
.video-card:hover{transform:translateY(-5px);box-shadow:0 8px 25px rgba(0,0,0,0.2)}
.video-thumbnail{width:100%;height:200px;object-fit:cover;background:#000}
.video-info{padding:15px}
.video-title{font-weight:600;font-size:1.1rem;margin-bottom:8px;color:#1f2937}
.video-meta{display:flex;justify-content:space-between;font-size:0.9rem;color:#6b7280}
.badge{display:inline-block;padding:4px 12px;border-radius:20px;font-size:0.85rem;font-weight:600}
.badge-success{background:#d1fae5;color:#065f46}
.badge-warning{background:#fef3c7;color:#92400e}
.badge-danger{background:#fee2e2;color:#991b1b}
.badge-live{background:#ef4444;color:#fff;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.7}}
.message{padding:16px;border-radius:10px;margin-bottom:20px}
.message-success{background:#d1fae5;color:#065f46}
.message-error{background:#fee2e2;color:#991b1b}
.message-info{background:#dbeafe;color:#1e40af}
table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
th,td{padding:15px;text-align:left;border-bottom:1px solid #e5e7eb}
th{background:var(--primary);color:#fff;font-weight:600}
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:20px 0}
.stat-card{background:#fff;padding:25px;border-radius:12px;text-align:center;box-shadow:0 4px 15px rgba(0,0,0,0.1)}
.stat-num{font-size:2.5rem;font-weight:700;color:var(--primary);margin-bottom:10px}
.stat-label{color:#6b7280;font-size:0.95rem}
.live-indicator{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;background:var(--danger);color:#fff;border-radius:20px;font-weight:600;animation:pulse 2s infinite}
.chat-container{background:#fff;border-radius:12px;padding:20px;max-height:500px;overflow-y:auto;margin-top:20px}
.chat-message{padding:10px;margin:5px 0;background:#f3f4f6;border-radius:8px}
.chat-message strong{color:var(--primary)}
.video-player{width:100%;max-width:100%;border-radius:12px;background:#000;aspect-ratio:16/9}