/* Ikun Lab - 纯前端样式，便于 CDN 部署 */

:root {
  --sidebar-width: 329px;/* 左侧导航栏固定宽度 329 像素 */
  --sidebar-bg: #F7F7F7;/* 左侧导航栏背景颜色 */
  --sidebar-active-bg: #e8eaed;/* 导航项 hover / 选中时的背景色 */
  --content-bg: #fff;/* 右侧内容区域的背景色（整体页面背景） */
  --text-primary: #1a1a1a;/* 主文字颜色（标题、主要内容） */

  --text-secondary: #5f6368; /* 次级文字颜色（描述文字等） */
  --border: #e0e0e0;
  --card-hover-bg: #f5f5f5;
  --radius: 8px;/* 统一使用的圆角半径 */
  --space: 24px;/* 统一使用的外边距/内边距基础尺寸 */
  --card-gap: 20px;/* 卡片网格之间的间距 */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  color: var(--text-primary);
  background: var(--content-bg);
  line-height: 1.5;
}

.app {
  display: flex;
  min-height: 100vh;
}

/* ========== 左侧导航（可延展：列表结构，可加二级菜单） ========== */
.sidebar {
  width: var(--sidebar-width);
  min-width: var(--sidebar-width);
  background: var(--sidebar-bg);
  border-right: 1px solid #EAEAEA;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.sidebar-header {
  padding: 30px 24px 30px 30px; /* 顶部和左侧 30px；底部 30px，保证与下方导航区域的垂直间距为 30px */
  display: flex;
  align-items: center;
  gap: 8px; /* Icon 与标题的水平间距 8px */
}

.logo-icon {
  width: 24px; /* Icon 宽度 24px */
  height: 24px; /* Icon 高度 24px */
  border-radius: 50%; /* 若原图为圆形头像，保持圆形显示 */
  flex-shrink: 0;
}

.site-name {
  margin: 0;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; /* 优先使用思源黑体 */
  font-size: 18px; /* 字号 18px */
  line-height: 24px; /* 行高 24px，使其与 Icon 垂直对齐 */
  font-weight: 600;
  color: rgba(13, 13, 13, 0.6); /* 颜色 0D0D0D，透明度 60% */
}

.sidebar-nav {
  flex: 1;
  padding: 0 0 12px; /* 顶部不留内边距，让与 header 的间距完全由 header 的 30px 决定；底部保留 12px */
  overflow-y: auto;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 0 12px; /* 高度固定 48px，垂直居中后，Icon 距离上下各 16px；左侧内边距 12px 对齐 Icon */
  color: inherit;
  text-decoration: none;
  border: none;
  background-color: rgba(216, 216, 216, 0); /* 未选中状态填充为 D8D8D8 透明度 0%（视觉上透明） */
  width: 293px; /* 每个 TAB 卡片宽度 293px */
  height: 48px; /* 每个 TAB 卡片高度 48px（含内边距） */
  margin: 0 18px; /* 左右间距 18px：18 + 293 + 18 = 329，竖向间距单独在相邻元素上控制为 8px */
  border-radius: 8px; /* 背景卡片圆角 8px */
  cursor: pointer;
  font-size: 0.9375rem;
  text-align: left;
  font-family: inherit;
  transition: background-color 0.15s ease;
}

.nav-item:hover {
  background-color: rgba(216, 216, 216, 0.4); /* 悬停时稍微显色，便于交互反馈 */
}

.nav-item.active {
  background-color: rgba(216, 216, 216, 0.3); /* 选中态填充为 D8D8D8，透明度 30% */
  font-weight: 500;
}

.sidebar-nav .nav-item + .nav-item {
  margin-top: 8px; /* 相邻 TAB 之间的垂直间距为 8px，首个 TAB 不受影响 */
}

.nav-item .nav-icon {
  width: 16px;  /* Icon 宽度 16px */
  height: 16px; /* Icon 高度 16px */
  flex-shrink: 0;
  opacity: 0.8; /* 默认未选中时 80% 不透明度 */
}

