:root {
  color-scheme: dark;
  --bg: #050b14;
  --bg-soft: #081321;
  --panel: #0c1928;
  --panel-2: #102237;
  --border: rgba(142, 173, 204, 0.19);
  --border-strong: rgba(91, 231, 195, 0.42);
  --text: #f3f8fd;
  --muted: #9db0c5;
  --lime: #b8f43e;
  --teal: #31ddc1;
  --blue: #67a5ff;
  --yellow: #ffc439;
  --danger: #ff7c8e;
  --warning: #ffd166;
  --success: #43e09d;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  --radius: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background:
    radial-gradient(circle at 10% -10%, rgba(49, 221, 193, 0.12), transparent 34rem),
    radial-gradient(circle at 100% 0%, rgba(103, 165, 255, 0.11), transparent 36rem),
    var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
}
a { color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
code { color: var(--lime); background: rgba(184,244,62,.08); padding: .1rem .35rem; border-radius: 6px; }
.hidden { display: none !important; }
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: white; color: black; padding: .7rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
  background: rgba(5, 11, 20, 0.86);
  backdrop-filter: blur(18px);
}
.header-inner { max-width: 1240px; margin: auto; padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.brand { display: inline-flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: linear-gradient(145deg,var(--lime),var(--teal)); color: #051017; font-weight: 900; font-size: 1.35rem; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 1rem; letter-spacing: -.01em; }
.brand small { color: var(--muted); font-size: .75rem; line-height: 1.25; }
.header-actions { display: flex; gap: .65rem; align-items: center; }

.button { border: 1px solid var(--border); border-radius: 12px; padding: .66rem 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; text-decoration: none; font-weight: 750; line-height: 1.2; transition: transform .18s ease, border-color .18s ease, background .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); border-color: var(--border-strong); }
.button-primary { color: #07111a; border-color: transparent; background: linear-gradient(135deg,var(--lime),var(--teal)); box-shadow: 0 10px 30px rgba(49,221,193,.16); }
.button-secondary { color: var(--text); background: rgba(103,165,255,.12); border-color: rgba(103,165,255,.3); }
.button-ghost { color: var(--text); background: rgba(255,255,255,.035); }
.button-donate { color: #111; background: var(--yellow); border-color: rgba(255,255,255,.2); }
.button-small { padding: .47rem .7rem; font-size: .83rem; border-radius: 9px; }
.button-large { padding: .9rem 1.35rem; min-height: 50px; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--border); color: var(--text); background: var(--panel-2); border-radius: 10px; }
.text-button { color: var(--teal); background: transparent; border: 0; padding: .25rem; }

main { overflow: hidden; }
.hero { max-width: 1240px; margin: auto; padding: 5.4rem 1.25rem 3.6rem; display: grid; grid-template-columns: 1.35fr .85fr; gap: 3rem; align-items: center; }
.eyebrow { color: var(--teal); font-size: .76rem; font-weight: 900; letter-spacing: .16em; }
h1,h2,h3,h4,p { margin-top: 0; }
h1 { max-width: 800px; margin-bottom: 1.15rem; font-size: clamp(2.65rem, 6vw, 5.1rem); line-height: .99; letter-spacing: -.055em; }
h2 { margin-bottom: .85rem; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.08; letter-spacing: -.035em; }
h3 { margin-bottom: .42rem; font-size: 1.16rem; }
.hero-lead { max-width: 760px; color: #c1cedd; font-size: clamp(1.04rem,2vw,1.25rem); }
.trust-row { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.trust-row span { padding: .5rem .7rem; border: 1px solid var(--border); background: rgba(255,255,255,.025); border-radius: 999px; color: #c8d6e5; font-size: .84rem; }
.hero-card { border: 1px solid var(--border); border-radius: 24px; padding: 1.35rem; background: linear-gradient(160deg,rgba(16,34,55,.95),rgba(8,19,33,.95)); box-shadow: var(--shadow); transform: rotate(1deg); }
.example-file { padding: 1rem; background: rgba(255,255,255,.055); border: 1px solid var(--border); border-radius: 13px; font-weight: 800; }
.example-arrow { padding: 1rem; color: var(--teal); font-size: .82rem; text-align: center; }
.example-results { display: grid; gap: .55rem; }
.example-results span { padding: .72rem .85rem; border-left: 3px solid var(--lime); background: rgba(184,244,62,.07); border-radius: 8px; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: .86rem; }

.tool-shell { max-width: 1240px; margin: 0 auto 5rem; padding: 1.25rem; }
.tool-heading-row, .section-title-row, .fields-panel-title, .thumbnail-heading, .progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tool-heading-row { margin-bottom: 1rem; }
.tool-heading-row h2 { margin: .15rem 0 0; }
.notice { border-radius: 13px; padding: .85rem 1rem; margin: 1rem 0; font-size: .9rem; }
.notice-info { border: 1px solid rgba(49,221,193,.24); background: rgba(49,221,193,.07); color: #c8f8ed; }
.notice-muted { border: 1px solid var(--border); background: rgba(255,255,255,.025); color: var(--muted); }
.notice-warning { border: 1px solid rgba(255,209,102,.34); background: rgba(255,209,102,.08); color: #ffe9ad; }
.notice-danger { border: 1px solid rgba(255,124,142,.38); background: rgba(255,124,142,.08); color: #ffd2d9; }
.notice-success { border: 1px solid rgba(67,224,157,.36); background: rgba(67,224,157,.08); color: #c9ffe5; }

.step-card { position: relative; display: grid; grid-template-columns: 54px 1fr; gap: 1rem; padding: 1.35rem; margin-top: 1rem; background: rgba(12,25,40,.82); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 14px 50px rgba(0,0,0,.14); }
.step-number { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg,var(--lime),var(--teal)); color: #07111a; font-weight: 950; }
.step-content { min-width: 0; }
.step-content > p { color: var(--muted); }
.disabled-section { opacity: .56; pointer-events: none; filter: saturate(.55); }
.dropzone { min-height: 170px; display: grid; place-items: center; align-content: center; gap: .4rem; padding: 1.4rem; border: 2px dashed rgba(103,165,255,.35); border-radius: 16px; color: var(--muted); background: rgba(103,165,255,.04); text-align: center; transition: border-color .2s ease, background .2s ease; }
.dropzone:hover,.dropzone.dragover { border-color: var(--teal); background: rgba(49,221,193,.07); }
.dropzone strong { color: var(--text); }
.dropzone-icon { font-size: 2.25rem; }
.file-summary { margin-top: .85rem; padding: .85rem 1rem; display: flex; justify-content: space-between; gap: .8rem; background: rgba(67,224,157,.07); border: 1px solid rgba(67,224,157,.24); border-radius: 12px; }
.file-summary small { color: var(--muted); }

.method-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .75rem; }
.method-option { min-height: 144px; display: flex; flex-direction: column; gap: .32rem; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(255,255,255,.025); cursor: pointer; }
.method-option input { position: absolute; opacity: 0; }
.method-option.selected { border-color: var(--teal); background: rgba(49,221,193,.08); box-shadow: inset 0 0 0 1px rgba(49,221,193,.17); }
.method-option small { color: var(--muted); line-height: 1.4; }
.method-icon { font-size: 1.45rem; }
.template-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
select,input[type="text"],input[type="number"] { width: 100%; color: var(--text); background: #081522; border: 1px solid var(--border); border-radius: 10px; padding: .67rem .72rem; outline: none; }
select:focus,input:focus { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(49,221,193,.1); }
.segmented-control { display: inline-flex; gap: .25rem; padding: .25rem; margin: .35rem 0 1rem; border: 1px solid var(--border); border-radius: 12px; background: #071421; }
.segmented-control input { position: absolute; opacity: 0; }
.segmented-control span { display: block; padding: .55rem .8rem; border-radius: 9px; color: var(--muted); font-size: .88rem; font-weight: 750; cursor: pointer; }
.segmented-control input:checked + span { color: #07111a; background: linear-gradient(135deg,var(--lime),var(--teal)); }

.viewer-layout { display: grid; grid-template-columns: minmax(0,1.6fr) minmax(260px,.65fr); gap: 1rem; }
.viewer-column,.fields-panel { min-width: 0; }
.viewer-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; margin-bottom: .6rem; }
.viewer-toolbar label { display: flex; align-items: center; gap: .4rem; color: var(--muted); }
.viewer-toolbar input { width: 72px; padding: .45rem; text-align: center; }
.viewer-tip { margin-bottom: .65rem; color: var(--muted); font-size: .86rem; }
.pdf-viewer { position: relative; min-height: 380px; display: grid; place-items: center; overflow: auto; border: 1px solid var(--border); border-radius: 15px; background: #02050a; }
.pdf-viewer canvas { display: block; max-width: none; }
#selectionCanvas { position: absolute; touch-action: none; cursor: crosshair; }
.viewer-empty { position: absolute; color: var(--muted); }
.selection-form { display: grid; grid-template-columns: 1fr auto auto; align-items: end; gap: .55rem; padding: .8rem; margin-top: .65rem; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(49,221,193,.06); }
.selection-form label { color: var(--muted); font-size: .82rem; }
.suggestions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; padding: .7rem; border: 1px solid var(--border); border-radius: 12px; }
.suggestion-chip { border: 1px solid rgba(103,165,255,.35); background: rgba(103,165,255,.1); color: #dceaff; border-radius: 999px; padding: .4rem .65rem; font-size: .8rem; }
.fields-panel { align-self: start; padding: 1rem; border: 1px solid var(--border); border-radius: 14px; background: rgba(3,10,18,.45); }
.fields-panel h4 { margin: 0; }
.regions-list { display: grid; gap: .55rem; margin: .85rem 0; }
.region-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .55rem; padding: .65rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); }
.region-color { width: 12px; height: 12px; border-radius: 4px; background: var(--teal); }
.region-item strong,.region-item small { display: block; }
.region-item small { color: var(--muted); }
.region-remove { border: 0; background: transparent; color: var(--danger); font-size: 1.1rem; }
.empty-state { color: var(--muted); text-align: center; font-size: .85rem; }
.form-field { display: flex; flex-direction: column; gap: .35rem; color: #c7d5e5; font-size: .84rem; }
.checkbox-row { display: flex; align-items: flex-start; gap: .6rem; margin-top: .9rem; color: #d8e3ee; }
.checkbox-row input { margin-top: .25rem; accent-color: var(--teal); }
.checkbox-row strong,.checkbox-row small { display: block; }
.checkbox-row small { color: var(--muted); line-height: 1.4; }
.checkbox-row.compact { margin-top: .25rem; }
.thumbnail-section { margin-top: 1rem; }
.thumbnail-heading span { color: var(--muted); font-size: .82rem; }
.thumbnail-strip { display: flex; gap: .6rem; overflow-x: auto; padding: .7rem .1rem .35rem; scrollbar-color: var(--teal) transparent; }
.thumbnail { flex: 0 0 92px; padding: .35rem; border: 1px solid var(--border); border-radius: 10px; background: rgba(255,255,255,.025); color: var(--muted); }
.thumbnail.active { border-color: var(--teal); background: rgba(49,221,193,.09); }
.thumbnail canvas { width: 100%; height: 112px; object-fit: contain; background: white; border-radius: 5px; }
.thumbnail span { display: block; padding-top: .25rem; text-align: center; font-size: .75rem; }

.form-grid { display: grid; gap: .8rem; }
.form-grid.two-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.inline-options { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .8rem; color: var(--muted); }
.inline-options input { accent-color: var(--teal); }
.narrow { max-width: 320px; }
.settings-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: .8rem; margin: 1rem 0; }
.setting-card { padding: .85rem; border: 1px solid var(--border); border-radius: 13px; background: rgba(255,255,255,.02); }
.field-help { margin: .5rem 0 0; color: var(--muted); font-size: .8rem; }
.progress-panel { margin-top: .8rem; }
.progress-heading { color: var(--muted); font-size: .83rem; }
.progress-track { height: 10px; overflow: hidden; border-radius: 999px; background: #050b12; border: 1px solid var(--border); }
.progress-bar { width: 0; height: 100%; background: linear-gradient(90deg,var(--lime),var(--teal)); transition: width .2s ease; }

.review-stats { display: flex; flex-wrap: wrap; gap: .5rem; }
.review-stats span { padding: .45rem .65rem; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); font-size: .82rem; }
.table-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: 14px; }
.review-table { width: 100%; border-collapse: collapse; min-width: 820px; }
.review-table th,.review-table td { padding: .72rem; border-bottom: 1px solid var(--border); text-align: left; vertical-align: middle; }
.review-table th { color: var(--muted); background: rgba(255,255,255,.025); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.review-table td { font-size: .87rem; }
.review-table tr:last-child td { border-bottom: 0; }
.review-table input { min-width: 270px; }
.filename-error { border-color: var(--danger) !important; }
.detected-value { max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #cce3f8; }
.empty-table { padding: 2rem !important; color: var(--muted); text-align: center !important; }
.review-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .7rem; margin-top: 1rem; }

.content-section { max-width: 1160px; margin: 0 auto; padding: 4.5rem 1.25rem; }
.content-section > h2 { max-width: 780px; }
.content-grid.three-columns,.use-case-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; margin-top: 1.5rem; }
.content-grid article,.use-case-grid article { padding: 1.15rem; border: 1px solid var(--border); border-radius: 15px; background: rgba(12,25,40,.55); }
.content-grid article > span { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: .8rem; border-radius: 10px; color: #07111a; background: var(--lime); font-weight: 900; }
.content-grid p,.use-case-grid p { color: var(--muted); margin-bottom: 0; }
.alt-section { max-width: none; padding-left: max(1.25rem,calc((100vw - 1160px)/2)); padding-right: max(1.25rem,calc((100vw - 1160px)/2)); background: rgba(8,19,33,.7); border-block: 1px solid var(--border); }
.use-case-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.faq-section { max-width: 900px; }
details { padding: 1rem 1.1rem; margin-top: .65rem; border: 1px solid var(--border); border-radius: 13px; background: rgba(12,25,40,.58); }
summary { cursor: pointer; font-weight: 800; }
details p { margin: .7rem 0 0; color: var(--muted); }
.donation-section { max-width: 1160px; margin: 0 auto 5rem; padding: 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; border: 1px solid rgba(255,196,57,.35); border-radius: 20px; background: linear-gradient(135deg,rgba(255,196,57,.09),rgba(49,221,193,.06)); }
.donation-section h2 { margin: .2rem 0 .5rem; }
.donation-section p { max-width: 710px; margin-bottom: 0; color: var(--muted); }
.site-footer { max-width: 1240px; margin: auto; padding: 1.4rem 1.25rem 2.5rem; display: flex; justify-content: space-between; gap: 1rem; color: var(--muted); border-top: 1px solid var(--border); }
.site-footer strong,.site-footer span { display: block; }
.footer-links { display: flex; gap: 1rem; }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; padding-top: 4rem; }
  .hero-card { max-width: 560px; transform: none; }
  .method-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .viewer-layout,.settings-grid { grid-template-columns: 1fr; }
  .fields-panel { order: -1; }
  .content-grid.three-columns { grid-template-columns: 1fr; }
}
@media (max-width: 680px) {
  .header-actions .button-ghost { display: none; }
  .button-donate { font-size: .78rem; padding: .6rem .7rem; }
  .brand small { display: none; }
  .hero { padding-top: 3rem; }
  h1 { font-size: 2.55rem; }
  .step-card { grid-template-columns: 1fr; padding: 1rem; }
  .step-number { width: 36px; height: 36px; }
  .method-grid,.form-grid.two-columns,.use-case-grid { grid-template-columns: 1fr; }
  .method-option { min-height: 112px; }
  .section-title-row,.tool-heading-row { align-items: flex-start; flex-direction: column; }
  .selection-form { grid-template-columns: 1fr; }
  .pdf-viewer { min-height: 300px; }
  .donation-section,.site-footer { align-items: flex-start; flex-direction: column; }
  .review-actions { justify-content: stretch; }
  .review-actions .button { width: 100%; }
}