@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

:root { color-scheme:dark; --jv-bg:#000; --jv-surface:#121214; --jv-high:#1c1c1e; --jv-text:#fff; --jv-muted:#a1a1a6; --jv-blue:#0a84ff; --jv-border:rgba(255,255,255,.14); }
* { box-sizing:border-box; }
html { background:#000; }
body { margin:0; padding:0; background:var(--jv-bg); color:var(--jv-text); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","SF Pro JP","Inter",sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button,input { font:inherit; }
[hidden] { display:none!important; }

.jaview-site-rail { position:fixed; z-index:60; inset:0 auto 0 0; display:flex; width:4rem; flex-direction:column; align-items:center; gap:.7rem; padding:max(.75rem,env(safe-area-inset-top)) .35rem max(.75rem,env(safe-area-inset-bottom)); border-right:1px solid var(--jv-border); background:rgba(13,14,18,.94); backdrop-filter:blur(24px); }
.jaview-site-rail>a,.jaview-site-rail>button { display:grid; width:3.15rem; height:3.15rem; place-items:center; border:0; border-radius:999px; color:var(--jv-muted); text-decoration:none; background:transparent; cursor:pointer; }
.jaview-site-rail>a:hover,.jaview-site-rail>a.is-active,.jaview-site-rail>button:hover { color:#000; background:#fff; }
.jaview-site-brand { color:#fff!important; background:#252527; font-size:.82rem; font-weight:800; }
.jaview-rail-settings { margin-top:auto; }
.jaview-rail-favorite { display:none!important; }

.jaview-catalog-page { min-height:100vh; }
.jaview-catalog { width:min(1320px,calc(100% - 4rem)); min-height:100vh; margin-left:4rem; padding:2rem clamp(.8rem,2.4vw,2rem) 3rem; }
.jaview-catalog-header { margin-bottom:1.25rem; }
.jaview-catalog-header h1 { margin:0; font-size:clamp(1.05rem,1.8vw,1.45rem); letter-spacing:-.03em; line-height:1.2; }
.jaview-catalog-header p { max-width:46rem; margin:.6rem 0 0; color:var(--jv-muted); font-size:.86rem; line-height:1.6; }
.jaview-tag-search-link { display:inline-flex; margin-top:.85rem; padding:.5rem .75rem; border:1px solid var(--jv-border); border-radius:999px; background:var(--jv-high); font-size:.78rem; text-decoration:none; }
.jaview-catalog-controls { margin-bottom:1rem; }
.jaview-search-box { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:.65rem; margin:0; padding:.35rem .4rem .35rem .8rem; border:1px solid var(--jv-border); border-radius:.85rem; background:var(--jv-surface); color:var(--jv-muted); }
.jaview-search-box label { font-size:.76rem; }
.jaview-search-box input { width:100%; min-width:0; padding:.55rem 0; border:0; outline:0; color:#fff; background:transparent; }
.jaview-search-box button,.jaview-tag-expand { border:0; border-radius:.65rem; color:#fff; background:var(--jv-blue); font-weight:700; cursor:pointer; }
.jaview-search-box button { padding:.62rem 1rem; }
.jaview-tag-cloud-wrap { margin-top:.65rem; }
.jaview-tag-cloud { display:flex; max-height:4.85rem; flex-wrap:wrap; gap:.4rem; overflow:hidden; }
.jaview-tag-cloud.is-expanded { max-height:none; }
.jaview-tag-cloud button { display:inline-flex; align-items:center; gap:.3rem; padding:.45rem .65rem; border:1px solid var(--jv-border); border-radius:999px; color:#fff; background:var(--jv-high); cursor:pointer; }
.jaview-tag-cloud button[aria-pressed="true"] { border-color:var(--jv-blue); background:rgba(10,132,255,.24); box-shadow:inset 0 0 0 1px var(--jv-blue); }
.jaview-tag-cloud small { color:var(--jv-muted); }
.jaview-tag-expand { margin-top:.5rem; padding:.45rem .7rem; color:#d7eaff; background:rgba(10,132,255,.18); font-size:.7rem; }
.jaview-active-filters { min-height:1.1rem; margin:.45rem 0 0; color:#8ec5ff; font-size:.7rem; }
.jaview-catalog-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(15rem,21rem); gap:1rem; align-items:start; }
.jaview-catalog-primary { min-width:0; }
.jaview-catalog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr)); gap:.85rem; }
.jaview-catalog-card { overflow:hidden; border:1px solid var(--jv-border); border-radius:1rem; background:var(--jv-surface); }
.jaview-catalog-thumb { position:relative; display:grid; aspect-ratio:16/9; place-items:center; overflow:hidden; color:#8e8e93; background:var(--jv-high); text-decoration:none; }
.jaview-catalog-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.jaview-catalog-card:hover .jaview-catalog-thumb img { transform:scale(1.035); }
.jaview-new-badge { position:absolute; z-index:2; top:.55rem; left:.55rem; padding:.28rem .55rem; border-radius:.4rem; color:#fff; background:#087cff; font-size:.68rem; font-weight:800; }
.jaview-catalog-copy { padding:.8rem; }
.jaview-catalog-copy time { color:#8e8e93; font-size:.65rem; }
.jaview-catalog-copy h2 { display:-webkit-box; overflow:hidden; margin:.35rem 0 0; font-size:.9rem; line-height:1.45; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.jaview-catalog-copy h2 a { text-decoration:none; }
.jaview-catalog-copy p { display:-webkit-box; overflow:hidden; margin:.4rem 0 0; color:var(--jv-muted); font-size:.72rem; line-height:1.55; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.jaview-catalog-tags { display:flex; flex-wrap:wrap; gap:.25rem; margin-top:.6rem; }
.jaview-catalog-tags span { padding:.2rem .4rem; border-radius:999px; color:#c7c7cc; background:#242426; font-size:.6rem; }
.jaview-popular { position:sticky; top:1rem; padding:.85rem; border:1px solid var(--jv-border); border-radius:1rem; background:var(--jv-surface); }
.jaview-popular h2 { margin:0 0 .6rem; font-size:.95rem; }
.jaview-popular-list { display:grid; gap:.55rem; }
.jaview-popular-card { display:none; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:.55rem; align-items:center; color:#fff; text-decoration:none; }
.jaview-popular-card:nth-child(-n+6) { display:grid; }
.jaview-popular-card img,.jaview-popular-placeholder { width:100%; aspect-ratio:16/9; border-radius:.55rem; object-fit:cover; }
.jaview-popular-placeholder { display:grid; place-items:center; color:var(--jv-muted); background:var(--jv-high); }
.jaview-popular-card>span:last-child { min-width:0; }
.jaview-popular-card strong { display:-webkit-box; overflow:hidden; font-size:.7rem; line-height:1.4; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.jaview-popular-card small { display:block; margin-top:.25rem; color:var(--jv-muted); font-size:.6rem; }
.jaview-no-results { padding:2rem; color:#8e8e93; text-align:center; }

.jaview-settings-modal { width:min(28rem,calc(100% - 2rem)); padding:0; border:1px solid var(--jv-border); border-radius:1rem; color:#fff; background:#171719; box-shadow:0 1.5rem 5rem rgba(0,0,0,.65); }
.jaview-settings-modal::backdrop { background:rgba(0,0,0,.72); backdrop-filter:blur(8px); }
.jaview-settings-card { padding:0; }
.jaview-settings-card header { display:flex; align-items:center; justify-content:space-between; padding:.85rem 1rem; border-bottom:1px solid var(--jv-border); }
.jaview-settings-card h2,.jaview-settings-card h3,.jaview-settings-card p { margin:0; }
.jaview-settings-card h2 { font-size:1rem; }
.jaview-settings-card h3 { font-size:.82rem; }
.jaview-settings-card header button { display:grid; width:2rem; height:2rem; place-items:center; border:0; border-radius:999px; color:#fff; background:#2b2b2e; cursor:pointer; }
.jaview-settings-card section { padding:1rem; border-bottom:1px solid var(--jv-border); }
.jaview-settings-language { display:flex; gap:.5rem; margin-top:.65rem; }
.jaview-settings-language a { display:grid; min-width:4.5rem; min-height:2.3rem; place-items:center; border:1px solid var(--jv-border); border-radius:.65rem; color:#fff; text-decoration:none; }
.jaview-settings-language a[aria-current="page"] { border-color:var(--jv-blue); background:rgba(10,132,255,.22); }
.jaview-setting-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.jaview-setting-heading p,.jaview-setting-note { margin-top:.25rem!important; color:var(--jv-muted); font-size:.68rem; line-height:1.5; }
.jaview-switch { display:flex; align-items:center; gap:.4rem; cursor:pointer; }
.jaview-switch input { position:absolute; opacity:0; }
.jaview-switch span { position:relative; width:2.7rem; height:1.5rem; border-radius:999px; background:#3a3a3c; transition:.2s; }
.jaview-switch span::after { position:absolute; top:.15rem; left:.15rem; width:1.2rem; height:1.2rem; border-radius:50%; background:#fff; content:""; transition:.2s; }
.jaview-switch input:checked+span { background:var(--jv-blue); }
.jaview-switch input:checked+span::after { transform:translateX(1.2rem); }
.jaview-switch b { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.jaview-seconds-field { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.5rem; align-items:center; margin-top:.8rem; color:#d1d1d6; font-size:.76rem; }
.jaview-seconds-field input { width:100%; padding:.55rem .65rem; border:1px solid var(--jv-border); border-radius:.6rem; color:#fff; background:#242426; }

::-webkit-scrollbar { display:none; }
* { scrollbar-width:none; }
.container { width:100%; margin-right:auto; margin-left:auto; }
.flex { display:flex; }
.grid { display:grid; }
.hidden { display:none; }

@media (max-width:820px) {
  body { padding-bottom:calc(3.65rem + env(safe-area-inset-bottom)); }
  .jaview-site-rail { inset:auto 0 0 0; width:100%; height:calc(3.65rem + env(safe-area-inset-bottom)); flex-direction:row; justify-content:space-around; gap:0; padding:.3rem .6rem env(safe-area-inset-bottom); border-top:1px solid var(--jv-border); border-right:0; }
  .jaview-site-rail>a,.jaview-site-rail>button { width:3rem; height:3rem; }
  .jaview-site-brand,.jaview-site-rail>a[aria-label="タグから記事を探す"] { display:none!important; }
  .jaview-rail-settings { order:1; margin-top:0; }
  .jaview-rail-favorite { display:grid!important; order:2; }
  .jaview-site-rail>a[aria-label="動画ビューアーへ移動"] { order:3; }
  .jaview-site-rail>a[aria-label="最新記事"] { order:4; }
  .jaview-catalog { width:100%; margin-left:0; padding:1rem .55rem 2rem; }
  .jaview-catalog-layout { grid-template-columns:1fr; }
  .jaview-popular { position:static; }
}

@media (max-width:520px) {
  .jaview-catalog-header p { font-size:.76rem; }
  .jaview-search-box { grid-template-columns:minmax(0,1fr) auto; }
  .jaview-search-box label { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .jaview-search-box button { padding:.58rem .8rem; }
  .jaview-catalog-grid { grid-template-columns:1fr; }
}