/* =====================================================================
   NEKOBOX STYLE  -  pitch black, soft & bouncy, one pink accent.
   Change the accent from the Admin panel (or --pink below).
   Rules of this design:  black + white text + ONE pink.  Big round shapes.
   Things pop up and squish like buttons on a game console.
   The only "anime" touches: the ✦ sparkle, and comments as manga speech bubbles.
   ===================================================================== */
:root{
  --pink:#ff6fae;
  --bg:#000;
  --s1:#0d0d10;          /* raised surfaces */
  --s2:#17171c;          /* buttons, inputs */
  --line:#202026;
  --text:#f6f6f8;
  --muted:#7d7d8a;
  --cols:3;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --glow:color-mix(in srgb,var(--pink) 38%,transparent);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:'Fredoka',ui-rounded,'SF Pro Rounded','Hiragino Maru Gothic ProN','Arial Rounded MT Bold',system-ui,sans-serif;
  font-weight:400;font-size:16px;line-height:1.45;
}
a{color:inherit;text-decoration:none}
[hidden]{display:none!important}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{font-weight:600;margin:0;letter-spacing:-.01em}
.star{color:var(--pink)}

/* ---------- age gate (works with zero JS) ---------- */
#agegate{position:fixed;inset:0;z-index:9999;background:#000;display:flex;align-items:center;justify-content:center;padding:1rem}
html.ok18 #agegate{display:none}
.gate-card{max-width:420px;text-align:center}
.gate-card .star{font-size:3rem;display:block;animation:twinkle 2.6s ease-in-out infinite}
.gate-card h1{font-size:2.6rem;margin:.4rem 0}
.gate-card p{color:var(--muted);margin:0 0 1.6rem}
.gate-card .row{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
@keyframes twinkle{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(18deg)}}

