/* ====== 工具描述 + FAQ 同容器宽度 ====== */
.tool-header .tool-desc {
  max-width: none;
}

.faq-section {
  max-width: none;
}

/* ====== Tab 切换栏 ====== */
.coord-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.coord-tab {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-5);
  margin-bottom: -2px;
  cursor: pointer;
  transition: color var(--duration-normal) var(--ease-default), border-color var(--duration-normal) var(--ease-default);
  outline: none;
}

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

.coord-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.coord-tab:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary-bg);
  border-radius: var(--radius-sm);
}

/* ====== 面板容器 ====== */
.tab-panel {
  /* 面板通过 JS 控制 display */
}

/* ====== 坐标系选择行 + 输入输出行：统一定宽网格 ====== */
.coord-select-row,
.coord-io-row {
  display: grid;
  grid-template-columns: 1fr 36px 1fr;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: start;
}

.coord-io-row {
  margin-bottom: var(--space-4);
}

.coord-sys-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-width: 0;
}

.coord-sys-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: 0 var(--space-1);
}

.coord-tag-group {
  display: flex;
  gap: var(--space-2);
}

.coord-tag {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: var(--space-1) var(--space-4);
  height: 32px;
  cursor: pointer;
  transition: all var(--duration-normal) var(--ease-default);
  outline: none;
  white-space: nowrap;
}

.coord-tag:hover:not(.disabled):not(.active) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.coord-tag.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #FFFFFF;
}

.coord-tag.disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.coord-tag:focus-visible {
  box-shadow: 0 0 0 3px var(--color-primary-bg);
}

/* 交换按钮 */
.coord-swap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-card);
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: background-color var(--duration-normal) var(--ease-default), color var(--duration-normal) var(--ease-default);
  flex-shrink: 0;
  margin-top: var(--space-4);
}

.coord-swap:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

/* ====== 坐标系说明条 ====== */
.coord-sys-desc {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  background: var(--color-primary-bg);
  border: 1px solid rgba(13, 148, 136, 0.15);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: 1.5;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.coord-sys-desc-icon {
  flex-shrink: 0;
  opacity: 0.5;
  font-size: var(--text-sm);
  line-height: 1.5;
}

#coord-sys-desc-text {
  transition: opacity 0.15s var(--ease-default);
}

/* ====== 关联工具条分隔符 ====== */
.related-sep {
  color: var(--color-border);
  user-select: none;
}

/* ====== tool-header 内的坐标拾取条 ====== */
.tool-header .related-tool-link {
  margin-top: var(--space-4);
  margin-bottom: 0;
  max-width: none;
}

/* ====== 单点转换：左右双栏 ====== */
.coord-io-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-width: 0;
}

/* 透明占位符，占据交换按钮所在列，保证输入/输出框与源/目标框同宽 */
.coord-io-gap {
  /* 仅占位，无可见内容 */
}

.coord-io-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  padding: 0 var(--space-1);
}

/* ====== 输入框通用（默认纵向：label 在上，input 在下） ====== */
.coord-input-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.coord-input-group label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  white-space: nowrap;
}

.coord-input-group input {
  font-family: var(--font-mono);
  font-size: var(--text-base);
}

.coord-input-group input::placeholder {
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

/* 输入坐标盒子内：label 与 input 横向排列 */
.coord-io-box .coord-input-row {
  min-width: 0;
}

.coord-io-box .coord-input-group {
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.coord-io-box .coord-input-group label {
  min-width: 2.5em;
  flex-shrink: 0;
}

.coord-io-box .coord-input-group input {
  flex: 1;
  min-width: 0;
}

/* 格式转换：让 input-group 撑满行宽，input 再填满它 */
#panel-format .coord-input-group {
  flex: 1;
  min-width: 0;
}

#format-input {
  width: 100%;
}

/* 输入盒子内的输入行：不需底部间距 */
.coord-input-row--tight {
  margin-bottom: 0;
}

