:root {
  --ink: #3a3a3a;
  --deep-ink: #244d56;
  --muted: #718188;
  --paper: #f2f7f8;
  --card: #ffffff;
  --line: #dce9ec;
  --lime: #54c1d1;
  --lime-dark: #239eaf;
  --orange: #f2486b;
  --orange-soft: #fff0f3;
  --teal-soft: #e8f7f9;
  --danger: #d9534f;
  --shadow: 0 18px 55px rgba(33, 53, 48, .08);
  --radius-lg: 25px;
  --radius-md: 17px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--paper); color: var(--ink); font-family: "DM Sans", Arial, sans-serif; }
button, input { font: inherit; }
button { cursor: pointer; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.app-shell { min-height: 100vh; overflow: hidden; }
.topbar { max-width: 1280px; padding: 24px 34px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--deep-ink); text-decoration: none; }
.official-logo { display: block; width: 164px; height: auto; object-fit: contain; }
.brand-word { font: 700 26px/1 "Space Grotesk", sans-serif; letter-spacing: -1.8px; }.brand-word span { color: var(--orange); }
.brand-mark { width: 31px; height: 28px; position: relative; display: block; transform: rotate(-7deg); }
.brand-mark::after { content: ""; position: absolute; left: 8px; bottom: 0; width: 18px; height: 16px; border-radius: 62% 45% 58% 46%; background: var(--deep-ink); }
.brand-mark span { position: absolute; width: 8px; height: 10px; border-radius: 80% 80% 55% 55%; background: var(--deep-ink); }.brand-mark span:nth-child(1) { left: 0; top: 5px; transform: rotate(-38deg); }.brand-mark span:nth-child(2) { left: 9px; top: 0; }.brand-mark span:nth-child(3) { right: 3px; top: 3px; transform: rotate(36deg); }.brand-mark span:nth-child(4) { right: -2px; top: 11px; transform: rotate(68deg); }
.topbar-actions { display: flex; align-items: center; gap: 12px; }.local-chip { display: inline-flex; gap: 7px; align-items: center; color: var(--muted); font-size: 12px; font-weight: 700; }.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #4dab4a; box-shadow: 0 0 0 4px rgba(77, 171, 74, .15); }.theme-toggle { border: 1px solid var(--line); border-radius: 99px; background: var(--card); color: var(--ink); padding: 9px 13px; display: inline-flex; gap: 7px; align-items: center; font-size: 12px; font-weight: 700; transition: .2s ease; }.theme-toggle:hover { transform: translateY(-1px); border-color: var(--ink); }
.hero { max-width: 1280px; padding: 74px 34px 58px; margin: 0 auto; display: flex; justify-content: space-between; align-items: end; gap: 32px; position: relative; }.hero::before { content: ""; position: absolute; background: var(--lime); height: 208px; width: 58vw; max-width: 820px; top: 18px; left: -2vw; transform: skewY(-6deg); border-radius: 0 40px 40px 0; opacity: .82; z-index: -1; }.hero-copy { max-width: 755px; }.eyebrow, .section-kicker { margin: 0 0 10px; color: var(--orange); font-size: 10px; letter-spacing: 1.4px; font-weight: 700; }.eyebrow { display: flex; align-items: center; gap: 8px; }.eyebrow span { height: 8px; width: 8px; background: var(--orange); border-radius: 50%; }.hero h1 { margin: 0; font: 700 clamp(42px, 6.1vw, 76px)/.98 "Space Grotesk", sans-serif; letter-spacing: -4.2px; color: var(--deep-ink); }.hero h1 em { color: var(--orange); font-style: normal; }.hero-description { color: #45605c; max-width: 585px; margin: 23px 0 0; line-height: 1.6; font-size: 16px; }.hero-metric { background: var(--deep-ink); width: 252px; color: white; padding: 20px; border-radius: 0 0 0 23px; display: flex; gap: 13px; align-items: start; margin-bottom: 3px; box-shadow: var(--shadow); }.metric-icon { color: var(--lime); font: 600 28px/1 "Space Grotesk", sans-serif; }.hero-metric strong, .hero-metric span { display: block; }.hero-metric strong { font-size: 13px; margin-top: 1px; }.hero-metric span { color: #bbceca; font-size: 11px; line-height: 1.4; margin-top: 5px; }
.workspace { max-width: 1280px; padding: 0 34px 54px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 25px; }.work-main { min-width: 0; }.card, .aside-card, .ocr-control { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }.card { border-radius: var(--radius-lg); }.upload-card { padding: 30px; }.card-heading, .table-topbar { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }.card h2, .aside-card h2 { margin: 0; color: var(--deep-ink); font: 700 22px/1.12 "Space Grotesk", sans-serif; letter-spacing: -.7px; }.format-badge { background: #fff3e9; color: var(--orange); border-radius: 8px; font: 700 10px/1 "Space Grotesk", sans-serif; padding: 8px 7px; letter-spacing: 1px; }.drop-zone { margin-top: 25px; padding: 33px 20px 28px; border: 1.5px dashed #bdc8c3; border-radius: var(--radius-md); background: linear-gradient(135deg, rgba(246, 250, 247, .9), rgba(255, 253, 249, .9)); text-align: center; transition: .2s ease; outline: none; }.drop-zone:hover, .drop-zone:focus, .drop-zone.drag-over { border-color: var(--orange); background: var(--orange-soft); transform: translateY(-1px); }.upload-illustration { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 17px; color: var(--deep-ink); background: var(--lime); margin: 0 auto 13px; }.upload-illustration svg { width: 36px; }.drop-title { margin: 0; color: var(--deep-ink); font: 700 17px/1.3 "Space Grotesk", sans-serif; }.drop-title span { font-family: "DM Sans", sans-serif; font-weight: 500; color: var(--muted); }.drop-hint { margin: 8px 0 0; color: var(--muted); font-size: 12px; }.upload-footnote { display: flex; align-items: center; gap: 6px; margin: 14px 2px 0; color: var(--muted); font-size: 11px; }.lock-icon { color: var(--lime-dark); font-weight: 700; }.primary-button, .secondary-button, .ghost-button { border: 0; transition: .2s ease; font-weight: 700; }.primary-button { width: 100%; display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 22px; padding: 15px 20px; color: var(--deep-ink); background: var(--lime); border-radius: 12px; letter-spacing: .1px; }.primary-button:not(:disabled):hover { background: #cbff78; transform: translateY(-2px); box-shadow: 0 9px 18px rgba(134, 181, 45, .18); }.primary-button:disabled { cursor: not-allowed; opacity: .45; }.file-details { display: flex; align-items: center; gap: 11px; background: var(--teal-soft); border-radius: 12px; padding: 12px; margin-top: 18px; }.file-symbol { display: grid; place-items: center; flex: 0 0 37px; height: 37px; border-radius: 8px; color: var(--orange); background: white; font: 700 10px/1 "Space Grotesk", sans-serif; }.file-meta { display: grid; gap: 3px; min-width: 0; }.file-meta strong { color: var(--deep-ink); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.file-meta span { color: var(--muted); font-size: 11px; }.icon-button { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 8px; color: var(--muted); background: transparent; font-size: 24px; line-height: 1; }.icon-button:hover { background: rgba(0,0,0,.06); color: var(--danger); }.error-message { margin-top: 15px; padding: 10px 12px; color: var(--danger); background: #fff1ef; border-radius: 10px; font-size: 12px; }.is-hidden { display: none !important; }
.work-aside { display: flex; flex-direction: column; gap: 15px; }.aside-card { border-radius: var(--radius-md); padding: 22px; }.security-card { background: var(--deep-ink); color: #e9f4ed; border-color: var(--deep-ink); }.aside-icon { display: grid; place-items: center; height: 38px; width: 38px; border-radius: 11px; font: 700 23px/1 "Space Grotesk", sans-serif; color: var(--deep-ink); background: var(--lime); margin-bottom: 17px; }.security-card .section-kicker { color: var(--lime); }.security-card h2 { color: white; font-size: 21px; letter-spacing: -.8px; }.security-card > p:not(.section-kicker) { color: #b7ccc7; font-size: 12px; line-height: 1.55; }.security-list { border-top: 1px solid rgba(255,255,255,.13); margin-top: 17px; padding-top: 14px; display: grid; gap: 8px; color: #dce9e4; font-size: 11px; }.security-list span::first-letter { color: var(--lime); }.quick-guide ol { list-style: none; padding: 1px 0 0; margin: 17px 0 0; display: grid; gap: 15px; counter-reset: guide; }.quick-guide li { display: flex; align-items: center; gap: 10px; color: #536561; font-size: 12px; }.quick-guide li span { color: var(--orange); font: 700 10px/1 "Space Grotesk", sans-serif; }.ocr-control { display: flex; gap: 10px; align-items: center; padding: 15px; border-radius: var(--radius-md); cursor: pointer; }.ocr-control input { position: absolute; opacity: 0; }.custom-checkbox { width: 19px; height: 19px; border: 1px solid #a3b1ac; border-radius: 5px; flex: 0 0 auto; position: relative; }.ocr-control input:checked + .custom-checkbox { background: var(--lime); border-color: var(--lime); }.ocr-control input:checked + .custom-checkbox::after { content: "✓"; position: absolute; left: 4px; top: 0px; color: var(--deep-ink); font-size: 13px; font-weight: 700; }.ocr-control strong, .ocr-control small { display: block; }.ocr-control strong { color: var(--deep-ink); font-size: 12px; }.ocr-control small { color: var(--muted); font-size: 10px; margin-top: 3px; line-height: 1.25; }
.process-card { padding: 30px; }.progress-number { color: var(--orange); font: 700 30px/1 "Space Grotesk", sans-serif; letter-spacing: -1px; }.progress-track { height: 11px; overflow: hidden; border-radius: 99px; margin-top: 30px; background: #e8ece8; }.progress-bar { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--lime-dark), var(--lime)); transition: width .28s ease; }.progress-status { min-height: 20px; color: var(--muted); margin: 13px 0 25px; font-size: 13px; }.process-steps { display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); padding-top: 20px; gap: 8px; }.process-step { display: flex; gap: 8px; align-items: flex-start; opacity: .38; transition: .2s ease; }.process-step > span { display: grid; place-items: center; height: 23px; width: 23px; flex: 0 0 auto; color: white; border-radius: 50%; background: var(--muted); font-size: 10px; font-weight: 700; }.process-step strong, .process-step small { display: block; }.process-step strong { font-size: 11px; color: var(--deep-ink); }.process-step small { font-size: 9px; color: var(--muted); margin-top: 3px; line-height: 1.2; }.process-step.active, .process-step.complete { opacity: 1; }.process-step.active > span { background: var(--orange); }.process-step.complete > span { background: var(--lime-dark); }
.success-banner { display: flex; align-items: center; gap: 13px; padding: 22px 25px; border-radius: var(--radius-lg); background: var(--deep-ink); color: white; box-shadow: var(--shadow); }.success-check { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 auto; border-radius: 50%; color: var(--deep-ink); background: var(--lime); font-size: 20px; font-weight: 700; }.success-banner p { margin: 0 0 3px; color: var(--lime); font-size: 9px; letter-spacing: 1.2px; font-weight: 700; }.success-banner h2 { margin: 0; font: 700 21px/1.15 "Space Grotesk", sans-serif; letter-spacing: -.5px; }.success-banner span { color: #b8cac6; font-size: 11px; }.ghost-button { margin-left: auto; padding: 10px 13px; border: 1px solid rgba(255,255,255,.32); border-radius: 9px; color: white; background: transparent; font-size: 11px; white-space: nowrap; }.ghost-button:hover { background: rgba(255,255,255,.1); }.stat-strip { display: grid; grid-template-columns: repeat(5, 1fr); margin: 16px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow); }.stat-strip div { padding: 16px 15px; border-right: 1px solid var(--line); }.stat-strip div:last-child { border-right: 0; }.stat-strip span, .stat-strip strong { display: block; }.stat-strip span { color: var(--muted); font-size: 10px; }.stat-strip strong { margin-top: 5px; color: var(--deep-ink); font: 700 20px/1 "Space Grotesk", sans-serif; letter-spacing: -.7px; }.result-card { padding: 27px; }.search-field { display: flex; align-items: center; gap: 6px; width: 210px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); background: #fbfaf7; }.search-field input { width: 100%; outline: 0; color: var(--ink); border: 0; background: transparent; font-size: 11px; }.table-wrap { margin-top: 20px; max-height: 325px; overflow: auto; border-top: 1px solid var(--line); }table { width: 100%; border-collapse: collapse; text-align: left; }th { padding: 12px 8px; color: var(--muted); border-bottom: 1px solid var(--line); font-size: 10px; font-weight: 700; letter-spacing: .3px; }td { padding: 11px 8px; color: var(--deep-ink); border-bottom: 1px solid #eeece6; font-size: 12px; }tbody tr:last-child td { border-bottom: 0; }.file-cell { display: flex; align-items: center; gap: 9px; font-weight: 600; }.mini-pdf { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; color: var(--orange); background: var(--orange-soft); font: 700 8px/1 "Space Grotesk", sans-serif; }.method-tag { display: inline-block; padding: 4px 7px; color: #52726a; background: var(--teal-soft); border-radius: 99px; font-size: 10px; }.status-ok { color: #548b28; font-size: 11px; font-weight: 700; }.row-download { color: var(--orange); border: 0; background: transparent; font-size: 17px; }.row-download:hover { color: var(--deep-ink); }.empty-search { padding: 23px; text-align: center; color: var(--muted); font-size: 12px; }.download-actions { display: flex; gap: 12px; justify-content: flex-end; }.download-actions .primary-button, .download-actions .secondary-button { width: auto; margin-top: 16px; padding: 13px 19px; font-size: 12px; }.secondary-button { color: var(--deep-ink); background: var(--card); border: 1px solid var(--line); border-radius: 12px; }.secondary-button:hover { transform: translateY(-2px); border-color: var(--ink); }footer { max-width: 1280px; margin: 0 auto; padding: 20px 34px 28px; border-top: 1px solid rgba(18,59,54,.09); display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }.toast { position: fixed; left: 50%; bottom: 26px; z-index: 10; max-width: calc(100vw - 32px); transform: translate(-50%, 90px); color: white; background: var(--deep-ink); padding: 11px 16px; border-radius: 10px; box-shadow: var(--shadow); font-size: 12px; opacity: 0; transition: .25s ease; }.toast.visible { opacity: 1; transform: translate(-50%, 0); }

body.dark { --ink: #deebe6; --deep-ink: #eaf5f0; --muted: #9eb1ab; --paper: #11211f; --card: #172b28; --line: #2a413d; --orange-soft: #442d25; --teal-soft: #223d37; --shadow: 0 18px 55px rgba(0, 0, 0, .2); }body.dark .brand { color: var(--deep-ink); }body.dark .brand-mark::after, body.dark .brand-mark span { background: var(--deep-ink); }body.dark .hero h1, body.dark .card h2, body.dark .aside-card h2, body.dark .file-meta strong, body.dark .process-step strong, body.dark .stat-strip strong, body.dark td, body.dark .ocr-control strong { color: var(--deep-ink); }body.dark .hero-description { color: #afc4be; }body.dark .hero::before { opacity: .46; }body.dark .hero-metric, body.dark .security-card, body.dark .success-banner { background: #091613; color: white; }body.dark .drop-zone { background: #1a312d; }body.dark .drop-zone:hover, body.dark .drop-zone:focus, body.dark .drop-zone.drag-over { background: #3e2b24; }body.dark .file-symbol { background: #25433d; }body.dark .theme-toggle, body.dark .secondary-button { background: #203733; color: var(--deep-ink); }body.dark .progress-track { background: #283e39; }body.dark .search-field { background: #203532; }body.dark .toast { color: #0d1a17; background: var(--lime); }

@media (max-width: 900px) { .hero { padding-top: 48px; }.workspace { grid-template-columns: 1fr; }.work-aside { display: grid; grid-template-columns: 1.1fr 1fr; }.ocr-control { grid-column: 1 / -1; }.hero-metric { display: none; } }
@media (max-width: 640px) { .topbar, .hero, .workspace, footer { padding-left: 18px; padding-right: 18px; }.topbar { padding-top: 18px; padding-bottom: 18px; }.local-chip { display: none; }.theme-label { display: none; }.theme-toggle { padding: 9px 11px; }.hero { padding-top: 39px; padding-bottom: 34px; }.hero::before { height: 150px; width: 86vw; }.hero h1 { font-size: 43px; letter-spacing: -2.6px; }.hero-description { font-size: 14px; }.upload-card, .process-card, .result-card { padding: 20px; }.drop-zone { padding: 28px 14px; }.process-steps { grid-template-columns: 1fr; gap: 13px; }.process-step small { display: none; }.stat-strip { grid-template-columns: 1fr 1fr; }.stat-strip div:nth-child(2n) { border-right: 0; }.stat-strip div:nth-child(-n+4) { border-bottom: 1px solid var(--line); }.success-banner { align-items: flex-start; flex-wrap: wrap; padding: 19px; }.success-banner .ghost-button { margin-left: 51px; }.work-aside { display: flex; }.table-topbar { display: grid; }.search-field { width: 100%; }.table-wrap { margin-left: -5px; margin-right: -5px; }.table-wrap table { min-width: 540px; }.download-actions { display: grid; grid-template-columns: 1fr; }.download-actions .primary-button, .download-actions .secondary-button { width: 100%; margin-top: 0; }.download-actions { margin-top: 15px; }.download-actions .primary-button { margin-top: 0; }footer { flex-direction: column; gap: 5px; } }

.drop-zone.is-disabled { pointer-events: none; opacity: .58; }