/* ============================================
   高校数据库页面样式 - universities.css
   薛老师网校 xuelaoshi.cn
   移动端优先 · 现代卡片式设计
   ============================================ */

/* ========== 基础变量 ========== */
:root {
  --uni-accent: #4F46E5;
  --uni-accent-light: #EEF2FF;
  --uni-gold: #F59E0B;
  --uni-purple: #7C3AED;
  --uni-red: #EF4444;
  --uni-blue: #3B82F6;
  --uni-green: #10B981;
  --uni-shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --uni-shadow: 0 4px 16px rgba(0,0,0,.08);
  --uni-shadow-lg: 0 12px 32px rgba(0,0,0,.12);
  --uni-radius: 14px;
  --uni-radius-sm: 10px;
  --uni-radius-xs: 8px;
}

/* ========== Hero 头部 ========== */
.uni-hero {
  background: linear-gradient(160deg, #0F172A 0%, #1E3A5F 25%, #1E40AF 55%, #312E81 100%);
  border-radius: 16px;
  padding: 28px 18px 24px;
  margin-bottom: 16px;
  text-align: center;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.uni-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255,255,255,.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 20%, rgba(251,191,36,.08) 0%, transparent 40%);
  pointer-events: none;
}
.uni-hero > * { position: relative; z-index: 1; }
.uni-hero-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 6px;
  animation: uniFloat 3s ease-in-out infinite;
}
@keyframes uniFloat {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}
.uni-hero h1 {
  font-size: 22px;
  font-weight: 900;
  margin: 0 0 6px;
  letter-spacing: -.3px;
}
.uni-hero p {
  font-size: 12.5px;
  opacity: .82;
  max-width: 360px;
  margin: 0 auto 14px;
  line-height: 1.6;
}
.uni-hero-stats {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.uni-hero-stat {
  text-align: center;
  min-width: 52px;
  padding: 0 6px;
}
.uni-hero-stat .stat-num {
  font-size: 24px;
  font-weight: 900;
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.uni-hero-stat .stat-label {
  font-size: 10px;
  opacity: .7;
  margin-top: 1px;
}

/* ========== 搜索栏 - 移动端堆叠 ========== */
.uni-search-bar {
  background: var(--bg-card, #fff);
  border-radius: var(--uni-radius);
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: var(--uni-shadow-sm);
  border: 1px solid var(--border, #E2E8F0);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.uni-search-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.uni-search-input {
  flex: 1 1 100%;
  min-width: 0;
  padding: 11px 14px;
  border: 2px solid var(--border, #E2E8F0);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--bg, #F8FAFC);
  color: var(--text, #1E293B);
  outline: none;
  transition: all .25s;
  box-sizing: border-box;
}
.uni-search-input:focus {
  border-color: var(--uni-accent);
  box-shadow: 0 0 0 3px rgba(79,70,229,.1);
  background: #fff;
}
.uni-search-input::placeholder { color: var(--text-light, #94A3B8); }
.uni-search-select {
  flex: 1 1 0;
  min-width: 80px;
  padding: 11px 10px;
  border: 2px solid var(--border, #E2E8F0);
  border-radius: 10px;
  font-size: 13px;
  font-family: inherit;
  background: var(--bg, #F8FAFC);
  color: var(--text, #1E293B);
  outline: none;
  cursor: pointer;
  box-sizing: border-box;
}
.uni-search-btn {
  padding: 11px 18px;
  background: linear-gradient(135deg, #4F46E5, #7C3AED);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all .25s;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(79,70,229,.3);
  flex-shrink: 0;
  min-height: 44px;
}
.uni-search-btn:active {
  transform: scale(.96);
  box-shadow: 0 2px 8px rgba(79,70,229,.25);
}
.uni-search-btn-clear {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border, #E2E8F0);
  background: var(--bg-card, #fff);
  color: var(--text-secondary, #64748B);
  text-decoration: none;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.uni-search-btn-clear:hover {
  border-color: #EF4444;
  color: #EF4444;
}

/* ========== 筛选标签 ========== */
.uni-filter-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.uni-filter-tag {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .25s;
  background: var(--bg-card, #fff);
  border: 1.5px solid var(--border, #E2E8F0);
  color: var(--text-secondary, #64748B);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
}
.uni-filter-tag:active { transform: scale(.96); }
.uni-filter-tag.active {
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 10px rgba(79,70,229,.3);
}
.uni-filter-tag:not(.tag-985):not(.tag-211):not(.tag-df).active {
  background: var(--uni-accent);
}
.uni-filter-tag.tag-985.active { background: #EF4444; box-shadow: 0 2px 10px rgba(239,68,68,.3); }
.uni-filter-tag.tag-211.active { background: #3B82F6; box-shadow: 0 2px 10px rgba(59,130,246,.3); }
.uni-filter-tag.tag-df.active { background: #10B981; box-shadow: 0 2px 10px rgba(16,185,129,.3); }

/* ========== 结果信息栏 ========== */
.uni-result-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.uni-result-info {
  font-size: 12.5px;
  color: var(--text-secondary, #64748B);
  display: flex;
  align-items: center;
  gap: 5px;
}
.uni-result-count {
  font-weight: 800;
  color: var(--uni-accent);
  font-size: 16px;
}
.uni-sort-hint {
  font-size: 11px;
  color: var(--text-light, #94A3B8);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ========== 大学卡片列表 ========== */
.uni-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* 卡片主体 */
.uni-card {
  background: var(--bg-card, #fff);
  border-radius: var(--uni-radius);
  box-shadow: var(--uni-shadow-sm);
  border: 1px solid var(--border, #E2E8F0);
  transition: all .3s ease;
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.uni-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(180deg, var(--uni-accent), var(--uni-purple));
  transition: width .35s ease;
  border-radius: 14px 0 0 14px;
  opacity: 0;
}
.uni-card:active { transform: scale(.99); }
.uni-card.expanded { box-shadow: var(--uni-shadow); border-color: rgba(79,70,229,.2); }
.uni-card.expanded::before { width: 4px; opacity: 1; }

/* 卡片内部 */
.uni-card-inner {
  display: flex;
  gap: 10px;
  padding: 14px;
  align-items: flex-start;
}

/* 排名 Badge */
.uni-rank-badge {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1.1;
}
.uni-rank-badge .rank-num { font-size: 17px; }
.uni-rank-badge .rank-label { font-size: 8px; opacity: .75; }
.rank-top3 {
  background: linear-gradient(135deg, #FBBF24, #F59E0B);
  color: #fff;
  box-shadow: 0 3px 10px rgba(245,158,11,.35);
}
.rank-top10 {
  background: linear-gradient(135deg, #A78BFA, #7C3AED);
  color: #fff;
  box-shadow: 0 3px 10px rgba(124,58,237,.3);
}
.rank-top50 {
  background: #EEF2FF;
  color: #4F46E5;
  border: 2px solid #C7D2FE;
}
.rank-other {
  background: var(--bg, #F8FAFC);
  color: var(--text-secondary, #94A3B8);
  border: 1.5px solid var(--border, #E2E8F0);
}

/* 卡片内容 */
.uni-card-content {
  flex: 1;
  min-width: 0;
}
.uni-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 3px;
}
.uni-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #1E293B);
  line-height: 1.3;
}
.uni-card-location {
  font-size: 11px;
  color: var(--text-light, #94A3B8);
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 5px;
}
.uni-card-intro {
  font-size: 12px;
  color: var(--text-secondary, #64748B);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 6px;
}

/* 层次标签 */
.uni-tags-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.uni-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.uni-tag-985 { background: #FEF2F2; color: #DC2626; }
.uni-tag-211 { background: #EFF6FF; color: #3B82F6; }
.uni-tag-df { background: #ECFDF5; color: #059669; }
.uni-tag-level {
  background: #F8FAFC;
  color: #64748B;
  border: 1px solid #E2E8F0;
  font-weight: 600;
}

/* 优势专业行 */
.uni-majors-row {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.uni-major-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  background: linear-gradient(135deg, #FAF5FF, #F3E8FF);
  color: #7C3AED;
  border: 1px solid #E9D5FF;
  white-space: nowrap;
}
.uni-major-tag .major-level {
  font-size: 8px;
  background: #7C3AED;
  color: #fff;
  padding: 1px 4px;
  border-radius: 3px;
}

/* 展开箭头 */
.uni-card-expand {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  margin-top: 6px;
  border-radius: 50%;
  font-size: 11px;
  color: var(--text-light, #94A3B8);
  transition: all .3s ease;
  background: var(--bg, #F8FAFC);
}
.uni-card.expanded .uni-card-expand {
  transform: rotate(180deg);
  background: var(--uni-accent-light);
  color: var(--uni-accent);
}

/* ========== 展开详情区域 ========== */
.uni-card-detail {
  border-top: 1px solid var(--border, #E2E8F0);
  padding: 0 14px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease, padding .4s ease;
  background: var(--bg, #F8FAFC);
}
.uni-card.expanded .uni-card-detail {
  max-height: 800px;
  padding: 14px;
}
.uni-detail-section {
  margin-bottom: 12px;
}
.uni-detail-section:last-child { margin-bottom: 0; }
.uni-detail-title {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--text, #1E293B);
  margin-bottom: 7px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.uni-detail-majors {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.uni-detail-major-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border, #E2E8F0);
  border-radius: 8px;
  font-size: 12px;
  color: var(--text, #1E293B);
  transition: transform .2s;
}
.uni-detail-major-item:active { transform: scale(.96); }
.uni-detail-major-item .ml {
  font-size: 9px;
  background: var(--uni-accent);
  color: #fff;
  padding: 1px 5px;
  border-radius: 3px;
  font-weight: 700;
}
.uni-detail-major-item .ml.ml-aplus {
  background: #DC2626;
}
.uni-detail-policy {
  font-size: 12.5px;
  color: var(--text-secondary, #64748B);
  line-height: 1.7;
  padding: 10px 14px;
  background: var(--bg-card, #fff);
  border-radius: 10px;
  border-left: 4px solid var(--uni-accent);
}
.uni-policy-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.policy-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
  color: #4F46E5;
  border-radius: 6px;
  font-size: 11.5px;
  font-weight: 600;
}
.policy-meta-tag b { color: #3730A3; }

/* ========== 空状态 ========== */
.msg-empty {
  text-align: center;
  padding: 40px 20px;
}
.msg-empty-icon { font-size: 48px; margin-bottom: 10px; }
.msg-empty h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text, #1E293B);
  margin: 0 0 6px;
}
.msg-empty p {
  font-size: 13px;
  color: var(--text-secondary, #64748B);
  margin: 0;
}

/* ========== Section 标题 ========== */
.uni-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  margin-top: 20px;
}
.uni-section-header:first-child { margin-top: 0; }
.uni-section-icon { font-size: 20px; }
.uni-section-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--text, #1E293B);
}

/* ========== 升学路径卡片 ========== */
.uni-paths-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.uni-path-card {
  background: var(--bg-card, #fff);
  border-radius: var(--uni-radius);
  padding: 16px;
  box-shadow: var(--uni-shadow-sm);
  border: 1px solid var(--border, #E2E8F0);
  transition: all .3s;
  position: relative;
  overflow: hidden;
}
.uni-path-card:active { transform: scale(.99); }
.uni-path-card::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 60px; height: 60px;
  border-radius: 0 0 0 60px;
  opacity: .06;
  pointer-events: none;
}
.path-standard::after { background: #4F46E5; }
.path-special::after { background: #10B981; }
.path-overseas::after { background: #F59E0B; }
.path-art_sport::after { background: #EC4899; }
.path-vocational::after { background: #3B82F6; }
.uni-path-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.uni-path-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.path-standard .uni-path-icon { background: linear-gradient(135deg, #EEF2FF, #E0E7FF); }
.path-special .uni-path-icon { background: linear-gradient(135deg, #ECFDF5, #D1FAE5); }
.path-overseas .uni-path-icon { background: linear-gradient(135deg, #FFFBEB, #FEF3C7); }
.path-art_sport .uni-path-icon { background: linear-gradient(135deg, #FDF2F8, #FCE7F3); }
.path-vocational .uni-path-icon { background: linear-gradient(135deg, #EFF6FF, #DBEAFE); }
.uni-path-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--text, #1E293B);
}
.uni-path-target {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 10.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.path-standard .uni-path-target { background: #EEF2FF; color: #4F46E5; }
.path-special .uni-path-target { background: #ECFDF5; color: #059669; }
.path-overseas .uni-path-target { background: #FFFBEB; color: #D97706; }
.path-art_sport .uni-path-target { background: #FDF2F8; color: #BE185D; }
.path-vocational .uni-path-target { background: #EFF6FF; color: #2563EB; }
.uni-path-desc {
  font-size: 13px;
  color: var(--text-secondary, #64748B);
  line-height: 1.6;
  margin-bottom: 8px;
}
.uni-path-steps, .uni-path-advantages { margin-top: 8px; }
.uni-path-steps h4, .uni-path-advantages h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text, #1E293B);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.uni-path-steps ol, .uni-path-advantages ul {
  margin: 0;
  padding-left: 16px;
  font-size: 12px;
  color: var(--text-secondary, #64748B);
  line-height: 1.8;
}
.uni-path-suitable {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg, #F8FAFC);
  border-radius: 8px;
  font-size: 11px;
  color: var(--text-secondary, #64748B);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  line-height: 1.5;
}

/* ========== 分页 ========== */
.uni-pagination {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.uni-page-btn {
  min-width: 36px;
  min-height: 36px;
  padding: 8px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  border: 1.5px solid var(--border, #E2E8F0);
  background: var(--bg-card, #fff);
  color: var(--text, #1E293B);
  cursor: pointer;
  text-decoration: none;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.uni-page-btn:active { transform: scale(.95); }
.uni-page-btn.active {
  background: var(--uni-accent);
  color: #fff;
  border-color: var(--uni-accent);
  box-shadow: 0 2px 8px rgba(79,70,229,.3);
}
.uni-page-dots {
  padding: 8px 4px;
  font-size: 13px;
  color: var(--text-light, #94A3B8);
}

/* ========== 平板及以上（>=768px） ========== */
@media (min-width: 768px) {
  .uni-hero {
    padding: 36px 28px 32px;
    border-radius: 20px;
  }
  .uni-hero h1 { font-size: 26px; }
  .uni-hero p { font-size: 14px; }
  .uni-hero-icon { font-size: 48px; }
  .uni-hero-stats { gap: 16px; }
  .uni-hero-stat .stat-num { font-size: 28px; }

  .uni-search-bar {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .uni-search-row {
    flex: 1;
    flex-wrap: nowrap;
  }
  .uni-search-input { flex: 2; font-size: 14px; }
  .uni-search-select { flex: 1; font-size: 14px; }

  .uni-paths-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .uni-card-inner { padding: 16px 18px; gap: 14px; }
  .uni-rank-badge { width: 48px; height: 48px; }
  .uni-rank-badge .rank-num { font-size: 20px; }
  .uni-card-name { font-size: 16px; }
  .uni-card-detail { padding: 0 18px; }
  .uni-card.expanded .uni-card-detail { padding: 16px 18px; }

  .uni-list { gap: 12px; }
}

/* ========== 桌面端（>=1024px） ========== */
@media (min-width: 1024px) {
  .uni-paths-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .uni-card:hover {
    box-shadow: var(--uni-shadow);
    transform: translateY(-2px);
    border-color: rgba(79,70,229,.2);
  }
  .uni-search-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79,70,229,.4);
  }
  .uni-filter-tag:hover {
    border-color: var(--uni-accent);
    color: var(--uni-accent);
  }
  .uni-filter-tag.active:hover {
    color: #fff;
  }
}

/* ========== 暗色模式 ========== */
[data-theme="dark"] .uni-hero {
  background: linear-gradient(160deg, #020617, #0F172A, #1E1B4B, #172554);
}
[data-theme="dark"] .uni-rank-badge.rank-top50 {
  background: #1E293B; border-color: #4338CA; color: #818CF8;
}
[data-theme="dark"] .uni-rank-badge.rank-other {
  background: #1E293B; border-color: #334155; color: #64748B;
}
[data-theme="dark"] .uni-major-tag {
  background: rgba(124,58,237,.15); border-color: rgba(124,58,237,.3); color: #A78BFA;
}
[data-theme="dark"] .uni-major-tag .major-level { background: #7C3AED; }
[data-theme="dark"] .uni-card-detail { background: #0F172A; }
[data-theme="dark"] .uni-card.expanded { border-color: rgba(99,102,241,.3); }
[data-theme="dark"] .uni-detail-policy { background: #1E293B; }
[data-theme="dark"] .uni-detail-major-item { background: #1E293B; border-color: #334155; }
[data-theme="dark"] .uni-tag-985 { background: rgba(239,68,68,.15); }
[data-theme="dark"] .uni-tag-211 { background: rgba(59,130,246,.15); }
[data-theme="dark"] .uni-tag-df { background: rgba(16,185,129,.15); }
[data-theme="dark"] .uni-tag-level { background: #1E293B; border-color: #334155; }
[data-theme="dark"] .uni-path-suitable { background: #1E293B; }
[data-theme="dark"] .uni-card-expand { background: #1E293B; }
[data-theme="dark"] .uni-card.expanded .uni-card-expand { background: rgba(79,70,229,.2); }
[data-theme="dark"] .uni-search-input,
[data-theme="dark"] .uni-search-select { background: #1E293B; border-color: #334155; color: #F1F5F9; }
[data-theme="dark"] .uni-search-input:focus { background: #0F172A; }
[data-theme="dark"] .policy-meta-tag { background: rgba(79,70,229,.15); color: #A5B4FC; }
[data-theme="dark"] .policy-meta-tag b { color: #C7D2FE; }

/* ========== 超小屏优化（<=360px） ========== */
@media (max-width: 360px) {
  .uni-hero { padding: 20px 12px 18px; border-radius: 12px; }
  .uni-hero h1 { font-size: 18px; }
  .uni-hero p { font-size: 11px; }
  .uni-hero-stats { gap: 4px; }
  .uni-hero-stat .stat-num { font-size: 20px; }

  .uni-search-bar { padding: 10px; gap: 6px; }
  .uni-search-input { font-size: 13px; padding: 10px 12px; }
  .uni-search-select { font-size: 12px; padding: 10px 8px; }
  .uni-search-btn { font-size: 13px; padding: 10px 14px; }

  .uni-card-inner { padding: 10px; gap: 8px; }
  .uni-rank-badge { width: 36px; height: 36px; border-radius: 10px; }
  .uni-rank-badge .rank-num { font-size: 15px; }
  .uni-card-name { font-size: 13px; }
  .uni-card-intro { font-size: 11px; }

  .uni-card.expanded .uni-card-detail { padding: 10px; }
  .uni-filter-tag { font-size: 11px; padding: 5px 10px; }

  .uni-page-btn { min-width: 30px; min-height: 30px; font-size: 12px; padding: 6px 9px; }
}