/*
 * 轻办工具箱 - 页面尺寸统一补丁 v1
 * 目的：解决不同工具页切换时页面宽度、操作区高度、侧栏位置和移动端横向滚动不一致的问题。
 * 说明：本文件只做布局兜底，不改业务 JS，不影响 PDF/图片/文本工具的本地处理逻辑。
 */

:root {
  --gt-page-max: 1280px;
  --gt-page-pad-x: clamp(16px, 3vw, 32px);
  --gt-page-pad-y: clamp(18px, 3vw, 34px);
  --gt-card-radius: 16px;
  --gt-card-border: 1px solid rgba(15, 23, 42, 0.10);
  --gt-card-shadow: 0 10px 28px rgba(15, 23, 42, 0.06);
  --gt-muted-bg: #f8fafc;
}

html {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  width: 100%;
  min-width: 0;
  min-height: 100vh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: #f6f8fb;
}

body > main,
main,
.page,
.page-wrap,
.page-wrapper,
.container,
.site-container,
.content,
.main-content,
.home-main,
.tool-main,
.admin-main {
  box-sizing: border-box;
}

/* 统一主要页面容器宽度，避免某些页面窄、某些页面宽 */
main,
.page,
.page-wrap,
.page-wrapper,
.container,
.site-container,
.home-main,
.tool-main {
  width: min(100%, var(--gt-page-max));
  max-width: var(--gt-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gt-page-pad-x);
  padding-right: var(--gt-page-pad-x);
}

body > main,
main.home-main,
main.tool-main,
.main-content,
.page-main {
  flex: 1 0 auto;
  padding-top: var(--gt-page-pad-y);
  padding-bottom: var(--gt-page-pad-y);
}

/* 头尾栏统一宽度，不让导航在页面切换时跳动 */
header,
.site-header,
.topbar,
.navbar,
footer,
.site-footer {
  box-sizing: border-box;
  width: 100%;
}

header > *,
.site-header > *,
.topbar > *,
.navbar > *,
footer > *,
.site-footer > * {
  box-sizing: border-box;
  max-width: var(--gt-page-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gt-page-pad-x);
  padding-right: var(--gt-page-pad-x);
}

/* 工具页常见两栏：主工具区 + 相关工具。没有对应 class 时用结构兜底 */
.tool-layout,
.tool-page,
.tool-grid,
.tool-content-wrap,
.layout-two-column,
.two-column,
.main-grid {
  box-sizing: border-box;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(18px, 2.2vw, 28px);
  align-items: start;
}

.tool-layout > *,
.tool-page > *,
.tool-grid > *,
.tool-content-wrap > *,
.layout-two-column > *,
.two-column > *,
.main-grid > * {
  min-width: 0;
}

/* 工具操作卡片统一最小高度，切工具时视觉不忽大忽小 */
.tool-card,
.tool-panel,
.tool-box,
.tool-area,
.upload-card,
.upload-panel,
.converter-card,
.workspace,
.editor-panel,
.result-panel,
.output-panel,
.settings-panel,
.info-card,
.card,
.panel,
section {
  box-sizing: border-box;
}

.tool-card,
.tool-panel,
.tool-box,
.tool-area,
.upload-card,
.upload-panel,
.converter-card,
.workspace,
.editor-panel {
  min-height: 300px;
}

.output-panel,
.result-panel,
.preview-panel,
.download-panel {
  min-height: 96px;
}

/* 首页工具卡片统一尺寸，避免分类/工具入口高度不齐 */
.tools-grid,
.tool-list,
.card-grid,
.home-tools,
.category-grid,
.feature-grid,
.all-tools {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.tools-grid > *,
.tool-list > *,
.card-grid > *,
.home-tools > *,
.category-grid > *,
.feature-grid > *,
.all-tools > * {
  height: 100%;
  min-width: 0;
}

.tool-item,
.tool-link,
.tool-card-link,
.home-tool-card,
.category-card,
.feature-card {
  min-height: 118px;
}

/* 侧边相关工具统一宽度和卡片表现 */
aside,
.sidebar,
.related-tools,
.right-panel,
.tool-aside {
  box-sizing: border-box;
  min-width: 0;
}

.related-tools,
.sidebar-card,
.aside-card,
.tool-aside {
  position: relative;
}

@media (min-width: 1100px) {
  .related-tools,
  .sidebar,
  .tool-aside,
  aside {
    align-self: start;
  }
}

/* 表单、文本框、文件区域统一，不出现英文原生控件撑破布局 */
input,
textarea,
select,
button,
.file-label,
.upload-btn,
.btn {
  box-sizing: border-box;
  max-width: 100%;
  font: inherit;
}

textarea,
pre,
code,
.output,
.result,
.preview,
.json-output,
.text-output {
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}

textarea {
  width: 100%;
  min-height: 220px;
  resize: vertical;
}

pre {
  overflow: auto;
}

/* 文件上传控件兜底中文化：隐藏原生 input，保留可点击 label/按钮 */
input[type="file"] {
  max-width: 100%;
}

.file-input-hidden,
.visually-hidden-file,
.upload-input-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* 图片/PDF 预览不要撑破页面 */
img,
canvas,
svg,
video,
iframe,
object,
embed {
  max-width: 100%;
}

canvas {
  height: auto;
}

/* 表格和长链接不要导致横向滚动 */
table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
}

.table-wrap,
.table-responsive {
  width: 100%;
  overflow-x: auto;
}

a {
  overflow-wrap: anywhere;
}

/* FAQ / 使用说明 / 隐私说明统一间距 */
.faq,
.faq-section,
.guide,
.usage,
.privacy,
.notice,
.tips,
.help-section {
  margin-top: clamp(18px, 2vw, 28px);
}

/* 移动端：所有页面统一单栏，禁止横向溢出 */
@media (max-width: 900px) {
  :root {
    --gt-page-pad-x: 14px;
    --gt-page-pad-y: 16px;
  }

  main,
  .page,
  .page-wrap,
  .page-wrapper,
  .container,
  .site-container,
  .home-main,
  .tool-main {
    width: 100%;
    max-width: 100%;
  }

  .tool-layout,
  .tool-page,
  .tool-grid,
  .tool-content-wrap,
  .layout-two-column,
  .two-column,
  .main-grid {
    grid-template-columns: 1fr;
  }

  .tool-card,
  .tool-panel,
  .tool-box,
  .tool-area,
  .upload-card,
  .upload-panel,
  .converter-card,
  .workspace,
  .editor-panel {
    min-height: 240px;
  }

  .tools-grid,
  .tool-list,
  .card-grid,
  .home-tools,
  .category-grid,
  .feature-grid,
  .all-tools {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .tool-card,
  .tool-panel,
  .tool-box,
  .tool-area,
  .upload-card,
  .upload-panel,
  .converter-card,
  .workspace,
  .editor-panel {
    min-height: 220px;
  }

  textarea {
    min-height: 180px;
  }

  .tool-item,
  .tool-link,
  .tool-card-link,
  .home-tool-card,
  .category-card,
  .feature-card {
    min-height: auto;
  }
}