/* 天体数据库工具页样式（适配 Material 明暗双主题，使用 md CSS 变量） */

/* ---------- 全局宽度：内容区占约 90%，超宽屏封顶 ---------- */
.md-grid {
  max-width: min(90%, 110rem);
}
/* hero / 底部说明区文字限宽，避免拉太宽难读 */
.astro-hero > * {
  max-width: 48rem;
  margin-inline: auto;
}
.astro-articles, .astro-note, .obj-articles {
  max-width: 64rem;
  margin-inline: auto;
}
/* 详情页正文与来源区限宽，长文阅读舒适 */
.obj-source, .obj-article {
  max-width: 52rem;
  margin-inline: auto;
}

/* ---------- 首页 hero ---------- */
.astro-hero {
  text-align: center;
  padding: 2.2rem 1rem 1.6rem;
  margin-bottom: 1.2rem;
  border-radius: 1rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent),
    color-mix(in srgb, var(--md-primary-fg-color) 4%, transparent));
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 18%, transparent);
}
.astro-hero h1 {
  margin: 0 0 0.5rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}
.astro-hero-sub {
  margin: 0 0 1rem;
  font-size: 1.02rem;
  color: var(--md-default-fg-color--light);
}
.astro-hero-stats {
  margin: 0 0 0.9rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}
.astro-stat {
  display: inline-block;
  padding: 0.28rem 0.8rem;
  border-radius: 999px;
  font-size: 0.82rem;
  background: var(--md-default-bg-color);
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 25%, transparent);
  color: var(--md-default-fg-color--light);
}
.astro-stat b {
  color: var(--md-primary-fg-color);
  font-size: 0.95rem;
  margin-right: 0.15rem;
}
.astro-hero-links {
  margin: 0;
  font-size: 0.88rem;
  color: var(--md-default-fg-color--light);
}
.astro-hero-links .sep {
  margin: 0 0.55rem;
  opacity: 0.5;
}

