/*
 * 轻办工具箱 - 2K / 大屏适配补丁 v2.1
 * 普通 1366/1440 窗口基本不变；2K/准4K大窗口放大内容区、字号、卡片和间距。
 * 仅前台 CSS 覆盖，不改工具业务逻辑，不影响 _admin 后台。
 */

:root {
  --gt-page-max: 1280px;
  --gt-page-pad-x: clamp(16px, 3vw, 34px);
  --gt-page-pad-y: clamp(18px, 3vw, 36px);
  --gt-wide-card-gap: 16px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

main,
.page,
.page-wrap,
.page-wrapper,
.container,
.site-container,
.home-main,
.tool-main,
.main-content,
.page-main,
.nav-inner,
.header-inner,
.footer-inner {
  width: min(100%, var(--gt-page-max)) !important;
  max-width: var(--gt-page-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

main,
.home-main,
.tool-main,
.main-content,
.page-main {
  padding-left: var(--gt-page-pad-x) !important;
  padding-right: var(--gt-page-pad-x) !important;
  box-sizing: border-box !important;
}

@media (min-width: 1440px) {
  :root {
    --gt-page-max: 1360px;
    --gt-page-pad-x: 34px;
    --gt-wide-card-gap: 17px;
  }
}

@media (min-width: 1700px) {
  :root {
    --gt-page-max: min(82vw, 1640px);
    --gt-page-pad-x: 42px;
    --gt-page-pad-y: 38px;
    --gt-wide-card-gap: 20px;
  }

  html {
    font-size: 17px;
  }

  body {
    background: #f6f8fb;
  }

  body > main,
  main.home-main,
  main.tool-main,
  .main-content,
  .page-main {
    padding-top: 42px !important;
    padding-bottom: 44px !important;
  }

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

  .tools-grid,
  .tool-list,
  .card-grid,
  .home-tools,
  .category-grid,
  .feature-grid,
  .all-tools,
  .tools-list,
  .grid {
    gap: var(--gt-wide-card-gap) !important;
  }

  .tools-grid,
  .card-grid,
  .home-tools,
  .category-grid,
  .feature-grid,
  .all-tools {
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
  }

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

  .tool-layout,
  .tool-page,
  .tool-grid,
  .tool-content-wrap,
  .layout-two-column,
  .two-column,
  .main-grid {
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 30px !important;
  }

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

  textarea,
  .textarea,
  .code-input,
  .code-output {
    min-height: 260px;
  }
}

@media (min-width: 2200px) {
  :root {
    --gt-page-max: min(82vw, 1880px);
    --gt-page-pad-x: 48px;
    --gt-page-pad-y: 44px;
    --gt-wide-card-gap: 22px;
  }

  html {
    font-size: 18px;
  }

  body > main,
  main.home-main,
  main.tool-main,
  .main-content,
  .page-main {
    padding-top: 48px !important;
    padding-bottom: 52px !important;
  }

  .tools-grid,
  .card-grid,
  .home-tools,
  .category-grid,
  .feature-grid,
  .all-tools {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
  }

  .tool-layout,
  .tool-page,
  .tool-grid,
  .tool-content-wrap,
  .layout-two-column,
  .two-column,
  .main-grid {
    grid-template-columns: minmax(0, 1fr) 370px !important;
    gap: 34px !important;
  }

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

  textarea,
  .textarea,
  .code-input,
  .code-output {
    min-height: 290px;
  }
}

@media (min-width: 1700px) and (max-height: 820px) {
  :root {
    --gt-page-pad-y: 28px;
  }

  html {
    font-size: 16.5px;
  }

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

@media (max-width: 900px) {
  :root {
    --gt-page-max: 100%;
    --gt-page-pad-x: 14px;
    --gt-page-pad-y: 16px;
  }

  html {
    font-size: 16px;
  }

  main,
  .home-main,
  .tool-main,
  .main-content,
  .page-main {
    width: 100% !important;
    max-width: 100% !important;
  }
}