:root{--pink:#f02e65;--pink-dark:#a4123f;--ink:#222;--muted:#777;--line:#eee;--tint:#fff5f8}
*{box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans",sans-serif;margin:0;color:var(--ink);background:#fff;line-height:1.9}
a{color:var(--pink-dark)}
header.site{background:linear-gradient(135deg,var(--pink),var(--pink-dark));color:#fff;padding:20px 16px;text-align:center}
header.site .tagline{font-size:.85em;opacity:.9;margin-bottom:6px}
header.site h1{margin:0;font-size:1.6em}
header.site h1 a{color:#fff;text-decoration:none}
nav.site{display:flex;justify-content:center;gap:20px;padding:10px;border-bottom:1px solid var(--line);font-size:.9em;flex-wrap:wrap}
nav.site a{color:var(--ink);text-decoration:none}
nav.site a:hover{color:var(--pink-dark)}
main{max-width:760px;margin:0 auto;padding:24px 16px 60px}
.updated{display:inline-block;background:var(--tint);color:var(--pink-dark);padding:4px 12px;border-radius:999px;font-size:.85em;margin-bottom:1em}
h1.page-title{font-size:1.5em}
h2{font-size:1.2em;margin-top:1.8em;border-left:4px solid var(--pink);padding-left:10px}
.article-list{list-style:none;padding:0;margin:1.5em 0}
.article-list li{border:1px solid var(--line);border-radius:10px;padding:16px 18px;margin-bottom:14px}
.article-list a.title{font-weight:700;font-size:1.05em;text-decoration:none;color:var(--ink)}
.article-list a.title:hover{color:var(--pink-dark)}
.article-list p{margin:6px 0 0;color:var(--muted);font-size:.92em}
table{width:100%;border-collapse:collapse;margin:1em 0}
th,td{border:1px solid var(--line);padding:8px 10px;text-align:left;font-size:.95em}
footer.site{border-top:1px solid var(--line);margin-top:3em;padding:24px 16px;text-align:center;font-size:.85em;color:var(--muted)}
footer.site a{color:var(--muted);margin:0 8px}

/* === plan-hub additions === */
.filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1em 0;font-size:.9em}
.filters input[type="text"]{padding:14px 20px;font-size:1em;border:1px solid var(--line);border-radius:999px;flex:1 1 260px;max-width:440px}
.filters select{padding:6px;border:1px solid var(--line);border-radius:6px;margin-left:4px}
.filters label{display:flex;align-items:center;gap:4px}
.filters label.checkbox{gap:6px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0}
.table-wrap table{min-width:640px}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--pink-dark)}
.counts{font-size:.85em;color:var(--muted)}
.note{font-size:.9em;color:var(--muted)}
.promo-notice{font-size:.8em;color:var(--muted);background:var(--tint);padding:8px 12px;border-radius:8px}
.age-notice{font-size:.8em;color:var(--muted);margin:0 0 .5em}
.creator-block{margin-top:2em}
.creator-block h2{display:flex;align-items:baseline;gap:8px}
.creator-block .followers{font-size:.7em;color:var(--muted);font-weight:normal}

.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;margin:1em 0}
.plan-card{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px}
.plan-card .creator-name{font-size:1.15em;font-weight:700}
.plan-card .plan-name{font-size:.9em;color:var(--muted)}
.plan-card .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block;background:var(--tint)}
.plan-card .specs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;text-align:center}
.plan-card .spec-label{display:block;font-size:.72em;color:var(--muted)}
.plan-card .spec-value{display:block;font-size:1.05em;font-weight:700}
.plan-btn{background:#FF3700;color:#fff;border-radius:9999px;display:block;width:100%;text-align:center;padding:14px;font-weight:700;text-decoration:none;font-size:1em}
.plan-btn:hover{background:#d92e00}

@media (max-width:600px){
  .filters{flex-direction:column;align-items:center}
  .filters label{justify-content:space-between;width:100%;max-width:240px}
  .filters input[type="text"]{width:100%;max-width:100%;flex:none}
  h1.page-title,.updated,main>p,.note,.counts,.promo-notice{text-align:center}
}

/* === shiroto-guide additions === */
.age-gate{position:fixed;inset:0;z-index:9999;background:rgba(20,20,24,.97);display:flex;align-items:center;justify-content:center;padding:24px}
.age-gate-inner{max-width:420px;text-align:center;color:#fff}
.age-gate-title{font-size:1.2em;font-weight:bold;margin-bottom:1em}
.age-btn{padding:12px 28px;font-size:1em;border:0;border-radius:8px;background:var(--pink,#e0407a);color:#fff;cursor:pointer}
.age-no{display:inline-block;margin-top:12px;color:#aaa;font-size:.85em}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1em 0}
.table-wrap table{min-width:520px}
.note{font-size:.95em;color:var(--muted,#666)}
.promo-notice{font-size:.8em;color:var(--muted,#666);background:var(--tint,#faf3f6);padding:8px 12px;border-radius:8px}
.source-note{font-size:.8em;color:var(--muted,#666);border-left:3px solid var(--line,#ddd);padding-left:10px;margin-top:2em}
.age-notice{font-size:.8em;color:var(--muted,#666);margin:0 0 .5em}
.card-list{display:grid;gap:16px;margin:1em 0}
.card{border:1px solid var(--line,#ddd);border-radius:10px;padding:16px}
.card h3{margin:0 0 .5em;font-size:1.05em}
.card p{margin:0;font-size:.9em;color:var(--muted,#666)}
main h2{margin-top:1.8em}
main h3{margin-top:1.4em}