/* ---------- 工具栏 ---------- */
.astro-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  padding: 0.85rem 1rem;
  margin: 0 0 0.4rem;
  border-radius: 0.8rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  position: sticky;
  top: 0;
  z-index: 5;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--md-default-fg-color) 5%, transparent);
}
.astro-toolbar #astro-search {
  flex: 1 1 12rem;
  min-width: 10rem;
  padding: 0.45rem 0.8rem;
  font-size: 0.92rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.astro-toolbar #astro-search:focus {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 1px;
}
.astro-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.chip {
  padding: 0.32rem 0.85rem;
  font-size: 0.84rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color--light);
  cursor: pointer;
  transition: all 0.12s ease;
}
.chip:hover {
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-fg-color);
}
.chip.active {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}
.astro-sort-label {
  font-size: 0.84rem;
  color: var(--md-default-fg-color--light);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.astro-sort-label select {
  padding: 0.32rem 0.5rem;
  font-size: 0.84rem;
  border-radius: 0.5rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.astro-count {
  margin: 0.3rem 0 1rem;
  font-size: 0.8rem;
  color: var(--md-default-fg-color--light);
}

/* ---------- 卡片网格 ---------- */
.astro-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1rem;
}
.astro-card {
  position: relative;
  border-radius: 0.9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.astro-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
}
.astro-card[hidden] { display: none; }
.astro-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.astro-img {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.astro-img img {
  width: 108px;
  height: 108px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px color-mix(in srgb, var(--md-default-fg-color) 18%, transparent));
}
.astro-img-fallback span {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.astro-img-fallback.planet span { background: linear-gradient(135deg, #4a90d9, #2b5f9e); }
.astro-img-fallback.star span { background: linear-gradient(135deg, #f5a623, #e06c00); }
.astro-img-fallback.dwarf_planet span { background: linear-gradient(135deg, #9b7fc4, #6a4fa0); }
.astro-img-fallback.moon span { background: linear-gradient(135deg, #8d99ae, #5c6773); }

.astro-card-body { padding: 0.7rem 0.95rem 0.95rem; }
.astro-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--md-default-fg-color);
}
.astro-card-title .en {
  margin-left: 0.4rem;
  font-size: 0.78rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}
.astro-card-tagline {
  margin: 0.3rem 0 0.55rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--md-default-fg-color--light);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.astro-card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.6rem;
  font-size: 0.74rem;
  color: var(--md-default-fg-color--light);
}
.astro-card-stats span {
  padding: 0.12rem 0.45rem;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--md-primary-fg-color) 8%, transparent);
  white-space: nowrap;
}
.astro-badge {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.14rem 0.55rem;
  font-size: 0.7rem;
  border-radius: 999px;
  color: #fff;
  backdrop-filter: blur(2px);
}
.astro-badge.planet { background: rgba(43, 95, 158, 0.85); }
.astro-badge.star { background: rgba(224, 108, 0, 0.88); }
.astro-badge.dwarf_planet { background: rgba(106, 79, 160, 0.85); }
.astro-badge.moon { background: rgba(92, 103, 115, 0.85); }
.astro-badge.asteroid { background: rgba(140, 110, 60, 0.85); }
.astro-badge.exoplanet { background: rgba(30, 130, 120, 0.85); }

.astro-empty {
  padding: 2.5rem 1rem;
  text-align: center;
  color: var(--md-default-fg-color--light);
  border: 1px dashed var(--md-default-fg-color--lightest);
  border-radius: 0.8rem;
}

/* ---------- 文章区 / 数据说明 ---------- */
.astro-articles, .astro-note, .obj-articles {
  margin-top: 2rem;
  padding: 1.1rem 1.3rem;
  border-radius: 0.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
}
.astro-articles h2, .astro-note h2, .obj-articles h2 {
  margin-top: 0;
  font-size: 1.1rem;
}
.astro-article-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.astro-article-list li a {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  font-size: 0.85rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 30%, transparent);
  text-decoration: none;
}
.astro-article-list li a:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
}
.astro-note p { font-size: 0.85rem; color: var(--md-default-fg-color--light); }

/* ---------- 详情页 ---------- */
.obj-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  align-items: center;
  padding: 1.4rem;
  margin: 0.5rem 0 1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent),
    color-mix(in srgb, var(--md-primary-fg-color) 3%, transparent));
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 15%, transparent);
}
.obj-hero .astro-img {
  width: 170px;
  height: 170px;
  flex: 0 0 170px;
  border-radius: 50%;
  background: var(--md-default-bg-color);
}
.obj-hero .astro-img img { width: 150px; height: 150px; }
.obj-hero-info { flex: 1 1 16rem; }
.obj-hero-info h1 {
  margin: 0.4rem 0 0.3rem;
  font-size: 1.7rem;
  border: none;
}
.obj-hero-info h1 small {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
  margin-left: 0.4rem;
}
.obj-tagline {
  margin: 0 0 0.8rem;
  font-size: 0.98rem;
  color: var(--md-default-fg-color--light);
}
.obj-keystats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.obj-keystats span {
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  border-radius: 0.5rem;
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
}
.obj-parent {
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
  margin: 0 0 1rem;
}
.obj-source, .obj-article {
  margin-top: 1.6rem;
  padding: 1rem 1.2rem;
  border-radius: 0.8rem;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.obj-source h2, .obj-article h2 {
  margin-top: 0;
  font-size: 1.05rem;
}
.obj-source p { font-size: 0.82rem; color: var(--md-default-fg-color--light); }
.obj-nav {
  font-size: 0.88rem;
  color: var(--md-default-fg-color--light);
  margin: 0.3rem 0;
}

/* ---------- 天体对比（详情页） ---------- */
.obj-compare-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1rem;
}
.cmp-btn {
  padding: 0.5rem 1.1rem;
  font-size: 0.92rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid var(--md-primary-fg-color);
  background: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.cmp-btn:hover { opacity: 0.88; }
.cmp-hint {
  font-size: 0.78rem;
  color: var(--md-default-fg-color--light);
}
.obj-compare {
  margin: 0 0 1.4rem;
  padding: 1.1rem 1.2rem;
  border-radius: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 22%, transparent);
  background: color-mix(in srgb, var(--md-primary-fg-color) 4%, transparent);
}
.cmp-picker { position: relative; max-width: 26rem; }
.cmp-picker #cmp-search {
  width: 100%;
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
}
.cmp-picker #cmp-search:focus {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 1px;
}
.cmp-results {
  position: absolute;
  top: calc(100% + 0.3rem);
  left: 0;
  right: 0;
  z-index: 8;
  max-height: 16rem;
  overflow-y: auto;
  list-style: none;
  margin: 0;
  padding: 0.3rem;
  border-radius: 0.7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  background: var(--md-default-bg-color);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
}
.cmp-results li button {
  display: flex;
  width: 100%;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.42rem 0.7rem;
  border: none;
  border-radius: 0.5rem;
  background: none;
  color: var(--md-default-fg-color);
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.cmp-results li button:hover {
  background: color-mix(in srgb, var(--md-primary-fg-color) 12%, transparent);
}
.cmp-results .cmp-en {
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
}
.cmp-results .cmp-none {
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
}
.cmp-table-wrap {
  margin-top: 0.9rem;
  overflow-x: auto;
  border-radius: 0.7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
}
.cmp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
  background: var(--md-default-bg-color);
}
.cmp-table th, .cmp-table td {
  padding: 0.42rem 0.8rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  text-align: right;
  white-space: nowrap;
}
.cmp-table thead th {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--md-primary-fg-color) 7%, var(--md-default-bg-color));
  font-size: 0.9rem;
  text-align: right;
}
.cmp-table .cmp-param {
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: left;
  font-weight: 600;
  color: var(--md-default-fg-color--light);
  background: var(--md-default-bg-color);
}
.cmp-table thead .cmp-param { z-index: 2; }
.cmp-table tbody tr:last-child th, .cmp-table tbody tr:last-child td { border-bottom: none; }
.cmp-table .cmp-current {
  background: color-mix(in srgb, var(--md-primary-fg-color) 9%, transparent);
}
.cmp-table thead .cmp-current {
  background: color-mix(in srgb, var(--md-primary-fg-color) 14%, var(--md-default-bg-color));
}
.cmp-table .cmp-col a { color: var(--md-primary-fg-color); text-decoration: none; }
.cmp-table .cmp-col .cmp-en {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--md-default-fg-color--light);
}
.cmp-remove {
  display: inline-block;
  margin-left: 0.45rem;
  padding: 0 0.3rem;
  border: none;
  border-radius: 0.35rem;
  background: color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
  color: var(--md-default-fg-color--light);
  font-size: 0.85rem;
  line-height: 1.3;
  cursor: pointer;
  vertical-align: middle;
}
.cmp-remove:hover {
  background: color-mix(in srgb, #d66 22%, transparent);
  color: #d33;
}
.cmp-note {
  margin: 0.7rem 0 0;
  font-size: 0.76rem;
  color: var(--md-default-fg-color--light);
}

/* ---------- 天体库字段说明折叠 ---------- */
.obj-fields {
  margin: 1.2rem 0;
  padding: 0.7rem 1rem;
  border-radius: 0.7rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  font-size: 0.85rem;
}
.obj-fields summary {
  cursor: pointer;
  color: var(--md-default-fg-color--light);
}
.obj-fields table { font-size: 0.8rem; }

/* ---------- 版本戳（判断浏览器缓存） ---------- */
.obj-version {
  margin-top: 1.5rem;
  padding-top: 0.8rem;
  border-top: 1px dashed var(--md-default-fg-color--lightest);
  font-size: 0.72rem;
  color: var(--md-default-fg-color--light);
}

/* ---------- 数据集页 ---------- */
.dl-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.9rem;
  margin: 1rem 0;
}
.dl-card {
  display: block;
  padding: 1rem 1.1rem;
  border-radius: 0.8rem;
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 25%, transparent);
  text-decoration: none;
  transition: transform 0.12s ease;
}
.dl-card:hover { transform: translateY(-2px); }
.dl-card b { display: block; font-size: 1rem; color: var(--md-primary-fg-color); }
.dl-card span { font-size: 0.8rem; color: var(--md-default-fg-color--light); }

/* ---------- 窄屏 ---------- */
@media (max-width: 600px) {
  .astro-toolbar { position: static; }
  .obj-hero { justify-content: center; text-align: center; }
  .obj-keystats { justify-content: center; }
  .cmp-picker { max-width: none; }
  .cmp-table { font-size: 0.78rem; }
  .cmp-table th, .cmp-table td { padding: 0.35rem 0.55rem; }
}