/* === Base === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');
:root{--bg:#0b0c10;--panel:#111317;--text:#e8eef4;--muted:#96a1ad;--line:#1c222b;--brand:#ef476f;--brand-2:#a0e9ff;--chip:#1a2634}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans JP",sans-serif}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
/* Layout */
header{position:sticky;top:0;z-index:50;background:rgba(11,12,16,.75);backdrop-filter:saturate(150%) blur(8px);border-bottom:1px solid var(--line)}
.wrap{max-width:1100px;margin:0 auto;padding:14px 18px}
.brand{font-weight:800;letter-spacing:.3px;font-size:22px}.brand .dot{color:var(--brand)}
nav a{margin-right:14px;color:var(--muted);font-size:14px} nav a:hover{color:var(--text)}
main{padding-bottom:60px}
h2{font-size:20px;margin:22px 0 8px}
section.panel{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
/* Ranking tabs */
.ranking-tabs{display:flex;gap:8px;margin:8px 0 14px}
.ranking-tabs button{background:transparent;border:1px solid var(--line);color:var(--muted);padding:6px 10px;border-radius:9px;font:600 12px/1 Inter}
.ranking-tabs button.active{background:var(--chip);color:var(--brand-2);border-color:#263245}
.ranking-tabs button:hover{border-color:#2d3a47;color:#cfe8ff}
/* List cards */
.grid{display:block}
.card{display:flex;gap:12px;align-items:flex-start;padding:12px;border-bottom:1px dashed var(--line)}
.card:last-child{border-bottom:none}
.card .thumb{flex:0 0 auto;border-radius:10px;overflow:hidden;background:#20242b;border:1px solid #2a3440}
.card .thumb img{width:112px;height:112px;object-fit:cover;transition:transform .2s ease}
.card:hover .thumb img{transform:scale(1.03)}
.card-content{min-width:0}
.card-content h4{margin:2px 0 6px;font-size:15px;line-height:1.4;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta-line{font-size:12px;color:var(--muted);display:flex;gap:10px;align-items:center}
.badge{background:var(--chip);border:1px solid #223040;border-radius:999px;padding:2px 8px;font-size:11px}
.badge.source{opacity:.85}.badge.clicks{color:#ffd166;border-color:#2e2a1c;background:#1b1914}
.badge.date{color:#a0e9ff;border-color:#253544}
/* Placeholder */
.thumb.ph{width:112px;height:112px;border-radius:10px;background:#1b2027;border:1px dashed #2e3946}
/* Desktop rail */
.side-rail{display:none}
@media (min-width:1000px){.layout{display:grid;grid-template-columns:1fr 300px;gap:18px}.side-rail{display:block;position:sticky;top:76px;height:calc(100vh - 100px)}}
/* Light mode */
@media (prefers-color-scheme:light){:root{--bg:#f6f7fb;--panel:#fff;--text:#0e1116;--muted:#485366;--line:#e6e8ef;--chip:#eef1f7}header{background:rgba(255,255,255,.7)}.card .thumb{border-color:#e6e8ef}.thumb.ph{border-color:#d3d9e6;background:#f1f3f8}}

/* --- polish --- */
.card .thumb img{border-radius:10px;box-shadow:0 1px 0 #1b2027;}
.card:hover{background:rgba(255,255,255,.02)}
.card .thumb img{transition:transform .18s ease}
.card:hover .thumb img{transform:scale(1.02)}
.badge{display:inline-block;padding:2px 6px;border-radius:999px;background:var(--chip);color:#cfe0f5;border:1px solid #2b3643;margin-right:6px;font:600 11px/1.6 Inter}
.badge.clicks{background:#2b2030;border-color:#4a2438;color:#ffd6e3}