/* ==========================================================
   VideoTools.jp — Neon Bar Dark Theme (Full Stylesheet)
   ========================================================== */

/* -------- Color System -------- */
:root{
  --bg: #050006;            
  --surface: #0d0012;       
  --surface-2:#0a000f;      
  --line: #2a0038;          

  --text: #eae2f2;          
  --muted:#a189b8;          

  --accent:#ff2eaa;         
  --accent-2:#9b00ff;       
  --accent-3:#ff1744;       

  --glow-pink: 0 0 18px rgba(255,46,170,.6), 0 0 32px rgba(155,0,255,.45);
  --glow-soft: 0 0 10px rgba(255,46,170,.3);
}

/* -------- Base -------- */
*{ box-sizing:border-box; }
html,body{ height:100%; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,46,170,.08), transparent 60%),
    radial-gradient(circle at 80% 90%, rgba(155,0,255,.06), transparent 60%),
    var(--bg);
  font:14px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--accent); text-decoration:none; }
a:hover{ opacity:.94; }

/* Scrollbar */
*{ scrollbar-width: thin; scrollbar-color: #2a2540 transparent; }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-thumb{ background:#2a2540; border-radius:8px; }

/* Utility */
.hidden{ display:none !important; }

/* -------- Layout / Containers -------- */
.container{ width:min(1200px, 100%); margin:0 auto; padding:0 16px; }

/* -------- Header -------- */
.site-header{
  position:sticky; top:0; z-index:1000;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:10px 14px;
  background: rgba(5,0,10,.84);
  border-bottom:1px solid var(--line);
  backdrop-filter: blur(10px);
}
.site-header .brand,
.site-header .brand a{
  font-weight:800; font-size:18px; color:var(--accent);
  text-shadow: var(--glow-pink);
}
.badge{
  margin-left:6px; padding:2px 6px; font-size:12px; line-height:1.3;
  border-radius:999px; background:#1e0029; color:#d9bdf0; border:1px solid var(--line);
}

.nav{ display:flex; gap:12px; align-items:center; margin-left:auto; }
.nav a{ color:#d8c8e6; }
.nav a:hover{ color:#fff; }

#q{
  flex:1 1 220px; min-width:180px;
  background:#13001a; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
#q::placeholder{ color:#7a5f93; }

select.btn, .btn, select{
  background:#13001a; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
  cursor:pointer;
}
.btn.primary{
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#fff; border:none; box-shadow: var(--glow-pink);
}
.btn:hover{ filter:brightness(1.06); }
.btn:disabled{ opacity:.65; cursor:not-allowed; }

/* -------- Hero -------- */
.hero{
  padding:28px 16px 16px;
  background: linear-gradient(180deg, rgba(255,46,170,.08), rgba(0,0,0,0));
  border-bottom:1px solid var(--line);
}
.hero h1{
  margin:0 0 6px; font-size:24px; color:var(--accent);
  text-shadow: var(--glow-pink);
}
.hero p{ margin:0 0 10px; color:var(--muted); }
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; }

/* -------- Notice -------- */
.notice{
  margin:10px 16px; padding:8px 12px; border:1px dashed var(--line);
  background:#120018; color:#cdb6e0; border-radius:12px;
}

/* -------- Grid -------- */
.grid{
  padding:14px 16px 32px;
  display:grid; gap:12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width:720px){ .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (min-width:1040px){ .grid{ grid-template-columns: repeat(5, minmax(0,1fr)); } }

/* -------- Card -------- */
.card{
  display:block; background:var(--surface);
  border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  content-visibility:auto; contain-intrinsic-size: 180px 100px;
}
.card:hover{
  transform: translateY(-4px);
  border-color: var(--accent);
  box-shadow: var(--glow-pink);
}
.card .thumb{
  width:100%; aspect-ratio:16/9; object-fit:cover;
  background:#060009;
}
.card .title{
  padding:10px 12px 6px; font-weight:700; color:#f2e9f8; font-size:14px;
}
.card .tags{
  padding:0 12px 12px; color:#b9a6cb; font-size:12px;
  border-top:1px solid rgba(255,255,255,.04);
}

/* -------- Skeleton -------- */
.skel{ background:#120018; border:1px solid var(--line); }
.skel .ph{
  height:0; padding-top:56.25%;
  background:linear-gradient(100deg,#1a0026 40%,#210033 50%,#1a0026 60%) 0 0/200% 100%;
  animation: sh 1.2s infinite;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.skel .tl, .skel .tg{ border-radius:6px; background:#1f0130; }
.skel .tl{ height:16px; margin:10px 12px; }
.skel .tg{ height:12px; width:60%; margin:8px 12px 12px; }
@keyframes sh{ to { background-position:-200% 0; } }

/* -------- Player -------- */
.player{ padding:0 16px; }
.player-frame{
  width:100%; max-width:100%;
  aspect-ratio:16/9; background:#000; border-radius:14px; overflow:hidden;
  border:1px solid #3a0053; box-shadow: 0 12px 36px rgba(0,0,0,.5);
}
.player-frame iframe, .player-frame video{
  width:100%; height:100%; border:0; display:block;
}

/* -------- Modal -------- */
.modal{
  position:fixed; inset:0; z-index:2000;
  display:none; align-items:center; justify-content:center;
  background: rgba(10,0,15,.82);
  backdrop-filter: blur(6px);
}
.modal.show{ display:flex; }
.modal .panel{
  width:min(720px, calc(100vw - 24px));
  background: linear-gradient(180deg, #0d0012, #0a000f);
  border:1px solid var(--line); border-radius:14px; padding:16px;
  color:var(--text); box-shadow: var(--glow-pink);
}

/* -------- Age Gate -------- */
.age-gate{ position:fixed; inset:0; z-index:2500; display:none; }
.age-gate.show{ display:block; background:rgba(10,0,15,.9); backdrop-filter: blur(8px); }
.age-gate .box{
  width:min(560px, calc(100vw - 24px));
  margin:12vh auto 0; padding:18px; border-radius:16px;
  background:#0f0016; border:1px solid var(--line); text-align:center;
}
.age-gate h3{ margin:0 0 8px; color:var(--accent); text-shadow: var(--glow-soft); }
#enterBtn{ margin-top:10px; }

/* -------- Inputs / Forms -------- */
input, textarea, select{
  background:#13001a; color:var(--text);
  border:1px solid var(--line); border-radius:10px; padding:10px 12px;
}
input:focus, textarea:focus, select:focus{
  outline:2px solid #3c0070; outline-offset:0;
}

/* -------- Ads -------- */
.ad, .ad-inline, .ad-sticky-bottom{
  background:#120018; border:1px dashed var(--line); color:#cbb2de;
  border-radius:12px; padding:8px; text-align:center;
}
.ad-sticky-bottom{
  position:sticky; bottom:0; margin:10px 16px; z-index:150;
  box-shadow: 0 -8px 18px rgba(0,0,0,.35);
}
#ad_top, #ad_bottom{ margin:10px 16px; overflow:hidden; }
.ad-center{
  display:block;
  max-width:min(980px, 100%);
  margin:14px auto;
  padding:0;
  background:transparent;
  border:none;
}
.ad-center iframe,
.ad-center ins,
.ad-center div{
  display:block !important;
  max-width:100% !important;
  width:100% !important;
  margin:0 auto !important;
}

/* -------- Footer -------- */
.site-footer{
  border-top:1px solid var(--line);
  background:#07000a; color:#bfa7d3;
  padding:16px; text-align:center;
}
.site-footer a{ color:var(--accent); }
.site-footer a:hover{ color:#fff; }

/* -------- Admin helper -------- */
#adminModal.modal .panel{ width:min(760px, calc(100vw - 24px)); }
#__toast{
  position:fixed; left:50%; bottom:20px; transform:translateX(-50%);
  background:#1a0024; color:#fff; padding:10px 14px; border-radius:10px;
  border:1px solid var(--line); box-shadow: var(--glow-soft);
  font-size:13px; z-index:3000; transition:opacity .3s; opacity:0;
}

/* -------- Responsive tweaks -------- */
@media (max-width:520px){
  .site-header{ gap:8px; }
  .nav{ order:3; width:100%; justify-content:flex-start; margin-left:0; }
  #q{ order:2; flex:1 1 100%; }
  .hero h1{ font-size:20px; }
}

/* ---- Header controls 強調 ---- */
.search-big{
  flex:1 1 420px; min-width:240px;
  font-size:16px; padding:12px 14px; border-radius:12px;
  background:#13001a; border:1px solid var(--line); color:var(--text);
  box-shadow: 0 0 0 2px rgba(255,46,170,.08);
}
.search-big::placeholder{ color:#7a5f93; }

.site-header .controls{ display:flex; gap:10px; align-items:center; }
.site-header .controls .sort{ min-width:120px; padding:10px 12px; border-radius:10px; }
.site-header .controls .add{ padding:10px 14px; font-weight:700; }

/* ===== Sort select (mobile-consistent pill style) ===== */
.controls .sort, #sortSelect{
  -webkit-appearance: none; appearance: none;
  background:#1a0f24;
  font-size:16px; height:44px; padding:0 42px 0 14px;
  min-width:150px; border-radius:999px;
  border:1px solid var(--line); color:var(--text);
  box-shadow: 0 0 0 2px rgba(122,44,141,.15) inset;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'><path d='M5 7l5 6 5-6' stroke='%23bfa3d5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat; background-position:right 12px center; background-size:18px 18px;
}
.controls .sort:hover{ box-shadow:0 0 0 2px rgba(255,105,201,.25) inset; border-color:#7a2c8d; }
.controls{ display:flex; align-items:center; gap:8px; }
.controls .sort{ flex:0 0 auto; }
.controls .add{ height:44px; padding:0 14px; font-size:16px; border-radius:999px; display:inline-flex; align-items:center; }
@media (max-width:420px){
  .controls{ width:100%; justify-content:space-between; }
  .controls .sort{ flex:1 1 55%; min-width:0; }
  .controls .add{ flex:1 1 45%; justify-content:center; }
}

/* ---- Tag panel (vertical, active highlight, no ugly buttons) ---- */
.tag-panel{
  --h:180px;
  max-height:var(--h);
  overflow-y:auto;
  padding:12px;
  margin:8px 12px;
  border:1px solid #3a2851; border-radius:12px;
  background:#1a0f24; box-sizing:border-box;
}
.tag-row{
  position:relative;
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:10px; padding:10px 12px 10px 14px;
  border-radius:10px; background:transparent; color:#e7d9ff;
  border:1px dashed transparent; cursor:pointer;
}
.tag-row:hover{ background:#24122f; border-color:#38234b; }
.tag-row.active{ background:#361d47; border-color:#8c4ab0; box-shadow:0 0 0 2px rgba(140,74,176,.25) inset; }
.tag-row.active::before{
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:4px;
  border-radius:4px; background:linear-gradient(180deg,#ff69c9,#a66bff);
}
.tag-name{ flex:1 1 auto; white-space:normal; word-break:break-word; overflow:visible; }
.tag-count{ flex:0 0 auto; color:#e7d9ff; background:#2a1636; border:1px solid #7a2c8d; border-radius:999px; padding:4px 8px; font-size:12px; line-height:1; }
.tag-row.more{ justify-content:center; color:#ff69c9; border-style:solid; border-color:#7a2c8d; }
.tag-row.more:hover{ background:#2a1636; }
@media (min-width:900px){
  .tag-panel{ column-count:2; column-gap:12px; max-height:220px; padding-right:6px; }
  .tag-row{ break-inside:avoid; }
}


/* インフィード広告（グリッド全幅で中央寄せ、はみ出し防止） */
.grid .grid-ad{ grid-column: 1 / -1; display:flex; justify-content:center; }
.ad-fixed-300x250{ width:300px; height:250px; }
.ad-fixed-300x50 { width:300px; height:50px; }