@import url("/apple-tokens.css?v=2");

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; }

body {
  overflow: hidden;
  background:
    radial-gradient(circle at 8% -10%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 34%),
    radial-gradient(circle at 92% 4%, color-mix(in srgb, var(--blue) 8%, transparent), transparent 30%),
    var(--bg-grouped);
}

button, input { font: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, input:focus-visible, [role="button"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 2px;
}
button:active:not(:disabled), [role="button"]:active {
  transform: scale(.965);
  transition: transform var(--duration-instant) var(--ease-out);
}
button svg { display: block; margin: auto; pointer-events: none; }

.app-shell {
  display: grid;
  grid-template-rows: auto auto minmax(0,1fr) auto;
  gap: var(--space-4);
  width: min(1520px, 100%);
  height: 100dvh;
  margin: 0 auto;
  padding: var(--space-5) var(--space-6) var(--space-4);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-7);
  min-height: 68px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--material-regular-tint);
  -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  backdrop-filter: blur(var(--material-blur)) saturate(var(--material-saturate));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 0 0 .5px rgba(255,255,255,.16),
    0 0 0 .5px rgba(0,0,0,.05),
    var(--shadow-2);
}

.brand { display: flex; align-items: center; gap: var(--space-4); min-width: 230px; flex: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 76%, #fff), var(--accent-strong));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.38), var(--shadow-2);
  font-size: var(--text-caption-1);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  -webkit-corner-smoothing: 60%;
}
h1, h2, p { margin: 0; }
h1 {
  font-size: var(--text-title-2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}
h2 {
  font-size: var(--text-headline);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
}
.brand p {
  margin-top: var(--space-2);
  color: var(--label-secondary);
  font-size: var(--text-caption-2);
  line-height: var(--leading-normal);
  letter-spacing: var(--tracking-wide);
}

.text-control {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: min(680px, 60vw);
  min-height: 48px;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  border: .5px solid var(--separator);
  border-radius: var(--radius-lg);
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-1);
}
.text-control label {
  flex: none;
  color: var(--label-secondary);
  font-size: var(--text-caption-1);
  letter-spacing: var(--tracking-wide);
}
.text-control input {
  min-width: 0;
  height: 40px;
  flex: 1;
  padding: 0 var(--space-3);
  border: 0;
  color: var(--label);
  background: transparent;
  font-size: var(--text-subhead);
}
.text-control input:focus-visible { outline-offset: -2px; border-radius: var(--radius-sm); }

.quiet-button {
  min-width: 44px;
  min-height: 44px;
  flex: none;
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-capsule);
  color: var(--accent);
  background: transparent;
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
  transition: transform var(--duration-instant) var(--ease-out), opacity var(--duration-instant) var(--ease-out);
}
.quiet-button:hover:not(:disabled) { background: var(--accent-tint); }
.quiet-button:disabled { color: var(--label-tertiary); cursor: default; }

.upload-strip {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: 56px;
  padding: var(--space-3) var(--space-5);
  border: .5px solid var(--separator);
  border-radius: var(--radius-lg);
  background: var(--material-thin-tint);
  -webkit-backdrop-filter: blur(var(--material-blur-thin)) saturate(var(--material-saturate));
  backdrop-filter: blur(var(--material-blur-thin)) saturate(var(--material-saturate));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.48), var(--shadow-1);
  transition: transform var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              background var(--duration-fast) var(--ease-out);
}
.upload-strip:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 0 0 1.5px color-mix(in srgb, var(--accent) 32%, transparent), var(--shadow-2);
}
.upload-strip.dragging {
  transform: scale(1.008);
  border-color: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 0 0 3px color-mix(in srgb, var(--accent) 36%, transparent), var(--shadow-3);
  background: color-mix(in srgb, var(--accent) 7%, var(--material-thin-tint));
}
.upload-plus {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: 11px;
  color: #fff;
  background: var(--accent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), var(--shadow-1);
  line-height: 1;
  transition: transform var(--duration-fast) var(--ease-out);
}
.upload-strip:hover .upload-plus {
  transform: scale(1.05);
}
.upload-strip strong { font-size: var(--text-subhead); font-weight: var(--weight-semibold); }
.upload-help { margin-left: auto; color: var(--label-secondary); font-size: var(--text-caption-2); letter-spacing: var(--tracking-wide); }

