:root {
  color-scheme: light dark;
  --bg: #f6f6f4;
  --card: #ffffff;
  --ink: #111111;
  --muted: #5c5c5c;
  --line: #d4d4d4;
  --swiss: #ff0000;
  --drop-hover: #fafafa;
  --blue: #1d4ed8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121212;
    --card: #1c1c1c;
    --ink: #f4f4f5;
    --muted: #a1a1aa;
    --line: #3f3f46;
    --drop-hover: #262626;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font: 16px/1.45 ui-sans-serif, system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
}

header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--card);
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.logo { height: 42px; width: auto; display: block; }
.header-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 36px; height: 36px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 10px;
  cursor: pointer;
}
.profile-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 180px; z-index: 20;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px;
}
.menu-item {
  width: 100%; display: flex; gap: 10px;
  border: 0; background: transparent; color: var(--ink);
  padding: 10px; border-radius: 8px; cursor: pointer; text-decoration: none;
}
.demo-open {
  position: absolute; left: 50%; transform: translateX(-50%);
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 8px 16px; font-weight: 600; cursor: pointer;
}

main {
  display: flex; flex-direction: column;
  max-width: 720px; width: 100%;
  margin: 40px auto;
  padding: 0 20px 160px;
}
main.has-file { max-width: 1100px; }
#form { width: 100%; display: grid; gap: 12px; }

.drop {
  display: grid; place-items: center; gap: 6px;
  min-height: 200px; padding: 24px;
  border: 1.5px dashed var(--line); border-radius: 16px;
  background: var(--card); cursor: pointer; text-align: center;
}
.drop.drag { border-color: var(--ink); background: var(--drop-hover); }
.drop span { color: var(--muted); font-size: 14px; }

.upload-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
.upload-row.has-file {
  grid-template-columns: minmax(220px, 34%) minmax(0, 1fr);
  align-items: start;
}
.upload-left { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.upload-row.has-file .upload-left .drop {
  min-height: 148px; height: 148px; max-height: 148px;
  padding: 14px; border-radius: 12px;
}

.model-under { display: flex; flex-direction: column; gap: 6px; }
.model-label { font-size: 14px; color: var(--muted); }
.model-picks { display: flex; flex-wrap: wrap; gap: 8px; }
.model-picks button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.model-picks button.on { border-color: var(--swiss); color: var(--swiss); }

.side-panel { min-width: 0; width: 100%; }
.cats {
  position: relative;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  margin: 0;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  padding: 14px;
}
.cats-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.cats-head legend {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

.cats-head .mini-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 0 0 164px;
  width: 164px;
  height: 32px;
  margin: 0;
  padding: 3px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  overflow: hidden;
}
.cats-head .mini-knob {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: 999px;
  background: var(--swiss);
  pointer-events: none;
  transform: translateX(0);
  transition: transform 0.22s ease;
}
.cats-head .mini-toggle.adv .mini-knob { transform: translateX(100%); }
.cats-head .mini {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 26px;
  padding: 0;
  cursor: pointer;
}
.cats-head .mini.on { color: #fff; }

#catGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 10px 18px;
  width: 100%;
  min-width: 0;
}
#advGrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px 12px;
  width: 100%;
  min-width: 0;
}
#catGrid .cat-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22px;
  align-items: center;
  column-gap: 12px;
  min-width: 0;
}
#catGrid label,
#advGrid label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  line-height: 1.3;
}
#catGrid label { white-space: normal; }
#advGrid label { white-space: nowrap; }
#catGrid input,
#advGrid input { width: 16px; height: 16px; flex-shrink: 0; }
.info-btn {
  width: 20px;
  height: 20px;
  margin: 0;
  justify-self: end;
  border-radius: 50%;
  border: 1px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  padding: 0;
  cursor: pointer;
}

