/* Shared article hub and ready-to-copy examples */
.content-hub .hero.compact { margin-bottom: 16px; }
.hub-search-panel { margin-block: 14px 22px; }
.hub-search-panel label { display:block; margin:0 0 9px; }
.hub-search-panel input[type=search] { display:block; width:100%; min-height:46px; padding:11px 14px; border:1px solid #98a5b6; border-radius:9px; color:#182636; background:#fff; font:inherit; }
.hub-search-panel input[type=search]:focus-visible, .hub-filter:focus-visible, .hub-card:focus-visible, .example-code button:focus-visible { outline: 3px solid #3979bd; outline-offset:2px; }
.hub-filters { display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 10px; }
.hub-filter { border:1px solid #b8c7d6; border-radius:999px; background:#f5f7fa; color:#2f4052; font:inherit; font-size:.87rem; padding:7px 12px; cursor:pointer; }
.hub-filter:hover {background:#e8eff6;}
.hub-filter.is-active { background:#26394e; color:#fff; border-color:#26394e; }
.hub-search-panel [data-hub-count]{margin:9px 0 0; font-size:.92rem; color:#48576c;}
.hub-search-panel [data-hub-empty]{padding:10px 0;}
.hub-group { margin:24px 0; }
.hub-group h2 { font-size:1.2rem; margin:0 0 14px; }
.hub-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px;}
.hub-card {display:flex; flex-direction:column; gap:8px; padding:16px; background:#fff; border:1px solid #d1dae3; border-radius:12px; color:#203346; text-decoration:none; min-height:140px;}
.hub-card:hover { border-color:#5f829e; background:#f9fbfd; text-decoration:none; }
.hub-card b { font-size:1rem; line-height:1.4; }
.hub-card span { color:#4c596b; line-height:1.65; font-size:.9rem; }
.hub-card small { margin-top:auto; color:#285f92; font-size:.86rem; font-weight:600; }
.hub-shortcuts {display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:10px;margin:12px 0 0;}
.hub-shortcuts a{display:flex; flex-direction:column;gap:5px;padding:12px;border:1px solid #cbd5e1;border-radius:9px;text-decoration:none;color:#22486a;background:#f7f9fb;}
.hub-shortcuts a span{font-size:.85rem;color:#4e6274;}
.example-detail .example-version {padding:8px 13px;border-left:3px solid #5d809a;background:#f2f5f8;}
.example-code {margin:15px 0 20px;}
.example-code h3 {font-size:1rem;margin:0 0 9px;}
.example-code-line {display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;}
.example-code-line code{min-width:0;flex:1;overflow-wrap:anywhere;white-space:pre-wrap;word-break:break-word;background:#142231;color:#ecf4fa;padding:12px;border-radius:8px;line-height:1.7;font-size:.89rem;}
.example-code-line button{background:#284969;color:white;border:0;border-radius:7px;padding:9px 13px;cursor:pointer;align-self:stretch;white-space:nowrap;font-size:.85rem;}
.example-code-line button:hover{background:#153850;}
[hidden] {display:none !important;}
@media(max-width:560px){.hub-grid{grid-template-columns:1fr}.example-code-line{flex-direction:column;align-items:stretch}.example-code-line button{min-height:42px}.hub-card{min-height:0}}
/* Match the existing dark site palette and keep all secondary text readable. */
.hub-search-panel input[type=search]{background:#101722;color:#eff6ff;border-color:#55677b;}
.hub-search-panel input[type=search]::placeholder{color:#aebbd0;opacity:1;}
.hub-filter{background:#202938;border-color:#536376;color:#ecf2f9;}
.hub-filter:hover{background:#2c3949;}
.hub-filter.is-active{background:#154a3b;color:#eafff5;border-color:#42ab86;}
.hub-search-panel [data-hub-count]{color:#d3dfed;}
.hub-search-panel [data-hub-empty]{color:#f2cf91;}
.hub-card{background:#1d2633;border-color:#36485b;color:#eff4fa;}
.hub-card:hover{background:#233142;border-color:#6ee7b7;}
.hub-card b{color:#f5f9ff;}
.hub-card span{color:#c0ccdc;}
.hub-card small{color:#9dedcc;}
.hub-shortcuts a{background:#1e2937;border-color:#45586c;color:#d9f8e9;}
.hub-shortcuts a span{color:#c0ccdb;}
.example-detail .example-version{color:#e2efff;background:#172637;border-color:#6ee7b7;}
.example-code-line code{background:#0c121b;color:#e9f4ff;border:1px solid #435263;}
.example-code-line button{background:#245943;color:#f7fff9;border:1px solid #60a988;}
.example-code-line button:hover{background:#2d7154;}