* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1b1f24; background: #f6f7f9; }
.hidden { display: none !important; }
.view { height: 100%; }
.muted { color: #6b7280; }
.tiny { font-size: 12px; }
.status { color: #6b7280; font-size: 13px; min-height: 18px; }

/* buttons (SaaS chrome) */
.btn { display: inline-block; cursor: pointer; border: 1px solid #cdd2d9; background: #fff; color: #1b1f24;
  padding: 8px 14px; border-radius: 8px; font-size: 14px; font-weight: 500; text-decoration: none; }
.btn:hover { background: #f0f2f5; }
.btn.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.btn.primary:hover { background: #1d4ed8; }
.btn:disabled { opacity: .5; cursor: default; }

/* signed-in account chip (top-right of the landing) */
.account { position: fixed; top: 12px; right: 14px; z-index: 20;
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 999px; padding: 5px 8px 5px 12px; }
.acct-dot { width: 8px; height: 8px; border-radius: 50%; background: #1fbf4f; flex: none; }
.acct-email { font-size: 12px; color: #4b5563; max-width: 200px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.tiny { padding: 4px 10px; font-size: 12px; border-radius: 999px; }
.btn.ghost { background: transparent; border-color: #d7dbe0; color: #6b7280; }
.btn.ghost:hover { background: #f0f2f5; color: #1b1f24; }

/* upload landing */
.hero { max-width: 620px; margin: 8vh auto; padding: 0 20px; text-align: center; }
.hero h1 { font-size: 30px; margin: 0 0 8px; }
.hero .sub { color: #4b5563; margin: 0 0 28px; }
.drop { border: 2px dashed #c2c8d0; border-radius: 14px; padding: 34px 20px; background: #fff; margin-bottom: 18px; transition: .15s; }
.drop.hot { border-color: #2563eb; background: #eff4ff; }
.drop p { margin: 6px 0; }
#go { min-width: 200px; }
.up-name { width: 100%; max-width: 320px; margin: 0 auto 14px; display: block; text-align: center; }

/* detection settings (collapsible) */
.detset { max-width: 320px; margin: 0 auto 16px; text-align: left;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; }
.detset > summary { cursor: pointer; list-style: none; padding: 9px 14px; font-size: 13px;
  font-weight: 600; color: #374151; user-select: none; }
.detset > summary::-webkit-details-marker { display: none; }
.detset > summary::before { content: "▸ "; color: #9aa0aa; }
.detset[open] > summary::before { content: "▾ "; }
.detset-body { padding: 4px 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.chk { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #374151; cursor: pointer; }
.chk input { width: 15px; height: 15px; accent-color: #2563eb; cursor: pointer; }

/* saved jobs table */
.jobs { max-width: 760px; margin: 0 auto 8vh; padding: 0 20px; }
.jobs-h { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: #6b7280;
  margin: 0 0 10px; }
.jobs-empty { text-align: center; padding: 20px; border: 1px dashed #d7dbe0; border-radius: 12px;
  background: #fff; }
.job { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 10px; }
.job-main { display: flex; flex-direction: column; min-width: 140px; }
.job-name { font-weight: 600; }
.job-when { font-size: 12px; }
.job-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
.job-status { font-size: 12px; }
.job-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* config chips (C / O / R) */
.chips { display: inline-flex; gap: 4px; }
.chip { display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 5px; font-size: 11px; font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.chip.on  { background: #2563eb; color: #fff; }
.chip.off { background: #eef0f3; color: #b3b9c2; }

/* metrics */
.metrics { display: inline-flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: #6b7280; }
.mtr b { color: #1b1f24; font-variant-numeric: tabular-nums; }

/* compact action buttons */
.tiny-btn { padding: 5px 9px; font-size: 12px; }
.tiny-btn.pinned { background: #fff7e6; border-color: #f0c36d; color: #92560a; }
.tiny-btn.danger:hover { background: #fdecec; border-color: #f0a3a3; color: #b42318; }

/* editor top bar (deck name + download/new) */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: #fff; border-bottom: 1px solid #e5e7eb; }
.bar-l, .bar-r { display: flex; align-items: center; gap: 12px; }
.brand { font-size: 15px; }
.deck { font-size: 15px; padding: 6px 10px; border: 1px solid #cdd2d9; border-radius: 8px; width: 240px; }

/* editor body: sidebar tree + main column */
.work { display: flex; height: calc(100% - 57px); min-height: 0; }

#side { width: 190px; flex: none; background: #fff; border-right: 1px solid #e5e7eb;
  display: flex; flex-direction: column; overflow: hidden; }
#side h2 { font-size: 12px; letter-spacing: .06em; color: #6b7280; margin: 12px 12px 6px; }
#pages { overflow-y: auto; flex: 1; }

.pg { padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #eef0f3;
  display: flex; align-items: center; gap: 5px; }
.pg .tw { width: 12px; text-align: center; color: #9aa0aa; cursor: pointer; }
.pg .tw:hover { color: #1b1f24; }
.pg .nm { flex: 1; }
.pg .c, .card .c { color: #9aa0aa; font-variant-numeric: tabular-nums; font-size: 11px; }
.pg:hover { background: #f3f5f8; }
.pg.active { background: #2563eb; color: #fff; }
.pg.active .c { color: #dfe9ff; }
.pg.reviewed .nm::after { content: " \2713"; color: #1fbf4f; }
.pg.active.reviewed .nm::after { color: #dfe; }
.cards { background: #f7f8fa; }
.card { display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 5px 10px 5px 31px; font-size: 12px; border-bottom: 1px solid #eef0f3; }
.card .nm { flex: 1; }
.card:hover { background: #eef1f5; }
.card.active { background: #2563eb; color: #fff; }
.card.active .c { color: #dfe9ff; }

#main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* two-stage editor toolbar */
#toolbar { padding: 7px 10px; background: #fff; display: flex; gap: 6px; align-items: center;
  flex-wrap: wrap; border-bottom: 1px solid #e5e7eb; }
.tool { background: #f1f3f6; color: #1b1f24; border: 1px solid #d7dbe0;
  padding: 5px 9px; border-radius: 6px; cursor: pointer; font-size: 12px; }
.tool:hover { background: #e7eaee; }
.tool.on { background: #2563eb; color: #fff; border-color: transparent; }
.tool.lbl.on { background: #1fbf4f; }
.tool.pho.on { background: #ff4d4d; }
.sep { width: 1px; height: 20px; background: #d7dbe0; margin: 0 4px; }
#stat { margin-left: auto; color: #6b7280; font-size: 12px; }

/* canvas stage (dark for contrast against scanned pages) */
#wrap { flex: 1; overflow: hidden; position: relative; background: #15161a; min-height: 0; }
#cv { position: absolute; top: 0; left: 0; cursor: grab; }
#cv:active { cursor: grabbing; }

#help { color: #6b7280; padding: 4px 10px; background: #fff; border-top: 1px solid #e5e7eb; font-size: 11px; }
kbd { background: #eef0f3; border: 1px solid #d7dbe0; border-radius: 3px; padding: 0 4px; font-family: inherit; }

/* cold-start / processing overlay */
.overlay { position: fixed; inset: 0; background: rgba(246,247,249,.8); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; z-index: 50; }
.overlay span { color: #374151; font-weight: 500; }
.spinner { width: 38px; height: 38px; border: 4px solid #d3d8df; border-top-color: #2563eb; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }