:root{
  --bg: #07112a;
  --card: #081126;
  --accent: #2563eb;
  --muted: #9aaed3;
  --text: #e6eef8;
  --max-w: 980px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  margin:0;display:flex;justify-content:center;background:linear-gradient(180deg,var(--bg),#020617);
  color:var(--text);padding:20px;
}
#app{width:100%;max-width:var(--max-w)}
header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.brand{display:flex;align-items:center;gap:12px}
.logo{width:44px;height:44px;border-radius:8px;object-fit:cover}
h1{margin:0;font-size:18px}
.user-display{margin-left:12px;font-size:13px;color:var(--muted)}
button{
  padding:8px 12px;border-radius:10px;border:none;background:var(--accent);color:white;cursor:pointer;font-weight:600
}
button[disabled]{opacity:.6;cursor:not-allowed}
input{
  width:100%;padding:10px;border-radius:10px;border:1px solid #162437;background:#020617;color:var(--text);
  margin-top:6px;margin-bottom:12px;
}
main{display:grid;grid-template-columns:1fr;gap:12px}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,0.03)}
.row{display:flex;gap:8px;align-items:center}
.controls{margin-top:8px;display:flex;gap:8px;align-items:center}
.player-placeholder{width:100%;height:360px;background:#000;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#888}
.chat-log{height:240px;overflow:auto;border-radius:8px;background:#071030;padding:8px;border:1px solid #233046}
.chat-line{padding:6px;border-bottom:1px solid #0f2740}
.chat-input-row{display:flex;gap:8px;margin-top:8px}
.muted{color:var(--muted)}
.small{font-size:12px}
.footer{margin-top:16px}

/* responsive */
@media (max-width:760px){
  .player-placeholder{height:220px}
  header{flex-direction:column;align-items:flex-start;gap:12px}
}

.search-bar {
  margin-bottom: 1rem;
  display: flex;
  justify-content: center;
  gap: 0.5rem;
}

.search-bar input {
  padding: 0.5rem;
  width: 60%;
  border: none;
  border-radius: 8px;
  outline: none;
}

.search-bar button {
  background: #1db954;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  font-weight: 600;
}

.results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}

.video-item {
  width: 200px;
  background: #1e1e1e;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
  overflow: hidden;
}

.video-item:hover {
  transform: scale(1.05);
}

.video-item img {
  width: 100%;
}

.video-item p {
  padding: 0.5rem;
  font-size: 0.9rem;
}

.chat-log {
  background: #1e1e1e;
  border-radius: 10px;
  padding: 10px;
  height: 250px;
  overflow-y: auto;
  text-align: left;
}

.chat-message {
  margin: 4px 0;
  padding: 4px 6px;
  border-radius: 4px;
}

.chat-message strong {
  color: #1db954;
}

.chat-input-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.chat-input-row input {
  flex: 1;
  padding: 0.6rem;
  border-radius: 8px;
  border: none;
  outline: none;
}

.chat-input-row button {
  background: #1db954;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.2rem;
  cursor: pointer;
  font-weight: 600;
}

/* 🎬 YouTube-like Player Section */
#videoContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px auto;
  max-width: 900px;
  aspect-ratio: 16 / 9;
  background-color: #000;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
}

#player {
  width: 100%;
  height: 100%;
}

.search-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1rem 0;
}

.search-bar input {
  padding: 0.7rem;
  width: 60%;
  max-width: 500px;
  border: none;
  border-radius: 20px;
  outline: none;
}

.search-bar button {
  background: #1db954;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  font-weight: 600;
}

.search-bar button:hover {
  background: #18a34a;
}

.results {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  padding: 1rem;
}

.video-item {
  background: #1e1e1e;
  border-radius: 10px;
  cursor: pointer;
  overflow: hidden;
  width: 220px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.video-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(29, 185, 84, 0.3);
}

.video-item img {
  width: 100%;
  height: 125px;
  object-fit: cover;
}

.video-item p {
  padding: 0.5rem;
  font-size: 0.9rem;
  text-align: left;
  color: #fff;
  font-weight: 500;
}