@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:ital,wght@0,400;0,700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --black:#07050a;
  --panel:#120b18;
  --panel2:#170f1f;
  --violet:#8b2bff;
  --violet-soft:#b98bff;
  --red:#e8143c;
  --ink:#f4eef7;
  --muted:#8a7d92;
  --hair:rgba(244,238,247,0.1);
}
*{box-sizing:border-box;}
body{ margin:0; background:var(--black); color:var(--ink); font-family:'Manrope',sans-serif; padding-bottom:86px; }
a{color:inherit; text-decoration:none;}
button, input, textarea{ font-family:inherit; }
.mono{font-family:'Space Mono',monospace;}
img{display:block;}

/* ---------- Header ---------- */
header{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  padding:1rem 1.6rem; background:rgba(7,5,10,0.9); backdrop-filter:blur(10px); border-bottom:1px solid var(--hair);
  gap:1rem; flex-wrap:wrap;
}
.brand{ font-family:'Anton',sans-serif; font-size:1.2rem; letter-spacing:0.03em; cursor:pointer; }
.brand span{color:var(--red);}
.header-actions{ display:flex; align-items:center; gap:0.8rem; }
.btn{
  display:inline-flex; align-items:center; gap:0.4rem; padding:0.55rem 1.1rem; border-radius:30px; border:1px solid var(--hair);
  background:transparent; color:var(--ink); cursor:pointer; font-size:0.8rem;
}
.btn:hover{border-color:var(--violet);}
.btn.primary{ background:linear-gradient(135deg,var(--red),var(--violet)); border:none; font-weight:700; }
.btn.danger{ border-color:rgba(232,20,60,0.5); color:#ff8fa3; }
.btn.small{ padding:0.35rem 0.8rem; font-size:0.72rem; }
.avatar{
  width:36px; height:36px; border-radius:50%; overflow:hidden; background:linear-gradient(135deg,var(--violet),var(--red));
  flex-shrink:0; cursor:pointer;
}
.avatar img{width:100%; height:100%; object-fit:cover;}
.avatar.lg{width:96px; height:96px;}
.avatar.xl{width:128px; height:128px; border:4px solid var(--black);}
.avatar.clickable{cursor:pointer;}
.menu-wrap{position:relative;}
.dropdown{
  position:absolute; top:110%; right:0; background:var(--panel); border:1px solid var(--hair); border-radius:8px;
  min-width:180px; padding:0.4rem; display:none; z-index:60;
}
.dropdown.open{display:block;}
.dropdown a, .dropdown button{
  display:block; width:100%; text-align:left; padding:0.6rem 0.8rem; border-radius:6px; background:none; border:none;
  color:var(--ink); font-size:0.85rem; cursor:pointer;
}
.dropdown a:hover, .dropdown button:hover{background:var(--panel2);}

/* ---------- Layout ---------- */
main{ max-width:900px; margin:0 auto; padding:2rem 1.4rem; }
.view-title{ font-family:'Anton',sans-serif; font-size:1.7rem; text-transform:uppercase; margin:0 0 1.4rem; }
.muted{color:var(--muted);}
.center-note{ text-align:center; color:var(--muted); padding:3rem 1rem; font-size:0.9rem; }

/* ---------- Formulaires ---------- */
.form-card{ background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:2rem; max-width:420px; margin:0 auto; }
.form-card h2{ margin:0 0 0.3rem; font-size:1.3rem; }
.form-card p.sub{ color:var(--muted); font-size:0.85rem; margin:0 0 1.4rem; }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-size:0.78rem; color:var(--muted); margin-bottom:0.4rem; }
.field input, .field textarea, .field select{
  width:100%; padding:0.7rem 0.9rem; border-radius:6px; border:1px solid var(--hair); background:var(--panel2); color:var(--ink); font-size:0.9rem;
}
.field textarea{min-height:80px; resize:vertical;}
.form-error{ color:var(--red); font-size:0.8rem; min-height:1.2em; margin-top:0.6rem; }
.form-switch{ text-align:center; font-size:0.82rem; color:var(--muted); margin-top:1.2rem; }
.form-switch a{color:var(--violet-soft);}

