/* MyTube Dark Mode - Fully Responsive */

/* Root colors */
:root {
  --bg: #0f0f12;
  --card: #1a1a1d;
  --muted: #9aa0a6;
  --accent: #ff0000;
  --text: #eaeaea;
}

/* Global */
* { box-sizing: border-box; margin:0; padding:0; }
body { font-family: Inter, system-ui, Arial, sans-serif; background: var(--bg); color: var(--text); line-height:1.5; }

/* Buttons */
.button, .btn {
  padding: 6px 12px;
  margin: 6px;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: white;
  font-weight: bold;
  transition: background 0.2s ease;
}
button:hover, .btn:hover { background:#b00610; }

/* Like/Dislike */
.likes {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  flex-wrap: wrap;
}
.likes button {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--card);
  border: none;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  color: var(--text);
  cursor: pointer;
  transition: all 0.2s ease;
}
.likes button:hover { background: rgba(255,0,0,0.1); transform: translateY(-2px); }
.likes button .icon { font-size: 16px; transition: transform 0.2s ease; }
.likes button.clicked .icon { animation: bounce 0.3s ease; color: var(--accent); }
.likes button.dislike.clicked .icon { color:#999; }
.likes button span.count { font-weight: 600; transition: all 0.2s ease; }
.likes button:disabled { cursor: not-allowed; opacity: 0.6; transform: none; box-shadow: none; }
@keyframes bounce { 0% {transform:scale(1);} 50%{transform:scale(1.4);} 100%{transform:scale(1);} }

/* Topbar */
.topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background: var(--card); border-bottom: 1px solid rgba(255,255,255,0.05); flex-wrap: wrap; }
.brand a { color: var(--text); font-weight: 700; text-decoration: none; transition: 0.2s; }
.brand a:hover { color: var(--accent); }
.search { flex: 1; max-width: 600px; margin: 8px 16px; display: flex; }
.search input { flex: 1; padding: 8px 10px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.06); background:#0b0b0c; color: var(--text); }
.search button { padding: 8px 10px; margin-left: 6px; border-radius:6px; background: var(--accent); border:none; color:#fff; cursor:pointer; transition:0.2s; }
.search button:hover { background: #ff4d4d; }
.actions .btn { background: var(--accent); color:#fff; padding:6px 10px; border-radius:6px; text-decoration:none; margin-left:6px; transition:0.2s; }
.actions .btn.ghost { background:transparent; border:1px solid rgba(255,255,255,0.06); }
.actions .btn:hover { background:#ff4d4d; }

/* Layout */
.layout { display:flex; max-width:1200px; margin:20px auto; padding:0 16px; gap:16px; }
.sidebar { width:200px; }
.sidebar nav a { display:block; padding:8px 10px; color: var(--muted); text-decoration:none; border-radius:6px; transition:0.2s; }
.sidebar nav a:hover { background: rgba(255,0,0,0.1); color: var(--accent); }
.main { flex:1; }
.grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(260px,1fr)); gap:16px; }

/* Video Card */
.card { background: var(--card); border-radius:8px; overflow:hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border 0.25s ease; cursor: pointer; }
.card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(255,0,0,0.4); border:1px solid var(--accent); }
.thumb video { width:100%; height:150px; object-fit:cover; background:#000; transition:0.3s; }
.thumb video:hover { filter: brightness(0.8); }
.info { padding:10px; }
.grid .card .info h3 { margin:0 0 6px 0; font-size:15px; color:#ffffff; transition:0.2s; }
.grid .card .info h3:hover { color: var(--accent); }
.info .meta { color: var(--muted); font-size:13px; }

/* Containers */
.container { max-width:900px; margin:20px auto; padding:0 16px; }
.small { max-width:640px; margin:20px auto; }

/* Notices */
.notice { padding:10px; border-radius:6px; margin-bottom:12px; }
.notice.success { background:#0b2f18; color:#b8f0c8; }
.notice.error { background:#2f0b0b; color:#f0b8b8; }

/* Auth forms */
.auth-card { max-width:420px; margin:80px auto; padding:20px; background:var(--card); border-radius:8px; }
.auth-card input, .auth-card textarea, form input, form textarea { width:100%; padding:8px; border-radius:6px; border:1px solid rgba(255,255,255,0.04); background:#0b0b0c; color:var(--text); margin-bottom:10px; }

/* Video Page */
.video-page .player { background: #000; border-radius: 8px; padding: 10px; margin-bottom: 12px; max-width: 640px; margin-left:auto; margin-right:auto; }
.video-page .player video { width:100%; height:360px; border-radius:6px; object-fit:cover; }
.desc { background:var(--card); padding:10px; border-radius:8px; margin-top:8px; }
.comments { margin-top:16px; }
.comment { background:var(--card); padding:10px; border-radius:6px; margin-top:8px; transition:0.2s; }
.comment:hover { background: rgba(255,0,0,0.05); }
.comment .time { color: var(--muted); font-size:12px; margin-left:6px; }
.ctext { margin-top:4px; }

/* Progress bar */
#progress-container { width:100%; background:#333; height:20px; border-radius:10px; margin:10px 0; display:none; }
#progress-bar { width:0%; height:100%; background: var(--accent); border-radius:10px; text-align:center; color:white; line-height:20px; }

/* Responsive: Mobile and Tablet */
@media (max-width: 1024px) {
  .layout { flex-direction: column; gap:12px; }
  .sidebar { width:100%; margin-bottom:12px; }
  .grid { grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap:12px; }
  .video-page .player video { height:250px; }
  .card .thumb video { height:140px; }
  .info h3 { font-size:14px; }
  .info .meta { font-size:12px; }
  .likes button { padding:5px 10px; font-size:13px; }
  .btn, .button { padding:6px 10px; font-size:14px; }
  #progress-container { height:8px; }
  #progress-bar { line-height:8px; font-size:10px; }
}

/* Responsive: Small Mobile (< 600px) */
@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; gap:10px; }
  .video-page .player video { height:200px; }
  .card .thumb video { height:120px; }
  .info h3 { font-size:13px; }
  .info .meta { font-size:11px; }
  .likes button { padding:4px 8px; font-size:12px; }
  .btn, .button { font-size:13px; padding:5px 8px; }
  #progress-container { height:6px; }
  #progress-bar { line-height:6px; font-size:9px; }
}

/* Responsive: Extra Small Mobile (< 400px) */
@media (max-width: 400px) {
  .video-page .player video { height:160px; }
  .card .thumb video { height:100px; }
  .info h3 { font-size:12px; }
  .info .meta { font-size:10px; }
  .likes button { padding:3px 6px; font-size:11px; }
  .btn, .button { font-size:12px; padding:4px 6px; }
  #progress-container { height:4px; }
  #progress-bar { line-height:4px; font-size:8px; }
}