:root {
  --paper: #f2ecdf;
  --panel: #fffaf0;
  --ink: #29271f;
  --green: #29493b;
  --sage: #aab7a3;
  --brass: #a78346;
  --line: #d8ccb8;
  --muted: #716b5e;
  --red: #a35d49;
  --shadow: 0 10px 30px rgba(63, 54, 39, .07);
  --serif: "Iowan Old Style", "Baskerville", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  background:
    radial-gradient(circle at 12% -10%, rgba(167, 131, 70, .08), transparent 30%),
    linear-gradient(180deg, #f8f3e9 0, var(--paper) 360px);
  font-family: var(--serif);
}

.topbar {
  min-height: 76px;
  gap: 12px;
  padding: 7px clamp(18px, 3vw, 48px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 250, 240, .92);
  backdrop-filter: blur(12px);
}

.brandmark {
  width: 58px;
  height: 58px;
  transform: none;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.brandmark img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}

.brandmark.end { display: none; }
.brand { min-width: 330px; }
.brand h1 {
  margin: 1px 0 0;
  font-family: var(--serif);
  font-size: clamp(1.65rem, 2.3vw, 2.15rem);
  font-weight: 500;
  line-height: .98;
  letter-spacing: -.045em;
  text-transform: none;
  color: var(--green);
}
.brand h1 em {
  color: var(--brass);
  font-weight: 400;
  font-size: .82em;
}
.brand-kicker,
.brand-subtitle {
  font-family: var(--sans);
}
.brand .brand-kicker {
  margin: 0;
  color: var(--brass);
  font-size: .62rem;
  font-weight: 750;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.brand .brand-subtitle {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: .66rem;
  letter-spacing: .045em;
}

.vectorize-identity { margin: 0 0 12px; color: var(--green); }
.vectorize-identity strong { display: block; font: 500 1.15rem/1.15 var(--serif); }
.vectorize-identity span { display: block; margin-top: 3px; color: var(--muted); font: .68rem/1.3 var(--sans); }

.mode-tabs {
  position: sticky;
  top: 0;
  z-index: 12;
  align-items: stretch;
  gap: 2px;
  max-width: none;
  padding: 0 clamp(16px, 3vw, 48px);
  background: rgba(242, 236, 223, .94);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--line);
}
.mode-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 10px 13px 9px;
  border-bottom-width: 3px;
  color: #625e54;
  font-family: var(--sans);
  font-size: .82rem;
  font-weight: 650;
}
.mode-tab span {
  display: inline;
  color: var(--brass);
  font-family: var(--serif);
  font-size: .68rem;
  font-style: italic;
  font-weight: 500;
}
.mode-tab.active { color: var(--green); background: rgba(255, 250, 240, .62); border-bottom-color: var(--green); }
.privacy { align-self: center; margin-left: auto; padding: 0; font-family: var(--sans); letter-spacing: .02em; text-transform: none; }

main { padding-top: 16px; }
.controls, .batchbar, .view-toolbar, .preview-card, .inspector-card, .drop-zone {
  border-color: var(--line);
  background: rgba(255, 250, 240, .94);
  box-shadow: var(--shadow);
}
.controls { border-radius: 8px; border-top: 3px solid var(--brass); padding: 16px; }
.preview-card { border-radius: 7px; }
.preview-card.result { border-top-color: var(--green); }
.inspector-card { border-radius: 8px; }
.eyebrow { color: var(--brass); font-family: var(--sans); font-size: .68rem; }
.field small, .toggle-row small, .preview-heading span, .view-toolbar span, .mini-upload small, .status, .privacy { font-size: .75rem; }
.field label, .field > span, .toggle-row strong, .control-header strong, .preview-heading h2, .view-toolbar strong { color: var(--ink); }
.primary {
  border-color: #233f34;
  background: #29493b;
  box-shadow: 0 3px 0 #1d352b;
}
.primary:hover { background: #203d31; }
.secondary { background: #fffaf0; border-color: #bcae98; }
.text-button { color: var(--green); }
.status { border-left-color: var(--brass); background: #eee8d9; color: #4f5549; }
.toggle-row input:checked + i { background: var(--green); }
.field input[type=range], .thin-check input, .check-line input { accent-color: var(--brass); }
.viewport { background-color: #fffdf8; }
.preview-empty { background: #fbf6eb; }
.preview-empty.quiet { background: #f4eddf; }
.toast { background: var(--red); font-family: var(--sans); }

@media (max-width: 900px) {
  .topbar { min-height: 68px; padding: 6px 18px; }
  .brandmark { width: 50px; height: 50px; }
  .brandmark img { width: 50px; height: 50px; }
  .brand { min-width: 0; }
  .brand h1 { font-size: 1.6rem; }
  .brand-subtitle { display: none; }
  .mode-tabs { overflow-x: auto; padding-inline: 12px; }
  .mode-tab { min-height: 50px; white-space: nowrap; padding-inline: 11px; }
}

@media (max-width: 560px) {
  .topbar { gap: 10px; }
  .brandmark { display: grid; width: 44px; height: 48px; flex: 0 0 44px; }
  .brandmark img { width: 44px; height: 44px; }
  .brand h1 { font-size: clamp(1.22rem, 5vw, 1.55rem); white-space: nowrap; }
  .brand-kicker { display: none; }
  .mode-tab span { display: none; }
}