/* ---------- Cartes morceau (feed) ---------- */
.track-card{ display:flex; gap:1rem; padding:1rem; border:1px solid var(--hair); border-radius:10px; margin-bottom:0.9rem; background:var(--panel); }
.track-cover{
  width:76px; height:76px; border-radius:6px; flex-shrink:0; overflow:hidden; position:relative; cursor:pointer;
  background:radial-gradient(circle at 30% 20%, var(--violet), transparent 60%), radial-gradient(circle at 80% 90%, var(--red), transparent 55%), var(--black);
}
.track-cover img{width:100%; height:100%; object-fit:cover;}
.track-cover .play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35);
  opacity:0; transition:opacity 0.15s; color:#fff; font-size:1.4rem;
}
.track-cover:hover .play-overlay{opacity:1;}
.track-info{flex:1; min-width:0;}
.track-info .title{ font-weight:700; font-size:1rem; cursor:pointer; }
.track-info .title:hover{color:var(--violet-soft);}
.track-info .by{font-size:0.8rem; color:var(--muted); margin-top:0.15rem;}
.track-info .by a:hover{color:var(--violet-soft);}
.track-meta{display:flex; align-items:center; gap:1.1rem; margin-top:0.6rem; flex-wrap:wrap;}
.meta-btn{ background:none; border:none; color:var(--muted); font-size:0.78rem; cursor:pointer; display:flex; align-items:center; gap:0.35rem; }
.meta-btn:hover{color:var(--ink);}
.meta-btn.liked{color:var(--red);}
.tag-pill{
  font-family:'Space Mono',monospace; font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--violet-soft);
  border:1px solid rgba(139,43,255,0.4); border-radius:20px; padding:0.2rem 0.6rem;
}

