:root { --ink:#0f172a; --muted:#64748b; --accent:#4f46e5; --header-1:#4b1f18; --header-2:#7a3929; --header-3:#b0673d; --header-4:#d19a62; --footer-1:#4a221b; --footer-2:#6b3427; --footer-3:#8f5c3d; --root-start:#6c2d1f; --root-mid:#8a4a2b; --root-end:#b77c4d; }
* { box-sizing:border-box; }
body { margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#1e293b; background:#f8fafc; }
h1,p { margin:0; }
button { font-family:inherit; cursor:pointer; }
.row { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
header { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid #e2e8f0; }
.header-main { padding:8px 20px; background:linear-gradient(90deg,var(--header-1),var(--header-2) 38%,var(--header-3) 80%,var(--header-4)); }
.brand { display:flex; align-items:center; gap:12px; }
.logo { width:44px; height:44px; flex:none; border-radius:12px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35); display:flex; align-items:center; justify-content:center; color:#fff; overflow:hidden; }
.logo img { width:26px; height:26px; display:block; object-fit:contain; }
h1 { font-size:20px; font-weight:800; color:#fff; line-height:1.2; }
.sub { font-size:13px; color:#f1e7df; margin-top:2px; }
.header-actions { display:flex; flex-direction:column; align-items:flex-end; gap:6px; margin-left:auto; }
.header-action { display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.25); border-radius:8px; background:rgba(2,6,23,.22); padding:5px 12px; color:#f8fafc; font-size:13px; font-weight:500; text-decoration:none; }
.header-action:hover { border-color:rgba(255,255,255,.5); background:rgba(2,6,23,.38); color:#fff; }
.privacy-badge { border:1px solid #a7f3d0; border-radius:999px; background:#ecfdf5; padding:3px 9px; color:#047857; font-size:11px; font-weight:600; }
.toolbar-row { padding:6px 20px 8px; }
.toolbar-main { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.toolbar-left, .toolbar-right { display:flex; align-items:center; gap:12px; min-width:0; }
.toolbar-right { flex:0 1 620px; justify-content:flex-end; }
.toolbar-hint { margin-left:4px; padding-left:12px; border-left:1px solid #cbd5e1; color:var(--muted); font-size:12px; white-space:nowrap; }
.toolbar-hint kbd { font:600 11px/1 inherit; font-family:inherit; padding:2px 6px; border:1px solid #cbd5e1; border-bottom-width:2px; border-radius:4px; background:#f8fafc; color:#475569; }
.search { position:relative; flex:0 1 260px; min-width:200px; max-width:420px; }
.search svg { position:absolute; left:10px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:#94a3b8; }
.search input { width:100%; height:34px; padding:0 34px; border:1px solid #cbd5e1; border-radius:8px; background:#f8fafc; font-size:14px; color:#1e293b; }
.search input::placeholder { font-size:12px; color:#64748b; }
.search input:hover { border-color:#94a3b8; background:#fff; }
.search input:focus { outline:0; border-color:#818cf8; background:#fff; box-shadow:0 0 0 3px #e0e7ff; }
#clear-search { position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:none; color:var(--muted); display:none; }
.search.has-text #clear-search { display:block; }
.toolbar-secondary { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin-top:8px; }
.toolbar-secondary label,
.toolbar-secondary .filter-label { flex:none; font:700 13px -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#334155; }
.toolbar-secondary #group-by { flex:none; }
.filters { display:flex; flex-wrap:wrap; gap:6px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border:1px solid #cbd5e1; border-radius:999px; background:#fff; font-size:13px; color:#334155; }
.chip img { width:16px; height:16px; }
.chip:hover { background:#f1f5f9; }
.chip[aria-pressed="true"] { background:#4338ca; border-color:#312e81; color:#fff; font-weight:700; box-shadow:0 0 0 3px rgba(99,102,241,.3), 0 2px 6px rgba(49,46,129,.35); }
.chip[aria-pressed="true"]:hover { background:#3730a3; }
.chip[aria-pressed="true"]::before { content:"\2713"; font-weight:800; margin-right:-2px; }
.chip[aria-pressed="true"] img { background:#fff; border-radius:50%; padding:1px; box-sizing:content-box; }
.chip.reset { padding:6px 10px; border:1px solid #e2e8f0; border-radius:6px; background:#f1f5f9; color:#475569; font-weight:600; box-shadow:none; }
.chip.reset:hover { background:#e2e8f0; color:#334155; }
#status { color:var(--muted); font-size:13px; margin-left:auto; white-space:nowrap; }
#status .status-note { color:#dc2626; font-weight:700; }
main { padding:20px; }
#grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:16px; }
.card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:12px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; text-decoration:none; color:inherit; }
.card:hover { border-color:#67e8f9; box-shadow:0 4px 14px rgba(15,23,42,.1); }
.card:focus-visible { outline:3px solid #818cf8; outline-offset:2px; }
.card .icon { width:64px; height:64px; border-radius:2px; object-fit:contain; background:#0f172a0d; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#475569; margin-bottom:8px; }
.card .name { color:#0067b8; font-weight:700; font-size:15px; line-height:1.25; overflow-wrap:anywhere; }
.card .badges { display:flex; gap:6px; min-height:16px; margin-top:4px; }
.card .badges img { width:16px; height:16px; }
.card .by { font-size:13px; color:#334155; margin-top:6px; }
#empty { text-align:center; color:var(--muted); padding:40px 0; }
footer { padding:16px 20px 24px; text-align:center; font-size:12px; color:var(--muted); }
footer a { color:#0e7490; }
footer p { margin-top:6px; }

#app { display:flex; flex-direction:column; height:100vh; }
#app.cards-view { height:auto; min-height:100vh; }
header { position:static; }
#app.cards-view header { position:sticky; top:0; }
main { flex:1; min-height:0; padding:0; position:relative; display:flex; flex-direction:column; }
#app.cards-view main { padding:20px; display:block; }
[hidden] { display:none !important; }
.btns { display:flex; gap:8px; align-items:center; }
.btn, #group-by { padding:6px 12px; border:1px solid #cbd5e1; border-radius:7px; background:#fff; font-size:12px; font-weight:700; color:#475569; }
.btn.primary { color:var(--accent); border-color:#c7d2fe; }
.btn.primary:hover { background:#eef2ff; }
.btn:hover { background:#f1f5f9; }
.seg { display:flex; flex:none; background:#e2e8f0; border:1px solid #cbd5e1; border-radius:10px; padding:3px; gap:2px; }
.seg button { border:0; background:none; padding:5px 14px; border-radius:6px; font-size:13px; font-weight:600; color:#475569; }
.seg button.active { background:#fff; color:var(--accent); font-weight:700; box-shadow:0 2px 4px rgba(0,0,0,.08); }
#tree-view { flex:1; min-height:0; overflow:auto; position:relative; cursor:grab; background-color:#f8fafc; background-image:radial-gradient(#cbd5e1 1px,transparent 1px); background-size:22px 22px; }
#tree-view.dragging { cursor:grabbing; user-select:none; }
#sizer { position:relative; }
#canvas { position:absolute; left:0; top:0; transform-origin:0 0; padding:40px 120px 40px 40px; display:inline-block; }
#connections { position:absolute; left:0; top:0; pointer-events:none; }
#tree { position:relative; }
.branch { display:flex; align-items:center; gap:70px; }
.kids-col { display:flex; flex-direction:column; gap:12px; }
.root-node { display:flex; align-items:center; gap:14px; min-width:300px; padding:22px 24px; border-radius:14px; background:linear-gradient(135deg,var(--root-start),var(--root-mid) 55%,var(--root-end)); color:#fff; box-shadow:0 8px 20px rgba(96,43,23,.25); }
.root-logo { width:46px; height:46px; border-radius:10px; background:rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; font-size:22px; overflow:hidden; }
.root-logo img { width:28px; height:28px; display:block; object-fit:contain; }
.root-title { font-size:20px; font-weight:800; line-height:1.2; }
.root-sub { font-size:12px; opacity:.85; margin-top:4px; }
.cat-node { display:flex; align-items:center; gap:14px; width:350px; flex:none; padding:16px; background:#fff; border:2px solid; border-radius:14px; cursor:pointer; box-shadow:0 2px 8px rgba(15,23,42,.06); }
.cat-node:hover { box-shadow:0 4px 14px rgba(15,23,42,.14); }
.cat-badge { width:48px; height:48px; flex:none; border-radius:10px; color:#fff; font-weight:800; font-size:22px; display:flex; align-items:center; justify-content:center; }
.cat-text { flex:1; min-width:0; }
.cat-title { font-size:17px; font-weight:800; color:#0f172a; line-height:1.25; }
.cat-desc { font-size:12px; color:var(--muted); margin-top:4px; }
.cat-count { border:1px solid #e2e8f0; background:#f8fafc; border-radius:8px; padding:8px 10px; font-size:14px; font-weight:700; color:#1e293b; }
.card.mini { flex-direction:row; align-items:center; gap:10px; padding:8px 10px; }
.card.mini .icon { width:40px; height:40px; margin:0; flex:none; font-size:18px; }
.card.mini .name { font-size:13px; }
.card.mini .by { display:none; }
.card.mini .badges { margin-top:2px; gap:4px; }
.card.mini .badges img { width:14px; height:14px; }
#disclaimer { padding:16px 20px 24px; background:linear-gradient(90deg,var(--footer-1),var(--footer-2) 40%,var(--footer-3)); border-top:1px solid rgba(158,115,79,.5); color:#f1e7df; text-align:center; font-size:12px; line-height:1.5; }
#disclaimer .f-line { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; font-size:13px; color:#f5efe9; font-weight:600; }
#disclaimer .f-note { max-width:900px; margin:4px auto 0; font-size:11px; color:#f1e7df; }
#disclaimer a { color:#f8fafc; text-decoration:none; }
#disclaimer .f-note a { text-decoration:underline; text-underline-offset:3px; }
.card-body { display:flex; flex-direction:column; min-width:0; }
.card.big .card-body { align-items:flex-start; }
#controls { position:absolute; top:16px; right:28px; z-index:10; display:flex; flex-direction:column; width:46px; background:#fff; border:1px solid #e2e8f0; border-radius:10px; box-shadow:0 2px 8px rgba(0,0,0,.12); align-items:center; cursor:default; }
#controls button { border:0; background:none; width:100%; padding:10px 0; font-size:18px; color:#334155; }
#controls hr { width:70%; border:0; border-top:1px solid #e2e8f0; margin:0; }
#zoom-level { font-size:11px; font-weight:700; padding:8px 0; color:#334155; }
footer { flex:none; padding:8px 20px; }
#app.cards-view footer { padding:16px 20px 24px; }
footer p { display:none; }
#app.cards-view footer p { display:block; }


.cat-node.sub { width:300px; padding:10px 12px; border-radius:12px; }
.cat-node.sub .cat-badge { width:34px; height:34px; font-size:15px; }
.cat-node.sub .cat-title { font-size:14px; }
.cat-node.sub .cat-desc { font-size:11px; margin-top:2px; }
.card.mini { width:270px; }
.root-node { flex:none; }


/* about / faq / footer */
  #app.cards-view .about-cue { position:fixed; }
  .about-cue.hidden { display:none; }
  .about-cue { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:25; padding:6px 14px; border:1px solid #a5f3fc; border-radius:999px; background:rgba(255,255,255,.92); color:var(--accent); font-size:12.5px; font-weight:700; text-decoration:none; box-shadow:0 4px 10px rgba(15,23,42,.12); }
  .about-cue:hover { background:#ecfeff; }
  .about-cue:focus-visible { outline:3px solid #67e8f9; outline-offset:2px; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .seo-content { padding:48px 24px; background:#fff; border-top:1px solid #e2e8f0; }
  .seo-inner { max-width:900px; margin:0 auto; }
  .seo-content h2 { margin-bottom:12px; color:var(--ink); font-size:26px; font-weight:800; }
  .seo-content h3 { margin:28px 0 10px; color:var(--ink); font-size:19px; font-weight:700; }
  .seo-content p { margin:0 0 12px; color:#475569; font-size:15px; line-height:1.7; }
  .seo-content code { color:#164e63; background:#ecfeff; padding:2px 5px; border-radius:4px; }
  .seo-browse, .seo-faq details { border:1px solid #e2e8f0; border-radius:8px; margin:10px 0; }
  .seo-browse { border-color:#a5f3fc; background:#ecfeff; }
  .seo-browse summary, .seo-faq summary { padding:12px 16px; color:var(--ink); font-weight:700; cursor:pointer; }
  .seo-browse[open] { padding:0; background:#ecfeff; }
  .seo-browse[open] summary { border-bottom:1px solid #a5f3fc; background:#ecfeff; }
  .seo-browse-content { padding:1px 16px 16px; border-radius:0 0 7px 7px; background:#fff; }
  .seo-browse h3 { margin:20px 0 6px; font-size:16px; }
  .seo-browse p { margin-bottom:8px; font-size:14px; }
  .seo-browse ul { padding-left:20px; list-style:disc; }
  .seo-browse li { margin:6px 0; color:#475569; font-size:14px; line-height:1.6; }
  .seo-browse a, .seo-more-tools a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
  .seo-faq details { border-color:#a5f3fc; background:#ecfeff; }
  .seo-faq summary { background:#ecfeff; }
  .seo-faq details[open] { background:#ecfeff; }
  .seo-faq details[open] summary { border-bottom:1px solid #a5f3fc; }
  .seo-faq-content { padding:1px 16px 14px; border-radius:0 0 7px 7px; background:#fff; }
  .seo-faq details p { margin:0; }
  .seo-more-tools { margin-top:28px !important; }
  #disclaimer { padding:16px 20px 24px; background:linear-gradient(90deg,var(--footer-1),var(--footer-2) 40%,var(--footer-3)); border-top:1px solid rgba(158,115,79,.5); color:#f1e7df; text-align:center; font-size:12px; line-height:1.5; }
  #disclaimer .f-line { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; font-size:13px; color:#f5efe9; font-weight:600; }
  #disclaimer .f-note { max-width:900px; margin:4px auto 0; font-size:11px; color:#f1e7df; }
  #disclaimer a { color:#f8fafc; text-decoration:none; }
  #disclaimer .f-note a { text-decoration:underline; text-underline-offset:3px; }
  #disclaimer a:hover { color:#fff; }
footer#disclaimer { padding:16px 20px 24px; }
#app.cards-view footer#disclaimer { padding:16px 20px 24px; }
footer#disclaimer .f-note { display:block; }
.about-cue { position:absolute; }
#app.cards-view .about-cue { position:fixed; }

.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 30;
  width: 48px;
  height: 48px;
  border: 1px solid #0e7490;
  border-radius: 50%;
  background: #0f172a;
  color: #fff;
  box-shadow: 0 4px 14px rgba(15,23,42,.25);
  font-size: 25px;
  line-height: 1;
}
.back-to-top:hover { background: #0e7490; }
.back-to-top:focus-visible { outline: 3px solid #67e8f9; outline-offset: 3px; }

@media (max-width: 600px) {
  .back-to-top { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}
@media (max-width: 1250px) {
  .toolbar-main { flex-wrap:wrap; }
  .toolbar-right { flex:1 1 560px; }
}
@media (max-width: 1100px) {
  .toolbar-right { flex-basis:560px; }
  .toolbar-hint { font-size:13px; }
}
@media (max-width: 760px) {
  .header-main { padding:10px 14px; gap:8px; }
  .logo { width:44px; height:44px; border-radius:12px; font-size:20px; }
  h1 { font-size:18px; }
  .sub { font-size:14px; }
  .header-actions { align-items:flex-start; margin-left:0; }
  .toolbar-row { padding:8px 14px; }
  .toolbar-main { flex-wrap:wrap; gap:8px; }
  .toolbar-right { order:-1; flex:1 0 100%; gap:8px; }
  .search { flex:1 1 180px; min-width:0; }
  .search input { height:36px; font-size:14px; }
  .seg button { padding:5px 10px; font-size:12px; }
  .toolbar-left { flex-wrap:wrap; gap:6px; }
  .toolbar-left .btn { padding:7px 10px; font-size:13px; }
  .toolbar-hint { display:none; }
  .toolbar-secondary { align-items:flex-start; }
  .filters { flex:1 0 100%; }
  .chip { font-size:12px; }
  #status { margin-left:auto; }
}
@media (max-width:700px){ .seo-content { padding:32px 16px; } }

.pill { display:inline-flex; align-items:center; font-weight:700; color:#164e63; background:#cffafe; border-radius:999px; padding:2px 9px; font-size:11px; text-decoration:none; margin-left:8px; vertical-align:middle; }
a.pill:hover { filter:brightness(.95); text-decoration:underline; }
@media (max-width:600px){ .pill { font-size:10px; padding:2px 7px; margin-left:4px; } }