/* app.css — Subscription Groups (extension page + hub web app). Light/dark follows the system. */
#ysg-app, .ysg-scope { --bg:#f7f7f9; --card:#fff; --tx:#16181d; --mut:#5f6673; --ln:#e3e5ea; --ac:#3b5bfd; --ac2:#2f49d0; --ok:#2b8a3e; --warn:#c2410c; --pro:#f59f00;
  color:var(--tx); font:14px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Sans","Noto Sans JP",sans-serif; }
@media (prefers-color-scheme: dark) { #ysg-app, .ysg-scope { --bg:#0f1115; --card:#181b21; --tx:#eef0f4; --mut:#a3aab8; --ln:#2a2f38; --ac:#6d86ff; --ac2:#8ea0ff; --ok:#69db7c; --warn:#ffa94d; } }
body.ext { margin:0; background:var(--bg,#f7f7f9); }
@media (prefers-color-scheme: dark) { body.ext { background:#0f1115; color:#eef0f4; } }
body.ext .brand { display:flex; align-items:center; gap:10px; padding:12px 18px 0; font:600 16px system-ui,sans-serif; }
#ysg-app { background:var(--bg); }
#ysg-app * { box-sizing:border-box; }
#ysg-app button, #ysg-app .btn, #ysg-app select, #ysg-app input, #ysg-app textarea { font:inherit; color:inherit; }
#ysg-app button, #ysg-app .btn { background:var(--card); border:1px solid var(--ln); border-radius:8px; padding:7px 12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px; }
#ysg-app button:hover, #ysg-app .btn:hover { border-color:var(--ac); }
#ysg-app button.primary { background:var(--ac); color:#fff; border-color:var(--ac); }
#ysg-app button.primary:hover { background:var(--ac2); }
#ysg-app button.danger { color:var(--warn); }
#ysg-app select, #ysg-app input[type=search], #ysg-app input:not([type]), #ysg-app input[type=text], #ysg-app textarea { background:var(--card); border:1px solid var(--ln); border-radius:8px; padding:7px 10px; }
#ysg-app textarea { width:100%; }
#ysg-app .bar { display:flex; justify-content:flex-end; align-items:center; gap:10px; padding:10px 18px; }
#ysg-app .pill { background:var(--card); border:1px solid var(--ln); border-radius:999px; padding:3px 10px; font-size:12px; color:var(--mut); }
#ysg-app .pill.pp { background:var(--pro); color:#111; border-color:var(--pro); font-weight:600; }
#ysg-app .wrap { display:grid; grid-template-columns:230px 1fr; gap:18px; padding:0 18px 24px; min-height:70vh; }
#ysg-app .side { display:flex; flex-direction:column; gap:3px; position:sticky; top:8px; align-self:start; }
#ysg-app .side .sect { font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--mut); margin:12px 6px 4px; }
#ysg-app .side button { justify-content:flex-start; border-color:transparent; background:transparent; width:100%; text-align:left; }
#ysg-app .side button.on { background:var(--card); border-color:var(--ln); font-weight:600; }
#ysg-app .side .grp i { width:10px; height:10px; border-radius:50%; flex:none; }
#ysg-app .side .grp i.all { background:conic-gradient(#3b5bfd 0 33%, #e8590c 0 66%, #2b8a3e 0); }
#ysg-app .side .gn { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ysg-app .side small { color:var(--mut); }
#ysg-app .side .add { color:var(--ac); }
#ysg-app .side .pro-nav { margin-top:8px; border:1px solid var(--pro); color:inherit; font-weight:600; justify-content:center; }
#ysg-app .ng { display:flex; gap:4px; } #ysg-app .ng input { flex:1; min-width:0; }
#ysg-app .badge { background:var(--ac); color:#fff; border-radius:999px; font-size:11px; padding:1px 7px; font-weight:600; }
#ysg-app .lock { background:var(--pro); color:#111; border-radius:4px; font-size:10.5px; padding:1px 5px; font-weight:700; }
#ysg-app .main { min-width:0; }
#ysg-app .fh { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
#ysg-app .fh h2 { margin:6px 0; font-size:20px; } #ysg-app .fh h2 small { font-size:13px; color:var(--mut); font-weight:400; }
#ysg-app .tools, #ysg-app .row { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
#ysg-app .filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:8px 0 12px; }
#ysg-app .chip.on { background:var(--ac); color:#fff; border-color:var(--ac); }
#ysg-app .chk { display:inline-flex; gap:6px; align-items:center; cursor:pointer; }
#ysg-app .prog { color:var(--mut); } #ysg-app .warn { color:var(--warn); } #ysg-app .ok { color:var(--ok); } #ysg-app .fine { color:var(--mut); font-size:12.5px; }
#ysg-app .grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
#ysg-app .card { background:var(--card); border:1px solid var(--ln); border-radius:12px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
#ysg-app .card.w { opacity:.55; }
#ysg-app .th { position:relative; display:block; aspect-ratio:16/9; background:#000; }
#ysg-app .th img { width:100%; height:100%; object-fit:cover; display:block; }
#ysg-app .tag { position:absolute; left:8px; top:8px; background:rgba(0,0,0,.75); color:#fff; font-size:11px; border-radius:4px; padding:2px 6px; font-weight:600; }
#ysg-app .tag.new { left:auto; right:8px; background:var(--ac); }
#ysg-app .meta { padding:9px 36px 10px 11px; }
#ysg-app .vt { color:inherit; text-decoration:none; font-weight:600; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
#ysg-app .sub { color:var(--mut); font-size:12.5px; margin-top:4px; } #ysg-app .sub a { color:inherit; }
#ysg-app .wbtn { position:absolute; right:6px; bottom:8px; border:0 !important; background:transparent !important; font-size:16px; padding:4px 6px !important; }
#ysg-app .empty { background:var(--card); border:1px solid var(--ln); border-radius:14px; padding:26px; max-width:640px; }
#ysg-app .empty h2 { margin-top:0; } #ysg-app .empty.small { padding:16px; }
#ysg-app .addrow { display:flex; gap:6px; margin:8px 0; } #ysg-app .addrow input { flex:1; min-width:0; }
#ysg-app .bulk { display:flex; gap:8px; align-items:center; flex-wrap:wrap; padding:8px 10px; border:1px dashed var(--ln); border-radius:10px; margin-bottom:8px; }
#ysg-app .bulk.has { border-style:solid; border-color:var(--ac); }
#ysg-app .clist { background:var(--card); border:1px solid var(--ln); border-radius:12px; }
#ysg-app .crow { display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid var(--ln); }
#ysg-app .crow:last-child { border-bottom:0; }
#ysg-app .av { width:28px; height:28px; border-radius:50%; flex:none; object-fit:cover; }
#ysg-app .av.ph { display:inline-flex; align-items:center; justify-content:center; background:var(--ln); font-weight:700; font-size:12px; }
#ysg-app .cn { flex:1; min-width:0; color:inherit; text-decoration:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ysg-app .lu { color:var(--mut); font-size:12px; white-space:nowrap; }
#ysg-app .gchips { display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end; max-width:50%; }
#ysg-app .gc { font-size:12px; padding:2px 8px !important; border-radius:999px !important; color:var(--mut) !important; }
#ysg-app .gc.on { background:var(--c) !important; border-color:var(--c) !important; color:#fff !important; }
#ysg-app .box { background:var(--card); border:1px solid var(--ln); border-radius:12px; padding:14px 16px; margin-bottom:12px; }
#ysg-app .box h3 { margin:0 0 6px; font-size:15px; }
#ysg-app .rule { padding:6px 0; border-bottom:1px solid var(--ln); }
#ysg-app .paywall { background:var(--card); border:1px solid var(--pro); border-radius:16px; padding:22px 24px; max-width:720px; }
#ysg-app .paywall h2 { margin-top:0; }
#ysg-app .better { padding-left:20px; } #ysg-app .better li { margin:6px 0; font-weight:500; }
#ysg-app .monthly { background:var(--bg); border-radius:10px; padding:10px 12px; }
#ysg-app .prices { display:flex; gap:10px; flex-wrap:wrap; margin:14px 0; }
#ysg-app a.buy { background:var(--ac); color:#fff; text-decoration:none; padding:11px 18px; border-radius:10px; font-weight:700; }
#ysg-app a.buy.alt { background:transparent; color:var(--ac); border:2px solid var(--ac); }
#ysg-app .feat li { margin:4px 0; }
#ysg-app .file { position:relative; }
#toast { position:fixed; left:50%; bottom:22px; transform:translateX(-50%); background:#111; color:#fff; padding:10px 16px; border-radius:10px; z-index:50; font:14px system-ui,sans-serif; }
@media (max-width: 760px) {
  #ysg-app .wrap { grid-template-columns:1fr; padding:0 10px 20px; }
  #ysg-app .side { position:static; flex-direction:row; flex-wrap:wrap; }
  #ysg-app .side button { width:auto; } #ysg-app .side .sect { width:100%; margin:6px 2px 2px; }
  #ysg-app .gchips { max-width:100%; } #ysg-app .crow { flex-wrap:wrap; }
}