:root{--blue:#2563eb;--bg:#f1f5f9;--card:#fff;--muted:#64748b;--line:#e2e8f0}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#0f172a;font-family:-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
.wrap{max-width:960px;margin:0 auto;padding:0 16px}
.site-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.header-inner{display:flex;gap:12px;align-items:center;padding:12px 16px;flex-wrap:wrap}
.logo{font-weight:800;font-size:22px;color:var(--blue);text-decoration:none}
.search{flex:1;display:flex;min-width:200px}.search input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:8px 0 0 8px}.search button{border:1px solid var(--blue);background:var(--blue);color:#fff;border-radius:0 8px 8px 0;padding:8px 14px;cursor:pointer}
.nav{display:flex;gap:10px;align-items:center}.nav a{text-decoration:none;color:#334155;font-size:14px}
.btn{display:inline-block;padding:8px 14px;border-radius:8px;text-decoration:none;border:1px solid var(--line);background:#fff}
.btn.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.catnav{display:flex;gap:12px;overflow:auto;padding:8px 16px;font-size:13px}.catnav a{color:var(--muted);text-decoration:none;white-space:nowrap}.catnav a:hover{color:var(--blue)}
main{padding:20px 16px 60px}
.tabs{display:flex;gap:8px;margin-bottom:14px}.tabs a{padding:8px 14px;border-radius:20px;background:#fff;border:1px solid var(--line);text-decoration:none;color:#334155;font-size:14px}.tabs a.active{background:#0f172a;color:#fff}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;display:flex;gap:10px;margin-bottom:12px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card-main{flex:1;min-width:0}.card-head{display:flex;gap:8px;align-items:center}.favicon{width:20px;height:20px;border-radius:4px}
.card-title{font-weight:700;color:#0f172a;text-decoration:none}.card-title:hover{color:var(--blue)}
.card-url{color:var(--muted);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.card-comment{background:#f8fafc;border-radius:8px;padding:8px 10px;font-size:14px;margin:8px 0}
.meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);align-items:center;margin-top:6px}.meta.sub{margin-top:4px}
.users-badge{background:#fef3c7;color:#92400e;padding:2px 8px;border-radius:12px;text-decoration:none;font-weight:700}
.cat{background:#e0e7ff;color:#3730a3;padding:2px 8px;border-radius:12px}.tag{color:var(--blue);text-decoration:none}
.card-side{display:flex;flex-direction:column;gap:6px;align-items:center}
.fav{font-size:22px;border:1px solid var(--line);background:#fff;border-radius:50%;width:42px;height:42px;cursor:pointer}.fav.on{color:#e11d48;border-color:#fecdd3;background:#fff1f2}
.mini{font-size:12px;color:var(--muted)}
.form{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;max-width:560px;margin:0 auto}
.form label{display:block;font-size:13px;margin:12px 0 4px}.form input,.form textarea,.form select{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px}
.form button{margin-top:14px;width:100%;padding:10px;background:var(--blue);color:#fff;border:0;border-radius:8px;cursor:pointer;font-size:15px}
.alert{background:#fef2f2;color:#991b1b;padding:10px;border-radius:8px;margin-bottom:12px}.ok{background:#f0fdf4;color:#166534;padding:10px;border-radius:8px;margin-bottom:12px}
.profile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:16px}
.footer{text-align:center;color:var(--muted);font-size:12px;padding:24px}
.pager{display:flex;gap:8px;justify-content:center;margin-top:16px}.pager a{padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:#334155}
h2{margin:6px 0 12px}
@media(max-width:600px){.header-inner{gap:8px}.nav{width:100%}}