:root{
  --bg:#f5f4f0; --card:#fff; --ink:#1f2328; --sub:#6b7280;
  --accent:#c65d3b; --line:#e6e3dc; --idea:#0d7a5f;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;line-height:1.6}
.wrap{max-width:900px;margin:0 auto;padding:0 20px}

.site-head{background:#fff;border-bottom:1px solid var(--line);padding:22px 0 0}
.site-head h1{margin:0;font-size:24px;letter-spacing:.02em}
.tagline{margin:4px 0 0;color:var(--sub);font-size:14px}
.demo{margin:8px 0 0;color:#8a5a00;background:#fff6e0;border:1px solid #f0d999;
  padding:6px 10px;border-radius:8px;font-size:13px;display:inline-block}

.tabs{display:flex;gap:6px;margin-top:16px}
.tabs a{padding:10px 18px;border:1px solid var(--line);border-bottom:none;
  border-radius:10px 10px 0 0;background:#faf9f6;color:var(--sub);text-decoration:none;font-weight:600;font-size:15px}
.tabs a.on{background:var(--bg);color:var(--ink);border-color:var(--line);position:relative;top:1px}

main.wrap{padding-top:24px;padding-bottom:60px}
.plat{font-size:16px;margin:26px 0 10px;color:var(--accent);border-left:4px solid var(--accent);padding-left:10px}
.empty{color:var(--sub);padding:40px 0;text-align:center}

.cards{display:grid;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.card h3{margin:6px 0;font-size:17px;line-height:1.4}
.card h3 a{color:var(--ink);text-decoration:none}
.card h3 a:hover{color:var(--accent);text-decoration:underline}
.meta{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:12px;color:var(--sub)}
.tag{background:#eef1f4;color:#334;border-radius:999px;padding:2px 10px;font-weight:600}
.badge{background:#fbeee7;color:var(--accent);border-radius:999px;padding:2px 10px;font-weight:600}
.summary{margin:6px 0 4px}
.idea{margin:4px 0;color:var(--idea);font-size:14px}
.src{display:inline-block;margin-top:4px;color:#94a3b8;font-size:12px;text-decoration:none;word-break:break-all}
.src:hover{color:var(--accent)}

.added{color:#94a3b8}
.star{color:#e0a500}

/* サブ切替バー（すべて/Web記事/YouTube/お気に入り） */
.subnav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.subnav .pill{padding:7px 15px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--sub);text-decoration:none;font-size:13px;font-weight:600}
.subnav .pill.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.subnav .pill.fav.on{background:#e0a500;border-color:#e0a500;color:#fff}
.subnav .pill .c{opacity:.65;font-weight:400;margin-left:3px}

/* 管理ボタン（お気に入り・削除） */
.card.is-fav{border-color:#f0d78a;box-shadow:0 0 0 2px #fbf1cf inset}
.admin-actions{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line)}
.admin-actions button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:5px 12px;font-size:12px;cursor:pointer;font-weight:600;color:var(--sub)}
.admin-actions .btn-fav.on{background:#fff6da;border-color:#e6c766;color:#8a6d00}
.admin-actions .btn-del:hover{background:#fdecec;border-color:#e6a3a3;color:#b03535}

/* ログイン */
.login-box{max-width:360px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.login-box label{display:block;font-size:13px;color:var(--sub);margin-bottom:6px}
.login-box input{width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;font-size:15px;margin-bottom:12px}
.login-box button{width:100%;padding:10px;background:var(--ink);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer}

/* ダッシュボード */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.kpi-v{font-size:22px;font-weight:700;color:var(--ink)}
.kpi-l{font-size:12px;color:var(--sub);margin-top:2px}
.table-wrap{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:12px}
table.runs{width:100%;border-collapse:collapse;font-size:13px;min-width:640px}
table.runs th{background:#faf9f6;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);color:var(--sub);font-weight:600;white-space:nowrap}
table.runs td{padding:9px 12px;border-bottom:1px solid var(--line)}
table.runs tr:last-child td{border-bottom:none}
table.runs .num{text-align:right;font-variant-numeric:tabular-nums}
table.runs .sub{color:var(--sub)}
table.runs .cost{font-weight:700;color:var(--accent)}
table.runs .cats{font-size:12px;color:#556}
.nowrap{white-space:nowrap}
.note{font-size:12px;color:var(--sub);margin-top:12px}

.site-foot{border-top:1px solid var(--line);color:var(--sub);font-size:13px;padding:20px 0}
.site-foot a{color:var(--sub)}

@media(max-width:600px){.kpis{grid-template-columns:repeat(2,1fr)}}

@media(max-width:600px){.site-head h1{font-size:20px}.tabs a{padding:9px 12px;font-size:14px}}