.workbench { display: grid; grid-template-columns: 292px minmax(0,1fr); gap: var(--space-4); min-height: 0; }
.queue-panel, .preview-panel {
  min-height: 0;
  overflow: hidden;
  border: .5px solid var(--separator);
  border-radius: var(--radius-xl);
  background: var(--bg-tertiary);
  box-shadow: var(--shadow-2);
  -webkit-corner-smoothing: 60%;
}
.queue-panel { display: grid; grid-template-rows: auto minmax(0,1fr); padding: var(--space-4); }
.preview-panel { position: relative; display: grid; grid-template-rows: auto minmax(0,1fr); padding: var(--space-4); }
.panel-head, .panel-head > div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.panel-head { min-height: 44px; margin-bottom: var(--space-3); }
.panel-head span { color: var(--label-secondary); font-size: var(--text-caption-2); letter-spacing: var(--tracking-wide); }
.preview-head > div:first-child { min-width: 0; justify-content: flex-start; }
#previewStatus { max-width: min(40vw,560px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-list { min-height: 0; overflow-x: hidden; overflow-y: auto; margin: 0; padding: 0; list-style: none; scrollbar-color: var(--fill-1) transparent; scrollbar-width: thin; }
.file-list.is-empty { overflow: hidden; }
.file-list li {
  position: relative;
  margin-bottom: var(--space-2);
  transition: transform var(--duration-base) var(--ease-ios),
              opacity var(--duration-fast) var(--ease-out),
              max-height var(--duration-base) var(--ease-ios),
              margin var(--duration-base) var(--ease-ios);
}
.file-list li.is-removing {
  transform: translateX(28px) scale(0.92);
  opacity: 0;
  pointer-events: none;
  max-height: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
}
.file-list .empty {
  display: grid;
  place-items: center;
  min-height: 100%;
  margin: 0;
  padding: var(--space-7);
  border-radius: var(--radius-lg);
  color: var(--label-secondary);
  background: var(--fill-4);
  text-align: center;
  font-size: var(--text-footnote);
  line-height: var(--leading-relaxed);
}
.file-item {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr);
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 56px;
  padding: var(--space-3) 44px var(--space-3) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--label);
  background: transparent;
  text-align: left;
  transition: transform var(--duration-instant) var(--ease-out),
              background var(--duration-instant) var(--ease-out),
              box-shadow var(--duration-instant) var(--ease-out);
}
.file-item:hover { background: var(--fill-4); }
.file-item:active { transform: scale(.98); }
.file-item.selected { background: var(--accent-tint); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--accent) 24%, transparent); }
.file-index {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  color: var(--accent);
  background: var(--fill-3);
  font-size: var(--text-caption-2);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  font-variant-numeric: tabular-nums;
  transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.file-item.selected .file-index { color: #fff; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.3); }
.file-meta { min-width: 0; }
.file-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-footnote); font-weight: var(--weight-semibold); }
.file-size { display: block; margin-top: 3px; color: var(--label-secondary); font-size: var(--text-caption-2); letter-spacing: var(--tracking-wide); font-variant-numeric: tabular-nums; }
.remove-file {
  position: absolute;
  top: 50%;
  right: var(--space-2);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-capsule);
  color: var(--label-secondary);
  background: transparent;
  transform: translateY(-50%);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              transform var(--duration-instant) var(--ease-out);
}
.remove-file:active { transform: translateY(-50%) scale(.92) !important; }
.remove-file:hover { color: #fff; background: var(--red); }

.preview-controls, .preview-actions, .preview-tools { display: flex; align-items: center; gap: var(--space-2); }
.preview-controls, .preview-actions { flex: none; }
.primary-button, .secondary-button {
  min-height: 44px;
  padding: 0 var(--space-5);
  border: 0;
  border-radius: var(--radius-capsule);
  font-size: var(--text-footnote);
  font-weight: var(--weight-semibold);
  transition: transform var(--duration-instant) var(--ease-out), opacity var(--duration-instant) var(--ease-out);
}
.primary-button { color: #fff; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--shadow-1); }
.secondary-button { color: var(--accent); background: var(--accent-tint); }
.primary-button:hover:not(:disabled), .secondary-button:hover:not(:disabled) { filter: brightness(.97); }
.primary-button:disabled, .secondary-button:disabled { color: var(--label-tertiary); background: var(--fill-3); box-shadow: none; cursor: default; }

.preview-stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg);
  background-color: #171a1a;
  background-image:
    linear-gradient(45deg,#202525 25%,transparent 25%),
    linear-gradient(-45deg,#202525 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#202525 75%),
    linear-gradient(-45deg,transparent 75%,#202525 75%);
  background-size: 22px 22px;
  background-position: 0 0,0 11px,11px -11px,-11px 0;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.05);
  scrollbar-width: none;
  touch-action: none;
}
.preview-stage::-webkit-scrollbar { display: none; }
.preview-stage.is-ready { cursor: grab; }
.preview-stage.is-panning { cursor: grabbing; }
.preview-canvas {
  position: relative;
  min-width: 100%;
  min-height: 100%;
  will-change: transform;
  transform-origin: center center;
}
.preview-canvas img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  max-width: none;
  max-height: none;
  pointer-events: none;
  user-select: none;
  transform: translate(-50%,-50%);
  border-radius: 4px;
  box-shadow: 0 4px 24px rgba(0,0,0,.45);
}
.preview-hud {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: 4px;
  border-radius: var(--radius-capsule);
  color: rgba(255,255,255,.85);
  background: rgba(30,32,32,.72);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 .5px rgba(255,255,255,.12),
    0 0 0 .5px rgba(0,0,0,.4),
    var(--shadow-glass);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%,8px) scale(.97);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-base) var(--ease-ios);
}
.preview-stage.is-ready + .preview-hud { opacity: 1; pointer-events: auto; transform: translate(-50%,0) scale(1); }
.preview-tools { display: inline-flex; align-items: center; gap: 2px; }
.preview-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 var(--space-2);
  border: 0;
  border-radius: var(--radius-capsule);
  color: #fff;
  background: transparent;
  line-height: 1;
  transition: transform var(--duration-instant) var(--ease-out),
              background var(--duration-instant) var(--ease-out),
              opacity var(--duration-instant) var(--ease-out);
}
.preview-tools button:hover:not(:disabled) { background: rgba(255,255,255,.16); }
.preview-tools button:active:not(:disabled) { transform: scale(0.92); background: rgba(255,255,255,.24); }
.preview-tools button:disabled { color: rgba(255,255,255,.28); cursor: default; }
#fitPreviewButton { min-width: 52px; font-size: var(--text-caption-1); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); }
.preview-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--space-4); color: rgba(235,235,245,.60); text-align: center; }
.preview-empty-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
}
.preview-empty p { font-size: var(--text-footnote); letter-spacing: var(--tracking-wide); }

