:root {
  --brand: #5f4ecb;
  --brand-dark: #47399a;
  --bg: #faf8f3;
  --ink: #241f33;
  --muted: #6b6478;
  --line: #e6e1f5;
  --card: #ffffff;
  --danger: #c94b4b;
  --radius: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Segoe UI", sans-serif;
  line-height: 1.5;
}

a { color: var(--brand); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 8px;
  padding: 14px 20px;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  row-gap: 8px;
  justify-content: flex-end;
}

@media (max-width: 480px) {
  .topbar-actions { gap: 8px; }
  .family-badge { padding: 5px 9px; }
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 18px;
}

.brand .mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: url("../img/icon.png") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-utility {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
}
.nav-utility:hover { color: var(--brand); }

.family-badge {
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.family-badge:hover { border-color: var(--brand); color: var(--brand); }

.lang-switch { display: flex; gap: 6px; font-size: 13px; }
.lang-switch a {
  padding: 4px 8px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--muted);
}
.lang-switch a.active { background: var(--brand); color: #fff; }

main {
  max-width: 1800px;
  margin: 0 auto;
  padding: 28px 20px 80px;
}

body.has-image .hero, body.has-image .dropzone, body.has-image .landing-promo { display: none; }

.landing-promo { max-width: 720px; margin: 16px auto 0; }

.hero { text-align: center; margin: 0 auto 28px; max-width: 720px; }
.hero h1 { font-size: 26px; margin: 0 0 8px; }
.hero p { color: var(--muted); margin: 0; }

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--radius);
  background: var(--card);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  max-width: 720px;
  margin: 0 auto;
}
.dropzone.drag { border-color: var(--brand); background: #f4f2ff; }
.dropzone p { margin: 6px 0; color: var(--muted); }
.dropzone strong { color: var(--brand); }
.dropzone input { display: none; }

.status-message {
  display: none;
  margin: 10px auto 0;
  max-width: 720px;
  font-size: 13px;
  color: var(--danger);
  text-align: center;
}

.active-label {
  font-weight: 600;
  margin: 0 0 8px;
  font-size: 13px;
  color: var(--muted);
}

.thumb-strip-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.thumb-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
  flex: 1;
  min-width: 0;
  scrollbar-width: thin;
}
.thumb-nav {
  flex-shrink: 0;
  width: 24px;
  height: 44px;
  border-radius: 6px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
}
.thumb-nav:hover { border-color: var(--brand); color: var(--brand); }
.thumb-item {
  flex-shrink: 0;
  width: 72px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 3px;
  text-align: center;
}
.thumb-item.active { border-color: var(--brand); }
.thumb-item canvas {
  display: block;
  width: 100%;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  background: #9a9a9a;
}
.thumb-item span {
  display: block;
  font-size: 10px;
  color: var(--muted);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.workspace { display: none; gap: 20px; margin-top: 24px; }

/* Four-panel tool layout: import/batch, canvas (most room), platform
   presets, and output settings each get their own named area so the
   visual order can change per breakpoint without touching the DOM.
   The photo preview (canvas) always comes first so it's never pushed
   below the import controls or promo cards. */
.left-column { grid-area: left; display: flex; flex-direction: column; gap: 16px; }
.canvas-panel { grid-area: canvas; }
.workspace.active > .panel:not(.output-card) { grid-area: presets; }
.output-card { grid-area: output; }

.workspace.active {
  display: grid;
  align-items: start;
  grid-template-columns: 240px minmax(0, 1fr) 300px 300px;
  grid-template-areas: "left canvas presets output";
}

/* Common laptop widths (1280/1366px included) get a real 2-column
   layout instead of one long stacked column: canvas stays large on
   the left, everything else stacks in a sidebar on the right. */
@media (max-width: 1400px) and (min-width: 900px) {
  .workspace.active {
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas:
      "canvas presets"
      "canvas output"
      "canvas left";
  }
}

@media (max-width: 899px) {
  .workspace.active {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "canvas"
      "presets"
      "output"
      "left";
  }
}

.canvas-panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
}

