:root {
    --lr-ink: #17324d;
    --lr-muted: #64748b;
    --lr-line: #dbe5ef;
    --lr-surface: #f4f8fb;
    --lr-accent: #0d9488;
}

.learning-resource-hero { position: relative; width: 100%; height: 70vh; min-height: 500px; overflow: hidden; border-radius: 0 0 24px 24px; background: #17324d; box-shadow: 0 8px 32px rgba(0,0,0,.12); }
.learning-resource-hero__inner { position: relative; width: 100%; height: 100%; }
#learningResourceMap { width: 100%; height: 100%; }
.learning-resource-map-stats { width: max-content; max-width: calc(100% - 24px); }
.learning-resource-reset { border: 0; font-family: inherit; cursor: pointer; }
.learning-resource-map-status { position: absolute; z-index: 3; inset: 50% auto auto 50%; transform: translate(-50%,-50%); padding: 13px 20px; border-radius: 12px; background: rgba(255,255,255,.95); color: var(--lr-ink); box-shadow: 0 8px 24px rgba(15,23,42,.25); }
.learning-resource-filter-panel { background: #fff; }
/* 公開頁暫時只顯示地圖與篩選；保留清單 DOM 供日後恢復。 */
.learning-resource-content { display: none !important; }
.learning-resource-filter { margin: 0; }
.learning-resource-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; padding: 2rem 0; }
.learning-resource-chip { display: inline-flex; gap: .5rem; align-items: center; padding: .5rem 1.2rem; border: 2px solid #e2e8f0; border-radius: 50px; color: #475569; background: #fff; cursor: pointer; font-size: 1.6rem; font-weight: 600; transition: color .2s, border-color .2s, background .2s, transform .2s; }
.learning-resource-chip:hover { border-color: var(--chip-color, #667eea); color: var(--chip-color, #667eea); transform: translateY(-1px); }
.learning-resource-chip[aria-pressed="true"] { border-color: transparent; color: #fff; background: var(--chip-color, linear-gradient(135deg, #667eea, #764ba2)); box-shadow: 0 4px 12px rgba(99,102,241,.2); }
.learning-resource-chip__dot { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 999px; background: var(--chip-color, var(--lr-accent)); box-shadow: 0 0 0 2px rgba(255,255,255,.65); }
.learning-resource-content { padding: 40px 0 80px; background: var(--lr-surface); }
.learning-resource-search { position: relative; max-width: 680px; margin: 0 auto 30px; }
.learning-resource-search i { position: absolute; top: 50%; left: 18px; transform: translateY(-50%); color: var(--lr-muted); }
.learning-resource-search input { width: 100%; height: 50px; padding: 0 18px 0 48px; border: 1px solid var(--lr-line); border-radius: 14px; background: #fff; box-shadow: 0 5px 16px rgba(15,23,42,.05); font-size: 1.4rem; }
.learning-resource-result-summary { margin: 28px 0 17px; color: var(--lr-muted); text-align: center; font-size: 1.3rem; }
.learning-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
.learning-resource-card { position: relative; min-width: 0; padding: 22px; border: 1px solid var(--lr-line); border-top: 4px solid var(--category-color, var(--lr-accent)); border-radius: 15px; background: #fff; box-shadow: 0 7px 20px rgba(15,23,42,.06); transition: transform .18s, box-shadow .18s; }
.learning-resource-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(15,23,42,.11); }
.learning-resource-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--category-color, var(--lr-accent)) 45%, white); outline-offset: 3px; }
.learning-resource-card__badge { display: inline-flex; align-items: center; padding: 4px 9px; border-radius: 999px; color: #fff; background: var(--category-color, var(--lr-accent)); font-size: 1.1rem; font-weight: 700; }
.learning-resource-card h3 { margin: 15px 0 10px; color: var(--lr-ink); font-size: 1.75rem; line-height: 1.4; }
.learning-resource-card__url { display: block; min-width: 0; margin-bottom: 18px; color: #3b6285; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learning-resource-card__button { width: 100%; padding: 9px 12px; border: 1px solid var(--category-color, var(--lr-accent)); border-radius: 9px; color: var(--category-color, var(--lr-accent)); background: transparent; font-weight: 700; cursor: pointer; }
.learning-resource-card__button:hover { color: #fff; background: var(--category-color, var(--lr-accent)); }
.learning-resource-empty, .learning-resource-error { padding: 60px 20px; color: var(--lr-muted); text-align: center; }
.learning-resource-empty i, .learning-resource-error i { display: block; margin-bottom: 10px; font-size: 4rem; }
.learning-resource-empty h3, .learning-resource-error h3 { color: var(--lr-ink); }
.learning-resource-load-more { margin-top: 32px; text-align: center; }
.learning-resource-infowindow .map-infowindow__header { align-items: flex-start; }
.learning-resource-infowindow__category-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex: 0 0 32px; border: 2px solid rgba(255,255,255,.85); border-radius: 50%; color: #fff; background: var(--category-color, var(--lr-accent)); font-size: 14px; font-weight: 800; }
.learning-resource-infowindow__category-image { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.learning-resource-infowindow .map-infowindow__title { overflow-wrap: anywhere; }
.learning-resource-infowindow__stat { gap: 12px; align-items: flex-start; }
.learning-resource-infowindow__value { max-width: 190px; text-align: right; overflow-wrap: anywhere; font-size: 14px; line-height: 1.4; }
.learning-resource-infowindow__value--url { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; font-size: 12px; }
.learning-resource-infowindow .map-infowindow__btn { padding-inline: 8px; white-space: nowrap; }
.learning-resource-infowindow__warning { display: flex; gap: 7px; padding-top: 10px; border-top: 1px solid rgba(245,158,11,.35); color: #fbbf24; font-size: 12px; line-height: 1.45; }
.learning-resource-link-modal .modal-content { overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 17px; color: #fff; background: rgba(15,23,42,.96); box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.learning-resource-link-modal .modal-header { border-bottom-color: rgba(255,255,255,.08); }
.learning-resource-link-modal .modal-title { color: #fff; }
.learning-resource-link-modal .btn-close { filter: invert(1) grayscale(1); opacity: .75; }
.learning-resource-link-modal .modal-footer { border-top-color: rgba(255,255,255,.08); }
.learning-resource-link-modal .modal-footer .btn-light { border-color: rgba(255,255,255,.12); color: rgba(255,255,255,.85); background: rgba(255,255,255,.1); }
.learning-resource-link-modal .modal-footer .btn-primary { border: 0; background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 4px 14px rgba(99,102,241,.4); }
.learning-resource-modal-kicker { color: #a5b4fc; font-size: 1rem; font-weight: 750; letter-spacing: .08em; }
.learning-resource-link-details { margin: 0; }
.learning-resource-link-details div { display: grid; grid-template-columns: 94px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.learning-resource-link-details dt { color: rgba(255,255,255,.55); }
.learning-resource-link-details dd { margin: 0; color: #fff; font-weight: 650; overflow-wrap: anywhere; }
.learning-resource-http-warning { display: flex; gap: 9px; margin-top: 16px; padding: 12px; border: 1px solid rgba(245,158,11,.55); border-radius: 10px; color: #fbbf24; background: rgba(120,53,15,.28); }

@media (max-width: 991.98px) { .learning-resource-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 767.98px) {
    .learning-resource-map-stats { overflow-x: auto; justify-content: flex-start; scrollbar-width: none; }
    .learning-resource-map-stats::-webkit-scrollbar { display: none; }
    .learning-resource-chips { gap: .65rem; padding: 1.5rem 0; }
    .learning-resource-chip { padding: .5rem 1rem; }
    .learning-resource-grid { grid-template-columns: 1fr; }
    .learning-resource-content { padding-top: 32px; }
}