/* fonts are served from this site: no calls to third parties */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format('woff2')}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/sora-latin-600-normal.woff2) format('woff2')}
:root {
  --navy: #13213D;
  --navy-2: #1E3158;
  --gold: #E0B43A;
  --gold-soft: #F5D57A;
  --ink: #14213D;
  --muted: #5A6478;
  --line: #E1E6EF;
  --bg: #F4F6FA;
  --white: #fff;
  --flag: #FFF200;
  --flag-soft: #FFF9B0;
  --ok: #11643A;
  --ok-bg: #DDF3E6;
  --warn: #6E4A00;
  --warn-bg: #FFF3D1;
  --err: #B42318;
  --err-bg: #FEF3F2;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; }
a { color: #1F4FD1; font-weight: 600; }
button { font: inherit; }

/* header */
.top { background: var(--navy); color: #fff; }
.top-in { max-width: 1180px; margin: 0 auto; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; }
.brand img { width: 36px; height: 36px; }
.brand-name { font-family: 'Sora', 'Plus Jakarta Sans', sans-serif; font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.brand-name .i { color: var(--gold); }
.brand-by { font-size: 11px; color: #AEB8CC; margin-top: -2px; font-weight: 500; }
.nav { display: flex; gap: 18px; font-size: 14px; }
.nav a { color: #D6DCE8; font-weight: 500; text-decoration: none; }
.nav a:hover { color: #fff; }

/* hero */
.hero { background: var(--navy); padding: 26px 20px 96px; }
.drop-wrap { max-width: 860px; margin: -80px auto 0; padding: 0 20px; text-align: center; position: relative; }
.hero-in { max-width: 860px; margin: 0 auto; text-align: center; }
.hero h1 { color: #fff; font-family: 'Sora', sans-serif; font-weight: 600; font-size: clamp(26px, 4.2vw, 40px); letter-spacing: -0.03em; margin: 8px 0 8px; line-height: 1.15; }
.hero h1 em { font-style: normal; color: var(--gold-soft); }
.hero p.lead { color: #C9D2E3; font-size: 16px; margin: 0 auto 0; max-width: 640px; line-height: 1.55; }

.card { background: var(--white); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 40px rgba(19, 33, 61, 0.10); }
.drop { padding: 30px 24px; }
.zone { border: 2px dashed #B9C3D6; border-radius: 14px; padding: 34px 18px; cursor: pointer; transition: background .15s, border-color .15s; }
.zone:hover, .zone.over { background: #F7F9FD; border-color: var(--navy-2); }
.zone h2 { margin: 10px 0 4px; font-size: 19px; }
.zone p { margin: 0; color: var(--muted); font-size: 14px; }
.zone svg { color: var(--navy-2); }
.file-chip { display: inline-flex; align-items: center; gap: 10px; background: #EEF2FA; border-radius: 999px; padding: 8px 14px; font-weight: 600; font-size: 14px; margin-top: 14px; max-width: 100%; }
.file-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; padding: 0 2px; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 700; font-size: 15px; padding: 11px 18px; cursor: pointer; text-decoration: none; }
.btn:hover { border-color: #B9C3D6; }
.btn-primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-2); }
.btn-gold { background: var(--gold); border-color: var(--gold); color: var(--navy); }
.btn-gold:hover { filter: brightness(0.97); }
.btn:disabled { opacity: .5; cursor: default; }
.btn-lg { font-size: 16px; padding: 13px 26px; }
.actions-row { margin-top: 18px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.progress { margin-top: 18px; text-align: left; }
.bar { height: 10px; background: #E7EBF3; border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--navy-2), var(--gold)); transition: width .3s; }
.progress .stage { margin-top: 8px; font-size: 14px; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; }

.trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 18px 0 0; color: var(--muted); font-size: 13px; }
.trust span::before { content: '✓ '; color: var(--ok); font-weight: 800; }

.alert { border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; text-align: left; margin-top: 14px; }
.alert-err { background: var(--err-bg); color: var(--err); }
.alert-warn { background: var(--warn-bg); color: var(--warn); }
.alert-ok { background: var(--ok-bg); color: var(--ok); }

/* results */
.results { max-width: 1180px; margin: 26px auto 0; padding: 0 20px; }
.res-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.res-head h2 { margin: 0; font-size: 22px; letter-spacing: -0.02em; }
.res-head .sub { color: var(--muted); font-size: 14px; margin-top: 3px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.stat { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; }
.stat .k { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stat .v { font-size: 21px; font-weight: 800; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .v small { font-size: 13px; font-weight: 600; color: var(--muted); }
.stat.flag .v { color: #8A6A00; }
.stat.good .v { color: var(--ok); }
.stat.bad .v { color: var(--err); }

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 12px 0; }
.toolbar .spacer { flex: 1; }
.chk { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); cursor: pointer; user-select: none; }

.table-wrap { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: auto; max-height: 70vh; }
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; }
th { position: sticky; top: 0; background: var(--navy); color: #fff; text-align: left; font-weight: 700; padding: 10px 12px; white-space: nowrap; z-index: 1; }
td { padding: 8px 12px; border-bottom: 1px solid #EEF1F6; vertical-align: top; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.date { white-space: nowrap; }
td.desc { min-width: 260px; }
td[contenteditable] { outline: none; }
td[contenteditable]:focus { box-shadow: inset 0 0 0 2px #7FA0E6; background: #F7FAFF; }
td.flag { background: var(--flag); }
td.edited { background: #E8F4EC; }
td.note { color: #7A5B00; font-size: 12.5px; min-width: 240px; }
tr.rowflag td.note { background: var(--flag-soft); }
td.rn { color: #9AA4B8; font-size: 12px; }
.empty { padding: 30px; text-align: center; color: var(--muted); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.sw { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; border: 1px solid #0001; }

/* info sections */
.info { max-width: 1000px; margin: 46px auto 0; padding: 0 20px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.step { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px; }
.step b { display: block; margin-bottom: 6px; font-size: 15px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.step .n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--navy); color: var(--gold); font-weight: 800; margin-bottom: 10px; }
h2.sec { font-size: 24px; letter-spacing: -0.02em; margin: 0 0 14px; text-align: center; }
details { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; }
summary { cursor: pointer; font-weight: 700; }
details p { color: var(--muted); line-height: 1.6; margin: 10px 0 0; font-size: 14.5px; }

.cta { max-width: 1000px; margin: 40px auto 0; padding: 0 20px; }
.cta-in { background: var(--navy); color: #fff; border-radius: 18px; padding: 24px; display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.cta-in p { margin: 4px 0 0; color: #C9D2E3; font-size: 14px; }

footer { margin-top: 50px; padding: 26px 20px 34px; text-align: center; color: var(--muted); font-size: 13px; }
footer a { color: var(--muted); font-weight: 500; margin: 0 8px; }

.hidden { display: none !important; }

/* legal pages */
.legal { max-width: 780px; margin: 0 auto; padding: 32px 20px 50px; line-height: 1.65; }
.legal h1 { font-size: 32px; letter-spacing: -0.02em; margin: 0 0 4px; }
.legal h2 { font-size: 19px; margin: 28px 0 8px; }
.legal .upd { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

@media (max-width: 640px) {
  .nav a.hide-sm { display: none; }
  .drop { padding: 18px 14px; }
  .zone { padding: 24px 12px; }
  .toolbar .btn { flex: 1 1 auto; }
}

/* v2: several files, options, tabs, totals, side-by-side view */
.file-list { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 4px; }
.file-list .file-chip { margin-top: 0; }
.link-btn { border: 0; background: none; color: #1F4FD1; font-weight: 700; cursor: pointer; margin-top: 10px; padding: 4px; }
.options { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; align-items: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.options select { margin-left: 8px; font: inherit; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
.turnstile { margin-top: 14px; display: flex; justify-content: center; }
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 14px; font-weight: 700; font-size: 14px; cursor: pointer; color: var(--ink); max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tab .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; background: var(--ok); vertical-align: 1px; }
.tab .dot.flag { background: #D4A800; }
.totals { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-variant-numeric: tabular-nums; font-size: 15px; }
.totals .t { white-space: nowrap; }
.totals .t small { color: var(--muted); font-size: 12px; display: block; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.totals .op { color: var(--muted); font-weight: 800; font-size: 18px; }
.totals .res { margin-left: auto; font-weight: 800; }
.totals .res.ok { color: var(--ok); }
.totals .res.bad { color: var(--err); }
.work { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.work.split { grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); }
.viewer { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px; position: sticky; top: 12px; }
.viewer-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-weight: 700; font-size: 14px; }
.viewer-bar .spacer { flex: 1; }
.btn-sm { padding: 5px 11px; font-size: 14px; border-radius: 9px; }
.page-box { position: relative; max-height: 66vh; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; }
.page-box img { display: block; width: 100%; height: auto; }
.hl { position: absolute; border: 2px solid #E0B43A; background: rgba(255, 242, 0, .28); border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(19,33,61,.05); }
.viewer-hint { margin: 8px 2px 0; font-size: 12.5px; color: var(--muted); }
tr.sel td { box-shadow: inset 0 2px 0 #7FA0E6, inset 0 -2px 0 #7FA0E6; }
tbody tr { cursor: pointer; }
@media (max-width: 1000px) { .work.split { grid-template-columns: 1fr; } .viewer { position: static; order: -1; } }