html { scrollbar-gutter: stable both-edges; }

body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }
.site-header { display:flex; align-items:center; gap:16px; padding:8px 16px; border-bottom:1px solid #eee; }
.logo a { font-weight:700; text-decoration:none; color:#111; }
.search-form input { padding:6px 10px; width:280px; }
.user-nav a, .user-nav button { margin-left:12px; }
.layout { display:flex; }
.content { flex:1; padding:16px; }

/* Grid */
.video-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; }

/* Cards */
.video-card { display:block; color:inherit; text-decoration:none; }
.video-grid .video-card { display:flex; flex-direction:column; }

.video-card .thumb-link { position:relative; display:block; background:#000; width:100%; aspect-ratio:16/9; overflow:hidden; }
.thumb-img { position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; display:block; transition:opacity .15s linear; }
.thumb-still { opacity:1; }
.thumb-anim { opacity:0; }
.thumb-link:hover .thumb-anim { opacity:1; }
.thumb-link:hover .thumb-still { opacity:0; }

.video-card .meta { padding:6px 0; }

.video-card .title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
  min-height: calc(1.2em * 2);
}

/* Author line */
.author-line { display:inline-flex; align-items:center; gap:6px; }
.mini-avatar { width:16px; height:16px; border-radius:50%; object-fit:cover; vertical-align:middle; border:1px solid #ddd; }

/* Watch */
.watch-title { overflow-wrap: anywhere; word-break: break-word; }
.player-wrapper { margin-bottom:12px; }

/* Player overlay */
.player-wrap { position: relative; }
.player-wrap video { display:block; width:100%; height:auto; }
.video-overlay {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:64px; height:64px;
  opacity:.9;
  transition:opacity .2s ease;
  cursor:pointer;
  user-select:none;
  pointer-events:auto;
}
.video-overlay img { width:100%; height:100%; display:block; }
.player-wrap.playing .video-overlay { opacity:0; pointer-events:none; }


/* moved embeb-block*/
.title-row {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
  margin-top:12px;
}
.title-row .watch-title {
  margin:0;
  flex:1 1 auto;
  min-width:200px;
}
.embed-inline {
  flex:0 0 auto;
  align-self:flex-start;
  display:flex;
  justify-content:flex-end;
  max-width:160px; /* player width.. maybe deprecated.. Sees in watch.html */
}

.embed-box summary {
  cursor:pointer;
  font-weight:600;
  padding:4px 8px;
  border-radius:6px;
  background:#f3f3f3;
}
.embed-box summary:hover {
  background:#e9e9e9;
}
.embed-body {
  margin-top:6px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.embed-code {
  width:100%;
  font-family:monospace;
  font-size:12px;
  padding:6px;
  border:1px solid #ccc;
  border-radius:6px;
  resize:vertical;
  background:#fff;
  box-sizing:border-box;
}
.btn-copy-embed {
  align-self:flex-end;
  padding:4px 10px;
  font-size:12px;
  border:1px solid #bbb;
  background:#fff;
  border-radius:6px;
  cursor:pointer;
}
.btn-copy-embed:hover {
  background:#f0f0f0;
}
@media (max-width:700px){
  .title-row {
    flex-direction:column;
    align-items:stretch;
  }
  .embed-inline {
    justify-content:flex-start;
    margin-top:8px;
  }
}
/* /moved embeb-block*/



/* Alerts */
.alert { padding:10px 12px; border-radius:6px; margin:10px 0; border:1px solid transparent; }
.alert-error { background:#fde8e8; color:#8a1f1f; border-color:#f5c2c7; }