body { background-color: #0d0d0d; color: white; font-family: 'Segoe UI', sans-serif; margin: 0; padding: 0; }
a { text-decoration: none; }

/* Header */
header { background: #000; padding: 15px; border-bottom: 2px solid #ff0000; display: flex; justify-content: space-between; align-items: center; }
.logo { font-size: 22px; color: #ff0000; font-weight: 900; text-transform: uppercase; letter-spacing: 1px; }
.nav-btn { background: #333; color: white; padding: 6px 12px; border-radius: 4px; font-size: 12px; border: 1px solid #444; }

/* Login Overlay */
.login-screen { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; z-index: 2000; display: flex; justify-content: center; align-items: center; flex-direction: column; }
.login-box { background: #1a1a1a; padding: 30px; text-align: center; border: 1px solid #ff0000; border-radius: 10px; width: 90%; max-width: 320px; box-shadow: 0 0 20px rgba(255,0,0,0.2); }
.input-field { width: 100%; padding: 12px; margin: 15px 0; background: #222; border: 1px solid #444; color: white; border-radius: 5px; outline: none; box-sizing: border-box; }
.btn-main { background: #ff0000; color: white; border: none; padding: 12px; cursor: pointer; width: 100%; border-radius: 5px; font-weight: bold; font-size: 16px; transition: 0.3s; }
.btn-main:hover { background: #cc0000; }

/* Admin Dashboard */
.container { max-width: 800px; margin: auto; padding: 20px; }

/* Admin Buttons Area */
.admin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 25px; }
.action-btn { padding: 15px; text-align: center; border-radius: 8px; font-weight: bold; transition: 0.3s; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-bot { background: #0088cc; color: white; border: 1px solid #0077b5; grid-column: span 2; } /* Telegram Color */
.btn-delete { background: #444; color: #ff5555; border: 1px solid #ff5555; }
.btn-view { background: #444; color: white; border: 1px solid #666; }

/* Upload Section */
.card { background: #161616; padding: 20px; border-radius: 10px; border: 1px dashed #444; text-align: center; margin-bottom: 20px; }
.copy-input { background: #000; color: #0f0; border: 1px solid #333; width: 100%; padding: 8px; text-align: center; margin-top: 10px; border-radius: 5px; }

/* Video Grid (User Side) */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.video-card { background: #161616; border-radius: 8px; overflow: hidden; border: 1px solid #222; transition: transform 0.2s; }
.video-card:hover { border-color: #ff0000; }
.video-player { width: 100%; height: 200px; background: black; }
.info { padding: 15px; }
.cat { font-size: 10px; background: #ff0000; padding: 2px 6px; border-radius: 3px; font-weight: bold; }
.title { font-size: 16px; margin: 8px 0; font-weight: 600; line-height: 1.4; }
.dwn-btn { display: block; background: #222; padding: 10px; text-align: center; color: white; margin-top: 10px; border-radius: 5px; font-size: 14px; }
.dwn-btn:hover { background: #333; }