:root { --data-accent: #155c46; --data-soft: #e8f1ed; --data-line: #dfe5e1; }
.data-page { color: #1b2520; background: #f4f6f4; }
.data-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 62px; padding: 10px clamp(16px, 4vw, 54px); border-bottom: 1px solid var(--data-line); background: rgba(255,255,255,.96); }
.data-brand { display: flex; align-items: center; gap: 9px; color: #17201c; font-family: inherit; font-size: 19px; font-weight: 700; text-decoration: none; }
.data-brand span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 8px; color: white; background: var(--data-accent); font-size: 15px; }
.data-topbar nav { display: flex; align-items: center; gap: 5px; }
.data-topbar nav a { padding: 8px 10px; border-radius: 7px; color: #59645e; text-decoration: none; font-size: 12px; }
.data-topbar nav a:hover, .data-topbar nav a.active { color: var(--data-accent); background: var(--data-soft); }
.data-page main { max-width: 1180px; padding: 34px 22px 70px; }
.data-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.data-heading p { margin: 0 0 7px; color: #86918b; font-size: 10px; letter-spacing: .13em; }
.data-heading h1 { margin: 0; font-family: inherit; font-size: clamp(26px, 4vw, 36px); font-weight: 500; letter-spacing: -.035em; }
.data-badge, .zero-cost { display: inline-flex; padding: 6px 9px; border-radius: 999px; color: var(--data-accent); background: var(--data-soft); font-size: 10px; font-weight: 700; white-space: nowrap; }
.data-page section { border: 1px solid var(--data-line); border-radius: 10px; box-shadow: 0 4px 16px rgba(28,55,44,.035); }
.data-page h2 { font-family: inherit; font-size: 20px; font-weight: 500; }
.data-page button, .data-page .button { border-color: #c8d1cc; border-radius: 6px; background: white; }
.data-page button:hover, .data-page .button:hover { border-color: #86a797; color: var(--data-accent); background: #f3f8f5; }
.data-page button[type="submit"], .data-page #upload-pdfs, .data-page #start-jobs, .data-page #rag-generate { border-color: var(--data-accent); color: white; background: var(--data-accent); }
.data-page button[type="submit"]:hover, .data-page #upload-pdfs:hover, .data-page #start-jobs:hover, .data-page #rag-generate:hover { color: white; background: #0f4938; }
.data-page .notice { border-radius: 0 7px 7px 0; }
.data-page .drop-zone { border-color: #9db4a8; border-radius: 8px; color: #5c6962; background: #f7faf8; }
.data-page progress { accent-color: var(--data-accent); }
.data-page .processing-loader span { background: var(--data-accent); }
.data-page .badge.good { border-color: var(--data-accent); background: var(--data-soft); }
.section-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.section-title-row h2 { margin-bottom: 4px; }
#rag { scroll-margin-top: 76px; }
#pdf-heading, #result-heading { scroll-margin-top: 82px; }
#rag-report { border-radius: 7px; }
@media (max-width: 720px) {
  .data-topbar { align-items: flex-start; flex-direction: column; gap: 8px; }
  .data-topbar nav { width: 100%; overflow-x: auto; }
  .data-topbar nav a { white-space: nowrap; }
  .data-heading { align-items: flex-start; flex-direction: column; }
  .data-page main { padding: 24px 11px 50px; }
}
/* Data workspace aligned with the main visual system */
:root { --data-accent: #14634b; --data-soft: #dcebe3; --data-line: #d9e0da; }
.data-page { color: #14231d; background: #f1f3ed; }
.data-topbar { min-height: 68px; border: 0; background: rgba(250,251,247,.92); backdrop-filter: blur(16px); }
.data-brand { font-size: 16px; font-weight: 600; letter-spacing: -.02em; }
.data-brand span { width: 30px; height: 30px; border-radius: 11px 11px 3px 11px; color: #123d31; background: #c8e86f; font-size: 13px; }
.data-topbar nav a { border-radius: 10px; }
.data-page main { padding-top: 46px; }
.data-heading h1 { max-width: 760px; font-size: clamp(28px,4vw,40px); font-weight: 600; letter-spacing: -.055em; }
.data-heading p { font-family: ui-monospace, Consolas, monospace; }
.data-badge, .zero-cost { border-radius: 10px 10px 3px 10px; }
.data-page section { border: 0; border-radius: 16px 16px 6px 16px; box-shadow: 0 8px 28px rgba(19,50,39,.055); }
.data-page h2 { font-size: 18px; font-weight: 600; letter-spacing: -.025em; }
.data-page button, .data-page .button { border-radius: 10px 10px 3px 10px; }
.data-page .drop-zone { border-width: 1px; border-radius: 14px 14px 5px 14px; background: #f3f7f3; }
.data-page input { border-color: #cbd5ce; border-radius: 9px; }
.data-page table { border-collapse: separate; border-spacing: 0; }
.data-page th, .data-page td { border-color: #e0e5e1; }
.data-page th { background: #edf2ed; }
.data-page .notice { border-radius: 0 12px 12px 0; }
/* Keep every data-tool section reachable above browser and device chrome. */
html:has(body.data-page),
body.data-page {
  width: 100%;
  min-height: 100%;
  min-height: 100dvh;
  overflow-x: hidden;
}
.data-page main {
  min-height: calc(100dvh - 68px);
  padding-bottom: max(96px, calc(42px + env(safe-area-inset-bottom)));
}
.data-page .data-topbar { padding-top: max(10px, env(safe-area-inset-top)); }
@media (max-width: 720px) {
  .data-page main { padding-bottom: max(76px, calc(32px + env(safe-area-inset-bottom))); }
}