/* 距离计算面板内的输入行 */
.coord-input-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

/* ====== 单点结果 ====== */
#coord-output-single {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.coord-output-placeholder {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  min-height: 44px;
  display: flex;
  align-items: center;
  flex: 1;
}

/* 单点结果行：坐标系标签 + 结果值（值+复制提示合为一体） */
.coord-single-result {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
}

.coord-single-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* 结果值 + 复制提示 合并为一个左右整体 */
.coord-result-block {
  display: flex;
  align-items: center;
  flex: 1;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-default);
}

.coord-result-block:hover {
  border-color: var(--color-primary);
}

.coord-single-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-primary);
  flex: 1;
  word-break: break-all;
  padding: var(--space-3) var(--space-4);
}

.coord-single-copy-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
  padding-right: var(--space-3);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.coord-result-block:hover .coord-single-copy-hint {
  opacity: 1;
}

/* ====== 批量转换 ====== */
.coord-batch-section {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

.coord-batch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.coord-batch-header .section-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.coord-batch-body textarea {
  width: 100%;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  resize: vertical;
  min-height: 120px;
  margin-bottom: var(--space-3);
}

.coord-batch-body textarea::placeholder {
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.coord-batch-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

/* 批量结果表格 */
.coord-batch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.col-idx {
  width: 40px;
}

.coord-batch-table th {
  text-align: left;
  font-weight: 500;
  color: var(--color-text-muted);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.coord-batch-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.coord-batch-table tbody tr {
  cursor: pointer;
  transition: background-color var(--duration-normal) var(--ease-default);
}

.coord-batch-table tbody tr:hover {
  background-color: var(--color-surface);
}

.coord-batch-table tbody tr:last-child td {
  border-bottom: none;
}

.batch-src,
.batch-dst {
  font-family: var(--font-mono);
  color: var(--color-text);
  font-size: var(--text-sm);
}

.batch-dst {
  color: var(--color-primary);
}

.batch-idx {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}

/* 批量结果错误行 */
.coord-batch-table tbody tr.batch-error .batch-dst {
  color: var(--color-error);
}

/* ====== 格式转换结果行 ====== */
.format-results {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.result-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  transition: border-color var(--duration-normal) var(--ease-default);
}

.result-row:hover {
  border-color: var(--color-primary);
}

.result-label {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 110px;
}

.result-value {
  font-family: var(--font-mono);
  font-size: var(--text-base);
  color: var(--color-primary);
  flex: 1;
  word-break: break-all;
  background: none;
  padding: 0;
}

.result-hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-default);
}

.result-row:hover .result-hint {
  opacity: 1;
}

/* ====== 距离计算 ====== */
.distance-grid {
  display: flex;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.distance-point {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.distance-point-label {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.distance-point .coord-input-row {
  margin-bottom: 0;
}

.distance-output {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-4);
  margin-top: var(--space-2);
}

.distance-output .result-label {
  min-width: 70px;
}

/* ====== 移动端 700px 断点 ====== */
@media (max-width: 700px) {
  .coord-tab {
    font-size: var(--text-sm);
    padding: var(--space-2) var(--space-3);
  }

  .coord-select-row,
  .coord-io-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .coord-sys-side {
    padding: var(--space-2);
  }

  .coord-swap {
    justify-self: center;
    width: 36px;
    height: 36px;
    transform: rotate(90deg);
    margin-top: 0;
  }

  .coord-tag {
    flex: 1;
    text-align: center;
    padding: var(--space-1) var(--space-2);
  }

  .coord-io-gap {
    display: none;
  }

  .coord-input-row {
    flex-direction: column;
    gap: var(--space-3);
  }

  .distance-grid {
    flex-direction: column;
    gap: var(--space-4);
  }

  .coord-single-result,
  .result-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .result-label {
    min-width: auto;
  }

  .result-hint,
  .coord-single-copy-hint {
    opacity: 1;
  }
}