.nav-item.active .nav-icon {
  opacity: 1; /* 选中时 Icon 透明度 100% */
}

/* 图标：使用 assets 中的切图 */
.nav-icon.tools {
  background: url("assets/nav-design-tools.png") center/contain no-repeat; /* 设计工具箱 TAB 的 Icon 切图 */
}

.nav-icon.chart {
  background: url("assets/nav-digital-twin.png") center/contain no-repeat; /* 数字孪生/可视化 TAB 的 Icon 切图 */
}

.nav-icon.user {
  background: url("assets/nav-ux-design.png") center/contain no-repeat; /* 用户体验设计 TAB 的 Icon 切图 */
}

/* 导航文字样式 */
.nav-label {
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; /* 思源黑体 Regular 优先 */
  font-weight: 400; /* Regular 粗细 */
  font-size: 14px;  /* 14 号字 */
  line-height: 24px; /* 行高 24 */
  color: rgba(13, 13, 13, 0.8); /* 默认未选中：0D0D0D，透明度 80% */
}

.nav-item.active .nav-label {
  color: rgba(13, 13, 13, 1); /* 选中状态：0D0D0D，透明度 100% */
}

/* ========== 右侧内容区（可延展：section + 卡片网格） ========== */
.content {
  flex: 1;
  min-width: 0;
  padding: 80px 40px 80px 40px; /* 顶部距页面顶部 80px，左侧距导航栏 296px，右侧距页面边缘 296px，底部预留 80px */
  overflow-y: auto;
  background: var(--content-bg);
}

.content.tool-page-layout {
  padding: 80px 296px 80px 296px; /* 工具页的间距：顶部 80px，左侧距导航栏 296px，右侧距页面边缘 296px，底部 80px */
}

.content-section {
  margin-bottom: 80px; /* 模块与模块之间的间距为 80px */
}

.content-section:last-child {
  margin-bottom: 0;
}

.section-title {
  margin: 0 0 16px;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; /* 模块标题使用思源黑体 */
  font-size: 24px; /* 24 号字 */
  line-height: 35px; /* 行高 35 */
  font-weight: 700; /* Bold 粗细 */
  color: rgba(13, 13, 13, 0.8); /* 0D0D0D，透明度 80% */
}

/* ========== APNG 合成功能页面 ========== */
.tool-page {
  max-width: 100%; /* 二级页面占满 content 的可用宽度，由 content.tool-page-layout 控制左右 296px 间距 */
  margin: 0;
}

.tool-back {
  display: flex;
  align-items: center;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 40px;
}

.tool-back-icon {
  width: 34px;
  height: 34px;
}

.tool-back-text {
  margin-left: 8px;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 34px;
  font-weight: 400;
  color: rgba(13, 13, 13, 0.8);
}

.tool-page-title {
  margin: 40px 0 8px;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 24px;
  line-height: 35px;
  font-weight: 700;
  color: rgba(13, 13, 13, 0.8);
}

.tool-page-subtitle {
  margin: 0 0 40px;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 23px;
  color: rgba(13, 13, 13, 0.8);
}

.apng-panel {
  background: #ffffff;
  border-radius: 8px;
  padding: 0px;
}

.apng-upload {
  width: 100%;
  max-width: 1000px; /* 默认宽度 1000px */
  height: 248px; /* 默认高度 248px */
  border-radius: 8px; /* 圆角 8px */
  background: #F9F9F9; /* 填充色 F9F9F9 */
  border: 1px solid #EAEAEA; /* 内部描边 1px，色值 EAEAEA */
  padding: 74px 32px 75px; /* 顶部 74px，左右 32px，底部 75px */
  margin-bottom: 32px;
  box-sizing: border-box;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
}

.apng-upload[data-has-files="true"] {
  cursor: default;
}

.apng-drop-hover {
  background: #f0f0f0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.03);
}

.apng-upload-empty {
  text-align: center;
  color: var(--text-secondary);
}