.statusbar { display: flex; align-items: center; justify-content: center; gap: var(--space-5); min-height: 20px; padding: 0 var(--space-2); color: var(--label-secondary); font-size: var(--text-caption-2); line-height: var(--leading-normal); letter-spacing: var(--tracking-wide); font-variant-numeric: tabular-nums; }
#toast {
  position: fixed;
  z-index: 50;
  top: var(--space-5);
  left: 50%;
  max-width: min(520px,calc(100% - 32px));
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-capsule);
  color: var(--label);
  background: var(--material-thick-tint);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  border: .5px solid var(--separator);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-glass);
  opacity: 0;
  pointer-events: none;
  filter: blur(6px);
  transform: translate(-50%,-14px) scale(.95);
  transition: opacity var(--duration-fast) var(--ease-out),
              transform var(--duration-base) var(--ease-ios),
              filter var(--duration-fast) var(--ease-out);
  font-size: var(--text-footnote);
  font-weight: var(--weight-medium);
}
#toast.show { opacity: 1; filter: blur(0); transform: translate(-50%,0) scale(1); }
#toast.error { color: #fff; background: color-mix(in srgb, var(--red) 90%, transparent); border-color: rgba(255,255,255,.2); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar, .upload-strip, #toast { background: color-mix(in srgb,var(--bg) 94%,transparent); }
  .preview-hud { background: rgba(30,32,32,.94); }
}

