/**
 * 设置 / 关于页样式
 * 风格：中性底色 + 1px 描边 + 单一强调色，不使用渐变与装饰光效
 * 图标: Tabler Icons (https://tabler.io/icons) - MIT License
 */

/* ===== 设置页子标签 ===== */
.settings-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 14px;
  padding: 3px;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  width: fit-content;
}

.settings-tab {
  padding: 5px 14px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  color: var(--text-2);
  font-size: 13px;
  cursor: pointer;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}

.settings-tab:hover {
  color: var(--text);
}

.settings-tab.active {
  background: var(--surface);
  color: var(--accent);
  font-weight: 500;
}

.settings-panel.hidden {
  display: none;
}

/* ===== 产品概览 ===== */
.about-hero {
  padding: 18px 20px;
}

.about-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.about-logo-img {
  display: block;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  object-fit: cover;
}

.about-brand-text {
  min-width: 0;
  flex: 1;
}

.about-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
}

.about-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-3);
}

.about-brand-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.about-desc {
  margin-top: 14px;
  max-width: 520px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--text-2);
}

/* ===== 关键信息 ===== */
.about-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}

.about-fact {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
}

.about-fact-key {
  color: var(--text-3);
  flex-shrink: 0;
}

.about-fact-value {
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.about-site-link:hover {
  text-decoration: underline;
}

/* ===== 功能特性列表 ===== */
.feature-list {
  display: flex;
  flex-direction: column;
}

.feature-item {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.feature-item:first-child {
  padding-top: 0;
}

.feature-item:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.feature-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--text-3);
}

.feature-text {
  flex: 1;
  min-width: 0;
}

.feature-title {
  font-size: 13.5px;
}

.feature-desc {
  font-size: 12.5px;
  color: var(--text-3);
}

/* ===== 键值信息列表 ===== */
.info-list {
  display: flex;
  flex-direction: column;
}

.info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
}

.info-row:first-child {
  padding-top: 0;
}

.info-row:last-child {
  padding-bottom: 0;
  border-bottom: none;
}

.info-row-key {
  color: var(--text-3);
  flex-shrink: 0;
}

.info-row-value {
  color: var(--text);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 技术栈卡片的值使用等宽字体 */
.tech-card .info-row-value {
  font-family: var(--mono);
}

/* ===== 第三方资源 ===== */
.about-license-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}

.about-license-item:first-child {
  padding-top: 0;
}

.about-license-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* 名称与用途：名称在上，用途说明弱化在下 */
.about-license-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.about-license-name {
  font-size: 13.5px;
}

.about-license-desc {
  font-size: 12px;
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 协议标签：弱化文本色的小标签，公有领域单独一色 */
.about-license-tag {
  flex-shrink: 0;
  padding: 2px 7px;
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  font-size: 11.5px;
  color: var(--text-3);
  white-space: nowrap;
}

.about-license-tag.is-pd {
  border-color: rgba(34, 197, 94, 0.35);
  color: var(--success);
}

.about-license-link {
  margin-left: auto;
  font-size: 12.5px;
  flex-shrink: 0;
}

/* 地图数据卡片底部说明 */
.about-license-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-3);
}

/* ===== 页脚 ===== */
.about-footer {
  margin-top: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--text-3);
}

/* ===== 更新记录 ===== */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.changelog-item {
  padding: 14px 16px;
  background: var(--inset);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
}

.changelog-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.changelog-version {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.changelog-date {
  font-size: 12px;
  color: var(--text-3);
}

.changelog-notes {
  margin: 0;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.75;
  color: var(--text-2);
}

.changelog-notes li + li {
  margin-top: 4px;
}

/* 变更分类 */
.changelog-group + .changelog-group {
  margin-top: 12px;
}

.changelog-group-title {
  margin-bottom: 4px;
  font-size: 12.5px;
  font-weight: 600;
}

.changelog-group.is-added .changelog-group-title {
  color: var(--success);
}

.changelog-group.is-adjusted .changelog-group-title {
  color: var(--info);
}

.changelog-group.is-fixed .changelog-group-title {
  color: var(--warning);
}

.changelog-group.is-improved .changelog-group-title {
  color: var(--accent);
}

.changelog-group.is-removed .changelog-group-title {
  color: var(--danger);
}

.changelog-empty {
  padding: 12px 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-3);
}

@media (max-width: 560px) {
  .about-brand {
    flex-wrap: wrap;
  }

  .about-brand-actions {
    width: 100%;
  }

  .about-brand-actions .btn-primary,
  .about-brand-actions .btn-secondary {
    flex: 1;
  }

  .settings-tabs {
    width: 100%;
  }

  .settings-tab {
    flex: 1;
  }
}