:root {
  color-scheme: light;
  --bg: #edf4ff;
  --panel: #ffffff;
  --ink: #111827;
  --muted: #6b7688;
  --line: #d9e3f2;
  --blue: #2f6df6;
  --green: #2eaa70;
  --purple: #6e4fea;
  --orange: #f06a3d;
  --shadow: 0 22px 80px rgba(40, 72, 120, 0.13);
  --radius: 8px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: radial-gradient(circle at 18% 0%, rgba(255,255,255,.9), transparent 34%), linear-gradient(180deg, #eaf3ff 0%, #f8fbff 100%);
}
button, input { font: inherit; }
button { border: 0; }
svg { width: 28px; height: 28px; fill: currentColor; }
.page-shell { width: min(1200px, calc(100vw - 32px)); margin: 0 auto; padding: 28px 0; }
.tool-card { overflow: hidden; border: 1px solid rgba(225,232,243,.95); border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: var(--shadow); }
.hero-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.compact-hero { min-height: 132px; }
.brand { display: flex; align-items: center; gap: 18px; min-width: 0; }
.brand-logo { width: 86px; height: 86px; border-radius: 18px; object-fit: cover; box-shadow: 0 16px 34px rgba(47,109,246,.24); flex: 0 0 auto; }
h1, h2, h3, p { margin: 0; }
.brand h1 { font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: 0; }
.brand p { margin-top: 10px; color: var(--muted); font-size: 16px; }
.tool-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px 28px 4px; }
.tool-nav a { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 16px; border: 1px solid #cfe0fa; border-radius: var(--radius); color: var(--blue); background: linear-gradient(180deg,#fff,#f6faff); box-shadow: 0 10px 24px rgba(47,109,246,.09); font-size: 16px; font-weight: 900; text-decoration: none; transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; }
.tool-nav a:hover, .tool-nav a:focus-visible { border-color: #93b5ff; outline: none; transform: translateY(-1px); box-shadow: 0 14px 28px rgba(47,109,246,.16); }
.workbench-title { display: inline-flex; align-items: center; margin: 24px 28px -8px; min-height: 38px; padding: 0 20px; border: 1px solid rgba(255,255,255,.62); border-radius: 999px; color: #fff; background: linear-gradient(135deg,#2f6df6,#5f7cff 56%,#7556f1); box-shadow: 0 12px 28px rgba(47,109,246,.26); font-size: 18px; font-weight: 900; }
.detail-title { background: linear-gradient(135deg,#2467d8,#2eaa70); }
.white-title { background: linear-gradient(135deg,#1863d4,#2bbf95); }
.png-title { background: linear-gradient(135deg,#7453ea,#2f6df6); }
.crop-workbench { margin: 28px; min-height: 750px; padding: 21px 22px; border: 1px solid #cfe0fa; border-radius: 16px; background: linear-gradient(180deg, rgba(248,251,255,.96), rgba(255,255,255,.98)); box-shadow: inset 0 1px 0 rgba(255,255,255,.75); }
.workbench-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(360px, 2fr); gap: 18px; align-items: stretch; height: 100%; }
.upload-section { display: grid; grid-template-rows: 350px 340px; gap: 16px; min-height: 0; }
.drop-zone { display: grid; place-items: center; min-height: 0; height: 350px; padding: 24px; border: 2px dashed #8eb0ff; border-radius: 14px; background: linear-gradient(180deg,#fbfdff,#f8fbff); text-align: center; outline: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.drop-zone.is-dragging, .drop-zone:focus-visible { border-color: var(--blue); background: #f4f8ff; transform: translateY(-1px); }
.folder-icon { display: grid; place-items: center; width: 96px; height: 74px; margin-bottom: 12px; border-radius: 18px; color: #fff; background: linear-gradient(180deg,#2470ef,#76a9ff); box-shadow: 0 18px 34px rgba(47,109,246,.22); }
.folder-icon svg { width: 50px; height: 50px; }
.drop-zone h2 { font-size: 22px; line-height: 1.28; letter-spacing: 0; }
.drop-zone h2 button { padding: 0; color: var(--blue); background: transparent; cursor: pointer; font-weight: 800; }
.drop-zone p { margin: 12px 0 16px; color: var(--muted); font-size: 18px; }
.drop-actions { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; width: 100%; margin-top: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; min-width: 158px; padding: 0 20px; border-radius: var(--radius); color: #fff; background: var(--blue); cursor: pointer; font-weight: 900; box-shadow: 0 15px 30px rgba(47,109,246,.2); }
.button.ghost { color: var(--blue); background: #f4f8ff; border: 1px solid #cfe0fa; box-shadow: none; }
.button:disabled, .download-all:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.upload-side { display: flex; flex-direction: column; min-height: 0; height: 340px; padding: 22px; border: 1px solid #d6e2f4; border-radius: 14px; background: linear-gradient(180deg,#fbfdff,#f6f9ff); }
.side-label { margin: 0 0 10px; color: var(--muted); font-size: 15px; font-weight: 800; }
.upload-count { color: var(--blue); font-size: 32px; font-weight: 900; line-height: 1.1; }
.side-note { margin: 12px 0 16px; color: var(--muted); font-size: 14px; line-height: 1.7; }
.file-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 8px; min-height: 0; overflow: auto; margin: 0; padding: 0; list-style: none; flex: 1; }
.file-list li { display: flex; align-items: center; overflow: hidden; min-height: 38px; padding: 8px 9px; border: 1px solid #e0e9f8; border-radius: var(--radius); background: #fff; color: #4b5870; font-size: 12px; line-height: 1.25; word-break: break-all; }
.side-clear { align-self: center; width: auto; margin-top: 14px; }
.output-section { display: flex; flex-direction: column; min-height: 100%; height: 100%; margin: 0; padding: 22px; border: 1px solid #cbdcf7; border-radius: 14px; background: linear-gradient(180deg, rgba(246,250,255,.98), rgba(255,255,255,.98)), radial-gradient(circle at 100% 0%, rgba(47,109,246,.12), transparent 36%); }
.output-head { display: grid; grid-template-columns: 1fr; align-items: center; gap: 14px; margin-bottom: 18px; }
.section-title h2 { margin-bottom: 8px; font-size: 22px; }
.section-title p { color: var(--muted); font-size: 14px; line-height: 1.7; }
.size-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.single-size-grid { flex: 1; align-content: center; }
.size-card { display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 14px; min-height: 122px; padding: 14px; border: 1px solid; border-radius: 12px; overflow: hidden; }
.jpg-card { min-height: 184px; }
.blue-card { border-color: #c9ddff; background: linear-gradient(135deg,#fbfdff,#f6faff); }
.green-card { border-color: #d3eadb; background: linear-gradient(135deg,#fbfffc,#f5fff8); }
.purple-card { border-color: #e2d9ff; background: linear-gradient(135deg,#fffafd,#fbf8ff); }
.mockup { display: grid; place-items: center; overflow: hidden; width: 100%; max-width: 92px; justify-self: center; border-radius: var(--radius); background: linear-gradient(180deg,#86c3ff 0%,#e6f7ff 54%,#76b5e8 55%,#c8efff 100%); box-shadow: 0 14px 26px rgba(47,109,246,.18); }
.mockup.square { aspect-ratio: 1; }
.mockup.tall { aspect-ratio: 1440 / 1920; max-height: 110px; }
.mockup.long { aspect-ratio: 1440 / 2160; max-height: 110px; }
.detail-mockup { aspect-ratio: 3 / 4; max-height: 110px; }
.transparent-preview { background-color: #fff; background-image: linear-gradient(45deg,#e7edf4 25%,transparent 25%), linear-gradient(-45deg,#e7edf4 25%,transparent 25%), linear-gradient(45deg,transparent 75%,#e7edf4 75%), linear-gradient(-45deg,transparent 75%,#e7edf4 75%); background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0; }
.white-preview { background: #fff; }
.mockup span { padding: 6px; color: rgba(17,24,39,.55); font-size: 14px; font-weight: 800; text-align: center; }
.mockup img { width: 100%; height: 100%; display: block; object-fit: cover; }
.transparent-preview img { object-fit: contain; }
.size-copy h3 { margin-bottom: 10px; font-size: 16px; line-height: 1.15; white-space: nowrap; letter-spacing: 0; }
.blue-card h3 { color: var(--blue); } .green-card h3 { color: var(--green); } .purple-card h3 { color: var(--purple); }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 14px; border: 1px solid; border-radius: var(--radius); font-size: 14px; font-weight: 800; }
.blue-pill { border-color: #c9ddff; color: var(--blue); background: #f2f7ff; }
.green-pill { border-color: #cbe9d6; color: var(--green); background: #f2fbf5; }
.purple-pill { border-color: #e2d9ff; color: var(--purple); background: #f8f5ff; }
.download-all { display: grid; place-items: center; width: 100%; min-width: 0; min-height: 72px; padding: 12px 26px; border-radius: var(--radius); color: #fff; background: linear-gradient(135deg,#2f6df6,#2676f6); cursor: pointer; box-shadow: 0 18px 32px rgba(47,109,246,.22); }
.download-all strong { font-size: 22px; } .download-all small { font-size: 15px; opacity: .86; }
@media (max-width: 1040px) { .workbench-grid, .tool-nav { grid-template-columns: 1fr; } .crop-workbench { min-height: auto; } .upload-section { grid-template-rows: auto auto; } .drop-zone, .upload-side { height: auto; min-height: 260px; } }
@media (max-width: 720px) { .page-shell { width: min(100% - 18px, 620px); padding: 14px 0; } .hero-bar, .tool-nav, .crop-workbench { padding-left: 18px; padding-right: 18px; } .brand { align-items: flex-start; } .brand-logo { width: 60px; height: 60px; border-radius: 12px; } .brand p, .drop-zone p, .section-title p, .side-note { font-size: 15px; } .upload-count { font-size: 28px; } .drop-zone h2 { font-size: 21px; } .button, .download-all { width: 100%; min-width: 0; } .size-card { grid-template-columns: 1fr; padding: 24px 18px; } .mockup { max-width: 210px; } .crop-workbench { margin-left: 18px; margin-right: 18px; } }

.workbench-title {
  width: max-content;
  margin: 0 0 20px;
  transform: none;
  box-shadow: 0 12px 28px rgba(47, 109, 246, 0.18);
}

.crop-workbench {
  min-height: 820px;
  padding-top: 24px;
}

.crop-workbench[data-tool="auto"] {
  border-color: #cfe0fa;
  background:
    linear-gradient(180deg, rgba(246, 250, 255, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(47, 109, 246, 0.10), transparent 38%);
}

.crop-workbench[data-tool="detail"] {
  border-color: #cceada;
  background:
    linear-gradient(180deg, rgba(245, 255, 249, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(46, 170, 112, 0.10), transparent 38%);
}

.crop-workbench[data-tool="white"] {
  border-color: #c9edf2;
  background:
    linear-gradient(180deg, rgba(244, 253, 255, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(28, 151, 181, 0.10), transparent 38%);
}

.crop-workbench[data-tool="png"] {
  border-color: #e2d9ff;
  background:
    linear-gradient(180deg, rgba(250, 247, 255, 0.98), rgba(255, 255, 255, 0.98)),
    radial-gradient(circle at 100% 0%, rgba(110, 79, 234, 0.10), transparent 38%);
}

.crop-workbench[data-tool="auto"] .output-section,
.crop-workbench[data-tool="auto"] .drop-zone,
.crop-workbench[data-tool="auto"] .upload-side {
  background: linear-gradient(180deg, #fbfdff, #f5f9ff);
}

.crop-workbench[data-tool="detail"] .output-section,
.crop-workbench[data-tool="detail"] .drop-zone,
.crop-workbench[data-tool="detail"] .upload-side {
  background: linear-gradient(180deg, #fbfffc, #f4fbf7);
  border-color: #d3eadb;
}

.crop-workbench[data-tool="white"] .output-section,
.crop-workbench[data-tool="white"] .drop-zone,
.crop-workbench[data-tool="white"] .upload-side {
  background: linear-gradient(180deg, #fbfeff, #f1fbfd);
  border-color: #cfecf2;
}

.crop-workbench[data-tool="png"] .output-section,
.crop-workbench[data-tool="png"] .drop-zone,
.crop-workbench[data-tool="png"] .upload-side {
  background: linear-gradient(180deg, #fefdff, #f8f5ff);
  border-color: #e2d9ff;
}

@media (max-width: 1040px) {
  .crop-workbench {
    min-height: auto;
    padding-top: 24px;
  }
}

@media (max-width: 720px) {
  .workbench-title {
    margin-bottom: 16px;
  }

  .file-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Compact 2x2 tool dashboard */
.page-shell {
  width: min(1280px, calc(100vw - 32px));
}

.tool-card {
  overflow: visible;
}

.hero-bar {
  padding: 22px 26px;
}

.compact-hero {
  min-height: 112px;
}

.brand-logo {
  width: 72px;
  height: 72px;
  border-radius: 16px;
}

.brand h1 {
  font-size: clamp(28px, 3vw, 38px);
}

.brand p {
  font-size: 15px;
}

.tool-nav {
  padding: 16px 24px 8px;
  gap: 12px;
}

.tool-nav a {
  min-height: 44px;
  font-size: 15px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 18px 24px 24px;
}

.crop-workbench {
  display: flex;
  flex-direction: column;
  min-height: 0;
  margin: 0;
  padding: 18px;
  border-radius: 14px;
}

.workbench-title {
  min-height: 34px;
  margin: 0 0 14px;
  padding: 0 16px;
  font-size: 16px;
}

.workbench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.8fr);
  gap: 12px;
  align-items: stretch;
  height: 100%;
}

.upload-section {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: minmax(210px, auto) minmax(210px, auto);
  gap: 12px;
  min-height: 0;
}

.drop-zone {
  height: auto;
  min-height: 210px;
  padding: 18px;
}

.folder-icon {
  width: 72px;
  height: 58px;
  margin-bottom: 10px;
  border-radius: 14px;
}

.folder-icon svg {
  width: 38px;
  height: 38px;
}

.drop-zone h2 {
  font-size: 18px;
  line-height: 1.35;
}

.drop-zone p {
  margin: 8px 0 12px;
  font-size: 13px;
  line-height: 1.55;
}

.drop-actions {
  gap: 10px;
  margin-top: 6px;
}

.button {
  min-width: 128px;
  min-height: 42px;
  padding: 0 14px;
  font-size: 14px;
}

.upload-side {
  height: auto;
  min-height: 210px;
  padding: 16px;
}

.side-label {
  margin-bottom: 6px;
  font-size: 13px;
}

.upload-count {
  font-size: 24px;
}

.side-note {
  margin: 8px 0 10px;
  font-size: 12px;
  line-height: 1.5;
}

.file-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}

.file-list li {
  min-height: 30px;
  padding: 6px 7px;
  font-size: 11px;
  line-height: 1.2;
}

.side-clear {
  margin-top: 10px;
}

.output-section {
  min-height: 0;
  height: 100%;
  padding: 16px;
}

.output-head {
  gap: 10px;
  margin-bottom: 12px;
}

.section-title h2 {
  margin-bottom: 6px;
  font-size: 18px;
}

.section-title p {
  font-size: 12px;
  line-height: 1.55;
}

.download-all {
  min-height: 58px;
  padding: 10px 18px;
}

.download-all strong {
  font-size: 18px;
}

.download-all small {
  font-size: 12px;
}

.size-grid {
  gap: 8px;
}

.size-card {
  grid-template-columns: 74px 1fr;
  min-height: 88px;
  padding: 10px;
  gap: 10px;
}

.jpg-card {
  min-height: 110px;
}

.mockup {
  max-width: 74px;
}

.mockup.tall,
.mockup.long,
.detail-mockup {
  max-height: 78px;
}

.mockup span {
  font-size: 12px;
}

.size-copy h3 {
  margin-bottom: 8px;
  font-size: 14px;
}

.pill {
  min-height: 26px;
  padding: 0 10px;
  font-size: 12px;
}

@media (max-width: 1120px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .workbench-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.95fr);
  }
}

@media (max-width: 760px) {
  .page-shell {
    width: min(100% - 18px, 640px);
    padding: 14px 0;
  }

  .hero-bar {
    padding: 18px;
  }

  .tool-nav {
    grid-template-columns: 1fr 1fr;
    padding: 14px 18px 8px;
  }

  .tools-grid {
    padding: 14px 18px 18px;
  }

  .workbench-grid,
  .upload-section {
    grid-template-columns: 1fr;
  }

  .drop-zone,
  .upload-side {
    height: auto;
    min-height: 220px;
  }

  .file-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fixed 1360 canvas and 640x730 module layout */
.page-shell {
  width: min(1360px, calc(100vw - 32px));
}

.tools-grid {
  grid-template-columns: repeat(2, 640px);
  justify-content: center;
  gap: 24px;
  padding: 24px 28px 32px;
}

.crop-workbench {
  width: 640px;
  height: 730px;
  min-height: 730px;
  padding: 10px 20px;
  overflow: hidden;
}

.workbench-title {
  height: 28px;
  flex: 0 0 auto;
  margin: 0 0 12px;
  padding: 0 16px;
  align-items: center;
}

.workbench-grid {
  grid-template-columns: 300px 290px;
  gap: 10px;
  height: 650px;
}

.upload-section {
  grid-template-columns: 300px;
  grid-template-rows: 330px 300px;
  gap: 20px;
  height: 650px;
}

.drop-zone {
  width: 300px;
  height: 330px;
  min-height: 330px;
  padding: 16px;
}

.upload-side {
  width: 300px;
  height: 300px;
  min-height: 300px;
  padding: 14px;
}

.output-section {
  width: 290px;
  height: 650px;
  min-height: 650px;
  padding: 14px;
}

.file-list {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1360px) {
  .tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding-left: 18px;
    padding-right: 18px;
  }

  .crop-workbench {
    width: 100%;
  }
}

@media (max-width: 1180px) {
  .tools-grid {
    grid-template-columns: 1fr;
  }

  .crop-workbench {
    width: min(640px, 100%);
    justify-self: center;
  }
}

@media (max-width: 820px) {
  .crop-workbench {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .workbench-grid,
  .upload-section {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    height: auto;
  }

  .drop-zone,
  .upload-side,
  .output-section {
    width: 100%;
    height: auto;
    min-height: 260px;
  }
}