:root { --bg:#141414; --panel:#1f1f1f; --line:#333; --text:#f2f2f2; --mute:#9a9a9a; --red:#e50914; --ok:#2ea44f; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--text); font:16px/1.4 system-ui,Segoe UI,Roboto,sans-serif; min-height:100vh; }
button { font:inherit; cursor:pointer; border:0; border-radius:6px; padding:.6em 1.1em; background:#333; color:var(--text); }
button:hover { background:#444; }
button.primary { background:var(--red); } button.primary:hover { background:#f6121d; }
button.ghost { background:transparent; border:1px solid var(--mute); }
input[type=text], input[type=email], input[type=password], input[type=search] {
  font:inherit; padding:.7em .9em; border-radius:6px; border:1px solid var(--line); background:#2a2a2a; color:var(--text); width:100%; }
.center { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; padding:1rem; text-align:center; }
.center h1 { font-weight:500; font-size:2.2rem; margin:0; }
.box { width:min(380px,100%); display:flex; flex-direction:column; gap:.8rem; }
.profiles { display:flex; flex-wrap:wrap; gap:1.6rem; justify-content:center; max-width:900px; }
.prof { width:150px; cursor:pointer; position:relative; }
.prof .av { width:150px; height:150px; border-radius:8px; background:#333 center/cover; display:flex; align-items:center; justify-content:center; font-size:3.5rem; color:#fff8; border:3px solid transparent; }
.prof:hover .av { border-color:#fff; }
.prof .nm { margin-top:.5rem; color:var(--mute); }
.prof:hover .nm { color:#fff; }
.prof .edit { position:absolute; inset:0 0 auto 0; height:150px; border-radius:8px; background:#000a; display:flex; align-items:center; justify-content:center; font-size:2.2rem; }
.add .av { background:transparent; border:2px dashed var(--mute); font-size:3rem; }
header.top { display:flex; align-items:center; gap:1rem; padding:.8rem 1.2rem; background:#000; position:sticky; top:0; z-index:5; flex-wrap:wrap; }
header.top .me { display:flex; align-items:center; gap:.6rem; cursor:pointer; }
header.top .me .av { width:34px; height:34px; border-radius:5px; background:#333 center/cover; }
header.top form { flex:1; min-width:220px; display:flex; gap:.5rem; }
.tabs { display:flex; gap:.4rem; padding:.8rem 1.2rem 0; flex-wrap:wrap; }
.tabs button { background:transparent; color:var(--mute); border-bottom:2px solid transparent; border-radius:0; padding:.4em .8em; }
.tabs button.on { color:#fff; border-color:var(--red); }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1rem; padding:1.2rem; }
.card { background:var(--panel); border-radius:8px; overflow:hidden; display:flex; flex-direction:column; }
.card .img { aspect-ratio:2/3; background:#2a2a2a center/contain no-repeat; display:flex; align-items:center; justify-content:center; color:#fff4; font-size:2.4rem; position:relative; }
.card .img.live { aspect-ratio:16/10; }
.card .info { padding:.55rem .7rem .2rem; font-size:.9rem; flex:1; }
.card .info small { display:block; color:var(--mute); font-size:.75rem; margin-top:.15rem; }
.card button { margin:.5rem; font-size:.9rem; }
.card button.added { background:var(--ok); }
.badge { position:absolute; top:6px; left:6px; background:#000b; font-size:.7rem; padding:2px 6px; border-radius:4px; color:#fff; }
.empty { color:var(--mute); text-align:center; padding:3rem 1rem; }
.foot { text-align:center; color:var(--mute); padding:1rem; font-size:.85rem; }
.foot a { color:var(--mute); cursor:pointer; text-decoration:underline; }
#toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); background:#fff; color:#111; padding:.6rem 1rem; border-radius:6px; opacity:0; transition:opacity .25s; pointer-events:none; z-index:20; }
#toast.show { opacity:1; }
.modal { position:fixed; inset:0; background:#000c; display:flex; align-items:center; justify-content:center; z-index:10; padding:1rem; }
.modal .m { background:var(--panel); border-radius:10px; padding:1.4rem; width:min(380px,100%); display:flex; flex-direction:column; gap:.8rem; }
.modal .row { display:flex; gap:.5rem; justify-content:flex-end; }
.modal .bigav { width:110px; height:110px; border-radius:8px; background:#333 center/cover; align-self:center; display:flex; align-items:center; justify-content:center; font-size:2.6rem; color:#fff8; cursor:pointer; }