*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Hiragino Sans','Noto Sans JP',sans-serif;background:#f5f5f7;color:#1a1a1a;font-size:14px}
a{color:inherit;text-decoration:none}

/* ===== HEADER ===== */
header{background:#fff;border-bottom:1px solid #e5e5e5;padding:0 20px;height:52px;display:flex;align-items:center;gap:16px;position:sticky;top:0;z-index:100}
.brand{display:flex;align-items:center;gap:7px}
.brand-icon{width:26px;height:26px;border-radius:7px;background:#7c3aed;display:flex;align-items:center;justify-content:center}
.brand-icon svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
.brand-name{font-size:17px;font-weight:600;color:#1a1a1a}
.brand-name em{font-style:normal;color:#7c3aed}
nav{margin-left:auto;display:flex;gap:20px;font-size:13px;color:#555}
nav a:hover{color:#7c3aed}
.dark-btn{padding:5px 12px;border-radius:20px;border:1px solid #ddd;font-size:12px;cursor:pointer;background:#fff;color:#555;transition:background .2s}
.dark-btn:hover{background:#f0f0f0}

/* ===== HERO ===== */
.hero{background:#fff;border-bottom:1px solid #e5e5e5;padding:40px 20px 32px;text-align:center}
.hero h1{font-size:28px;font-weight:700;margin-bottom:8px}
.hero h1 em{font-style:normal;color:#7c3aed}
.hero p{font-size:13px;color:#888;margin-bottom:22px}
.search-box{display:flex;align-items:center;max-width:480px;margin:0 auto;background:#f5f5f7;border:1px solid #e5e5e5;border-radius:40px;padding:4px 4px 4px 18px;transition:border-color .2s}
.search-box:focus-within{border-color:#7c3aed}
.search-box input{flex:1;background:none;border:none;outline:none;color:#1a1a1a;font-size:14px;padding:7px 0}
.search-box input::placeholder{color:#aaa}
.search-box button{background:#7c3aed;border:none;color:#fff;border-radius:32px;padding:8px 20px;font-size:13px;cursor:pointer;transition:background .2s}
.search-box button:hover{background:#6d28d9}
.hero-stats{display:flex;justify-content:center;gap:40px;margin-top:22px}
.stat-num{font-size:20px;font-weight:700;color:#1a1a1a;text-align:center}
.stat-label{font-size:11px;color:#999;text-align:center;margin-top:2px}

/* ===== LAYOUT ===== */
.container{max-width:1000px;margin:0 auto;padding:20px 16px}
.layout{display:grid;grid-template-columns:1fr 200px;gap:20px;align-items:start}

/* ===== SECTION ===== */
.sec{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:16px;margin-bottom:16px}
.sec-head{display:flex;align-items:center;margin-bottom:14px}
.sec-title{font-size:13px;font-weight:600;color:#1a1a1a}
.sec-bar{flex:1;height:1px;background:#eee;margin:0 10px}
.sec-more{font-size:11px;color:#7c3aed;cursor:pointer;white-space:nowrap}
.sec-more:hover{text-decoration:underline}

/* ===== RANKING (MAIN) ===== */
.rank-list{display:flex;flex-direction:column;gap:2px}
.rank-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;cursor:pointer;transition:background .15s}
.rank-item:hover{background:#f9f6ff}
.rank-num{font-size:14px;font-weight:600;color:#aaa;min-width:20px;text-align:center}
.rank-num.g{color:#f59e0b}
.rank-num.s{color:#94a3b8}
.rank-num.b{color:#b87333}
.rank-img{width:40px;height:40px;border-radius:7px;object-fit:cover;background:#f0f0f0;flex-shrink:0;border:1px solid #eee}
.rank-fb{width:40px;height:40px;border-radius:7px;background:#f0f0f0;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#aaa;flex-shrink:0}
.rank-info{flex:1;min-width:0}
.rank-name{font-size:13px;font-weight:600;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-native{font-size:11px;color:#999;margin-top:1px}
.rank-fav{font-size:11px;color:#7c3aed;background:#f3f0ff;padding:3px 9px;border-radius:20px;border:1px solid #ddd6fe;white-space:nowrap}

/* ===== CARDS GRID ===== */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.card{background:#fff;border:1px solid #e5e5e5;border-radius:10px;overflow:hidden;cursor:pointer;transition:border-color .2s,transform .15s}
.card:hover{border-color:#7c3aed;transform:translateY(-2px)}
.card img{width:100%;aspect-ratio:2/3;object-fit:cover;display:block;background:#f0f0f0}
.card-fb{width:100%;aspect-ratio:2/3;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:#aaa;background:#f5f5f7}
.card-body{padding:7px 9px}
.card-name{font-size:12px;font-weight:600;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-sub{font-size:10px;color:#999;margin-top:1px}

/* ===== SIDEBAR ===== */
.sidebar{display:flex;flex-direction:column;gap:12px}
.side-sec{background:#fff;border:1px solid #e5e5e5;border-radius:10px;padding:14px}
.side-sec-title{font-size:12px;font-weight:600;color:#1a1a1a;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid #eee}
.side-rank-list{display:flex;flex-direction:column;gap:1px}
.side-rank-item{display:flex;align-items:center;gap:7px;padding:6px 4px;border-radius:6px;cursor:pointer;transition:background .15s}
.side-rank-item:hover{background:#f9f6ff}
.side-num{font-size:11px;font-weight:600;color:#aaa;min-width:14px;text-align:center}
.side-num.g{color:#f59e0b}
.side-num.s{color:#94a3b8}
.side-num.b{color:#b87333}
.side-img{width:28px;height:28px;border-radius:5px;object-fit:cover;background:#f0f0f0;flex-shrink:0;border:1px solid #eee}
.side-fb{width:28px;height:28px;border-radius:5px;background:#f0f0f0;border:1px solid #eee;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:600;color:#aaa;flex-shrink:0}
.side-name{font-size:11px;font-weight:500;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}

/* ===== TAG CLOUD ===== */
.tag-cloud{display:flex;flex-wrap:wrap;gap:5px}
.tag{font-size:10px;padding:4px 9px;border-radius:20px;border:1px solid #e5e5e5;color:#666;cursor:pointer;background:#f9f9f9;transition:all .15s}
.tag:hover{border-color:#7c3aed;color:#7c3aed;background:#f3f0ff}

/* ===== NEW LIST ===== */
.new-list{display:flex;flex-direction:column;gap:6px}
.new-item{padding:8px;border-radius:7px;background:#f9f9f9;cursor:pointer;transition:background .15s}
.new-item:hover{background:#f3f0ff}
.new-name{font-size:11px;font-weight:600;color:#1a1a1a}
.new-sub{font-size:10px;color:#999;margin-top:2px}

/* ===== RELATED ===== */
.related-item{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:7px;background:#f9f9f9;cursor:pointer;margin-bottom:6px;transition:background .15s}
.related-item:hover{background:#f3f0ff}
.related-name{font-size:12px;font-weight:600;color:#7c3aed}
.related-sub{font-size:10px;color:#999;margin-top:1px}

/* ===== LOADING ===== */
.loading{text-align:center;padding:24px;color:#aaa;font-size:13px}

/* ===== FOOTER ===== */
footer{background:#fff;border-top:1px solid #e5e5e5;padding:20px;text-align:center;font-size:12px;color:#aaa;margin-top:32px}

/* ===== DARK MODE ===== */
body.dark{background:#0f0f14;color:#e0e0e0}
body.dark header,body.dark .hero,body.dark .sec,body.dark .side-sec,body.dark footer{background:#1a1a24;border-color:#2a2a38}
body.dark .brand-name{color:#e0e0e0}
body.dark .search-box{background:#2a2a38;border-color:#3a3a50}
body.dark .search-box input{color:#e0e0e0}
body.dark .rank-item:hover,body.dark .side-rank-item:hover{background:#2a2a38}
body.dark .rank-name,body.dark .card-name,body.dark .side-name,body.dark .new-name{color:#e0e0e0}
body.dark .rank-img,body.dark .rank-fb,body.dark .side-img,body.dark .side-fb{background:#2a2a38;border-color:#3a3a50}
body.dark .card{background:#1a1a24;border-color:#2a2a38}
body.dark .card:hover{border-color:#7c3aed}
body.dark .card-fb{background:#2a2a38;color:#666}
body.dark .tag{background:#2a2a38;border-color:#3a3a50;color:#aaa}
body.dark .tag:hover{background:#3a2a50;border-color:#7c3aed;color:#a78bfa}
body.dark .new-item,.related-item{background:#2a2a38}
body.dark .new-item:hover,.related-item:hover{background:#3a2a50}
body.dark .sec-bar,.side-sec-title{border-color:#2a2a38}
body.dark .sec-bar{background:#2a2a38}
body.dark nav a{color:#aaa}
body.dark .dark-btn{background:#2a2a38;border-color:#3a3a50;color:#aaa}
body.dark .stat-num{color:#e0e0e0}
body.dark .hero h1{color:#e0e0e0}
body.dark .rank-fav{background:#2a1a50;border-color:#4a3a70}

@media(max-width:680px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  nav{display:none}
}