/* 基础样式（common.css / components/dashboard.css）由页面经 <link> + asset_v 引入，此处不再 @import 以保证版本号生效 */

.catalog-index-page {
    --catalog-navy: #0b1f3a;
    --catalog-blue: #1f5bd8;
    --catalog-gold: #d4a72c;
    --catalog-cream: #fffaf0;
    --catalog-card-line: #dfe7f2;
    background: #f3f6fa;
}

.catalog-index-page .home-header {
    background: rgb(255 255 255 / 92%);
}

.catalog-index-page .home-header.is-scrolled {
    background: rgb(255 255 255 / 97%);
    box-shadow: 0 10px 30px rgb(11 31 58 / 10%);
}

.catalog-hero {
    position: relative;
    overflow: hidden;
    padding: 50px 0 0;
    color: #fff;
    background:
        radial-gradient(circle at 78% -20%, rgb(69 128 239 / 45%), transparent 38%),
        radial-gradient(circle at 8% 130%, rgb(212 167 44 / 16%), transparent 32%),
        linear-gradient(125deg, #071a34 0%, #0e2f5a 58%, #164c91 100%);
}

.catalog-hero::before,
.catalog-hero::after {
    position: absolute;
    border: 1px solid rgb(255 255 255 / 9%);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.catalog-hero::before { top: -190px; right: -110px; width: 520px; height: 520px; }
.catalog-hero::after { top: -120px; right: -40px; width: 340px; height: 340px; }
.catalog-hero__inner { position: relative; z-index: 1; }

.catalog-page-heading {
    max-width: 780px;
    padding-bottom: 46px;
}

.catalog-page-heading .page-eyebrow {
    align-items: center;
    gap: 9px;
    margin: 0 0 15px;
    color: #c5d8ff;
    font-size: 12px;
    letter-spacing: .16em;
}

.catalog-page-heading .page-eyebrow span {
    display: inline-flex;
    height: 24px;
    padding: 0 7px;
    align-items: center;
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 5px;
    color: #fff;
    background: rgb(255 255 255 / 9%);
    font-size: 10px;
}

.catalog-page-heading h1,
.catalog-page-heading p { margin: 0; }

.catalog-page-heading h1 {
    max-width: 680px;
    font-family: Georgia, "Noto Serif SC", "Songti SC", serif;
    font-size: 42px;
    font-weight: 700;
    letter-spacing: -.035em;
    line-height: 1.22;
}

.catalog-page-heading > p {
    max-width: 690px;
    margin-top: 14px;
    color: #c9d6e8;
    font-size: 15px;
    line-height: 1.8;
}

.catalog-hero__facts {
    display: flex;
    margin-top: 28px;
}

.catalog-hero__facts span {
    display: inline-flex;
    min-height: 28px;
    padding: 0 22px;
    align-items: center;
    gap: 7px;
    border-left: 1px solid rgb(255 255 255 / 18%);
    color: #b8c9df;
    font-size: 12px;
}

.catalog-hero__facts span:first-child { padding-left: 0; border-left: 0; }
.catalog-hero__facts strong { color: #fff; font-size: 17px; font-weight: 750; }

.university-filter {
    position: relative;
    margin-bottom: -64px;
    padding: 22px 24px 24px;
    border: 1px solid rgb(222 231 244 / 85%);
    border-radius: 16px;
    color: var(--home-text);
    background: rgb(255 255 255 / 98%);
    box-shadow: 0 22px 60px rgb(4 20 43 / 22%);
}

.university-filter__title {
    display: flex;
    margin-bottom: 17px;
    align-items: center;
    gap: 11px;
}

.university-filter__title > div { display: grid; gap: 2px; }
.university-filter__title strong { color: var(--catalog-navy); font-size: 15px; }
.university-filter__title span:not(.university-filter__icon) { color: #77849a; font-size: 11px; }

.university-filter__icon {
    position: relative;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
    background: #eaf1ff;
}

.university-filter__icon::before,
.university-filter__icon::after { position: absolute; content: ""; }
.university-filter__icon::before { top: 9px; left: 9px; width: 11px; height: 11px; border: 2px solid var(--catalog-blue); border-radius: 50%; }
.university-filter__icon::after { right: 8px; bottom: 8px; width: 8px; height: 2px; border-radius: 2px; background: var(--catalog-blue); transform: rotate(45deg); transform-origin: right center; }

.university-filter__fields {
    display: grid;
    grid-template-columns: minmax(320px, 2fr) minmax(180px, 1fr) minmax(180px, 1fr) auto;
    align-items: end;
    gap: 13px;
}

.university-field { display: grid; gap: 7px; }
.university-field label { color: #35445b; font-size: 12px; font-weight: 700; }

.university-field input,
.university-field select {
    width: 100%;
    height: 44px;
    padding: 0 13px;
    border: 1px solid #cdd8e8;
    border-radius: 9px;
    color: var(--home-text);
    background: #fff;
    font-size: 13px;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.university-field input { padding-left: 40px; }
.university-field input:hover,
.university-field select:hover,
.university-field input:focus,
.university-field select:focus { border-color: #7da4ed; }
.university-field input:focus,
.university-field select:focus { box-shadow: 0 0 0 3px rgb(31 91 216 / 10%); }

.university-input-shell { position: relative; display: block; }
.university-input-shell__icon { position: absolute; top: 13px; left: 14px; z-index: 1; width: 15px; height: 15px; border: 1.8px solid #718198; border-radius: 50%; pointer-events: none; }
.university-input-shell__icon::after { position: absolute; right: -5px; bottom: -3px; width: 6px; height: 2px; border-radius: 2px; background: #718198; content: ""; transform: rotate(45deg); }

.university-filter__actions { display: flex; gap: 8px; }
/* 筛选区下拉改为 Element 组件后，统一 44px 高度与既有原生控件一致 */
.university-filter__fields .el-input,
.university-filter__fields .el-select { width: 100%; }
.university-filter__fields .el-input__inner { height: 44px; padding: 0 13px; border-color: #cdd8e8; border-radius: 9px; color: var(--home-text); font-size: 13px; line-height: 44px; }
.university-filter__fields .el-input__inner:hover { border-color: #7da4ed; }
.university-filter__fields .el-input__inner:focus { border-color: #7da4ed; box-shadow: 0 0 0 3px rgb(31 91 216 / 10%); }
.university-filter__fields .el-input__icon { line-height: 44px; }
.university-button {
    display: inline-flex;
    min-height: 44px;
    padding: 0 18px;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd6e4;
    border-radius: 9px;
    color: #35445b;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    transition: border-color 150ms ease, color 150ms ease, background 150ms ease, transform 150ms ease;
}

.university-button--primary { min-width: 104px; border-color: var(--catalog-blue); color: #fff; background: linear-gradient(135deg, #2869e7, #174dbd); box-shadow: 0 8px 18px rgb(31 91 216 / 20%); }
.university-button:hover { border-color: var(--catalog-blue); color: var(--catalog-blue); }
.university-button--primary:hover { color: #fff; background: #174dbd; transform: translateY(-1px); }
.university-button[aria-busy="true"] { cursor: wait; opacity: .72; }

.catalog-content-shell { padding-top: 44px; padding-bottom: 64px; }
.university-index { min-height: 720px; }
.university-results-region { display: grid; gap: 22px; }
.university-results-region[aria-busy="true"] { cursor: progress; }

.university-result-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.university-result-heading h2,
.university-result-heading p { margin: 0; }
.university-result-heading__eyebrow { margin-bottom: 7px !important; color: var(--catalog-blue); font-size: 10px; font-weight: 800; letter-spacing: .15em; }
.university-result-heading h2 { margin-bottom: 6px; color: var(--catalog-navy); font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: 25px; }
.university-result-heading p,
.university-source { color: #748198; font-size: 12px; }
.university-result-heading p strong { color: var(--catalog-blue); font-size: 14px; }
.university-source { display: inline-flex; align-items: center; gap: 7px; }
.university-source i { width: 7px; height: 7px; border-radius: 50%; background: #2da978; box-shadow: 0 0 0 4px rgb(45 169 120 / 10%); }

.university-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.university-card-wrap { min-width: 0; }

.university-card {
    position: relative;
    display: grid;
    min-height: 236px;
    height: 100%;
    padding: 24px;
    grid-template-columns: 120px minmax(0, 1fr);
    align-items: start;
    gap: 22px;
    overflow: hidden;
    border: 1px solid var(--catalog-card-line);
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 3px 12px rgb(23 49 86 / 4%);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.university-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: linear-gradient(180deg, var(--catalog-blue), var(--catalog-gold)); content: ""; opacity: 0; transition: opacity 180ms ease; }
.university-card:hover { border-color: #aec4e8; box-shadow: 0 16px 38px rgb(20 54 101 / 11%); transform: translateY(-3px); }
.university-card:hover::before { opacity: 1; }

.university-logo {
    position: relative;
    display: grid;
    width: 120px;
    height: 120px;
    overflow: hidden;
    place-items: center;
    border: 1px solid #dbe4f0;
    border-radius: 15px;
    background: #fff;
    box-shadow: inset 0 0 0 6px #f7f9fc;
}

.university-logo img { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; padding: 10px; object-fit: contain; background: #fff; opacity: 0; transition: opacity 220ms ease; }
.university-logo img.is-loaded,
.university-logo[data-logo-state="loaded"] img { opacity: 1; }

.university-logo__placeholder { display: grid; width: 100%; height: 100%; place-items: center; align-content: center; gap: 7px; color: #2458ae; background: linear-gradient(145deg, #f7faff, #e9f0fb); }
.university-logo__placeholder i { position: relative; display: block; width: 38px; height: 24px; border-bottom: 3px solid currentColor; }
.university-logo__placeholder i::before { position: absolute; top: -3px; left: 6px; width: 26px; height: 26px; border-top: 3px solid currentColor; border-left: 3px solid currentColor; content: ""; transform: rotate(45deg); }
.university-logo__placeholder b { position: relative; z-index: 1; font-size: 18px; font-weight: 800; }
.university-logo[data-logo-state="pending"] .university-logo__placeholder,
.university-logo[data-logo-state="loading"] .university-logo__placeholder { opacity: .22; }

.university-logo__loader { position: absolute; z-index: 5; width: 30px; height: 30px; border: 3px solid #dce7f8; border-top-color: var(--catalog-blue); border-radius: 50%; animation: university-logo-spin .8s linear infinite; }
.university-logo[data-logo-state="loaded"] .university-logo__loader,
.university-logo[data-logo-state="placeholder"] .university-logo__loader,
.university-logo[data-logo-state="error"] .university-logo__loader,
.university-logo[data-logo-state="error"] img { display: none; }
.university-logo[data-logo-state="error"] .university-logo__placeholder { opacity: 1; }
.university-logo__noscript { opacity: 1 !important; }
@keyframes university-logo-spin { to { transform: rotate(360deg); } }

.university-card__content { display: flex; min-width: 0; min-height: 184px; flex-direction: column; }
.university-card__topline { display: flex; min-height: 28px; align-items: flex-start; justify-content: space-between; gap: 12px; }
.university-rank { display: inline-flex; height: 27px; padding: 0 9px 0 0; align-items: center; overflow: hidden; border: 1px solid #e7d6a2; border-radius: 6px; color: #725b17; background: var(--catalog-cream); font-size: 10px; }
.university-rank b { display: inline-flex; height: 100%; padding: 0 7px; align-items: center; color: #fff; background: var(--catalog-gold); font-size: 10px; letter-spacing: .06em; }
.university-rank strong { margin: 0 5px 0 7px; color: #3d3315; font-size: 13px; }
.university-rank--unknown { color: #7b8798; border-color: #dfe5ed; background: #f6f8fb; }
.university-rank--unknown b { margin-right: 7px; background: #8290a3; }
.university-card__arrow { display: inline-flex; align-items: center; gap: 5px; color: #8491a5; font-size: 10px; white-space: nowrap; }
.university-card__arrow i { color: var(--catalog-blue); font-size: 16px; font-style: normal; transition: transform 160ms ease; }
.university-card:hover .university-card__arrow i { transform: translateX(3px); }

.university-card h3 { margin: 11px 0 3px; color: var(--catalog-navy); font-family: Georgia, "Noto Serif SC", "Songti SC", serif; font-size: 18px; line-height: 1.4; }
.university-card__english { overflow: hidden; color: #68778d; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.university-card__summary { display: -webkit-box; overflow: hidden; margin-top: 12px; color: #6a778b; font-size: 11px; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.university-card__summary--empty { color: #a0a9b7; }
.university-card__meta { display: flex; margin-top: auto; padding-top: 13px; flex-wrap: wrap; gap: 7px; }
.university-card__meta > span { display: inline-flex; min-height: 24px; padding: 0 8px; align-items: center; gap: 5px; border-radius: 999px; color: #58677d; background: #f3f6fa; font-size: 10px; }
.university-card__meta .university-card__count { color: #1e579f; background: #edf4ff; }
.meta-icon { position: relative; display: inline-block; width: 10px; height: 10px; }
.meta-icon--pin { border: 1.5px solid currentColor; border-radius: 50% 50% 50% 0; transform: rotate(-45deg) scale(.72); }
.meta-icon--book { border: 1.3px solid currentColor; border-radius: 2px; }

.university-empty,
.university-error { display: grid; min-height: 320px; padding: 42px; place-items: center; align-content: center; gap: 9px; border: 1px solid var(--catalog-card-line); border-radius: 15px; background: #fff; text-align: center; }
.university-empty__icon,
.university-error__icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 50%; color: var(--catalog-blue); background: #edf4ff; font-size: 21px; font-weight: 700; }
.university-empty h2,
.university-error h2,
.university-empty p,
.university-error p { margin: 0; }
.university-empty h2,
.university-error h2 { color: var(--catalog-navy); font-size: 18px; }
.university-empty p,
.university-error p { margin-bottom: 8px; color: #748198; font-size: 12px; }

.university-pagination { display: flex; margin-top: 12px; justify-content: center; }
.catalog-pagination { display: flex; padding: 8px; align-items: center; justify-content: center; gap: 5px; border: 1px solid var(--catalog-card-line); border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgb(23 49 86 / 5%); }
.catalog-pagination__item,
.catalog-pagination__ellipsis { display: inline-flex; min-width: 34px; height: 34px; padding: 0 10px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 7px; color: #536176; background: #fff; font-size: 11px; }
.catalog-pagination__item:hover:not(.is-disabled):not(.is-current) { border-color: #c2d4ef; color: var(--catalog-blue); background: #f5f8fd; }
.catalog-pagination__item.is-current { border-color: var(--catalog-blue); color: #fff; background: var(--catalog-blue); box-shadow: 0 5px 12px rgb(31 91 216 / 22%); }
.catalog-pagination__item.is-disabled,
.catalog-pagination__ellipsis { color: #a8b1bf; }
.catalog-pagination__ellipsis { background: transparent; }

.catalog-back-to-top { position: fixed; right: 28px; bottom: 30px; z-index: 110; display: grid; width: 46px; height: 46px; padding: 0; place-items: center; border: 1px solid rgb(255 255 255 / 35%); border-radius: 50%; color: #fff; background: var(--catalog-navy); box-shadow: 0 10px 28px rgb(11 31 58 / 28%); cursor: pointer; opacity: 0; transform: translateY(12px); transition: opacity 180ms ease, transform 180ms ease, background 180ms ease; }
.catalog-back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.catalog-back-to-top:hover { background: var(--catalog-blue); }
.catalog-back-to-top span { font-size: 21px; line-height: 1; }

.university-loading { display: grid; gap: 22px; }
.university-result-heading--skeleton { min-height: 58px; }
.university-skeleton-card { display: grid; min-height: 236px; padding: 24px; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; border: 1px solid var(--catalog-card-line); border-radius: 15px; background: #fff; }
.university-skeleton-card__body { display: grid; align-content: start; gap: 11px; }
.skeleton-logo,
.skeleton-line { position: relative; overflow: hidden; border-radius: 7px; background: #edf1f6; }
.skeleton-logo::after,
.skeleton-line::after { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 15%, rgb(255 255 255 / 74%) 42%, transparent 68%); content: ""; transform: translateX(-100%); animation: catalog-skeleton-shimmer 1.35s ease-in-out infinite; }
.skeleton-logo { width: 120px; height: 120px; border-radius: 15px; }
.skeleton-line { height: 12px; }
.skeleton-line--heading { width: 210px; height: 25px; }
.skeleton-line--source { width: 145px; height: 13px; }
.skeleton-line--rank { width: 112px; height: 27px; }
.skeleton-line--title { width: 62%; height: 20px; }
.skeleton-line--subtitle { width: 82%; }
.skeleton-line--text { width: 94%; margin-top: 5px; }
.skeleton-line--meta { width: 70%; margin-top: 25px; height: 22px; }
@keyframes catalog-skeleton-shimmer { to { transform: translateX(100%); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 1280px) {
    .university-filter__fields { grid-template-columns: minmax(280px, 2fr) repeat(2, minmax(150px, 1fr)); }
    .university-filter__actions { grid-column: 1 / -1; justify-content: flex-end; }
    .university-card { padding: 20px; grid-template-columns: 108px minmax(0, 1fr); gap: 18px; }
    .university-logo,
    .skeleton-logo { width: 108px; height: 108px; }
    .university-skeleton-card { grid-template-columns: 108px minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    .university-logo__loader,
    .skeleton-logo::after,
    .skeleton-line::after { animation: none; }
}