:root {
  --bg: #f7f5f1; --panel: #ffffff; --text: #1f2328; --muted: #5b6570; --border: #dfd9cf;
  --cp: #b1494a; --ap: #3d6da8; --accent: #2a6f4d;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #16181c; --panel: #1e2126; --text: #e7e6e2; --muted: #9aa2ab; --border: #33383f; }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.5;
}
/* main is the wide outer bound (mainly so #results/#report-frame have room for wide tables);
   .page re-narrows everything else back to a readable line length. */
main { max-width: 1300px; margin: 0 auto; padding: 32px 20px 80px; }
.page { max-width: 900px; margin: 0 auto; }
h1 { font-size: 1.7rem; margin-bottom: 4px; }
p.subtitle { color: var(--muted); margin-top: 0; }
.privacy-note {
  background: var(--panel); border: 1px solid var(--accent); border-left: 4px solid var(--accent);
  border-radius: 8px; padding: 12px 16px; margin: 18px 0; font-size: 0.92rem;
}
.privacy-note strong { color: var(--accent); }

#drop-zone {
  border: 2px dashed var(--border); border-radius: 12px; padding: 48px 20px;
  text-align: center; cursor: pointer; background: var(--panel); transition: border-color .15s, background .15s;
}
#drop-zone:hover, #drop-zone.dragover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--panel)); }
#drop-zone .hint { color: var(--muted); font-size: 0.88rem; margin-top: 6px; }
#file-input { display: none; }

.status { margin-top: 14px; font-size: 0.92rem; color: var(--muted); min-height: 1.3em; }
.status.error { color: var(--cp); font-weight: 600; }

.warning {
  background: color-mix(in srgb, var(--cp) 12%, var(--panel)); border: 1px solid var(--cp);
  border-radius: 8px; padding: 10px 14px; margin-top: 14px; font-size: 0.88rem;
}

#results { margin-top: 24px; }
.download-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
button.download-btn {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 16px; font-size: 0.9rem; cursor: pointer;
}
button.download-btn:hover { border-color: var(--accent); }

/* Height is set from JS (app.js's watchReportFrameHeight) to match the report's actual content
   height, so the page has one scrollbar instead of the iframe growing its own on top of it.
   min-height is just the pre-JS/no-JS fallback so the frame isn't a zero-height sliver.
   overflow:hidden backs up the HTML scrolling="no" attribute on the element itself — since the
   height is always kept in sync with the content, this frame should never need to scroll on its
   own, and some browsers otherwise reserve a scrollbar gutter regardless of actual overflow. */
#report-frame {
  display: block; width: 100%; min-height: 400px; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px; background: var(--panel);
}

details.how-it-works { margin-top: 40px; font-size: 0.9rem; color: var(--muted); }
details.how-it-works summary { cursor: pointer; font-weight: 600; color: var(--text); }
details.how-it-works ol, details.how-it-works ul { padding-left: 1.2em; }

footer { color: var(--muted); font-size: 0.8rem; margin-top: 40px; }
footer a { color: inherit; }