/* V300: public tutorial catalogue only; shared cards and article pages remain unchanged. */
.tutorial-hub__logo{text-align:center;padding:20px 12px}.tutorial-hub__logo img{max-width:100%;height:auto}
.tutorial-hub{color:var(--color-text);min-width:0}.tutorial-hub a,.tutorial-hub button{cursor:pointer}
.tutorial-hub__intro{margin-bottom:24px}
.tutorial-hub__intro p{line-height:1.8;color:var(--color-text-muted);margin-bottom:16px}
.tutorial-hub__types{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:20px}.tutorial-hub .page-btn{margin:0;font:inherit;min-height:42px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.tutorial-hub .page-btn:focus-visible,.tutorial-hub a:focus-visible,.tutorial-hub input:focus-visible,.tutorial-hub select:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px}
.tutorial-hub__filters{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:12px;max-width:1100px;margin-inline:auto}.tutorial-hub__filters label{display:grid;gap:6px;flex:0 1 180px;min-width:0}.tutorial-hub__filters .tutorial-hub__search{flex:1 1 320px;max-width:520px;min-width:0;position:relative}
.tutorial-hub input,.tutorial-hub select{font:inherit;color:var(--color-text);background:var(--color-card);border:1px solid var(--color-border);border-radius:7px;padding:9px 12px;min-width:0;max-width:100%;height:44px}
.tutorial-hub__filters .page-btn{min-height:44px}.tutorial-hub__reset{padding:10px 0;white-space:nowrap}
.tutorial-hub .tutorial-hub__grid{grid-template-columns:minmax(160px,15fr) minmax(0,50fr) minmax(240px,35fr);gap:20px;padding:0 10px;align-items:start}
.tutorial-hub__grid>*{min-width:0}.tutorial-hub__category-box{border:1px solid var(--color-border);border-radius:12px;background:var(--color-card);padding:16px}
.tutorial-hub__category-box h2{font-size:1.1rem;margin:0 0 10px}.tutorial-hub .use_categories{list-style:none;margin:0;padding:0}.tutorial-hub .use_categories li{border-bottom:1px solid var(--color-border)}
.tutorial-hub .use_categories a{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 0;overflow-wrap:anywhere;color:var(--color-text)}.tutorial-hub .use_categories small{flex:none;color:var(--color-text-muted)}
.tutorial-hub .use_categories a[aria-current=page]{font-weight:700;color:var(--color-primary)}
.tutorial-hub__count{color:var(--color-text-muted);margin:0 0 14px}.tutorial-hub__card .card-body{gap:12px}.tutorial-hub__card h3{overflow-wrap:anywhere}.tutorial-hub .tutorial-hub__card h3 a{color:var(--color-text)}
.tutorial-hub__meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.tutorial-hub__badge{display:inline-flex;align-items:center;gap:6px;border:1px solid #a9c9e5;background:#eaf4ff;color:#245b87;border-radius:6px;padding:4px 8px;font-size:.9rem}
.tutorial-hub__badge--external{background:#fff1df;color:#814914;border-color:#dfb989}.tutorial-hub__manage{color:var(--color-text-muted)}
.tutorial-hub__summary{white-space:pre-line;overflow-wrap:anywhere;line-height:1.8;margin:0}.tutorial-hub__source,.tutorial-hub__related{font-size:.95rem;line-height:1.8;overflow-wrap:anywhere;color:var(--color-text-muted)}
.tutorial-hub__footer{border-top:1px solid var(--color-border);padding-top:12px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;font-size:.9rem;color:var(--color-text-muted)}
.tutorial-hub__pagination{display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;margin-top:24px}.tutorial-hub__jump{display:flex;align-items:center;gap:8px}.tutorial-hub__jump input{width:80px}
.tutorial-hub__empty{padding:24px;background:var(--color-card);border:1px solid var(--color-border);border-radius:12px;line-height:1.8}
.tutorial-hub__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}
body.dark .tutorial-hub__badge{background:#183b56;color:#b5daf5;border-color:#547a98}body.dark .tutorial-hub__badge--external{background:#523917;color:#f5d498;border-color:#ab8454}
@media(max-width:1024px){.tutorial-hub .tutorial-hub__grid{grid-template-columns:minmax(0,1fr);padding:0;gap:20px}.tutorial-hub__categories{display:none}.tutorial-hub__intro{padding:16px}.tutorial-hub__filters label,.tutorial-hub__filters .tutorial-hub__search{flex-basis:100%}.tutorial-hub .layout__aside{width:100%}}

/* V302: search preview only. */
.tutorial-hub__search label{display:grid;gap:6px}.tutorial-hub__search input{width:100%}
.tutorial-hub__preview[hidden]{display:none!important}.tutorial-hub__preview{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;border:1px solid var(--color-border);border-radius:9px;background:var(--color-card);color:var(--color-text);box-shadow:0 8px 22px #0002;padding:12px;max-height:65vh;overflow-y:auto;overflow-wrap:anywhere}
.tutorial-hub .tutorial-hub__preview-status{font-size:.9rem;margin:0 0 8px;line-height:1.6}.tutorial-hub__preview-list{list-style:none;margin:0;padding:0}.tutorial-hub__preview-list li+li{border-top:1px solid var(--color-border)}
.tutorial-hub__preview-list a{display:block;padding:10px 6px;line-height:1.6;color:var(--color-text);border-radius:4px}.tutorial-hub__preview-list a:hover,.tutorial-hub__preview-list a:focus-visible{background:var(--color-hover,#eef4fa)}
.tutorial-hub__preview-list small{display:block;color:var(--color-text-muted);font-size:.85rem}.tutorial-hub__preview-all{display:block;margin-top:8px;padding:8px 6px;border-top:1px solid var(--color-border)}
.tutorial-hub .tutorial-hub__search-help{font-size:.9rem;line-height:1.7;max-width:1100px;margin:12px auto 0;color:var(--color-text-muted)}
body.dark .tutorial-hub__preview{box-shadow:0 8px 22px #0007}body.dark .tutorial-hub__preview-list a:hover,body.dark .tutorial-hub__preview-list a:focus-visible{background:#20374b}

/* V303: preserve full-width stacked fields on small screens. */
@media(max-width:1024px){.tutorial-hub__filters .tutorial-hub__search{max-width:none}}

/* V316：僅此教學列表的手動廣告版位，其他卡片/頁面不變。 */
#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad{box-sizing:border-box;min-width:0;width:100%;margin:30px 0;padding:14px 0;background:var(--color-card,#fff);border-top:1px solid var(--color-border,#d4e0e9);border-bottom:1px solid var(--color-border,#d4e0e9);text-align:center}
#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad-content{width:100%;min-width:0;min-height:250px}
#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad .adsbygoogle{display:block;width:100%}
#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad--aside{margin-top:0;margin-bottom:28px}
#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad[hidden]{display:none!important}
@media(max-width:1024px){#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad--aside{display:none!important}#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad--inline{margin:28px 0}}

/* V318：空白收合樣式由ad_manager.css集中提供。 */

/* V320：桌面整個側欄對齊首張卡片；廣告收起後由推薦卡片接續。 */
@media(min-width:1025px){
 #tutorial-hub[data-tutorial-ads="318"] .layout__aside{display:flow-root;padding-top:var(--tutorial-side-offset,0px)}
 #tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad--aside{margin-top:0}
}
#tutorial-hub[data-tutorial-ads="318"] .tutorial-hub__ad[data-sk-ad-filled="true"]>.tutorial-hub__ad-content{min-height:0}

/* V320：僅教學列表搜尋區；維持置中寬度及手機排列。 */
#tutorial-hub .tutorial-hub__search label>span{font-weight:700;color:var(--color-text)}
#tutorial-hub .tutorial-hub__search label>span i{color:var(--color-primary,#2474b5);margin-right:4px}
#tutorial-hub #tutorial-search-input{border-color:#729ab9;border-width:2px}
#tutorial-hub #tutorial-search-input:focus{border-color:var(--color-primary,#2474b5)}
#tutorial-hub .tutorial-hub__filters>.page-btn[type="submit"]{background:#176bb0;border:1px solid #176bb0;color:#fff;font-weight:600}
#tutorial-hub .tutorial-hub__filters>.page-btn[type="submit"]:hover{background:#12598f;border-color:#12598f}
#tutorial-hub .tutorial-hub__search-help>span{display:block}
body.dark #tutorial-hub #tutorial-search-input{border-color:#80b5dc}
body.dark #tutorial-hub .tutorial-hub__filters>.page-btn[type="submit"]{background:#205f92;border-color:#80b5dc;color:#fff}
