/* style.css — full with overlay play + audio bar */

:root{
  --bg:#0f1115; --card:#151923; --muted:#a3adbd; --text:#e8ecf1; --accent:#6ea8fe; --danger:#ff6b6b; --ok:#4dd4ac; --border:#232b3a;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial; }
a{ color: var(--accent); text-decoration:none; } a:hover{ text-decoration:underline; }

.topbar{ position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:12px; padding:12px 16px; background:#0d0f14cc; backdrop-filter: blur(8px); border-bottom:1px solid var(--border); }
.brand a{ font-weight:700; font-size:18px; color:var(--text); }
.search{ flex:1; }
.search input{ width:100%; padding:10px 12px; border-radius:12px; background:#0c0f15; border:1px solid var(--border); color:var(--text); }
.cat-filter select{ padding:10px 12px; border-radius:12px; background:#0c0f15; border:1px solid var(--border); color:var(--text); }
.nav .btn{ margin-left:8px; }

.container{ max-width:1200px; margin:20px auto; padding:0 16px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap:16px; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.25); display:flex; flex-direction:column; }
.media{ background:#0b0e14; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative; }
.has-thumb{ background-size:cover; }
.card video, .card img, .card audio, .pdf-embed{ width:100%; height:100%; object-fit:cover; }
.card audio{ height:auto; padding:8px; }
.file-generic{ display:flex; gap:8px; align-items:center; } .file-generic .filename{ color:var(--text); } .file-generic .icon{ font-size:28px; }

/* overlay play */
.overlay-play{
  position:absolute; inset:0;
  display:grid; place-items:center;
  background:transparent;
  border:none;
  cursor:pointer;
}
.overlay-play::before{
  content:"";
  width:54px; height:54px;
  border-radius:999px;
  background:#0000007a;
  border:1px solid var(--border);
  display:block;
  box-shadow: 0 4px 12px rgba(0,0,0,0.45);
}
.overlay-play::after{
  content:"";
  position:absolute;
  width:0; height:0;
  border-left:16px solid white;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  margin-left:4px;
}

/* audio bar below thumbnail */
.audio-bar{
  background:#0d1320; border-top:1px solid var(--border);
  padding:6px 8px;
}
.audio-bar audio{ width:100%; }

.card .content{ padding:12px; display:flex; flex-direction:column; gap:8px; }
.title{ margin:0; font-size:16px; line-height:1.3; }
.desc{ margin:0; color:var(--muted); font-size:14px; }
.meta{ display:flex; align-items:center; gap:10px; color:var(--muted); flex-wrap:wrap; }
.meta .pin{ margin-left:auto; }
.badge{ display:inline-block; font-size:12px; padding:2px 8px; border-radius:999px; background:#22304d; color:#cfe1ff; border:1px solid var(--border); margin-left:6px; }

.btn{ background:var(--accent); color:#0b0e14; border:none; padding:8px 12px; border-radius:10px; font-weight:700; cursor:pointer; }
.btn:hover{ filter:brightness(1.1); }
.btn.danger{ background:var(--danger); color:#210; }
button.like{ background:#1a2232; border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:10px; cursor:pointer; }
button.like:hover{ background:#212a3b; }
.btn-ghost{ background:#1a2232; color:#e8ecf1; border:1px dashed var(--border); }

.footer{ padding:24px; text-align:center; color:var(--muted); }

/* Item page */
.item{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; }
.item .media{ aspect-ratio:16/9; background:#0b0e14; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.item .has-thumb{ background-size:cover; }
.item video, .item img, .item .pdf-embed{ width:100%; height:100%; object-fit:contain; background:#0b0e14; }

.comments{ margin-top:8px; }
.comment-form{ display:flex; flex-direction:column; gap:8px; }
.comment{ background:#111521; border:1px solid var(--border); border-radius:12px; padding:8px 10px; margin-top:8px; }
.comment-head{ display:flex; gap:10px; align-items:center; color:var(--muted); font-size:12px; }
.comment p{ margin:6px 0 0 0; white-space:pre-wrap; }

/* Admin */
.admin .auth-card{ max-width:420px; margin: 0 auto; }
.admin .admin-list{ display:flex; flex-direction:column; gap:8px; }
.admin-item{ background:#111521; border:1px solid var(--border); border-radius:12px; padding:8px 10px; }
.edit-form{ display:grid; grid-template-columns: 1fr; gap:8px; margin-top:8px; }
.edit-form input[type="text"], .edit-form textarea, .edit-form select{ width:100%; padding:8px; border-radius:10px; border:1px solid var(--border); background:#0c0f15; color:#e8ecf1; }
.edit-form .chk{ display:flex; align-items:center; gap:8px; }
.row{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.thumb-form{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.thumb-preview{ width:100%; aspect-ratio:16/9; background-size:cover; background-position:center; border:1px dashed var(--border); border-radius:12px; }
.error{ color:var(--danger); } .success{ color:var(--ok); } .hint{ color:var(--muted); font-size:13px; }
.cats{ list-style:none; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.cats li{ display:flex; align-items:center; gap:6px; }

/* === Floating player (Spotify-like) === */
.player{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: #0b0f18;
  border-top: 1px solid var(--border);
  padding: 10px 12px;
}
.player.hidden{ display: none; }

.player .inner{
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
}

.player .left, .player .center, .player .right{ display:flex; align-items:center; gap:10px; }
.player .left .thumb{ width:48px; height:48px; background:#111; border-radius:8px; background-size:cover; background-position:center; flex-shrink:0; }
.player .left .meta{ display:flex; flex-direction:column; min-width:0; }
.player .left .meta .t{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player .left .meta .link{ font-size:12px; }

.player .controls .pbtn{ background:#1a2232; color:#e8ecf1; border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer; }
.player .progress{ width: 100%; }
.player .right .pin{ background:#1a2232; color:#e8ecf1; border:1px solid var(--border); border-radius:10px; padding:6px 10px; cursor:pointer; }

/* Card overlay button stays the same */
.overlay-enqueue{ position:absolute; inset:0; background:transparent; border:none; cursor:pointer; }
.overlay-enqueue::before{
  content:""; width:56px; height:56px; border-radius:999px; background:#0000006c; border:1px solid var(--border); display:block;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
}
.overlay-enqueue::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-40%,-50%);
  width:0; height:0; border-left:16px solid white; border-top:10px solid transparent; border-bottom:10px solid transparent;
}
.btn.small{ padding:6px 10px; font-size:14px; }