:root{
  --bg:#fafafa; --fg:#1a1a1a; --muted:#555; --line:#e3e3e3;
  --accent:#0a7d4b; --accent-soft:#e6f4ee; --warn:#9a6a00;
  --badge:#666; --link:#0a53be; --card:#fff; --shadow:0 1px 2px rgba(0,0,0,.04);
}
@media (prefers-color-scheme:dark){
  :root{ --bg:#121212; --fg:#eaeaea; --muted:#a0a0a0; --line:#2a2a2a;
    --accent:#4ade80; --accent-soft:#0f2417; --badge:#bbb; --link:#7aa2ff;
    --card:#1c1c1c; --shadow:0 1px 2px rgba(0,0,0,.6); }
}
*{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  padding:0; max-width:880px; margin-inline:auto;
}
header{ padding:16px 16px 8px; border-bottom:1px solid var(--line) }
h1{ font-size:1.3rem; margin:.2em 0 .1em }
h1 .flag{ font-size:1.1em }
.sub{ color:var(--muted); font-size:.92rem; margin:.1em 0 0 }
.bar{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:10px 16px; position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--line); z-index:2 }
.bar input[type=search], .bar select{
  flex:1 1 140px; padding:8px 10px; font:inherit; color:var(--fg); background:var(--card);
  border:1px solid var(--line); border-radius:6px; min-width:0;
}
.bar .clear{ padding:8px 10px; background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:6px; cursor:pointer; font:inherit }
.bar .clear:hover{ color:var(--fg) }
.lang{ display:flex; gap:4px; padding:0 16px; margin-top:8px; align-items:center }
.lang button{ background:transparent; border:1px solid var(--line); color:var(--muted); border-radius:4px; padding:3px 9px; cursor:pointer; font:inherit }
.lang button.active{ background:var(--accent); color:#fff; border-color:var(--accent) }
main{ padding:0 16px 120px }
.empty{ padding:40px 16px; text-align:center; color:var(--muted) }
.aggregator{
  display:block; padding:12px 14px; margin:10px 0; background:var(--card);
  border:1px solid var(--line); border-left:4px solid var(--accent); border-radius:6px; box-shadow:var(--shadow)
}
.link-title{ display:flex; align-items:baseline; gap:5px }
.ext-icon{ font-size:.85em; color:var(--muted); flex-shrink:0; line-height:1 }
.link-title .t{ font-weight:600; color:var(--link); text-decoration:none }
.link-title .t:hover{ text-decoration:underline }
.aggregator .t{ font-weight:600; color:var(--link); text-decoration:none }
.aggregator .t:hover{ text-decoration:underline }
.aggregator .d{ color:var(--muted); font-size:.92rem; margin-top:2px }
.aggregator .chips{ margin-top:6px; display:flex; flex-wrap:wrap; gap:5px }
.cat{ margin:24px 0 0; }
.cat > summary{
  cursor:pointer; list-style:none; padding:8px 10px; background:var(--accent-soft);
  border:1px solid var(--line); border-radius:6px;
  display:flex; justify-content:space-between; align-items:center; gap:8px;
}
.cat > summary::-webkit-details-marker{ display:none }
.cat-title{ margin:0; padding:0; font-size:1rem; font-weight:600; color:var(--fg); display:inline }
section.cat > summary .count{ font-weight:400; color:var(--muted); font-size:.85rem }
.cat[open] > summary{ border-radius:6px 6px 0 0; border-bottom:none }
.link{
  display:block; padding:10px 12px; background:var(--card); border:1px solid var(--line);
  border-top:none; border-radius:0; box-shadow:var(--shadow)
}
.link:last-child{ border-radius:0 0 6px 6px }
.link .t{ font-weight:600; color:var(--link); text-decoration:none }
.link .t:hover{ text-decoration:underline }
.link .t-plain{ font-weight:600; color:var(--fg) }
.link .link-title{ display:flex; align-items:baseline; gap:5px }
.link .url{ display:block; color:var(--muted); font-size:.78rem; word-break:break-all; margin-top:1px; text-decoration:none }
.link .url:hover{ text-decoration:underline }
.link .d{ color:var(--fg); font-size:.92rem; margin-top:3px }
.chips{ margin-top:6px; display:flex; flex-wrap:wrap; gap:5px; align-items:center }
.chip{
  display:inline-block; padding:1px 7px; font-size:.74rem; border-radius:10px;
  background:var(--bg); border:1px solid var(--line); color:var(--muted); text-decoration:none
}
.cat-chip{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent);
  cursor:pointer; font-family:inherit; font-size:.74rem;
}
.cat-chip:hover{ background:var(--accent); color:#fff; border-color:var(--accent); }
.chip.zone{ background:transparent }
.verified{ font-size:.74rem; color:var(--accent); font-weight:600 }
.verified::before{ content:"\2713 " }
footer{ position:fixed; bottom:0; left:0; right:0; z-index:5; display:flex; justify-content:center;
  padding:10px; background:linear-gradient(to top,var(--bg) 70%,transparent) }
.suggest{
  padding:11px 22px; font:inherit; font-weight:600; background:var(--accent); color:#fff;
  border:none; border-radius:24px; cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.2)
}
.suggest:active{ transform:translateY(1px) }

.notice{ padding:8px 16px; background:var(--accent-soft); border-bottom:1px solid var(--line);
  font-size:.84rem; color:var(--muted) }
.notice a{ color:var(--link) }
.count-bar{ padding:4px 16px 0; color:var(--muted); font-size:.82rem }
@media (max-width:560px){
  .bar{ gap:6px; padding:8px 10px }
  .bar input, .bar select{ padding:7px 8px; font-size:.95rem }
  header{ padding:12px 10px 6px }
  main{ padding:0 10px 130px }
  h1{ font-size:1.1rem }
}