.apng-upload-icon {
  width: 32px;
  height: 32px;
  margin: 0 auto 16px;
  background: url("assets/icon-apng-upload.svg") center/contain no-repeat;
}

.apng-upload-icon-success {
  background: url("assets/icon-apng-success.svg") center/contain no-repeat;
}

.apng-upload-title {
  margin: 0 0 8px;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 23px;
  font-weight: 400;
  color: rgba(13, 13, 13, 1); /* 0D0D0D 透明度 100% */
}

.apng-upload-subtitle {
  margin: 0;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(13, 13, 13, 0.6); /* 0D0D0D 透明度 60% */
}

.apng-upload-button {
  min-width: 160px;
  height: 36px;
  padding: 0 16px;
  border-radius: 18px;
  border: none;
  background: #000;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

.apng-upload-summary {
  display: flex;
  align-items: center;
  gap: 16px;
}

.apng-upload-summary-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #e6f4ea;
}

.apng-upload-summary-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apng-upload-success {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(13, 13, 13, 0.8);
}

.apng-upload-info {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
}

.apng-form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.apng-form-row {
  display: flex;
  gap: 40px;
  align-items: flex-end;
}

.apng-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.apng-field-grow {
  flex: 1;
  min-width: 0;
}

.apng-field-label {
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  color: rgba(13, 13, 13, 0.8); /* 0D0D0D 80%透明度 */
  white-space: nowrap;
}

.apng-field-grow {
  flex: 1;
}

.apng-input {
  width: 154px;
  height: 36px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(13, 13, 13, 0.6); /* 默认 0D0D0D 60%透明度 */
  box-sizing: border-box;
}

.apng-select {
  width: 154px;
  height: 36px;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid #EAEAEA;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(13, 13, 13, 0.6); /* 默认 0D0D0D 60%透明度 */
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('assets/icon-apng-dropdown.svg');
  background-repeat: no-repeat;
  background-position: right 0 center;
  background-size: 36px 36px;
  padding-right: 40px; /* 为下拉图标留出空间 */
}

.apng-input::placeholder {
  color: rgba(13, 13, 13, 0.6);
}

.apng-input:focus {
  outline: none;
  border-color: #999;
}

.apng-select:focus {
  outline: none;
  border-color: #999;
}

.apng-input.user-modified,
.apng-select.user-modified {
  color: rgba(13, 13, 13, 0.8); /* 用户修改后 80%透明度 */
}

.apng-input:disabled,
.apng-select:disabled {
  background-color: #F5F5F5;
  color: rgba(13, 13, 13, 0.6);
  border-color: #EAEAEA;
  cursor: not-allowed;
}

.apng-select:disabled {
  background-image: none;
  padding-right: 16px;
}

#apng-name-input.apng-input {
  flex: 1;
  min-width: 200px;
}

.apng-actions {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.apng-status-text {
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgba(13, 13, 13, 0.6);
  text-align: center;
}

.apng-primary-button {
  width: 160px;
  height: 53px;
  padding: 0 24px;
  border-radius: 27px;
  border: none;
  background: #0D0D0D;
  color: #fff;
  font-family: 'Source Han Sans SC', '思源黑体', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 20px;
  line-height: 29px;
  text-align: center;
  cursor: pointer;
}

.apng-primary-button[disabled] {
  opacity: 0.4;
  cursor: default;
}

.apng-error {
  margin: 0;
  font-size: 12px;
  color: #d93025;
}

/* MP4 压缩结果样式 */
.mp4-compress-result {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: #f0f9eb;
  border-radius: 8px;
  font-size: 14px;
}

.mp4-compress-original {
  color: #666;
  text-decoration: line-through;
}

.mp4-compress-arrow {
  color: #999;
  font-size: 18px;
}

.mp4-compress-new {
  color: #4caf50;
  font-weight: 600;
}

.mp4-compress-ratio {
  color: #ff9800;
  font-weight: 600;
}

.mp4-form-row-inline {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 在 1920 宽度下三列布局 */
  column-gap: var(--card-gap); /* 列间距使用统一变量（默认 20px） */
  row-gap: var(--card-gap); /* 行间距同样使用统一变量 */
}

.tool-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px; /* 上下左右 24px，保证 Icon 距离卡片边缘 24px */
  background-color: rgba(216, 216, 216, 0); /* 默认背景为 D8D8D8，透明度 0%（视觉透明） */
  border: none; /* 按设计稿：卡片无描边 */
  border-radius: 8px; /* 卡片圆角 8px */
  width: 100%; /* 在三列网格中占满所在列宽度（约等于 490px） */
  max-width: 490px; /* 在 1920 布局下接近 490px 宽 */
  min-height: 99px; /* 高度不小于 99px：24 + 51 + 24 = 99 */
  text-decoration: none;
  color: inherit;
  transition: background-color 0.15s ease;
}