@media (prefers-reduced-transparency: reduce) {
  .topbar, .upload-strip, #toast { background: var(--bg-tertiary); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .preview-hud { background: #202222; -webkit-backdrop-filter: none; backdrop-filter: none; }
}

html[data-motion="reduce"] *, html[data-motion="reduce"] *::before, html[data-motion="reduce"] *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-contrast: more) {
  .topbar, .upload-strip, .queue-panel, .preview-panel, #toast { border: 1px solid var(--label); }
  .preview-hud { box-shadow: 0 0 0 1px #fff, var(--shadow-glass); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 .5px rgba(255,255,255,.06), 0 0 0 .5px rgba(0,0,0,.4), var(--shadow-2); }
  :root:not([data-theme="light"]) .upload-strip { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow-1); }
  :root:not([data-theme="light"]) .brand-mark { color: #062b20; }
  :root:not([data-theme="light"]) .primary-button, :root:not([data-theme="light"]) .file-item.selected .file-index { color: #062b20; }
}

[data-theme="dark"] .topbar { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 .5px rgba(255,255,255,.06), 0 0 0 .5px rgba(0,0,0,.4), var(--shadow-2); }
[data-theme="dark"] .upload-strip { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), var(--shadow-1); }
[data-theme="dark"] .brand-mark, [data-theme="dark"] .primary-button, [data-theme="dark"] .file-item.selected .file-index { color: #062b20; }

@media (max-width: 760px) {
  body { overflow: auto; }
  .app-shell { grid-template-rows: auto auto auto auto; height: auto; min-height: 100dvh; gap: var(--space-3); padding: var(--space-3); }
  .topbar { align-items: stretch; flex-direction: column; gap: var(--space-3); padding: var(--space-3); }
  .brand { min-width: 0; }
  .text-control { width: 100%; padding-left: var(--space-3); }
  .text-control label { display: none; }
  .upload-strip { min-height: 52px; padding: var(--space-3); }
  .upload-help { display: none; }
  .workbench { grid-template-columns: 1fr; gap: var(--space-3); }
  .queue-panel { grid-template-rows: auto auto; padding: var(--space-4); }
  .file-list { display: flex; gap: var(--space-2); max-height: 88px; overflow-x: auto; }
  .file-list li { flex: 0 0 210px; margin: 0; }
  .file-list .empty { width: 100%; min-height: 60px; }
  .preview-panel { min-height: 60dvh; padding: var(--space-3); }
  .preview-head { align-items: stretch; flex-direction: column; }
  .preview-head > div:first-child { min-height: 32px; }
  #previewStatus { max-width: 66vw; }
  .preview-controls, .preview-actions { width: 100%; }
  .preview-actions button { min-width: 0; flex: 1; padding-inline: var(--space-3); }
  .preview-hud { bottom: 20px; }
  .statusbar { text-align: center; }
}

@media (max-height: 690px) and (min-width: 761px) {
  .app-shell { gap: var(--space-3); padding-top: var(--space-3); }
  .topbar { min-height: 58px; padding-block: var(--space-2); }
  .upload-help, .statusbar { display: none; }
  .upload-strip { min-height: 48px; }
  .queue-panel, .preview-panel { padding-top: var(--space-3); }
  .preview-hud { bottom: 20px; }
}