/* ---------- buttons: chunky pills that squish when pressed ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:0;border-radius:999px;padding:.62rem 1.25rem;cursor:pointer;font-weight:500;white-space:nowrap;
  background:var(--s2);color:var(--text);
  transition:transform .22s var(--spring),background .15s,box-shadow .2s;
}
.btn:hover{transform:translateY(-2px) scale(1.04);background:#202027}
.btn:active{transform:scale(.94)}
.btn svg{width:18px;height:18px;flex:none}
.btn.pink{background:var(--pink);color:#1a0010;font-weight:600;box-shadow:0 6px 22px -6px var(--glow)}
.btn.pink:hover{background:var(--pink);filter:brightness(1.08);box-shadow:0 10px 28px -6px var(--glow)}
.btn.ghost{background:transparent;box-shadow:inset 0 0 0 2px var(--line)}
.btn.ghost:hover{background:var(--s2)}
.btn.small{padding:.42rem .95rem;font-size:.92rem}
.btn.danger:hover{background:#3a1018;color:#ff8da0}
.btn.on{background:color-mix(in srgb,var(--pink) 20%,#000);color:var(--pink);box-shadow:inset 0 0 0 2px var(--pink)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.iconbtn{width:40px;height:40px;padding:0}

/* ---------- header ---------- */
.top{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:1.2rem;padding:.8rem 1.6rem;
  background:rgba(0,0,0,.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
}
.logo{display:flex;align-items:center;gap:.4rem;font-size:1.55rem;font-weight:600;letter-spacing:-.02em}
.logo .star{font-size:1.3rem;transition:transform .4s var(--spring)}
.logo:hover .star{transform:rotate(90deg) scale(1.25)}
.search{
  flex:1;max-width:640px;margin:0 auto;display:flex;align-items:center;background:var(--s1);
  border-radius:999px;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .2s;padding:.2rem .25rem .2rem .3rem;
}
.search:focus-within{box-shadow:inset 0 0 0 2px var(--pink),0 0 24px -6px var(--glow)}
.search select{background:var(--s2);border:0;border-radius:999px;padding:.4rem .8rem;outline:0;cursor:pointer;font-size:.9rem;color:var(--muted)}
.search select option{background:#111;color:#fff}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:0;padding:.45rem .8rem}
.search-go{width:38px;height:38px;border-radius:50%;border:0;background:var(--s2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:transform .2s var(--spring),background .15s}
.search-go:hover{background:var(--pink);color:#1a0010;transform:scale(1.1)}
.nav{display:flex;align-items:center;gap:.6rem}
.avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--s2);display:inline-flex;align-items:center;justify-content:center;font-weight:600;transition:transform .25s var(--spring),box-shadow .2s}
a:hover>.avatar{transform:scale(1.1);box-shadow:0 0 0 2px var(--pink)}
.avatar.big{width:104px;height:104px;font-size:2.6rem}
.avatar.mini{width:32px;height:32px;font-size:.85rem}
@media(max-width:760px){.top{flex-wrap:wrap;padding:.7rem 1rem}.search{order:3;flex-basis:100%;max-width:none}}

/* ---------- layout ---------- */
main{max-width:1320px;margin:0 auto;padding:1.8rem 1.6rem 3rem}
.section{margin-bottom:2.6rem}
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem;flex-wrap:wrap}
.toolbar h2{font-size:1.35rem;display:flex;align-items:center;gap:.5rem}
.toolbar h2 .star{font-size:1rem}
select.pill{background:var(--s1);border:0;border-radius:999px;padding:.5rem 1rem;outline:0;cursor:pointer;box-shadow:inset 0 0 0 2px var(--line)}
select.pill option{background:#111}
.field{width:100%;background:var(--s1);border:0;border-radius:18px;padding:.8rem 1rem;outline:0;box-shadow:inset 0 0 0 2px var(--line);transition:box-shadow .2s}
.field:focus{box-shadow:inset 0 0 0 2px var(--pink),0 0 22px -8px var(--glow)}
.field option{background:#111}
textarea.field{resize:vertical;min-height:120px}
.loading{text-align:center;padding:6rem 1rem}
.loading .star{font-size:2.4rem;display:inline-block;animation:twinkle 1.2s ease-in-out infinite}
.empty{text-align:center;color:var(--muted);padding:4.5rem 1rem;font-size:1.1rem}
.banner{background:color-mix(in srgb,var(--pink) 14%,#000);border-radius:22px;padding:1rem 1.4rem;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--pink) 45%,transparent);display:flex;gap:.8rem;align-items:center}

/* ---------- card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(var(--cols),1fr);gap:2rem 1.5rem}
@media(max-width:1000px){.grid{grid-template-columns:repeat(min(var(--cols),2),1fr)}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{display:block;transition:transform .3s var(--spring)}
.card:hover{transform:translateY(-7px) scale(1.035);z-index:2;position:relative}   /* hover zoom */
.thumb{
  position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:var(--s1);
  box-shadow:0 0 0 0 transparent;transition:box-shadow .25s;
}
.card:hover .thumb{box-shadow:0 0 0 3px var(--pink),0 18px 40px -12px var(--glow)}
.thumb img,.thumb video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.card:hover .thumb img,.card:hover .thumb video.still{transform:scale(1.08)}
.thumb video.pv{z-index:2}                                  /* hover preview sits on top */
.thumb .ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--pink);font-size:2.4rem;opacity:.55;
  background-image:radial-gradient(#26262e 1.4px,transparent 1.5px);background-size:12px 12px}   /* manga halftone dots */
.chip{position:absolute;right:.6rem;bottom:.6rem;z-index:3;background:rgba(0,0,0,.72);backdrop-filter:blur(6px);border-radius:999px;padding:.12rem .65rem;font-size:.8rem;display:flex;align-items:center;gap:.3rem}
.chip svg{width:12px;height:12px}
.card-body{padding:.8rem .35rem 0}
.card .title{display:flex;align-items:flex-start;gap:.55rem;font-weight:500;font-size:1.05rem;line-height:1.3}
.card .title .t{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .sub{color:var(--muted);font-size:.88rem;margin-top:.3rem;display:flex;gap:.8rem;align-items:center}
.card .sub span{display:inline-flex;align-items:center;gap:.25rem}
.card .sub svg{width:14px;height:14px}

/* ---------- PREFIX BADGES (glossy rounded tags, like your screenshot) ---------- */
.pfx{
  flex:none;display:inline-flex;align-items:center;justify-content:center;margin-top:.1rem;
  padding:.1rem .6rem;border-radius:9px;font-weight:600;font-size:.76rem;letter-spacing:.3px;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.22),0 2px 6px rgba(0,0,0,.5);
  text-shadow:0 1px 1px rgba(0,0,0,.45);
}
.pfx.cum {background:linear-gradient(180deg,#ff8cc4,#e22d86)}
.pfx.jerk{background:linear-gradient(180deg,#5db8ff,#2160dc)}
.pfx.cock{background:linear-gradient(180deg,#bc9cff,#6c3adc)}
.pfx.lg{font-size:.95rem;padding:.18rem .8rem;border-radius:11px;margin:0}

/* ---------- post page ---------- */
.post-wrap{max-width:1040px;margin:0 auto}
.player{
  aspect-ratio:16/9;width:100%;background:#050507;border-radius:30px;overflow:hidden;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px var(--line),0 30px 70px -30px var(--glow);
}
.player img,.player video{width:100%;height:100%;object-fit:contain}   /* FIT - never stretched or cropped */
.player iframe{width:100%;height:100%;border:0}
.strip{display:flex;gap:.7rem;margin-top:1rem;flex-wrap:wrap}
.strip button{
  width:124px;aspect-ratio:16/9;padding:0;border:0;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--s1);position:relative;
  box-shadow:inset 0 0 0 2px var(--line);opacity:.65;transition:transform .25s var(--spring),opacity .2s;
}
.strip button:hover{transform:translateY(-4px);opacity:1}
.strip button.active{opacity:1;box-shadow:0 0 0 3px var(--pink)}
.strip img,.strip video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.strip .k{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;filter:drop-shadow(0 0 4px #000)}
.strip .k svg{width:22px;height:22px}
.post-title{display:flex;align-items:center;gap:.8rem;font-size:1.75rem;font-weight:600;margin:1.5rem 0 .9rem;flex-wrap:wrap;line-height:1.2}
.meta{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.by{display:flex;align-items:center;gap:.7rem;font-weight:500}
.by small{display:block;color:var(--muted);font-weight:400;font-size:.8rem;line-height:1.1}
.actions{display:flex;gap:.5rem;flex-wrap:wrap}
.panel{background:var(--s1);border-radius:26px;padding:1.3rem 1.5rem;margin-top:1.2rem}
.desc{white-space:pre-wrap;word-break:break-word;color:#dcdce4}
.tags{display:flex;gap:.45rem;flex-wrap:wrap;margin-top:1rem}
.tag{background:var(--s2);border-radius:999px;padding:.2rem .85rem;font-size:.88rem;color:var(--pink);transition:transform .2s var(--spring),background .15s}
.tag:hover{transform:translateY(-2px) scale(1.05);background:#202027}

/* ---------- comments = manga speech bubbles ---------- */
.comment{display:flex;gap:.8rem;margin-top:1.2rem}
.bubble{position:relative;flex:1;min-width:0;background:var(--s2);border-radius:22px;border-top-left-radius:6px;padding:.75rem 1.1rem}
.bubble .who{font-weight:500}
.bubble .when{color:var(--muted);font-size:.8rem;margin-left:.5rem}
.bubble p{margin:.2rem 0 .1rem;white-space:pre-wrap;word-break:break-word}
.acts{display:flex;gap:.3rem;margin:.35rem 0 0 .4rem}
.acts button{background:none;border:0;cursor:pointer;color:var(--muted);font-size:.85rem;padding:.2rem .6rem;border-radius:999px;display:inline-flex;align-items:center;gap:.3rem;transition:color .15s,background .15s,transform .2s var(--spring)}
.acts button svg{width:14px;height:14px}
.acts button:hover{color:var(--text);background:var(--s2);transform:scale(1.06)}
.acts button.on{color:var(--pink)}
.replies{margin-left:1.4rem}
.replies.deep{margin-left:0}
.cform{display:flex;gap:.6rem;margin-top:.7rem}

/* ---------- forms ---------- */
.form{max-width:760px;margin:0 auto}
.form h1{font-size:2rem;margin-bottom:.4rem}
.form label{display:block;margin:1.4rem 0 .5rem;font-weight:500}
.form small,.hint{color:var(--muted);font-weight:400}
.mrow{display:flex;gap:.5rem;margin-bottom:.6rem;align-items:center;flex-wrap:wrap}
.mrow .field{flex:1;min-width:200px;width:auto}
.prof-head{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin-bottom:2.2rem}
.prof-head h1{font-size:2.2rem}
.stats-row{display:flex;gap:1.4rem;color:var(--muted);margin:.3rem 0 .6rem}
.stats-row b{color:var(--text);font-weight:600}
.rules p{margin:.9rem 0;color:#dcdce4}

/* ---------- admin ---------- */
.tabs{display:flex;gap:.5rem;margin:1rem 0 1.6rem;flex-wrap:wrap}
.arow{display:flex;align-items:center;gap:.9rem;background:var(--s1);border-radius:20px;padding:.7rem 1rem;margin-bottom:.6rem;flex-wrap:wrap}
.arow .grow{flex:1;min-width:180px;display:flex;align-items:center;gap:.6rem}
.arow .grow a{font-weight:500}
.arow .grow a:hover{color:var(--pink)}
.arow .m{color:var(--muted);font-size:.85rem}
.arow .btns{display:flex;gap:.4rem;flex-wrap:wrap}
.switch{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}
.switch input{accent-color:var(--pink);width:18px;height:18px}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:700px){.sgrid{grid-template-columns:1fr}}
input[type=color]{width:100%;height:48px;padding:.3rem;background:var(--s1);border:0;border-radius:18px;box-shadow:inset 0 0 0 2px var(--line);cursor:pointer}

/* ---------- toast + footer ---------- */
#toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140px);background:#fff;color:#000;border-radius:999px;padding:.7rem 1.5rem;font-weight:500;z-index:10000;transition:transform .35s var(--spring);max-width:90vw;box-shadow:0 10px 40px rgba(0,0,0,.6)}
#toast.show{transform:translate(-50%,0)}
.foot{text-align:center;color:var(--muted);padding:2.5rem 1rem;font-size:.88rem}
.foot a{color:var(--pink)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}