.tool-card:hover {
  background-color: rgba(216, 216, 216, 0.2); /* Hover 时填充为 D8D8D8，透明度 20% */
}

/* 卡片获得焦点时不显示默认蓝色描边（按设计隐藏） */
.tool-card:focus {
  outline: none;
}

.tool-icon {
  width: 51px;  /* Icon 宽度 51px */
  height: 51px; /* Icon 高度 51px */
  border-radius: 8px; /* 若切图是方形，可保持 8px 圆角；如果是纯图标也可以改为 0 */
  flex-shrink: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain; /* 保证 51x51 内完整显示图标 */
}

/* 按工具 id 绑定对应的切图，假设已按以下方式命名放在 assets 目录下 */
.tool-icon-apng-merge { background-image: url("assets/tool-apng-merge.png"); }
.tool-icon-gif-split { background-image: url("assets/tool-gif-split.png"); }
.tool-icon-webp-split { background-image: url("assets/tool-webp-split.png"); }
.tool-icon-mp4-compress { background-image: url("assets/tool-mp4-compress.png"); }
.tool-icon-apng-split { background-image: url("assets/tool-apng-split.png"); }
.tool-icon-webp-merge { background-image: url("assets/tool-webp-merge.png"); }
.tool-icon-mp4-split { background-image: url("assets/tool-mp4-split.png"); }
.tool-icon-gif-merge { background-image: url("assets/tool-gif-merge.png"); }
.tool-icon-mp4-frame { background-image: url("assets/tool-mp4-frame.png"); }

.tool-icon-png-compress { background-image: url("assets/tool-png-compress.png"); }
.tool-icon-png-seq-compress { background-image: url("assets/tool-png-seq-compress.png"); }
.tool-icon-jpg-compress { background-image: url("assets/tool-jpg-compress.png"); }

.tool-icon-scene-viewer { background-image: url("assets/tool-scene-viewer.png"); }
.tool-icon-data-viz { background-image: url("assets/tool-data-viz.png"); }

.tool-icon-prototype { background-image: url("assets/tool-prototype.png"); }
.tool-icon-accessibility { background-image: url("assets/tool-accessibility.png"); }

.tool-body {
  flex: 1;
  min-width: 0;
}

.tool-name {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

.tool-desc {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--text-secondary);
}

.tool-arrow {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  opacity: 0.5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6368' stroke-width='2'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.content-empty {
  color: var(--text-secondary);
  margin: var(--space) 0;
}

/* 响应式：小屏时侧栏可折叠或改为顶栏，此处仅做内容区列数适配 */
@media (max-width: 768px) {
  .app {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    flex-wrap: wrap;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .sidebar-header {
    width: 100%;
  }

  .sidebar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px var(--space) 12px;
  }

  .nav-item {
    padding: 8px 12px; /* 小屏时缩小内边距 */
    border-radius: var(--radius); /* 保持圆角 8px */
    width: auto; /* 小屏宽度自适应 */
    height: auto; /* 小屏高度自适应 */
    margin: 0; /* 小屏不再使用 18px 固定边距，交由 flex 控制 */
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }
}