@layer components {
  .sitemap-page .sitemap-panel{
    max-width:940px;
    margin-inline:auto;
  }

  .sitemap-page-head{
    margin:0 0 14px;
  }

  .sitemap-page-head h1{
    margin:0;
  }

  .sitemap-page-subtitle{
    margin:8px 0 0;
    color:color-mix(in srgb,var(--text-muted) 88%, #ffffff 12%);
  }

  .sitemap-card{
    border-radius:16px;
    padding:clamp(16px, 2.4vw, 24px);
    background:color-mix(in srgb,var(--surface) 95%, #000 5%);
    border:1px solid color-mix(in srgb,var(--primary) 18%, transparent);
    box-shadow:0 16px 36px rgba(0,0,0,.2);
  }

  .sitemap-intro{
    margin-bottom:14px;
    padding-bottom:14px;
    border-bottom:1px solid color-mix(in srgb,var(--primary) 14%, transparent);
  }

  .sitemap-kicker{
    margin:0;
    font-size:.76rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:color-mix(in srgb,var(--text-muted) 88%, #ffffff 12%);
  }

  .sitemap-lead{
    margin:8px 0 0;
    line-height:1.5;
    color:color-mix(in srgb,var(--text-light) 94%, #ffffff 6%);
  }

  .sitemap-chip-row{
    margin-top:10px;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .sitemap-chip{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:0 11px;
    border-radius:999px;
    border:1px solid color-mix(in srgb,var(--primary) 24%, transparent);
    background:color-mix(in srgb,var(--surface) 90%, #000 10%);
    color:color-mix(in srgb,var(--text-light) 92%, #ffffff 8%);
    text-decoration:none;
    font-size:.88rem;
    transition:border-color .15s ease, background .15s ease;
  }

  .sitemap-chip:hover,
  .sitemap-chip:focus-visible{
    outline:none;
    border-color:color-mix(in srgb,var(--primary) 44%, transparent);
    background:color-mix(in srgb,var(--surface) 76%, #000 24%);
  }

  .sitemap-filter{
    display:flex;
    gap:10px;
    align-items:stretch;
  }

  .sitemap-filter-input{
    flex:1;
    min-height:44px;
    padding:11px 14px;
    border-radius:12px;
    border:1px solid color-mix(in srgb,var(--primary) 26%, transparent);
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    color:color-mix(in srgb,var(--text-light) 95%, #ffffff 5%);
    font-size:.98rem;
  }
  .sitemap-filter-input::placeholder{
    color:color-mix(in srgb,var(--text-muted) 78%, #ffffff 22%);
  }
  .sitemap-filter-input:focus{
    outline:none;
    border-color:color-mix(in srgb,var(--primary) 44%, transparent);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 18%, transparent);
  }

  .sitemap-meta{
    margin-top:12px;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:12px;
    color:color-mix(in srgb,var(--text-muted) 86%, #ffffff 14%);
  }
  .sitemap-meta p{
    margin:0;
  }

  .sitemap-counts strong{
    font-size:1.06em;
    color:color-mix(in srgb,var(--text-light) 97%, #ffffff 3%);
  }

  .sitemap-generated{
    font-variant-numeric:tabular-nums;
  }

  .sitemap-status{
    margin:10px 0 0;
    min-height:1.2em;
    color:color-mix(in srgb,var(--text-muted) 86%, #ffffff 14%);
    font-size:.92rem;
  }

  .sitemap-sections{
    margin-top:18px;
    display:grid;
    gap:18px;
    grid-template-columns:1fr;
  }

  .sitemap-section{
    border:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
    border-radius:14px;
    background:color-mix(in srgb,var(--surface) 96%, #000 4%);
    padding:14px 14px 10px;
    min-height:100%;
  }

  .sitemap-section-head{
    padding-bottom:10px;
    border-bottom:1px solid color-mix(in srgb,var(--primary) 16%, transparent);
  }

  .sitemap-section-title-row{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
  }

  .sitemap-section-title{
    margin:0;
    font-size:1.14rem;
    letter-spacing:.01em;
    color:color-mix(in srgb,var(--text-light) 95%, #ffffff 5%);
  }

  .sitemap-section-count{
    flex:0 0 auto;
    font-size:.9rem;
    color:color-mix(in srgb,var(--text-muted) 86%, #ffffff 14%);
  }

  .sitemap-section-subtitle{
    margin:6px 0 0;
    font-size:.94rem;
    color:color-mix(in srgb,var(--text-muted) 86%, #ffffff 14%);
  }

  .sitemap-items{
    margin:12px 0 0;
    padding:0;
    list-style:none;
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:10px 12px;
  }

  .sitemap-item{
    margin:0;
    color:color-mix(in srgb,var(--text-light) 93%, #ffffff 7%);
  }

  .sitemap-item-title{
    display:block;
    padding:10px 12px;
    border:1px solid color-mix(in srgb,var(--primary) 15%, transparent);
    border-radius:10px;
    background:color-mix(in srgb,var(--surface) 92%, #000 8%);
    font-weight:620;
    color:color-mix(in srgb,var(--text-light) 97%, #ffffff 3%);
    text-decoration:none;
    line-height:1.25;
    transition:border-color .15s ease, background .15s ease;
  }
  .sitemap-item-title:hover,
  .sitemap-item-title:focus-visible{
    outline:none;
    border-color:color-mix(in srgb,var(--primary) 36%, transparent);
    background:color-mix(in srgb,var(--surface) 86%, #000 14%);
    text-decoration:underline;
    text-underline-offset:3px;
    text-decoration-thickness:2px;
  }

  .sitemap-loading,
  .sitemap-empty{
    padding:14px;
    border-radius:12px;
    border:1px solid color-mix(in srgb,var(--primary) 14%, transparent);
    background:color-mix(in srgb,var(--surface) 96%, #000 4%);
    color:color-mix(in srgb,var(--text-muted) 92%, #ffffff 8%);
  }

  @media (max-width: 768px){
    .sitemap-filter{ flex-direction:column; }
    .sitemap-meta{ flex-direction:column; align-items:flex-start; }
    .sitemap-section-title-row{ flex-direction:column; align-items:flex-start; gap:4px; }
    .sitemap-items{ grid-template-columns:1fr; }
  }
}