.select-all-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.office-toggle,
.tri-toggle {
  position: relative;
  height: 32px;
  padding: 2px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
}
.office-toggle { display: grid; grid-template-columns: 1fr 1fr; width: 150px; }
.tri-toggle { display: grid; grid-template-columns: 1fr 1fr 1fr; width: 168px; }
.office-toggle .mini-knob,
.tri-knob {
  position: absolute;
  top: 2px; bottom: 2px; left: 2px;
  border-radius: 999px;
  pointer-events: none;
  transition: transform 0.22s ease;
}
.office-toggle .mini-knob { width: calc(50% - 2px); background: var(--blue); }
.office-toggle.office .mini-knob { transform: translateX(100%); }
.tri-knob { width: calc(33.333% - 1.5px); background: #15803d; }
.tri-toggle[data-state="none"] .tri-knob { transform: translateX(0); background: #737373; }
.tri-toggle[data-state="mix"] .tri-knob { transform: translateX(100%); background: var(--blue); }
.tri-toggle[data-state="all"] .tri-knob { transform: translateX(200%); background: #15803d; }
.office-toggle .mini,
.tri-toggle .tri {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.office-toggle .mini.on,
.tri-toggle .tri.on { color: #fff; }

#catTip {
  position: absolute; z-index: 50; max-width: 260px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); font-size: 13px;
}

.composer {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 24px; z-index: 40;
  width: min(720px, calc(100vw - 32px));
  display: flex; flex-direction: column; gap: 6px;
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: 22px; padding: 10px 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
@media (prefers-color-scheme: dark) {
  .composer { background: #2a2a2e; border-color: #5c5c66; }
}
.composer textarea {
  width: 100%; border: 0; outline: 0; resize: none;
  background: transparent; color: var(--ink); font: inherit;
}
.composer textarea::placeholder { color: var(--muted); }
.composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.composer #send {
  border: 0; background: var(--swiss); color: #fff;
  padding: 8px 14px; border-radius: 999px; font: inherit; cursor: pointer;
}
.composer #send:disabled { opacity: 0.5; }

.mode-line.in-composer { display: flex; align-items: center; gap: 8px; margin: 0; }
.mode-toggle {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  padding: 2px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--card);
}
.mode-line.in-composer .mode-toggle { width: 168px; }
.mode-knob {
  position: absolute; top: 2px; bottom: 2px; left: 2px;
  width: calc(50% - 2px); border-radius: 999px;
  background: var(--swiss); pointer-events: none; transition: transform 0.2s ease;
}
.mode-toggle.fast .mode-knob { transform: translateX(100%); }
.mode-toggle .mode {
  position: relative; z-index: 1;
  border: 0; background: transparent; color: var(--ink);
  font-size: 13px; font-weight: 600; padding: 6px 4px; cursor: pointer;
}
.mode-toggle .mode.on { color: #fff; }

.hint {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 108px; z-index: 39;
  width: min(720px, calc(100vw - 32px));
  color: var(--muted); font-size: 14px; margin: 0;
}
.hint:empty { display: none; }
.hint.error { color: #dc2626; }

.cook { margin: 16px 0 24px; }
.cook[hidden] { display: none; }
.spinner {
  width: 25px; height: 25px;
  border: 4px solid var(--line); border-top-color: var(--swiss);
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
.cook {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 24px;
}
.cook-copy { display: flex; align-items: baseline; gap: 10px; }
.cook-copy p { margin: 0; }
#cookSec { color: var(--muted); font-variant-numeric: tabular-nums; }
@keyframes spin { to { transform: rotate(360deg); } }

#preview, #result {
  width: calc(100vw - 48px);
  max-width: none;
  margin: 24px 0 8px;
  margin-left: calc((100% - 100vw) / 2 + 24px);
}
.out {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  width: 100%;
}
.out[hidden] { display: none !important; }
.result-column { min-width: 0; }
.panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap;
  min-height: 32px; margin-bottom: 8px;
}
.panel-head h2 { margin: 0; font-size: 14px; color: var(--muted); }
.copy-btn {
  border: 1px solid var(--ink); background: var(--card); color: var(--ink);
  border-radius: 8px; padding: 4px 10px; font-size: 13px; cursor: pointer;
}
pre {
  white-space: pre-wrap; overflow-wrap: anywhere;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 10px; padding: 14px;
  font: 13px/1.5 ui-monospace, Menlo, monospace;
  max-height: 70vh; overflow: auto;
}
#preview #sendAi, #sendAi {
  grid-column: 1 / -1;
  justify-self: center;
  position: static;
  display: inline-block;
  margin: 12px auto 0;
  border: 0;
  background: var(--swiss);
  color: #fff;
  padding: 10px 18px;
  border-radius: 999px;
  font: inherit;
  cursor: pointer;
}
#sendAi[hidden] { display: none !important; }

.tok { font-weight: 600; }
.tok-names { color: var(--tok-names, #1d4ed8); }
.tok-companies { color: var(--tok-companies, #0f766e); }
.tok-contacts { color: var(--tok-contacts, #15803d); }
.tok-web { color: var(--tok-web, #1d4ed8); }
.tok-addresses { color: var(--tok-addresses, #a16207); }
.tok-financial { color: var(--tok-financial, #b91c1c); }
.tok-tax { color: var(--tok-tax, #b91c1c); }
.tok-ids { color: var(--tok-ids, #7c3aed); }
.tok-dates { color: var(--tok-dates, #0369a1); }
.tok-numbers { color: var(--tok-numbers, #57534e); }
.tok-units { color: var(--tok-units, #57534e); }

#demoModal {
  position: fixed; inset: 0; z-index: 80;
  background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 24px;
}
#demoModal[hidden] { display: none !important; }
.demo-card {
  width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto;
  background: var(--card); border-radius: 16px; padding: 22px;
}
.demo-ok {
  display: block; margin: 16px 0 0 auto;
  border: 0; background: var(--swiss); color: #fff;
  padding: 10px 18px; border-radius: 999px; cursor: pointer;
}
.ba { position: relative; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); }
.ba img { display: block; width: 100%; height: auto; }
.ba-b { position: absolute; inset: 0 auto 0 0; width: 50%; overflow: hidden; }
.ba-range { display: block; width: 100%; margin-top: 12px; }
.ba-tag {
  position: absolute; top: 10px; z-index: 2;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: 12px; padding: 3px 8px; border-radius: 999px;
}
.ba-tag.left { left: 10px; }
.ba-tag.right { right: 10px; }

@media (max-width: 640px) {
  .upload-row.has-file,
  .out { grid-template-columns: 1fr; }
}

.preset-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.preset {
  border: 1px solid var(--line); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.preset.on { background: var(--swiss); color: #fff; border-color: var(--swiss); }
.tok-network { color: var(--tok-network, #0369a1); }

.mode-sel { position: relative; }
.mode-sel-btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.mode-sel-menu {
  position: absolute; left: 0; bottom: calc(100% + 8px); top: auto; z-index: 50;
  min-width: 180px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.mode-sel:hover .mode-sel-menu,
.mode-sel.open .mode-sel-menu { display: block; }
.mode-sel-menu[hidden] { display: none; }
.mode-sel:hover .mode-sel-menu[hidden],
.mode-sel.open .mode-sel-menu[hidden] { display: block; }
.mode-sel-menu button {
  width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.mode-sel-menu button.on { background: var(--swiss); color: #fff; }

.view-switch { display: flex; gap: 6px; margin-bottom: 10px; }
.view {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.view.on { background: var(--swiss); color: #fff; border-color: var(--swiss); }
.mode-sel-menu { top: auto; bottom: calc(100% + 8px); }

.view-sel { position: relative; display: inline-block; margin-bottom: 10px; }
.view-btn {
  border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: 999px; padding: 8px 14px; font-weight: 600; cursor: pointer;
}
.view-menu {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 160px; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
}
.view-menu[hidden] { display: none; }
.view-menu button, .mode-sel-menu button {
  width: 100%; text-align: left; border: 0; background: transparent;
  color: var(--ink); padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.view-menu button:hover, .mode-sel-menu button:hover {
  background: var(--drop-hover);
}
.cats { overflow: hidden; }
.cats.show {
  animation: slideIn 0.28s ease;
}
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: none; }
}
.view-menu button:hover,
.mode-sel-menu button:hover {
  background: #eceae4;
  color: #111;
}
@media (prefers-color-scheme: dark) {
  .view-menu button:hover,
  .mode-sel-menu button:hover {
    background: #3a3a3a;
    color: #fff;
  }
}
.upload-row { position: relative; width: 100%; }
.upload-row.has-file:not(.is-wide) {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  margin: 0;
}
.upload-row.has-file:not(.is-wide) .upload-left {
  flex: 1 1 auto;
  min-width: 0;
}
.upload-row.has-file:not(.is-wide) .side-panel {
  position: static;
  flex: 0 0 auto;
  width: auto;
  left: auto;
}
.side-panel {
  position: absolute;
  left: calc(100% + 12px);
  top: 0;
  width: max-content;
}
.upload-row.is-wide {
  display: grid;
  grid-template-columns: minmax(180px, 34%) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
  width: 100%;
}
.upload-row.is-wide .side-panel {
  position: static;
  width: 100%;
}
.view-btn { font-size: 16px; }
.view-menu button { font-size: 16px; }