/* ============================================================
   MULTI - estetica kawaii-gamer / arcade pixel (hefinsita)
   Paleta rosa/cyan/purpura sobre indigo. Nada de matrix.
   ============================================================ */
:root{
  --bg:#0f1230; --bg2:#151a44; --panel:#1a1f4e; --panel2:#20265f; --panelface:rgba(26,31,78,.82);
  --ink:#edeeff; --muted:#9aa0d8; --line:#30376f; --line2:#3d4690;
  --pink:#ff5fb0; --cyan:#49d6ec; --purple:#9b7bff; --yellow:#ffd25e; --mint:#67e8b0;
  --radius:14px; --radius-sm:10px; --gap:12px;
  --disp:'Baloo 2', system-ui, sans-serif;
  --body:'Rubik', system-ui, -apple-system, Segoe UI, sans-serif;
  --shadow:0 8px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh; color:var(--ink); font-family:var(--body); font-size:14.5px; line-height:1.5;
  background:var(--bg); -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
/* Fondo segun hora: imagen pixel-art atenuada + velo oscuro para legibilidad */
#bgLayer{
  position:fixed; inset:0; z-index:-2; background-size:cover; background-position:center;
  image-rendering:pixelated; opacity:.16; filter:saturate(1.1); transition:opacity .6s;
}
#bgVeil{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 700px at 85% -10%, rgba(155,123,255,.14), transparent 60%),
    radial-gradient(900px 600px at 0% 110%, rgba(73,214,236,.10), transparent 60%),
    linear-gradient(180deg, rgba(15,18,48,.72), rgba(15,18,48,.90));
}
a{color:var(--cyan); text-decoration:none}
button{font-family:var(--body)}
.hidden{display:none !important}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:12px;
  padding:11px 16px; background:rgba(16,19,50,.72); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.icon-btn{
  background:var(--panelface); border:1px solid var(--line); color:var(--ink);
  width:42px; height:40px; border-radius:12px; cursor:pointer; display:grid; place-items:center;
  position:relative; transition:.18s;
}
.icon-btn:hover{border-color:var(--pink); transform:translateY(-1px); box-shadow:0 6px 16px rgba(255,95,176,.22)}
.burger{display:block; width:18px; height:2.5px; background:linear-gradient(90deg,var(--pink),var(--cyan)); margin:2.5px 0; border-radius:3px}
.brand{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; font-size:20px; letter-spacing:.4px}
.brand .logo{width:30px; height:30px; border-radius:9px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--pink),var(--purple)); box-shadow:0 4px 12px rgba(155,123,255,.4); font-size:17px}
.brand .w1{background:linear-gradient(90deg,#fff,var(--cyan)); -webkit-background-clip:text; background-clip:text; color:transparent}
.brand small{font-family:var(--body); font-weight:500; color:var(--muted); font-size:11px; margin-left:2px}
.top-actions{margin-left:auto; display:flex; align-items:center; gap:9px}
.btn{
  background:var(--panelface); color:var(--ink); border:1px solid var(--line);
  padding:9px 14px; border-radius:11px; cursor:pointer; font-size:13.5px; font-weight:500;
  transition:.18s; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
}
.btn:hover{border-color:var(--line2); transform:translateY(-1px)}
.btn svg{width:16px; height:16px}
.btn-neon{border:none; color:#20123a; font-weight:700; background:linear-gradient(135deg,var(--pink),var(--yellow))}
.btn-neon:hover{box-shadow:0 8px 20px rgba(255,95,176,.35)}
.badge{
  position:absolute; top:-6px; right:-6px; background:var(--pink); color:#fff; font-size:10px;
  min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; padding:0 4px; font-weight:700;
}
.user-chip{display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:22px; padding:5px 6px 5px 12px; background:var(--panelface)}
.user-chip .av{width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--cyan),var(--purple)); display:grid; place-items:center}
.user-chip .av svg{width:15px;height:15px;color:#fff}
.linkish{background:none; border:none; color:var(--cyan); cursor:pointer; font-size:12.5px; font-weight:500}
.linkish:hover{color:#fff; text-decoration:underline}

/* ---------- Drawer categorias ---------- */
.drawer{
  position:fixed; top:0; left:0; height:100%; width:300px; max-width:84vw; z-index:70;
  background:linear-gradient(180deg,#1b2154,#141838); border-right:1px solid var(--line2);
  transform:translateX(-102%); transition:transform .24s cubic-bezier(.2,.8,.2,1); padding:18px; overflow-y:auto;
}
.drawer.open{transform:none; box-shadow:20px 0 50px rgba(0,0,0,.45)}
.drawer-head{display:flex; justify-content:space-between; align-items:center; font-family:var(--disp); font-weight:800; font-size:16px; color:#fff}
.drawer-head .dot{color:var(--pink)}
.drawer-hint{color:var(--muted); font-size:11.5px; margin:6px 0 16px}
.cat-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
.cat-item{
  display:flex; align-items:center; gap:12px; padding:11px 13px; border:1px solid var(--line);
  border-radius:12px; cursor:pointer; transition:.16s; user-select:none; background:rgba(255,255,255,.02);
}
.cat-item:hover{border-color:var(--line2); background:rgba(255,255,255,.05); transform:translateX(2px)}
.cat-item .ci{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex-shrink:0}
.cat-item .ci svg{width:19px; height:19px; color:#fff}
.cat-item .name{flex:1; font-weight:600; font-size:14px}
.cat-item .eye{width:18px;height:18px;color:var(--muted)}
.cat-item.off{opacity:.45}
.cat-item.off .name{text-decoration:line-through}
.drawer-foot{display:flex; gap:16px; margin-top:18px; padding-top:14px; border-top:1px solid var(--line)}

.scrim{position:fixed; inset:0; background:rgba(6,8,22,.6); z-index:60; backdrop-filter:blur(2px)}

/* ---------- Feed / grilla ---------- */
.wrap{max-width:1640px; margin:0 auto; padding:16px}
.active-filters{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px}
.chip{border:1px solid var(--line); border-radius:20px; padding:4px 11px; font-size:11.5px; color:var(--muted); background:var(--panelface)}
.chip b{color:var(--ink); font-weight:600}
.grid{display:grid; gap:var(--gap); grid-template-columns:repeat(auto-fill, minmax(195px, 1fr))}
.card{
  position:relative; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:var(--panelface); backdrop-filter:blur(6px); cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.8,.2,1), border-color .16s, box-shadow .16s;
  display:flex; flex-direction:column;
}
.card:hover{transform:translateY(-4px) scale(1.012); border-color:var(--pink); box-shadow:0 12px 28px rgba(255,95,176,.18)}
.card .thumb{position:relative; width:100%; aspect-ratio:1/1; background:#12163a; overflow:hidden}
.card .thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s}
.card:hover .thumb img{transform:scale(1.05)}
.card .thumb.noimg{display:grid; place-items:center; color:var(--line2); font-size:30px; font-family:var(--disp)}
.card .play{position:absolute; inset:0; display:grid; place-items:center; pointer-events:none}
.card .play svg{width:46px; height:46px; color:#fff; filter:drop-shadow(0 2px 8px rgba(0,0,0,.6)); opacity:.92}
.card .cat-badge{
  position:absolute; top:8px; left:8px; font-size:10.5px; font-weight:700; padding:3px 9px 3px 7px;
  border-radius:20px; background:rgba(12,14,36,.82); display:inline-flex; align-items:center; gap:5px; color:#fff;
}
.card .cat-badge svg{width:13px;height:13px}
.card .cmt-badge{
  position:absolute; top:8px; right:8px; font-size:10.5px; padding:3px 9px; border-radius:20px;
  background:rgba(12,14,36,.82); color:var(--ink); display:inline-flex; align-items:center; gap:4px; font-weight:600;
}
.card .cmt-badge svg{width:12px;height:12px;color:var(--cyan)}
.card .meta{padding:9px 11px 11px}
.card .meta .title{font-size:13px; font-weight:600; color:#f2f3ff; margin:0 0 5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; line-height:1.35}
.card .meta .sub{display:flex; justify-content:space-between; align-items:center; color:var(--muted); font-size:10.5px}
.card .meta .author{display:inline-flex; align-items:center; gap:5px}
.card .meta .author.staff{font-weight:800}
.card .meta .author .mini{width:15px;height:15px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--purple))}
.card .meta .author .mini svg{width:9px;height:9px;color:#fff}
/* efecto: alguien comentando */
.card.typing::after{content:""; position:absolute; inset:0; background:rgba(8,10,28,.78); z-index:2; border-radius:var(--radius)}
.card .typing-shell{
  position:absolute; z-index:3; left:9px; right:9px; bottom:9px; background:rgba(20,10,30,.9);
  border:1px solid var(--pink); border-radius:9px; padding:7px 9px; font-size:10.5px; color:var(--pink);
  box-shadow:0 0 18px rgba(255,95,176,.4); font-family:var(--body)
}
.card .typing-shell .tcur{animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.sentinel{height:40px}
.loader{display:flex; gap:7px; justify-content:center; padding:20px}
.loader span{width:9px; height:9px; border-radius:50%; animation:bob .8s infinite}
.loader span:nth-child(1){background:var(--pink)} .loader span:nth-child(2){background:var(--cyan); animation-delay:.15s} .loader span:nth-child(3){background:var(--yellow); animation-delay:.3s}
@keyframes bob{0%,100%{opacity:.35; transform:translateY(0)}50%{opacity:1; transform:translateY(-6px)}}
.feed-end{text-align:center; color:var(--muted); padding:26px; font-size:12.5px; font-family:var(--disp); font-weight:600}

/* ---------- Hefinsita (mascota) ---------- */
#hefin{
  position:fixed; right:14px; bottom:14px; z-index:40; width:104px; pointer-events:none;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); transition:transform .25s, opacity .4s;
  animation:hefloat 4s ease-in-out infinite; image-rendering:pixelated;
}
#hefin:hover{transform:scale(1.08) rotate(-3deg)}
#hefin.swap{opacity:0; transform:translateY(8px)}
@keyframes hefloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- Modales ---------- */
.modal-scrim{position:fixed; inset:0; background:rgba(6,8,22,.7); z-index:100; display:grid; place-items:center; padding:16px; backdrop-filter:blur(4px)}
.modal{
  width:100%; max-width:560px; max-height:92vh; overflow:auto;
  background:linear-gradient(180deg,#20265f,#171b42); border:1px solid var(--line2);
  border-radius:18px; box-shadow:var(--shadow); animation:pop .2s cubic-bezier(.2,.9,.3,1.2)
}
@keyframes pop{from{transform:scale(.94); opacity:0}to{transform:scale(1); opacity:1}}
.modal.wide{max-width:940px}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border-bottom:1px solid var(--line)}
.modal-head h3{margin:0; font-family:var(--disp); font-weight:800; font-size:17px; color:#fff; display:flex; align-items:center; gap:9px}
.modal-head h3 svg{width:20px;height:20px;color:var(--pink)}
.modal-body{padding:18px}
.modal-body label{display:block; font-size:12px; color:var(--muted); margin:14px 0 6px; font-weight:500}
.inp, textarea.inp, select.inp{
  width:100%; background:rgba(10,12,34,.6); border:1px solid var(--line); color:var(--ink);
  padding:11px 13px; border-radius:11px; font-family:var(--body); font-size:14px; transition:.15s;
}
.inp:focus{outline:none; border-color:var(--pink); box-shadow:0 0 0 3px rgba(255,95,176,.16)}
textarea.inp{min-height:110px; resize:vertical}
.row{display:flex; gap:11px; flex-wrap:wrap}
.row>*{flex:1; min-width:0}
.tabs{display:flex; gap:7px; margin-bottom:10px; background:rgba(10,12,34,.5); padding:5px; border-radius:12px}
.tab{flex:1; padding:9px; text-align:center; border-radius:9px; cursor:pointer; color:var(--muted); font-weight:600; font-size:13px; transition:.15s}
.tab.active{background:linear-gradient(135deg,var(--pink),var(--purple)); color:#fff}
.hintbox{background:rgba(73,214,236,.07); border:1px solid rgba(73,214,236,.25); border-radius:11px; padding:11px 13px; font-size:12px; color:var(--muted); margin-top:14px}
.hintbox b{color:var(--ink)}
.tokenbox{display:flex; gap:9px; align-items:center; background:rgba(10,12,34,.6); border:1px solid var(--line); border-radius:11px; padding:10px 12px; word-break:break-all; font-size:12.5px; font-family:ui-monospace,monospace}
.err{color:var(--pink); font-size:12.5px; margin-top:11px; min-height:16px; font-weight:500}

/* selector de categoria visual (nuevo multi) */
.catpick{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:8px}
.catpick .cp{border:1px solid var(--line); border-radius:12px; padding:10px 6px; text-align:center; cursor:pointer; transition:.15s; background:rgba(255,255,255,.02)}
.catpick .cp:hover{border-color:var(--line2)}
.catpick .cp.sel{border-color:var(--pink); background:rgba(255,95,176,.12)}
.catpick .cp .ci{width:32px;height:32px;border-radius:9px;margin:0 auto 6px;display:grid;place-items:center}
.catpick .cp .ci svg{width:18px;height:18px;color:#fff}
.catpick .cp span{font-size:11.5px; font-weight:600}
/* dropzone */
.drop{border:2px dashed var(--line2); border-radius:12px; padding:22px; text-align:center; color:var(--muted); cursor:pointer; transition:.15s}
.drop:hover,.drop.over{border-color:var(--pink); color:var(--ink); background:rgba(255,95,176,.05)}
.drop svg{width:30px;height:30px;color:var(--purple);margin-bottom:6px}
.preview{margin-top:10px; border-radius:11px; overflow:hidden; max-height:220px; display:grid; place-items:center; background:#0c0e24}
.preview img,.preview video{max-width:100%; max-height:220px}

/* ---------- Vista de post ---------- */
.post-media{width:100%; max-height:70vh; background:#0a0c22; display:grid; place-items:center}
.post-media img,.post-media video{max-width:100%; max-height:70vh; display:block}
.post-media iframe{width:100%; aspect-ratio:16/9; border:0}
.post-title{font-family:var(--disp); font-weight:800; font-size:20px; color:#fff; margin:14px 0 6px}
.post-by{font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:7px}
.post-by .mini{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--purple))}
.post-by .mini svg{width:11px;height:11px;color:#fff}
.post-body{white-space:pre-wrap; color:var(--ink); margin:12px 0 14px}
.vote-row{display:flex; align-items:center; gap:10px; padding:12px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); flex-wrap:wrap}
.vote{background:rgba(255,255,255,.03); border:1px solid var(--line); color:var(--ink); border-radius:11px; padding:8px 13px; cursor:pointer; display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; transition:.15s}
.vote svg{width:16px;height:16px}
.vote:hover{border-color:var(--line2)}
.vote.up.on{border-color:var(--mint); color:var(--mint); background:rgba(103,232,176,.1)}
.vote.down.on{border-color:var(--pink); color:var(--pink); background:rgba(255,95,176,.1)}
.comment{display:flex; gap:11px; border-bottom:1px solid var(--line); padding:12px 2px}
.comment .avatar{width:36px;height:36px;border-radius:11px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--cyan))}
.comment .avatar svg{width:20px;height:20px;color:#fff}
.comment .avatar.staff{background:linear-gradient(135deg,var(--pink),var(--yellow))}
.comment .cbody{flex:1; min-width:0}
.comment .c-head{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); align-items:center}
.comment .c-author{font-weight:600}
.comment .c-author.staff{font-weight:800}
.comment .c-text{white-space:pre-wrap; margin:4px 0 6px; word-break:break-word}
.comment .c-actions{display:flex; gap:14px; font-size:11.5px}
.comment .c-actions button{background:none;border:none;color:var(--muted);cursor:pointer;font-size:11.5px;display:inline-flex;align-items:center;gap:4px}
.comment .c-actions button svg{width:13px;height:13px}
.comment .c-actions button:hover{color:var(--ink)}

/* ---------- Toast ---------- */
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:200;
  background:linear-gradient(135deg,#20265f,#171b42); border:1px solid var(--pink); color:#fff;
  padding:11px 18px; border-radius:12px; box-shadow:var(--shadow); font-size:13.5px; font-weight:500; max-width:90vw;
}

/* ---------- Responsive ---------- */
@media (max-width:1100px){ .grid{grid-template-columns:repeat(auto-fill, minmax(165px,1fr))} }
@media (max-width:680px){
  .grid{grid-template-columns:repeat(auto-fill, minmax(46%,1fr)); --gap:9px}
  .brand{font-size:16px} .brand small{display:none}
  #hefin{width:74px; opacity:.92}
  .btn{padding:8px 11px; font-size:12.5px}
}
@media (max-width:400px){ .grid{grid-template-columns:1fr 1fr} #hefin{width:62px} }
@media (prefers-reduced-motion:reduce){ #hefin{animation:none} .card{transition:none} }

/* ============================================================
   FASE 2 - follow activo, notificaciones, panel de usuario
   ============================================================ */
.vote.on{border-color:var(--cyan); color:var(--cyan); background:rgba(73,214,236,.1)}

/* lista de notificaciones */
.notif-list{display:flex; flex-direction:column; gap:2px; max-height:60vh; overflow:auto; margin:-4px}
.notif{display:flex; gap:11px; align-items:flex-start; padding:11px 12px; border-radius:11px; cursor:pointer; transition:.14s}
.notif:hover{background:rgba(255,255,255,.04)}
.notif.unread{background:rgba(255,95,176,.08)}
.notif .ni{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(135deg,var(--purple),var(--cyan))}
.notif .ni svg{width:18px;height:18px;color:#fff}
.notif .nc{flex:1;min-width:0}
.notif .nc .nt{font-size:13px;color:var(--ink)}
.notif .nc .nsub{font-size:11px;color:var(--muted);margin-top:2px}
.notif-empty{text-align:center;color:var(--muted);padding:26px;font-size:12.5px}

/* stats del perfil */
.stat-row{display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-bottom:14px}
.stat{background:rgba(255,255,255,.03); border:1px solid var(--line); border-radius:12px; padding:12px 6px; text-align:center}
.stat b{display:block; font-family:var(--disp); font-size:20px; color:#fff; line-height:1}
.stat span{font-size:10.5px; color:var(--muted)}
@media (max-width:560px){ .stat-row{grid-template-columns:repeat(3,1fr)} }

/* mini grid del perfil */
.mini-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:9px}
.mini-card{border:1px solid var(--line); border-radius:11px; overflow:hidden; cursor:pointer; background:rgba(255,255,255,.02); transition:.15s}
.mini-card:hover{border-color:var(--pink); transform:translateY(-2px)}
.mini-card .mt{width:100%; aspect-ratio:1/1; background:#12163a; object-fit:cover; display:block}
.mini-card .mt.noimg{display:grid;place-items:center;color:var(--line2);font-family:var(--disp)}
.mini-card .mm{padding:7px 8px}
.mini-card .mm .mtitle{font-size:11.5px; color:#eef; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mini-card .mm .msub{font-size:10px; color:var(--muted); margin-top:3px; display:flex; justify-content:space-between}
.list-row{display:flex; gap:10px; padding:10px 2px; border-bottom:1px solid var(--line); cursor:pointer}
.list-row:hover{background:rgba(255,255,255,.03)}
.list-row .lr-body{flex:1;min-width:0}
.list-row .lr-body .lr-t{font-size:12.5px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-row .lr-body .lr-s{font-size:10.5px;color:var(--muted);margin-top:2px}
.tab-body{min-height:120px}

/* ============================================================
   FASE 3 - panel admin
   ============================================================ */
.adm-row{display:flex; gap:10px; align-items:center; padding:10px 8px; border-bottom:1px solid var(--line); flex-wrap:wrap}
.adm-row .grow{flex:1; min-width:120px}
.adm-row .em{font-weight:600; font-size:13px; word-break:break-all}
.adm-sub{font-size:10.5px; color:var(--muted)}
.pill{font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px; display:inline-block}
.pill.active{background:rgba(103,232,176,.16); color:var(--mint)}
.pill.blocked{background:rgba(255,210,94,.16); color:var(--yellow)}
.pill.banned{background:rgba(255,95,176,.16); color:var(--pink)}
.pill.admin{background:rgba(255,95,176,.16); color:var(--pink)}
.pill.mod{background:rgba(255,210,94,.16); color:var(--yellow)}
.pill.user{background:rgba(154,160,216,.16); color:var(--muted)}
.pill.deleted{background:rgba(255,95,176,.16); color:var(--pink)}
.pill.under_review{background:rgba(255,210,94,.16); color:var(--yellow)}
.pill.visible{background:rgba(103,232,176,.16); color:var(--mint)}
.sel-sm, .inp-sm{background:rgba(10,12,34,.6); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:6px 8px; font-family:var(--body); font-size:12px}
.btn-sm{background:rgba(255,255,255,.04); border:1px solid var(--line); color:var(--ink); border-radius:8px; padding:6px 10px; cursor:pointer; font-size:12px; display:inline-flex; align-items:center; gap:5px}
.btn-sm:hover{border-color:var(--line2)}
.btn-sm.danger:hover{border-color:var(--pink); color:var(--pink)}
.btn-sm.good:hover{border-color:var(--mint); color:var(--mint)}
.btn-sm svg{width:13px;height:13px}
.adm-toolbar{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; align-items:center}
.adm-list{max-height:56vh; overflow:auto; margin:0 -4px}
.switch{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); cursor:pointer}
.switch input{accent-color:var(--pink); width:16px; height:16px}
.cfg-grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
@media (max-width:600px){ .cfg-grid{grid-template-columns:1fr} }
.swatch-in{display:flex; gap:8px; align-items:center}
.swatch-in input[type=color]{width:40px;height:36px;border:1px solid var(--line);border-radius:8px;background:none;padding:2px}

/* ============================================================
   FASE 4 - moderacion + permisos
   ============================================================ */
.rep-card{border:1px solid var(--line); border-radius:13px; padding:13px; margin-bottom:11px; background:rgba(255,255,255,.02)}
.rep-head{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px}
.rep-reason{background:rgba(255,95,176,.08); border:1px solid rgba(255,95,176,.28); border-radius:9px; padding:9px 11px; color:#ffd7ec; font-size:13px; margin:8px 0}
.rep-reason b{color:var(--pink)}
.rep-target{font-size:12.5px; color:var(--ink); background:rgba(10,12,34,.5); border-radius:9px; padding:9px 11px; margin:8px 0}
.rep-target .tt{font-weight:600}
.forensic{font-family:ui-monospace,monospace; font-size:10.5px; color:var(--muted); background:rgba(10,12,34,.5); border:1px dashed var(--line2); border-radius:9px; padding:9px 11px; margin:8px 0; line-height:1.7}
.forensic b{color:var(--cyan)}
.rep-actions{display:flex; gap:7px; flex-wrap:wrap; margin-top:6px}
.perm-grid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:8px 0}
.perm-grid .switch{padding:6px 8px; border:1px solid var(--line); border-radius:8px}
.grant-row{display:flex; align-items:center; gap:8px; padding:9px; border:1px solid var(--line); border-radius:10px; margin-bottom:7px; flex-wrap:wrap}
.grant-row .gp{font-size:10px; color:var(--muted)}
.grant-scope{font-weight:700; color:var(--cyan); font-size:12px}

/* ============================================================
   FASE 5 - efectos dinamicos + pulido mobile
   ============================================================ */
#fxGradient{
  position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:0; transition:opacity .8s;
  background:linear-gradient(120deg, var(--fx-from,#ff5fb0), var(--fx-to,#9b7bff), var(--fx-from,#ff5fb0));
  background-size:300% 300%; mix-blend-mode:screen;
}
#fxGradient.on{opacity:.22; animation:fxmove var(--fx-speed,18s) ease infinite}
@keyframes fxmove{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

body.fx-neon .card{box-shadow:0 0 0 1px rgba(255,95,176,.35), 0 0 20px rgba(155,123,255,.22)}
body.fx-neon .card:hover{box-shadow:0 0 0 1px var(--pink), 0 0 26px rgba(255,95,176,.4)}
body.fx-neon .brand .logo{box-shadow:0 0 16px var(--pink)}

body.fx-anim-float .card{animation:cardfloat 4s ease-in-out infinite}
body.fx-anim-float .card:nth-child(even){animation-delay:.6s}
body.fx-anim-float .card:nth-child(3n){animation-delay:1.1s}
@keyframes cardfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
body.fx-anim-pulse .card{animation:cardpulse 3s ease-in-out infinite}
@keyframes cardpulse{0%,100%{box-shadow:0 0 0 rgba(255,95,176,0)}50%{box-shadow:0 0 20px rgba(255,95,176,.32)}}
body.fx-anim-tilt .card:hover{transform:translateY(-5px) rotate(-1.2deg) scale(1.03)}
body.fx-anim-glitch .card:hover .thumb img{animation:cardglitch .35s steps(2) infinite}
@keyframes cardglitch{0%{filter:hue-rotate(0)}50%{filter:hue-rotate(45deg) saturate(1.6)}100%{filter:hue-rotate(0)}}

.fx-music-btn{
  position:fixed; left:14px; bottom:14px; z-index:41; display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(135deg,var(--purple),var(--cyan)); color:#fff; border:none; cursor:pointer;
  padding:9px 14px; border-radius:22px; font-family:var(--body); font-weight:600; font-size:12.5px;
  box-shadow:0 6px 18px rgba(155,123,255,.4);
}
.fx-music-btn:hover{transform:translateY(-1px)}
.fx-music-btn svg{width:15px;height:15px}

.fx-preview-note{font-size:11px;color:var(--muted);margin-top:6px}

@media (prefers-reduced-motion:reduce){
  #fxGradient.on{animation:none}
  body.fx-anim-float .card, body.fx-anim-pulse .card{animation:none}
}

/* ---------- pulido mobile ---------- */
@media (max-width:680px){
  .topbar{gap:8px; padding:9px 12px}
  .top-actions{gap:6px}
  /* botones de accion: solo icono en mobile (se oculta el texto, queda el svg) */
  #btnNew, #btnAdmin, #btnMod{font-size:0; padding:9px 11px; gap:0}
  #btnNew svg, #btnAdmin svg, #btnMod svg{width:18px;height:18px}
  .user-chip{padding:4px 8px 4px 8px}
  #userName{max-width:70px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px}
  .modal-body{padding:14px}
  .catpick{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .adm-row{gap:7px}
  .adm-row .sel-sm, .adm-row .btn-sm{font-size:11px}
  .fx-music-btn{left:10px; bottom:10px; font-size:11.5px; padding:8px 12px}
  #hefin{bottom:64px}  /* que no tape el boton de musica */
}
@media (max-width:400px){
  .brand small{display:none}
  .stat-row{grid-template-columns:repeat(3,1fr)}
}

/* ============================================================
   FIX/AJUSTES - logo img, pagina de post (2 columnas), hidden
   ============================================================ */
[hidden]{display:none !important}

/* logo con la imagen subida (reemplaza el emoji) */
.brand img.logo{width:36px; height:36px; border-radius:10px; object-fit:cover; padding:0; background:none;
  box-shadow:0 4px 12px rgba(155,123,255,.4); border:1px solid var(--line2)}

/* ---------- Pagina de post (no popup) ---------- */
.post-page{max-width:1500px; margin:0 auto}
.pp-top{display:flex; align-items:center; gap:14px; margin-bottom:14px; flex-wrap:wrap}
.pp-back{display:inline-flex; align-items:center; gap:7px; background:var(--panelface); border:1px solid var(--line);
  color:var(--ink); border-radius:11px; padding:9px 14px; cursor:pointer; font-family:var(--body); font-weight:600; font-size:13px; transition:.15s}
.pp-back:hover{border-color:var(--pink); transform:translateX(-2px)}
.pp-back svg{width:16px;height:16px}
.pp-title{font-family:var(--disp); font-weight:800; font-size:24px; color:#fff; margin:0; line-height:1.15; flex:1; min-width:200px}

.pp-cols{display:grid; grid-template-columns:minmax(0,1fr) minmax(480px,720px); gap:24px; align-items:start}
.pp-main{min-width:0}
.pp-media{width:100%; max-width:100%; margin:0; background:#0a0c22; border:1px solid var(--line); border-radius:14px; overflow:hidden; display:grid; place-items:center; max-height:54vh}
.pp-media img{width:100%; height:auto; max-height:54vh; object-fit:contain; display:block}
.pp-media video{width:100%; max-height:54vh; display:block; background:#000}
.pp-media iframe{width:100%; aspect-ratio:16/9; border:0; display:block}
.pp-by{display:flex; align-items:center; gap:7px; color:var(--muted); font-size:12px; margin:12px 2px}
.pp-by .mini{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--cyan),var(--purple))}
.pp-by .mini svg{width:12px;height:12px;color:#fff}
.pp-body{white-space:pre-wrap; word-break:break-word; color:var(--ink); background:var(--panelface); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; margin:6px 0 14px; line-height:1.6}
.post-page .vote-row{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:var(--panelface)}

/* columna derecha: comentarios */
.pp-side{position:sticky; top:70px; background:var(--panelface); border:1px solid var(--line); border-radius:14px;
  padding:14px; max-height:calc(100vh - 90px); overflow:auto; display:flex; flex-direction:column}
.pp-side-head{display:flex; align-items:center; gap:8px; font-family:var(--disp); font-weight:800; color:#fff; font-size:15px; padding-bottom:10px; border-bottom:1px solid var(--line)}
.pp-side-head svg{width:18px;height:18px;color:var(--cyan)}
.pp-typing{color:var(--pink); font-size:11.5px; min-height:15px; margin:8px 0; font-weight:600}
.pp-side .comments{flex:1}

@media (max-width:900px){
  .pp-cols{grid-template-columns:1fr}
  .pp-side{position:static; max-height:none; margin-top:4px}
  .pp-title{font-size:20px}
}

/* ============================================================
   FASE 6 - modos de efectos, alertas persistentes, forense
   ============================================================ */
.fx-canvas{position:fixed; inset:0; z-index:45; pointer-events:none}
.fx-boom{position:fixed; z-index:120; font-size:46px; transform:translate(-50%,-50%); pointer-events:none; animation:fxboom .7s ease-out forwards}
@keyframes fxboom{0%{opacity:0; transform:translate(-50%,-50%) scale(.3)}30%{opacity:1; transform:translate(-50%,-50%) scale(1.35)}100%{opacity:0; transform:translate(-50%,-50%) scale(1.9)}}

/* tinte por modo (no bloquea clicks) */
body[class*="fx-mode-"]::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:44}
body.fx-mode-attack::after{background:radial-gradient(circle, transparent 38%, rgba(255,0,0,.20)); animation:fxpulse 1.2s ease-in-out infinite}
@keyframes fxpulse{50%{background:radial-gradient(circle, transparent 28%, rgba(255,0,0,.34))}}
body.fx-mode-cold::after{background:linear-gradient(rgba(150,220,255,.12), rgba(120,180,255,.16))}
body.fx-mode-rain::after{background:rgba(20,40,80,.22)}
body.fx-mode-heat::after{background:linear-gradient(rgba(255,120,0,.10), rgba(255,60,0,.18))}
body.fx-mode-night::after{background:rgba(0,22,6,.35)}

/* animacion automatica de las tarjetas por modo */
body.fx-mode-attack .card{animation:fxshake .35s infinite}
@keyframes fxshake{0%,100%{transform:translate(0,0)}25%{transform:translate(-3px,2px) rotate(-1deg)}50%{transform:translate(3px,-2px) rotate(1deg)}75%{transform:translate(-2px,-2px)}}
body.fx-mode-cold .card{filter:brightness(.92) saturate(.75) hue-rotate(-10deg); box-shadow:inset 0 0 0 1px rgba(180,230,255,.5), 0 0 14px rgba(150,220,255,.25)}
body.fx-mode-cold .card:hover{transform:none}
body.fx-mode-heat .card{animation:fxmelt 2.6s ease-in-out infinite alternate; transform-origin:top}
@keyframes fxmelt{0%{transform:scaleY(1)}100%{transform:scaleY(1.07) skewX(1.5deg); filter:blur(.4px) hue-rotate(-12deg) brightness(1.06)}}
body.fx-mode-night .card{box-shadow:inset 0 0 0 1px rgba(57,255,20,.4), 0 0 16px rgba(57,255,20,.12)}
body.fx-mode-night .card .title{color:#c8ffcf !important}

/* sol gigante (modo calor) */
.fx-overlay{position:fixed; inset:0; pointer-events:none; z-index:43}
.fx-overlay.fx-sun{background:radial-gradient(420px 420px at 82% 6%, rgba(255,240,120,.95), rgba(255,170,40,.55) 35%, rgba(255,120,0,.16) 60%, transparent 72%); animation:fxsun 6s ease-in-out infinite}
@keyframes fxsun{50%{filter:brightness(1.15)}}

/* alerta persistente (aparece este donde este el usuario) */
.alert-host{position:fixed; inset:0; z-index:300; display:grid; place-items:center; padding:16px; background:rgba(6,8,22,.6); backdrop-filter:blur(4px)}
.alert-card{width:min(440px,92vw); background:linear-gradient(180deg,#20265f,#171b42); border:1px solid var(--yellow); border-radius:16px; box-shadow:0 14px 44px rgba(0,0,0,.55); padding:18px; animation:pop .2s cubic-bezier(.2,.9,.3,1.2)}
.alert-head{display:flex; align-items:center; gap:9px; font-family:var(--disp); font-weight:800; color:#fff; font-size:15px; margin-bottom:8px}
.alert-icon{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;background:linear-gradient(135deg,var(--yellow),var(--pink)); flex-shrink:0}
.alert-icon svg{width:18px;height:18px;color:#20123a}
.alert-body{color:var(--ink); white-space:pre-wrap; line-height:1.55; word-break:break-word}
.alert-actions{display:flex; gap:9px; margin-top:16px}

/* campana con aviso pendiente */
#btnBell.has{border-color:var(--pink); animation:bellpulse 1.5s ease-in-out infinite}
@keyframes bellpulse{50%{box-shadow:0 0 14px rgba(255,95,176,.6)}}

/* forense */
.forensic-card{border:1px solid var(--line); border-radius:12px; padding:12px; margin-bottom:10px; background:rgba(255,255,255,.02)}
.forensic-card .fh{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:4px}
.forensic-grid{font-family:ui-monospace,monospace; font-size:10.5px; color:var(--muted); line-height:1.7; background:rgba(10,12,34,.55); border:1px dashed var(--line2); border-radius:8px; padding:9px 11px; margin-top:6px}
.forensic-grid b{color:var(--cyan)}
.forensic-grid .sep{color:var(--line2)}

/* ============================================================
   FASE 7 - fijados, normas
   ============================================================ */
.card.pinned{border-color:var(--mint); box-shadow:0 0 0 1px rgba(103,232,176,.35)}
.pin-badge{position:absolute; bottom:8px; left:8px; font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px;
  background:rgba(103,232,176,.9); color:#062015; z-index:2}
.about h4{font-family:var(--disp); color:#fff; margin:0 0 10px; font-size:16px}
.about p{margin:0 0 12px; line-height:1.65; font-size:13.5px}
.about b{color:#fff}

/* ============================================================
   FASE 8 - comentarios: hash, responder, imagen
   ============================================================ */
.comment .c-hash{font-family:ui-monospace,monospace; font-size:10px; color:var(--purple); background:rgba(155,123,255,.12); padding:1px 6px; border-radius:6px; cursor:pointer}
.comment .c-hash:hover{color:#fff; background:rgba(155,123,255,.3)}
.comment .c-reply-to{font-size:11px; color:var(--muted); margin-bottom:3px; display:inline-flex; align-items:center; gap:4px}
.comment .c-reply-to b{color:var(--cyan)}
.comment .c-img{margin:6px 0; max-width:220px; border-radius:9px; border:1px solid var(--line); cursor:pointer; display:block}
.comment .c-actions button.reply{color:var(--cyan)}
/* barra "respondiendo a" sobre el textarea */
.reply-bar{display:flex; align-items:center; gap:8px; background:rgba(73,214,236,.1); border:1px solid rgba(73,214,236,.3); border-radius:9px; padding:6px 10px; margin-bottom:8px; font-size:12px; color:var(--ink)}
.reply-bar b{color:var(--cyan)} .reply-bar .x{margin-left:auto; cursor:pointer; color:var(--muted)}
.cf-tools{display:flex; align-items:center; gap:8px; margin-top:8px}
.cf-attach{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line); border-radius:9px; padding:8px 11px; cursor:pointer; color:var(--muted); font-size:12.5px}
.cf-attach:hover{border-color:var(--cyan); color:var(--ink)}
.cf-attach svg{width:15px;height:15px}
.cf-preview{position:relative; display:inline-block}
.cf-preview img{max-height:60px; border-radius:8px; border:1px solid var(--line)}
.cf-preview .x{position:absolute; top:-7px; right:-7px; background:var(--pink); color:#fff; border-radius:50%; width:18px; height:18px; display:grid; place-items:center; cursor:pointer; font-size:12px}
/* lightbox imagen */
.lightbox{position:fixed; inset:0; z-index:250; background:rgba(6,8,22,.9); display:grid; place-items:center; padding:20px; cursor:zoom-out}
.lightbox img{max-width:96vw; max-height:92vh; border-radius:10px}
@media (max-width:900px){ .pp-media{max-width:100%} }