.sources-page {
  --source-bg: #f6f7fb;
  --source-surface: #fff;
  --source-hover: #fcfbff;
  --source-ink: #242532;
  --source-muted: #656a78;
  --source-line: #e6e7ee;
  --source-accent: #6957bc;
  --source-tint: #efecfb;
  --source-hero: #eeedf8;
  background: var(--source-bg);
  color: var(--source-ink);
}
html[data-resolved-theme="dark"] .sources-page {
  --source-bg: #111217;
  --source-surface: #1b1c24;
  --source-hover: #22222e;
  --source-ink: #f0eff8;
  --source-muted: #a3a3b5;
  --source-line: #30313e;
  --source-accent: #bdb0ff;
  --source-tint: #302a47;
  --source-hero: #232231;
}
.source-wrap { width: min(1100px, calc(100% - 80px)); margin-inline: auto; }
.sources-page em, .source-sidebar-note strong { font: inherit; }
.source-breadcrumbs { display: flex; align-items: center; gap: 12px; margin: 25px 0; color: var(--source-muted); font-size: 12px; }
.source-breadcrumbs a:hover { color: var(--source-accent); }
.source-hero { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 30px; min-height: 286px; padding: 33px 39px; border: 1px solid color-mix(in srgb, var(--source-line) 40%, transparent); border-radius: 24px; background: var(--source-hero); }
.source-hero h1 { display: block; margin: 0; font-size: clamp(32px, 3.5vw, 43px); font-weight: 600; letter-spacing: -.05em; line-height: 1.3; }
.source-hero-copy > p { margin-top: 15px; color: var(--source-muted); font-size: 13px; line-height: 1.9; }
.source-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 23px; color: var(--source-muted); font-size: 11px; }
.source-summary > span, .source-summary a { display: inline-flex; align-items: center; gap: 6px; }
.source-summary svg { width: 14px; height: 14px; }
.source-summary a { color: var(--source-accent); }
.source-hero-visual { width: min(100%, 359px); justify-self: center; padding: 10px 0 0; }
.preview-query { display: flex; align-items: center; gap: 12px; width: 90%; height: 54px; margin: 0 auto; padding: 0 19px; border: 1px solid var(--source-line); border-radius: 13px; color: var(--source-muted); background: var(--source-surface); box-shadow: 0 10px 25px #3d325709; font-size: 13px; }
.preview-query svg { width: 18px; height: 18px; color: var(--source-accent); }
.query-cursor { width: 1px; height: 17px; background: var(--source-accent); margin-left: auto; opacity: .55; }
.query-branch { position: relative; display: flex; justify-content: space-between; width: 66%; height: 36px; margin: 0 auto; }
.query-branch::before { content: ''; position: absolute; top: 0; left: 50%; width: 1px; height: 19px; background: color-mix(in srgb, var(--source-accent) 30%, transparent); }
.query-branch::after { content: ''; position: absolute; inset: 18px 0 0; border: solid color-mix(in srgb, var(--source-accent) 30%, transparent); border-width: 1px 1px 0; border-radius: 10px 10px 0 0; }
.query-branch span:nth-child(2) { position: absolute; left: 50%; top: 19px; height: 17px; border-left: 1px solid color-mix(in srgb, var(--source-accent) 30%, transparent); }
.preview-platforms { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.preview-platforms > div { display: grid; justify-items: center; align-content: center; gap: 9px; min-height: 88px; border: 1px solid var(--source-line); border-radius: 13px; color: var(--source-ink); background: var(--source-surface); font-size: 11px; }
.preview-platforms img { border-radius: 6px; background: #fff; }
.preview-caption { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 17px; color: var(--source-muted); font-size: 10px; }
.preview-caption span { width: 5px; height: 5px; border-radius: 50%; background: #9e8bd4; }
.catalog-toolbar { display: flex; align-items: center; gap: 13px; margin: 29px 0 24px; scroll-margin-top: 25px; }
.filter-wrap { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; height: 51px; padding: 0 16px; border: 1px solid var(--source-line); border-radius: 12px; background: var(--source-surface); transition: border-color .18s, box-shadow .18s; }
.filter-wrap:focus-within { border-color: var(--source-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--source-accent) 12%, transparent); }
.filter-wrap > svg { width: 19px; height: 19px; flex-shrink: 0; color: var(--source-muted); }
.filter-wrap input { width: 100%; min-width: 0; padding: 0; border: 0; outline: 0; color: var(--source-ink); background: transparent; font: inherit; font-size: 13px; }
.filter-wrap input::placeholder { color: var(--source-muted); }
.filter-wrap kbd { display: grid; place-items: center; flex-shrink: 0; width: 23px; height: 24px; border: 1px solid var(--source-line); border-radius: 5px; color: var(--source-muted); font: inherit; font-size: 11px; }
.bulk-copy { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; min-width: 130px; min-height: 51px; padding: 0 19px; border: 0; border-radius: 12px; color: #fff; background: #6957bc; font-size: 13px; font-weight: 550; transition: background .18s; white-space: nowrap; }
.bulk-copy svg { width: 18px; height: 18px; }
.bulk-copy:hover { background: #5946ae; }
.bulk-copy:disabled { opacity: .45; cursor: not-allowed; }
html[data-resolved-theme="dark"] .bulk-copy { background: #c7bbf5; color: #262336; }
.source-workspace { display: grid; grid-template-columns: 167px minmax(0, 1fr); align-items: start; gap: 29px; }
.source-sidebar { position: sticky; top: 24px; padding-top: 4px; }
.source-sidebar nav { display: grid; gap: 4px; }
.source-category-link { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 11px; border-radius: 10px; color: var(--source-muted); font-size: 12px; white-space: nowrap; transition: color .18s, background .18s; }
.source-category-link svg { width: 17px; height: 17px; flex-shrink: 0; }
.source-category-link.is-active { color: var(--source-accent); background: var(--source-tint); font-weight: 600; }
.source-category-link:hover { background: color-mix(in srgb, var(--source-line) 35%, transparent); }
.source-nav-count { margin-left: auto; color: var(--source-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.source-sidebar-note { display: block; margin: 27px 11px; padding-top: 20px; border-top: 1px solid var(--source-line); color: var(--source-muted); font-size: 11px; line-height: 1.8; }
.source-sidebar-note span { display: flex; align-items: center; gap: 5px; margin-top: 5px; color: var(--source-accent); }
.source-sidebar-note svg { width: 15px; height: 15px; }
.source-results { min-width: 0; }
.catalog-meta { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 0 0 13px; color: var(--source-muted); font-size: 11px; }
.catalog-meta > span { font-size: 10px; }
.config-panel { margin: 0 0 26px; border-block: 1px solid var(--source-line); }
.config-panel summary { display: flex; align-items: center; gap: 7px; padding: 11px 0; list-style: none; cursor: pointer; color: var(--source-muted); font-size: 11px; }
.config-panel summary::-webkit-details-marker { display: none; }
.config-panel summary svg { width: 15px; height: 15px; }
.config-panel summary svg:last-child { margin-left: auto; transition: transform .18s; }
.config-panel[open] summary svg:last-child { transform: rotate(180deg); }
.config-panel > div { padding: 4px 0 15px; }
.config-panel p { margin-bottom: 10px; color: var(--source-muted); font-size: 11px; }
.config-panel pre { max-height: 230px; margin: 0; padding: 17px; overflow: auto; border: 1px solid var(--source-line); border-radius: 10px; color: var(--source-ink); background: var(--source-surface); font: 11px/1.8 ui-monospace, SFMono-Regular, Menlo, monospace; }
.source-category { margin-bottom: 29px; scroll-margin-top: 25px; }
.category-head { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.category-head h2 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.02em; }
.category-head h2 > svg { width: 20px; height: 20px; color: var(--source-accent); }
.category-count { padding: 1px 6px; border: 1px solid var(--source-line); border-radius: 5px; color: var(--source-muted); font-size: 10px; font-weight: 400; line-height: 1.6; }
.category-desc { margin-top: 4px; color: var(--source-muted); font-size: 11px; line-height: 1.8; }
.category-copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 65px; min-height: 34px; padding: 5px 10px; border: 1px solid var(--source-line); border-radius: 8px; color: var(--source-muted); background: var(--source-surface); font-size: 11px; white-space: nowrap; }
.category-copy svg { width: 14px; height: 14px; }
.category-copy:hover { color: var(--source-accent); border-color: var(--source-accent); }
.source-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 12px; }
.source-card { position: relative; isolation: isolate; display: flex; align-items: center; min-width: 0; overflow: hidden; padding: 3px 5px 3px 7px; gap: 4px; border: 1px solid var(--source-line); border-radius: 8px; background: transparent; transition: background .15s, border-color .15s; }
.source-card:hover, .source-card:focus-within { border-color: color-mix(in srgb, var(--source-accent) 45%, var(--source-line)); background: var(--source-tint); }
.source-card:focus-within { outline: 2px solid var(--source-accent); outline-offset: 1px; }
.sources-page .source-card-link:focus-visible { outline: none; }
.source-card-link { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; min-height: 36px; }
.source-avatar { position: relative; display: grid; place-items: center; flex-shrink: 0; width: 24px; height: 24px; border: 1px solid var(--source-line); border-radius: 6px; color: #7464b0; background: #efecf8; font-size: 11px; font-weight: 600; letter-spacing: -.5px; }
.source-category[data-category="general"] .source-avatar, .source-category[data-category="developer"] .source-avatar { background: #ebeffb; color: #607ab1; }
.source-category[data-category="social"] .source-avatar, .source-category[data-category="shopping"] .source-avatar { background: #f9edf2; color: #ac708d; }
.source-category[data-category="ai"] .source-avatar, .source-category[data-category="comic"] .source-avatar { background: #eeebfa; color: #8668bf; }
.source-category[data-category="academic"] .source-avatar, .source-category[data-category="book"] .source-avatar { background: #e8f1f7; color: #57849e; }
html[data-resolved-theme="dark"] .source-category .source-avatar:not(.has-icon) { background: #333044; color: #c4b8f6; }
.sources-page .source-avatar.has-icon { isolation: isolate; border-color: transparent; background: transparent; }
.source-avatar.has-icon::before, .source-avatar.has-icon::after { content: ""; position: absolute; pointer-events: none; }
.source-avatar.has-icon::before { z-index: -2; inset: -5px; border-radius: 50%; background: var(--site-logo) center / cover no-repeat; filter: blur(6px); opacity: 0; transform: scale(3); transition: transform .28s ease, opacity .28s ease; }
.source-avatar.has-icon::after { z-index: -1; inset: -1px; border: 1px solid var(--source-line); border-radius: inherit; background: #fff; }
.source-card:hover .source-avatar.has-icon::before, .source-card:focus-within .source-avatar.has-icon::before { opacity: .3; transform: scale(1); }
.source-avatar.has-icon .source-fallback { display: none; }
.source-avatar img { display: block; width: 18px; height: 18px; object-fit: contain; border-radius: 4px; }
.source-info { min-width: 0; }
.source-name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--source-ink); font-size: 14px; font-weight: 500; line-height: 1.5; transition: color .15s; }
.source-card-link:hover .source-name, .source-card-link:focus-visible .source-name { color: var(--source-accent); }
.source-domain { display: none; }
.source-copy { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; color: var(--source-muted); background: transparent; opacity: .6; transition: color .15s, background .15s, opacity .15s; }
.source-copy svg { width: 13px; height: 13px; }
.source-card:hover .source-copy, .source-card:focus-within .source-copy { opacity: 1; }
.source-copy:hover, [data-copy-state="copied"] { color: var(--source-accent); background: var(--source-surface); opacity: 1; }
.sources-page .source-copy:focus-visible { outline-offset: 0; }
.bulk-copy[data-copy-state="copied"] { color: #fff; background: #5946ae; }
.source-empty { padding: 60px 15px 80px; text-align: center; }
.source-empty > div { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 19px; border-radius: 17px; color: var(--source-accent); background: var(--source-tint); }
.source-empty svg { width: 23px; height: 23px; }
.source-empty h2 { font-size: 19px; font-weight: 600; }
.source-empty p { margin-top: 10px; color: var(--source-muted); font-size: 12px; }
.source-empty button { margin-top: 22px; padding: 10px 18px; border: 1px solid var(--source-line); border-radius: 10px; color: var(--source-ink); background: var(--source-surface); font-size: 12px; }
.source-guide { display: grid; grid-template-columns: 220px 1fr; gap: 34px; align-items: start; padding: 30px 0; margin-top: 20px; border-block: 1px solid var(--source-line); scroll-margin-top: 24px; }
.guide-intro h2 { font-size: 23px; font-weight: 550; letter-spacing: -.03em; }
.guide-intro p { margin-top: 10px; color: var(--source-muted); font-size: 12px; line-height: 1.9; }
.source-guide ol { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 25px; margin: 0; padding: 0; list-style: none; }
.source-guide li { display: flex; align-items: flex-start; gap: 10px; }
.source-guide li > span { display: grid; place-items: center; width: 25px; height: 25px; flex-shrink: 0; border: 1px solid var(--source-line); border-radius: 8px; color: var(--source-accent); font-size: 12px; }
.source-guide h3 { font-size: 13px; font-weight: 600; }
.source-guide li p { margin-top: 9px; color: var(--source-muted); font-size: 11px; line-height: 1.85; }
.source-footnote { margin-block: 19px 5px; color: var(--source-muted); font-size: 10px; line-height: 1.9; }
.source-toast { position: fixed; bottom: 26px; left: 50%; z-index: 20; max-width: calc(100% - 32px); padding: 12px 18px; border: 1px solid var(--source-line); border-radius: 12px; color: var(--source-ink); background: var(--source-surface); box-shadow: 0 8px 30px #15112915; font-size: 12px; opacity: 0; pointer-events: none; transform: translate(-50%, 20px); transition: opacity .2s, transform .2s; }
.source-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.sources-page button:focus-visible, .sources-page summary:focus-visible, .sources-page pre:focus-visible { outline: 2px solid var(--source-accent); outline-offset: 4px; }
@media (max-width: 1100px) {
  .source-workspace { gap: 23px; grid-template-columns: 157px minmax(0,1fr); }
  .source-hero { padding-inline: 30px; }
  .source-guide { grid-template-columns: 1fr; gap: 25px; }
  .guide-intro p br { display: none; }
}
@media (max-width: 1000px) {
  .source-wrap { width: calc(100% - 64px); }
}
@media (max-width: 740px) {
  .source-wrap { width: calc(100% - 36px); }
  .source-breadcrumbs { margin-block: 19px; font-size: 11px; }
  .source-hero { grid-template-columns: 1fr; min-height: 0; padding: 26px; border-radius: 20px; }
  .source-hero h1 { font-size: 31px; }
  .source-hero-copy > p { font-size: 12px; margin-top: 12px; }
  .source-summary { gap: 14px; margin-top: 20px; font-size: 10px; }
  .source-hero-visual { display: none; }
  .catalog-toolbar { gap: 10px; margin-block: 22px 20px; }
  .filter-wrap { height: 48px; padding-inline: 13px; gap: 9px; }
  .filter-wrap input { font-size: 12px; }
  .filter-wrap kbd { display: none; }
  .bulk-copy { min-width: 0; min-height: 48px; padding-inline: 13px; font-size: 12px; gap: 7px; }
  .bulk-copy svg { width: 16px; height: 16px; }
  .source-workspace { display: block; }
  .source-sidebar { z-index: 6; top: 0; margin: 0 -18px 19px; padding: 10px 0; border-block: 1px solid var(--source-line); background: var(--source-bg); }
  .source-sidebar nav { display: flex; gap: 5px; padding-inline: 18px; overflow: auto; scrollbar-width: none; }
  .source-sidebar nav::-webkit-scrollbar { display: none; }
  .source-category-link { gap: 7px; min-height: 36px; padding: 8px 11px; font-size: 11px; }
  .source-category-link svg { width: 14px; height: 14px; }
  .source-nav-count { font-size: 9px; }
  .source-sidebar-note { display: none; }
  .catalog-meta { margin-bottom: 12px; font-size: 10px; }
  .catalog-meta > span { font-size: 9px; }
  .config-panel { margin-bottom: 22px; }
  .category-head { gap: 10px; }
  .category-head h2 { font-size: 17px; }
  .category-desc { font-size: 10px; }
  .category-copy { min-width: 62px; }
  .source-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 136px), 1fr)); column-gap: 8px; }
  .source-guide ol { grid-template-columns: 1fr; gap: 20px; }
  .source-guide li p { margin-top: 5px; font-size: 12px; }
  .source-guide h3 { font-size: 14px; }
}
@media (max-width: 420px) {
  .source-wrap { width: calc(100% - 20px); }
  .source-sidebar { margin-inline: -10px; }
  .source-sidebar nav { padding-inline: 10px; }
}
@media (max-width: 360px) {
  .source-hero { padding: 23px 21px; }
  .source-hero h1 { font-size: 28px; }
  .source-summary { gap: 11px; }
}