.canvas-frame {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background-color: #9a9a9a;
  background-image:
    linear-gradient(45deg, #888 25%, transparent 25%),
    linear-gradient(-45deg, #888 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #888 75%),
    linear-gradient(-45deg, transparent 75%, #888 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
  border-radius: 10px;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}
.canvas-frame:active { cursor: grabbing; }
.canvas-frame.no-drag, .canvas-frame.no-drag:active { cursor: default; }
.canvas-frame canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.crop-frame {
  position: absolute;
  pointer-events: none;
}
.crop-frame.active {
  border: 2px solid #fff;
  box-shadow: 0 0 0 2000px rgba(0,0,0,.5);
  z-index: 2;
}
.crop-frame.secondary {
  border: 2px dashed rgba(255,255,255,.7);
  z-index: 1;
}
.crop-frame.circle { border-radius: 50%; }
.crop-frame-inner {
  position: absolute;
  border: 2px dashed rgba(255,255,255,.85);
}
.crop-frame-label {
  position: absolute;
  top: 4px;
  left: 4px;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 10px;
  line-height: 1.4;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  max-width: calc(100% - 8px);
  overflow: hidden;
  text-overflow: ellipsis;
}

.zoom-row { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.zoom-row input[type="range"] { flex: 1; }

.panel {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 80vh;
  overflow-y: auto;
}

.panel h3 { margin: 0 0 4px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }

.output-card { border-color: var(--brand); background: #fbfaff; }

.promo-card {
  background: #f5f2ea;
  border: 1px solid #e6ddc8;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.promo-kicker {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #8a7d5c;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.promo-kicker::after {
  content: "AD";
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #8a7d5c;
  border: 1px solid #cfc3a3;
  border-radius: 4px;
  padding: 1px 5px;
}
.promo-item {
  display: flex;
  flex-direction: column;
  border-radius: 12px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: var(--ink);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  overflow: hidden;
}
.promo-item:hover { border-color: var(--brand); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(95,78,203,.15); }
.promo-item img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
  background: #eee;
}
.promo-item .promo-text { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.promo-item strong { font-size: 14px; color: var(--brand-dark); }
.promo-item span { font-size: 12px; color: var(--muted); line-height: 1.4; }

/* Landing page promo: kicker on its own line, the two products side by side
   and forced to equal width (flex-basis 0) so neither looks bigger just
   because its copy happens to be longer. */
.promo-row { display: flex; gap: 12px; }
.promo-row .promo-item { flex: 1 1 0; flex-direction: row; align-items: center; min-width: 0; }
.promo-row .promo-item img { width: 80px; height: 64px; flex-shrink: 0; }
@media (max-width: 600px) {
  .promo-row { flex-direction: column; }
}

.mode-row { display: flex; gap: 6px; flex-wrap: wrap; }
.mode-row button {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
}
.mode-row button.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.warn { font-size: 12px; color: var(--danger); display: none; }
.warn.show { display: block; }

.fill-options { display: none; gap: 8px; align-items: center; }
.fill-options.show { display: flex; }
.fill-options input[type="color"] { width: 32px; height: 28px; border: none; background: none; }

.preset-group { display: flex; flex-direction: column; gap: 6px; }
.preset-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
}
.preset-item:hover { border-color: var(--brand); }
.preset-item.active-target { border-color: var(--brand); background: #f4f2ff; }
.preset-item small { color: var(--muted); display: block; }
.preset-item .dims { margin-left: auto; color: var(--muted); font-size: 12px; white-space: nowrap; }
.info-dot { color: var(--muted); cursor: help; }

.ratio-chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.ratio-chip {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  cursor: pointer;
  background: #fff;
}
.ratio-chip.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.quick-picks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px auto 0; max-width: 720px; }
.quick-pick {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  cursor: pointer;
  background: #fff;
  color: var(--ink);
}
.quick-pick:hover { border-color: var(--brand); color: var(--brand); }

.dropzone .primary { margin-top: 12px; }

.export-row { display: flex; gap: 8px; align-items: center; }
.export-row label { font-size: 13px; color: var(--muted); }
.export-row select { padding: 6px; border-radius: 6px; border: 1px solid var(--line); }
.export-row input:disabled, .export-row select:disabled { opacity: .45; cursor: not-allowed; }

button.primary {
  background: var(--brand);
  color: #fff;
  border: none;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
button.primary:hover { background: var(--brand-dark); }
button.primary:disabled { opacity: .5; cursor: not-allowed; }

button.ghost {
  background: transparent;
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
}

.filesize-hint { font-size: 12px; color: var(--muted); }
#upscaleHint { display: none; }
#upscaleHint.show { display: block; }

.oversize-banner {
  display: none;
  background: #fff4e5;
  border: 1px solid #f0c98a;
  color: #7a5300;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13px;
  margin: 12px auto 0;
  max-width: 720px;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
}
.oversize-banner.show { display: flex; }

.download-cta {
  display: none;
  margin-top: 18px;
  background: linear-gradient(135deg, #f4f2ff, #fff);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.download-cta.show { display: block; }
.download-cta a { font-weight: 600; }

footer {
  max-width: 1080px;
  margin: 40px auto 0;
  padding: 20px;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  border-top: 1px solid var(--line);
}
footer a { color: var(--muted); }

.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 6px; }