@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap');

:root { font-family: 'DM Sans', 'Noto Sans JP', sans-serif; color: #172523; background: #f6f8f7; font-synthesis: none; --accent: #0d826f; --accent-dark: #086657; --accent-soft: #e7f4f1; --line: #dfe7e4; --muted: #657572; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: #f6f8f7; }
button, input { font: inherit; }
button { cursor: pointer; }
.app-shell { min-height: 100vh; }
header { height: 76px; padding: 0 max(32px, calc((100vw - 1240px) / 2)); display: flex; align-items: center; justify-content: space-between; background: rgba(255,255,255,.94); border-bottom: 1px solid #e9eeec; position: sticky; top: 0; z-index: 30; backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 11px; color: #172523; text-decoration: none; }
.brand > span, footer div > span { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: var(--accent); border-radius: 11px; }
.brand div { display: flex; flex-direction: column; line-height: 1; }
.brand b { font-size: 16px; letter-spacing: -.02em; }
.brand small { color: #81908d; font-size: 8px; letter-spacing: .17em; margin-top: 6px; }
.demo-badge { font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #62716e; border: 1px solid #d9e2df; border-radius: 99px; padding: 8px 13px; display: flex; align-items: center; gap: 7px; }
.demo-badge span, .ready-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px #d8eeea; }
main { overflow: hidden; }
.hero { min-height: 470px; text-align: center; display: flex; align-items: center; flex-direction: column; padding: 78px 24px 56px; background: radial-gradient(circle at 50% -20%, #dcf1ec 0, rgba(236,247,244,.66) 33%, rgba(246,248,247,0) 67%); }
.eyebrow { display: flex; align-items: center; gap: 7px; color: var(--accent); font-size: 11px; font-weight: 700; letter-spacing: .15em; }
.hero h1 { font-size: clamp(38px, 5.2vw, 64px); line-height: 1.22; letter-spacing: -.045em; margin: 23px 0 18px; color: #152320; }
.hero h1 span { color: var(--accent); }
.hero > p { font-size: 15px; line-height: 1.9; color: #64736f; margin: 0; }
.hero-stats { display: flex; align-items: center; justify-content: center; margin-top: 42px; background: rgba(255,255,255,.75); border: 1px solid #e2e9e7; padding: 16px 25px; border-radius: 15px; box-shadow: 0 12px 35px rgba(29,61,54,.05); }
.hero-stats div { min-width: 114px; display: flex; flex-direction: column; }
.hero-stats b { color: #17302a; font-size: 20px; }
.hero-stats span { font-size: 10px; color: #82908d; margin-top: 3px; }
.hero-stats i { width: 1px; height: 30px; background: #e1e7e5; margin: 0 12px; }
.workspace, .results { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.workspace { background: white; border: 1px solid #e3e9e7; border-radius: 22px; box-shadow: 0 16px 50px rgba(27,54,49,.07); padding: 30px 34px 25px; position: relative; margin-bottom: 70px; }
.workspace-head, .result-title { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.workspace-head > div:first-child, .result-title > div { display: flex; align-items: flex-start; gap: 14px; }
.workspace-head > div:first-child > span, .result-title > div > span { color: var(--accent); background: var(--accent-soft); font-size: 11px; font-weight: 700; border-radius: 7px; padding: 6px 8px; margin-top: 2px; }
h2 { margin: 0; font-size: 21px; letter-spacing: -.03em; }
.workspace-head p, .result-title p { margin: 6px 0 0; color: #788582; font-size: 12px; }
.tabs { display: flex; padding: 4px; background: #f1f4f3; border-radius: 11px; }
.tabs button { border: 0; background: transparent; color: #73817e; padding: 10px 18px; font-size: 12px; font-weight: 600; border-radius: 8px; }
.tabs button.active { background: white; color: var(--accent-dark); box-shadow: 0 2px 9px rgba(34,58,53,.09); }
.upload-area { width: 100%; min-height: 208px; border: 1.5px dashed #b9ccc7; border-radius: 16px; background: #fbfcfc; display: flex; flex-direction: column; align-items: center; justify-content: center; color: inherit; transition: .2s ease; }
.upload-area:hover { border-color: var(--accent); background: #f7fbfa; transform: translateY(-1px); }
.upload-icon { width: 50px; height: 50px; display: grid; place-items: center; border-radius: 14px; color: var(--accent); background: var(--accent-soft); margin-bottom: 14px; }
.upload-area b { font-size: 14px; }
.upload-area > span:not(.upload-icon):not(.selected-check) { color: #75837f; font-size: 12px; margin-top: 6px; }
.upload-area em { font-style: normal; color: #a1aaa8; font-size: 10px; margin-top: 14px; }
.upload-area.selected { min-height: 130px; flex-direction: row; justify-content: flex-start; text-align: left; padding: 16px; border-style: solid; border-color: #aad2c9; background: #f9fcfb; position: relative; animation: popIn .32s cubic-bezier(.2,.9,.3,1.2); }
@keyframes popIn { from { opacity: 0; transform: scale(.97) translateY(3px); } to { opacity: 1; transform: none; } }
.selected-check { animation: checkPop .4s .1s both cubic-bezier(.3,1.4,.4,1); }
@keyframes checkPop { from { transform: scale(0); } to { transform: scale(1); } }
.upload-thumb { width: 88px; height: 96px; overflow: hidden; border: 1px solid #dce5e2; border-radius: 6px; background: white; box-shadow: 0 4px 12px rgba(25,51,46,.1); flex: 0 0 auto; }
.file-info { display: flex; flex-direction: column; align-items: flex-start; margin-left: 18px; }
.file-info .file-type { padding: 4px 7px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-dark); font-size: 9px; font-weight: 700; margin: 0 0 9px; }
.file-info b { font-size: 14px; }
.file-info small { font-size: 11px; color: #7b8885; margin-top: 5px; }
.selected-check { margin-left: auto; margin-right: 16px; width: 31px; height: 31px; border-radius: 50%; display: grid; place-items: center; color: white; background: var(--accent); }
.analyze-row { display: flex; align-items: center; justify-content: space-between; padding-top: 20px; }
.analyze-row p { color: #83908d; font-size: 11px; display: flex; align-items: center; gap: 8px; margin: 0; }
.primary-button, .export-card button { border: 0; border-radius: 10px; background: var(--accent); color: white; padding: 12px 21px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 700; box-shadow: 0 6px 18px rgba(13,130,111,.2); transition: .2s; }
.primary-button:hover, .export-card button:hover { background: var(--accent-dark); transform: translateY(-1px); }
.primary-button:disabled { background: #b4c0bd; box-shadow: none; cursor: not-allowed; transform: none; }
.scan-grid { margin-top: 22px; border-top: 1px solid #e5ebe9; padding-top: 22px; display: grid; grid-template-columns: 230px 1fr; gap: 26px; align-items: center; animation: popIn .35s ease; }
.scan-frame { position: relative; width: 230px; height: 280px; padding: 14px; overflow: hidden; border-radius: 12px; border: 1px solid var(--line); background: #eef2f1; box-shadow: 0 10px 26px rgba(24,49,44,.08); }
.scan-frame .document { transform: scale(.3); pointer-events: none; }
.scan-line { position: absolute; left: 0; right: 0; height: 38%; top: -38%; background: linear-gradient(180deg, rgba(13,130,111,0) 0%, rgba(13,130,111,.16) 45%, rgba(13,130,111,.55) 92%, rgba(13,130,111,.8) 100%); box-shadow: 0 8px 14px -4px rgba(13,130,111,.45); animation: sweep 2.1s cubic-bezier(.4,0,.3,1) infinite; }
@keyframes sweep { 0% { top: -38%; } 55% { top: 100%; } 100% { top: 100%; } }
.scan-steps { list-style: none; margin: 4px 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.scan-steps li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #a5b0ad; transition: color .25s; }
.scan-steps li.active { color: var(--accent-dark); font-weight: 600; }
.scan-steps li .dot { width: 5px; height: 5px; border-radius: 50%; background: #cdd7d4; flex: 0 0 auto; }
.scan-steps li.active svg { color: var(--accent); flex: 0 0 auto; }
.analysis-progress { display: grid; grid-template-columns: 48px 1fr; gap: 15px; align-items: center; }
.progress-icon { width: 45px; height: 45px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); position: relative; }
.progress-icon span { position: absolute; inset: -4px; border: 1px solid #a8d5cc; border-top-color: transparent; border-radius: 16px; animation: spin 1.3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress-label { display: flex; justify-content: space-between; font-size: 11px; }
.progress-label strong { color: var(--accent); }
.progress-track { height: 5px; border-radius: 8px; background: #e9efed; overflow: hidden; margin: 9px 0 6px; }
.progress-track span { height: 100%; display: block; border-radius: inherit; background: var(--accent); transition: width .12s linear; }
.analysis-progress p { margin: 0; color: #8a9693; font-size: 10px; }
.results { padding: 4px 0 80px; scroll-margin-top: 98px; animation: fadeUp .45s ease both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.complete-badge { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 7px; color: var(--accent-dark); background: var(--accent-soft); font-size: 10px; font-weight: 700; }
.result-grid { display: grid; grid-template-columns: 38% 1fr; gap: 18px; align-items: stretch; }
.result-grid aside, .table-card { background: white; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 28px rgba(24,49,44,.04); }
.preview-head, .table-head { min-height: 54px; padding: 0 18px; border-bottom: 1px solid #e9eeec; display: flex; align-items: center; justify-content: space-between; }
.preview-head b, .table-head b { font-size: 12px; }
.preview-head span { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #8a9693; font-size: 9px; }
.large-preview { padding: 20px; height: 502px; overflow: hidden; background: #eef2f1; }
.document { width: 100%; min-width: 650px; min-height: 830px; background: #fff; color: #293735; padding: 32px 34px; position: relative; transform-origin: top left; transform: scale(.55); box-shadow: 0 8px 25px rgba(28,48,44,.15); font-family: 'Noto Sans JP', sans-serif; }
.document.compact { transform: scale(.135); }
.doc-topline { display: flex; justify-content: space-between; color: #286b60; border-bottom: 4px solid #286b60; padding-bottom: 12px; font-weight: 700; letter-spacing: .1em; }
.doc-topline small { border: 1px solid #9badab; padding: 2px 8px; color: #7b8a87; }
.bank-title { display: flex; align-items: flex-end; justify-content: space-between; padding: 25px 3px 16px; }
.bank-title span { font-size: 14px; }
.bank-title b { font-size: 25px; letter-spacing: .1em; }
.account-line { display: flex; justify-content: space-between; background: #eef5f3; padding: 13px; margin-bottom: 16px; font-size: 12px; }
.preview-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.preview-table th { background: #edf3f1; color: #526460; }
.preview-table th, .preview-table td { border: 1px solid #b9c6c3; padding: 8px 6px; text-align: right; height: 28px; }
.preview-table th:nth-child(2), .preview-table td:nth-child(2) { text-align: left; }
.doc-stamp { position: absolute; bottom: 45px; right: 38px; color: rgba(161,45,45,.25); font-weight: 700; font-size: 34px; letter-spacing: .12em; border: 3px solid rgba(161,45,45,.22); transform: rotate(-8deg); padding: 6px 12px; }
.card-header { background: #173d37; color: white; margin: -32px -34px 22px; padding: 24px 34px; display: flex; justify-content: space-between; align-items: center; }
.card-header div { display: flex; flex-direction: column; }
.card-header span { font-size: 22px; letter-spacing: .18em; }
.card-header b { font-size: 9px; letter-spacing: .2em; color: #b8d2cd; }
.card-header small { font-size: 12px; }
.billing-summary { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #254f48; padding: 13px 5px 18px; margin-bottom: 16px; }
.billing-summary > div { display: flex; flex-direction: column; }
.billing-summary small { font-size: 10px; color: #6e7e7b; margin-bottom: 5px; }
.billing-summary b { font-size: 15px; }
.billing-summary strong { color: #174b42; font-size: 25px; }
.table-head > div { display: flex; align-items: baseline; gap: 9px; }
.table-head > div span { font-size: 9px; color: #8e9997; }
.table-head p { margin: 0; color: #85918e; font-size: 9px; display: flex; gap: 5px; }
.table-scroll { overflow: auto; height: 502px; }
.result-table { width: 100%; border-collapse: collapse; table-layout: auto; white-space: nowrap; }
.result-table th { position: sticky; top: 0; z-index: 1; background: #f7f9f8; color: #697975; font-size: 9px; font-weight: 600; text-align: left; padding: 12px 10px; border-bottom: 1px solid #dde5e2; }
.result-table td { padding: 0; border-bottom: 1px solid #edf1f0; }
.result-table input { min-width: 105px; width: 100%; border: 1px solid transparent; background: transparent; outline: none; padding: 10px; color: #34413e; font-size: 10px; }
.result-table td:nth-child(2) input, .result-table td:last-child input { min-width: 150px; }
.result-table input:hover { background: #f5faf8; }
.result-table input:focus { border-color: #75b7aa; background: #f1faf8; box-shadow: inset 0 0 0 1px #75b7aa; }
.result-table td.numeric input { text-align: right; min-width: 94px; }
.validation-card, .cost-card, .export-card { margin-top: 18px; background: white; border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 28px rgba(24,49,44,.04); }
.validation-card { padding: 22px 25px 18px; }
.section-label { display: flex; align-items: center; gap: 12px; }
.status-icon { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 50%; color: white; font-weight: 800; }
.status-icon.ok { background: var(--accent); }
.status-icon.ng { background: #c64f4f; }
.section-label small { color: #8b9794; font-size: 9px; }
.section-label h3 { margin: 2px 0 0; font-size: 15px; }
.status-pill { margin-left: auto; padding: 6px 9px; border-radius: 5px; font-size: 9px; font-weight: 800; }
.status-pill.ok { background: var(--accent-soft); color: var(--accent-dark); }
.status-pill.ng { background: #f8eaea; color: #a83d3d; }
.validation-values { margin-top: 19px; padding: 17px 22px; border-radius: 11px; background: #f7f9f8; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 18px; }
.validation-values > div, .validation-values label { display: flex; flex-direction: column; }
.validation-values span { color: #788682; font-size: 9px; }
.validation-values b, .validation-values label div { margin-top: 5px; font-size: 16px; }
.validation-values input { width: 115px; border: 0; border-bottom: 1px solid #9caaa7; background: transparent; outline: 0; font-weight: 700; }
.validation-values .operator { font-size: 18px; color: #a0aaa8; }
.validation-card > p { display: flex; justify-content: flex-end; gap: 17px; margin: 12px 2px 0; color: #7e8b88; font-size: 9px; }
.validation-card > p span { color: var(--accent-dark); font-weight: 700; }
.cost-card { min-height: 260px; padding: 35px 38px; display: grid; grid-template-columns: 35% 1fr; position: relative; overflow: hidden; background: #173a34; color: white; }
.cost-card::after { content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%; right: -100px; top: -140px; border: 60px solid rgba(255,255,255,.025); }
.cost-copy { align-self: center; }
.cost-copy > small { color: #87cbbd; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.cost-copy h3 { font-size: 22px; line-height: 1.55; letter-spacing: -.03em; margin: 10px 0; }
.cost-copy h3 span { color: #79d4c1; margin: 0 3px; }
.cost-copy p { color: #9fb6b1; font-size: 10px; line-height: 1.8; }
.cost-compare { display: grid; grid-template-columns: 1fr auto 1fr 110px; align-items: center; gap: 13px; }
.cost-box { min-height: 126px; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: center; }
.cost-box.muted { background: rgba(255,255,255,.07); }
.cost-box.accent { background: var(--accent); box-shadow: 0 10px 30px rgba(2,29,24,.2); }
.cost-box > span { font-size: 10px; font-weight: 600; }
.cost-box > small { color: #9bb1ac; font-size: 8px; margin: 4px 0 13px; }
.cost-box.accent > small { color: #bce0d8; }
.cost-box b { font-size: 24px; }
.cost-arrow { color: #6f8a84; }
.saving { text-align: center; z-index: 1; }
.saving strong { display: block; color: #7bd8c5; font-size: 38px; line-height: 1; }
.saving strong small { font-size: 17px; }
.saving > span { font-size: 10px; font-weight: 700; }
.saving p { margin: 8px 0 0; color: #9cb2ad; font-size: 8px; }
.proof { grid-column: 1 / -1; margin-top: 21px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 16px; display: flex; align-items: center; gap: 10px; color: #c5d1cf; font-size: 10px; }
.proof > span { padding: 4px 6px; background: rgba(255,255,255,.08); border-radius: 4px; font-size: 8px; }
.proof .accent-text { color: #77d3c0; }
.proof small { margin-left: auto; color: #8da5a0; }
.export-card { display: flex; align-items: center; gap: 17px; padding: 25px 28px; }
.export-icon { width: 50px; height: 50px; border-radius: 13px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); }
.export-card small { color: var(--accent); letter-spacing: .13em; font-size: 8px; font-weight: 700; }
.export-card h3 { margin: 4px 0 3px; font-size: 16px; }
.export-card p { color: #83908d; font-size: 9px; margin: 0; }
.export-card button { margin-left: auto; }
footer { background: white; border-top: 1px solid #e6ecea; padding: 35px max(30px, calc((100vw - 1180px) / 2)); display: flex; align-items: center; gap: 13px; color: #82908c; }
footer div { display: flex; align-items: center; gap: 8px; color: #35433f; }
footer div > span { width: 25px; height: 25px; border-radius: 7px; }
footer b { font-size: 12px; }
footer p { margin: 0; font-size: 9px; }
footer small { margin-left: auto; font-size: 8px; }

@media (max-width: 900px) {
  .result-grid { grid-template-columns: 1fr; }
  .scan-grid { grid-template-columns: 1fr; justify-items: center; }
  .large-preview { height: 430px; }
  .document { transform: scale(.62); }
  .cost-card { grid-template-columns: 1fr; gap: 25px; }
  .cost-compare { grid-template-columns: 1fr auto 1fr 100px; }
  .proof { grid-column: 1; }
}
@media (max-width: 680px) {
  header { height: 66px; padding: 0 18px; }
  .hero { padding-top: 58px; min-height: 430px; }
  .hero h1 { font-size: 38px; }
  .hero-stats { padding: 14px 8px; width: 100%; }
  .hero-stats div { min-width: 0; flex: 1; }
  .workspace, .results { width: calc(100% - 24px); }
  .workspace { padding: 22px 18px; }
  .workspace-head, .result-title { align-items: flex-start; flex-direction: column; }
  .tabs { width: 100%; }
  .tabs button { flex: 1; padding: 10px 8px; }
  .analyze-row { flex-direction: column; gap: 15px; align-items: stretch; }
  .analyze-row p { justify-content: center; }
  .primary-button { justify-content: center; }
  .result-grid aside { display: none; }
  .validation-values { grid-template-columns: 1fr; text-align: center; }
  .validation-values .operator { transform: rotate(90deg); }
  .cost-card { padding: 27px 22px; }
  .cost-compare { grid-template-columns: 1fr; }
  .cost-arrow { transform: rotate(90deg); justify-self: center; }
  .saving { padding: 12px 0; }
  .proof { flex-wrap: wrap; }
  .proof small { width: 100%; margin: 0; }
  .export-card { align-items: flex-start; flex-wrap: wrap; }
  .export-card button { width: 100%; margin: 8px 0 0; justify-content: center; }
  footer { flex-wrap: wrap; }
  footer small { width: 100%; margin: 0; }
}