/* ---------- Profil ---------- */
.profile-banner-wrap{ position:relative; margin-bottom:56px; }
.profile-banner{ height:200px; border-radius:10px; overflow:hidden; background:linear-gradient(135deg,var(--violet),#241033); }
.profile-banner img{width:100%; height:100%; object-fit:cover;}
.profile-avatar-float{ position:absolute; left:1.4rem; bottom:-48px; }
.profile-avatar-float .avatar.xl{ box-shadow:0 4px 18px rgba(0,0,0,0.5); }
.profile-head-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1rem; }
.profile-head-actions{ display:flex; gap:0.6rem; flex-wrap:wrap; }
.profile-names h1{ font-family:'Anton',sans-serif; font-size:1.6rem; text-transform:uppercase; margin:0; }
.profile-names .uname{ color:var(--muted); font-size:0.85rem; }
.profile-head-row .profile-names{ padding-left:148px; }
.profile-stats{ display:flex; gap:1.6rem; margin:1rem 0 1.6rem; font-size:0.85rem; }
.profile-stats b{display:block; font-size:1.1rem;}
.profile-bio{ color:#cfc3d6; line-height:1.7; margin-bottom:1.6rem; max-width:600px; }
.tabs{ display:flex; gap:0.4rem; border-bottom:1px solid var(--hair); margin-bottom:1.4rem; }
.tabs button{ background:none; border:none; color:var(--muted); padding:0.7rem 1rem; cursor:pointer; font-size:0.85rem; border-bottom:2px solid transparent; }
.tabs button.active{color:var(--ink); border-bottom-color:var(--red);}

/* ---------- Upload ---------- */
.file-drop{ border:1.5px dashed var(--hair); border-radius:8px; padding:1.3rem; text-align:center; color:var(--muted); font-size:0.82rem; cursor:pointer; background:var(--panel2); }
.file-drop:hover{border-color:var(--violet);}
.file-drop input{display:none;}

/* ---------- Track detail ---------- */
.track-hero{ display:flex; gap:2rem; align-items:flex-end; margin-bottom:2rem; flex-wrap:wrap; }
.track-hero .cover-lg{ width:220px; height:220px; border-radius:8px; overflow:hidden; background:radial-gradient(circle at 30% 20%, var(--violet), transparent 60%), radial-gradient(circle at 80% 90%, var(--red), transparent 55%), var(--black); flex-shrink:0; }
.track-hero .cover-lg img{width:100%; height:100%; object-fit:cover;}
.comment-row{ display:flex; gap:0.8rem; padding:0.9rem 0; border-bottom:1px solid var(--hair); }
.comment-row .body{font-size:0.88rem; line-height:1.5;}
.comment-row .meta{font-size:0.72rem; color:var(--muted); margin-top:0.3rem;}
.comment-form{ display:flex; gap:0.7rem; margin:1.4rem 0; }
.comment-form input{flex:1; padding:0.7rem 0.9rem; border-radius:30px; border:1px solid var(--hair); background:var(--panel2); color:var(--ink);}

/* ---------- Playlists ---------- */
.playlist-card{ display:flex; gap:1rem; align-items:center; padding:1rem; border:1px solid var(--hair); border-radius:10px; margin-bottom:0.8rem; background:var(--panel); cursor:pointer; }
.playlist-card:hover{border-color:var(--violet);}
.playlist-cover{ width:60px; height:60px; border-radius:6px; background:linear-gradient(135deg,var(--violet),var(--red)); overflow:hidden; flex-shrink:0; }
.playlist-cover img{width:100%; height:100%; object-fit:cover;}

/* ---------- Admin ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom:1.6rem; }
.stat-box{ background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:1.2rem; }
.stat-box .num{font-size:1.7rem; font-weight:800;}
.stat-box .lbl{font-size:0.72rem; color:var(--muted); text-transform:uppercase;}
table.admin-table{ width:100%; border-collapse:collapse; font-size:0.82rem; }
table.admin-table th{ text-align:left; color:var(--muted); font-weight:600; padding:0.6rem; border-bottom:1px solid var(--hair); font-size:0.72rem; text-transform:uppercase; }
table.admin-table td{ padding:0.6rem; border-bottom:1px solid var(--hair); }
.admin-edit-panel{ background:var(--panel2); border:1px solid var(--hair); border-radius:8px; padding:1.2rem; margin:0.4rem 0; }

/* ---------- Player persistant ---------- */
.player-bar{
  position:fixed; bottom:0; left:0; right:0; height:78px; background:var(--panel); border-top:1px solid var(--hair);
  display:flex; align-items:center; gap:1rem; padding:0 1.2rem; z-index:80; transform:translateY(100%); transition:transform 0.25s;
}
.player-bar.visible{transform:translateY(0);}
.player-bar .cover{ width:50px; height:50px; border-radius:5px; overflow:hidden; flex-shrink:0; background:linear-gradient(135deg,var(--violet),var(--red)); }
.player-bar .cover img{width:100%; height:100%; object-fit:cover;}
.player-bar .pinfo{ width:170px; flex-shrink:0; overflow:hidden; }
.player-bar .pinfo .t{ font-weight:700; font-size:0.85rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-bar .pinfo .a{ font-size:0.72rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.player-bar .playbtn{
  width:40px; height:40px; border-radius:50%; border:none; background:linear-gradient(135deg,var(--red),var(--violet));
  color:#fff; cursor:pointer; font-size:0.95rem; flex-shrink:0;
}
.player-bar .seekzone{ flex:1; display:flex; align-items:center; gap:0.7rem; }
.player-bar .seek{ -webkit-appearance:none; flex:1; height:3px; border-radius:2px; background:var(--hair); cursor:pointer; }
.player-bar .seek::-webkit-slider-thumb{ -webkit-appearance:none; width:11px; height:11px; border-radius:50%; background:var(--ink); cursor:pointer; }
.player-bar .time{font-size:0.7rem; color:var(--muted); font-family:'Space Mono',monospace; flex-shrink:0;}
.player-bar .plike{ background:none; border:none; color:var(--muted); cursor:pointer; font-size:1rem; flex-shrink:0; }
.player-bar .plike.liked{color:var(--red);}

/* ---------- Toast ---------- */
.toast{
  position:fixed; bottom:100px; right:1.6rem; background:var(--panel2); border:1px solid var(--hair); padding:0.9rem 1.2rem;
  border-radius:8px; font-size:0.82rem; opacity:0; transform:translateY(10px); transition:opacity 0.25s, transform 0.25s; z-index:999;
  max-width:340px; line-height:1.5;
}
.toast.show{opacity:1; transform:translateY(0);}
.toast.err{border-color:rgba(232,20,60,0.5); color:#ff8fa3;}
.toast.ok{border-color:rgba(46,204,113,0.4); color:#7be6a6;}

@media (max-width:640px){
  .stat-grid{grid-template-columns:repeat(2,1fr);}
  .player-bar .pinfo{width:100px;}
  .track-hero{flex-direction:column;}
  .track-hero .cover-lg{width:160px; height:160px;}
}

/* ---------- Ajouts : œuvres multi-types, recherche, zone dangereuse ---------- */

.toplinks{ display:flex; gap:0.4rem; margin-right:auto; margin-left:1.4rem; }
.toplinks a{ font-size:0.82rem; color:var(--muted); padding:0.4rem 0.6rem; }
.toplinks a:hover{color:var(--ink);}

.filter-row{ display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.filter-chip{
  font-family:'Space Mono',monospace; font-size:0.72rem; padding:0.4rem 0.9rem; border-radius:20px;
  border:1px solid var(--hair); background:transparent; color:var(--muted); cursor:pointer;
}
.filter-chip:hover{color:var(--ink);}
.filter-chip.active{ background:linear-gradient(135deg,var(--red),var(--violet)); color:#fff; border-color:transparent; }

.type-pill{
  font-family:'Space Mono',monospace; font-size:0.62rem; letter-spacing:0.06em; color:var(--ink);
  background:var(--panel2); border:1px solid var(--hair); border-radius:20px; padding:0.2rem 0.6rem; margin-right:0.4rem;
}

.work-card{ display:flex; gap:1rem; padding:1rem; border:1px solid var(--hair); border-radius:10px; margin-bottom:0.9rem; background:var(--panel); }
.work-thumb{
  width:76px; height:76px; border-radius:6px; flex-shrink:0; overflow:hidden; position:relative; cursor:pointer;
  background:radial-gradient(circle at 30% 20%, var(--violet), transparent 60%), radial-gradient(circle at 80% 90%, var(--red), transparent 55%), var(--black);
  display:flex; align-items:center; justify-content:center;
}
.work-thumb img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0;}
.work-thumb .play-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35);
  opacity:0; transition:opacity 0.15s; color:#fff; font-size:1.4rem; z-index:2;
}
.work-thumb:hover .play-overlay{opacity:1;}
.work-thumb .type-icon{ font-size:1.8rem; }
.work-thumb.written{ background:linear-gradient(160deg,var(--violet-deep,#241033),var(--black)); padding:0.5rem; }
.written-excerpt{ font-size:0.62rem; line-height:1.4; color:var(--muted); overflow:hidden; }
.work-info{flex:1; min-width:0;}
.work-info .title{ font-weight:700; font-size:1rem; cursor:pointer; }
.work-info .title:hover{color:var(--violet-soft);}
.work-info .by{font-size:0.8rem; color:var(--muted); margin-top:0.15rem;}
.work-info .by a:hover{color:var(--violet-soft);}
.work-meta{display:flex; align-items:center; gap:0.9rem; margin-top:0.6rem; flex-wrap:wrap;}

.work-grid{ margin-bottom:1.8rem; }
.section-head-row{ display:flex; align-items:baseline; justify-content:space-between; margin:1.6rem 0 0.9rem; flex-wrap:wrap; gap:0.6rem; }
.section-head-row:first-child{margin-top:0;}
.section-head{ font-size:0.95rem; margin:0; text-transform:uppercase; letter-spacing:0.03em; color:var(--violet-soft); }
.ext-link{ font-family:'Space Mono',monospace; font-size:0.7rem; color:var(--muted); border:1px solid var(--hair); border-radius:20px; padding:0.3rem 0.8rem; }
.ext-link:hover{color:var(--ink); border-color:var(--violet);}

.type-icon-lg{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:3rem; }
.written-full{ white-space:pre-wrap; line-height:1.8; color:#cfc3d6; margin-top:1.4rem; font-size:0.98rem; }
.video-embed{ position:relative; width:100%; padding-top:56.25%; margin-top:1rem; border-radius:8px; overflow:hidden; }
.video-embed iframe{ position:absolute; inset:0; width:100%; height:100%; border:none; }

.hero-banner{
  border-radius:12px; padding:2rem; margin-bottom:2rem; background:var(--panel); border:1px solid var(--hair);
  background-size:cover; background-position:center;
}
.hero-banner.has-img{ min-height:140px; display:flex; align-items:flex-end; }
.hero-banner p{ margin:0; font-size:1.05rem; line-height:1.6; max-width:640px; }

/* ---------- Messagerie ---------- */
.badge-dot{
  position:absolute; top:-4px; right:-4px; background:var(--red); color:#fff; font-family:'Space Mono',monospace;
  font-size:0.6rem; min-width:16px; height:16px; border-radius:8px; align-items:center; justify-content:center; padding:0 3px;
}
.conv-row{ display:flex; align-items:center; gap:1rem; padding:1rem; border:1px solid var(--hair); border-radius:10px; margin-bottom:0.7rem; background:var(--panel); cursor:pointer; }
.conv-row:hover{border-color:var(--violet);}
.conv-info{flex:1; min-width:0;}
.conv-name{font-weight:700; font-size:0.92rem;}
.conv-preview{ font-size:0.82rem; color:var(--muted); margin-top:0.2rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conv-preview.unread{ color:var(--ink); font-weight:600; }
.conv-meta{ text-align:right; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-end; gap:0.3rem; }
.badge-count{ background:var(--red); color:#fff; font-family:'Space Mono',monospace; font-size:0.68rem; border-radius:10px; padding:0.1rem 0.5rem; }
.thread-box{
  display:flex; flex-direction:column; gap:0.6rem; max-height:55vh; overflow-y:auto; padding:1rem;
  border:1px solid var(--hair); border-radius:10px; background:var(--panel);
}
.msg-bubble{ max-width:75%; align-self:flex-start; background:var(--panel2); border-radius:12px 12px 12px 3px; padding:0.6rem 0.9rem; }
.msg-bubble.mine{ align-self:flex-end; background:linear-gradient(135deg,var(--red),var(--violet)); border-radius:12px 12px 3px 12px; }
.msg-body{ font-size:0.9rem; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.msg-time{ font-size:0.62rem; opacity:0.65; margin-top:0.3rem; }

.suggest-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:1rem; }
.profile-suggest-card{
  background:var(--panel); border:1px solid var(--hair); border-radius:10px; padding:1.2rem 1rem; text-align:center; cursor:pointer;
}
.profile-suggest-card:hover{border-color:var(--violet);}
.profile-suggest-card .avatar{ margin:0 auto 0.7rem; }
.profile-suggest-card .pname{ font-weight:700; font-size:0.88rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.profile-suggest-card .puname{ font-size:0.72rem; color:var(--muted); margin-top:0.1rem; }
.profile-suggest-card .pfollowers{ font-size:0.7rem; margin-top:0.4rem; }

@media (max-width:640px){
  .toplinks{display:none;}
  .profile-avatar-float{ position:static; margin-top:-48px; margin-bottom:0.8rem; }
  .profile-banner-wrap{ margin-bottom:0; }
  .profile-head-row .profile-names{ padding-left:0; }
  .profile-head-row{ flex-direction:column; align-items:flex-start; }
}