:root{--ink: #142848;--ink-soft: #3a4f73;--paper: #f3f6fb;--paper-deep: #e7edf6;--rule: #9bb0d0;--panel: #ffffff;--stamp: #c23b22;--stamp-deep: #9a2a18;--pass: #1f7a4c;--warn: #b86a00;--shadow: 0 18px 40px rgba(20, 40, 72, .12);--radius: 18px;--font-ui: "Anuphan", "Sarabun", system-ui, sans-serif;--font-body: "Sarabun", "Anuphan", system-ui, sans-serif;color-scheme:light}*,*:before,*:after{box-sizing:border-box}html,body{margin:0;min-height:100%;background:linear-gradient(180deg,rgba(155,176,208,.18),transparent 180px),repeating-linear-gradient(transparent,transparent 27px,rgba(155,176,208,.28) 27px,rgba(155,176,208,.28) 28px),var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.55}::selection{background:#c23b2238;color:var(--ink)}:focus-visible{outline:3px solid rgba(194,59,34,.55);outline-offset:2px}#app{min-height:100vh}.shell{width:min(1180px,calc(100% - 2rem));margin:0 auto;padding:1.25rem 0 3rem}.masthead{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.1rem 1.25rem;margin-bottom:1.25rem;background:linear-gradient(135deg,#1b3a6b,#274f8c 55%,#1b3a6b);color:#f7f9fc;border-radius:22px;box-shadow:var(--shadow);position:relative;overflow:hidden}.masthead:after{content:"";position:absolute;inset:auto -40px -40px auto;width:160px;height:160px;border-radius:50%;background:#c23b2247}.brand{position:relative;z-index:1}.brand-mark{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-ui);font-weight:700;font-size:clamp(1.8rem,4vw,2.5rem);letter-spacing:-.03em;line-height:1}.brand-mark svg{width:1.1em;height:1.1em}.brand p{margin:.55rem 0 0;max-width:38ch;color:#f7f9fcd1;font-size:.98rem}.status-block{position:relative;z-index:1;text-align:right;min-width:7.5rem}.status-label{display:block;font-family:var(--font-ui);font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;opacity:.72}.status-value{display:block;font-family:var(--font-ui);font-weight:700;font-variant-numeric:tabular-nums;font-size:clamp(2rem,5vw,3rem);line-height:1;margin-top:.2rem}.workspace{display:grid;grid-template-columns:1.15fr .85fr;gap:1rem;align-items:start}@media(max-width:900px){.workspace{grid-template-columns:1fr}.masthead{flex-direction:column;align-items:flex-start}.status-block{text-align:left}}.panel{background:var(--panel);border:1px solid rgba(27,58,107,.12);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.9rem 1.1rem;border-bottom:1px solid rgba(27,58,107,.1);background:linear-gradient(180deg,#fbfcfe,#f2f5fa)}.panel-head h2{margin:0;font-family:var(--font-ui);font-size:1.05rem;font-weight:650}.dropzone{position:relative;min-height:420px;margin:1rem;border:2px dashed rgba(27,58,107,.28);border-radius:14px;background:linear-gradient(180deg,#f3f6fbb3,#fffffff2);display:grid;place-items:center;text-align:center;padding:1.5rem;transition:border-color .18s ease,background-color .18s ease,transform .18s ease}.dropzone.is-hot{border-color:var(--stamp);background:#c23b220f;transform:translateY(-1px)}.dropzone.has-image{padding:0;border-style:solid;border-color:#1b3a6b24;background:#111827;place-items:stretch}.drop-copy h3{margin:0 0 .35rem;font-family:var(--font-ui);font-size:1.35rem}.drop-copy p{margin:0;color:var(--ink-soft)}.preview-wrap{position:relative;width:100%;min-height:420px;overflow:auto;background:#0f172a}.preview-wrap canvas{display:block;max-width:100%;height:auto;margin:0 auto}.actions{display:flex;flex-wrap:wrap;gap:.6rem;padding:0 1rem 1rem}.btn{appearance:none;border:0;border-radius:999px;padding:.72rem 1.15rem;font-family:var(--font-ui);font-weight:600;font-size:.95rem;cursor:pointer;transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--stamp);color:#fff;box-shadow:0 10px 22px #c23b2247}.btn-primary:hover:not(:disabled){background:var(--stamp-deep);transform:translateY(-1px)}.btn-secondary{background:var(--paper-deep);color:var(--ink)}.btn-secondary:hover:not(:disabled){background:#d9e2f0}.hidden-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.progress{margin:0 1rem 1rem;padding:.75rem .9rem;border-radius:12px;background:var(--paper-deep)}.progress-bar{height:8px;border-radius:999px;background:#1b3a6b1f;overflow:hidden;margin-top:.45rem}.progress-bar>span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#1b3a6b,var(--stamp));transition:width .2s ease}.meta-row{display:flex;flex-wrap:wrap;gap:.55rem;padding:0 1.1rem 1rem}.chip{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;background:var(--paper-deep);color:var(--ink-soft);font-size:.85rem;font-variant-numeric:tabular-nums}.chip strong{color:var(--ink);font-weight:650}.result-panel{display:flex;flex-direction:column;min-height:520px}.result-body{flex:1;padding:1rem 1.1rem 1.2rem;display:flex;flex-direction:column;gap:.85rem}.result-text{flex:1;min-height:280px;margin:0;padding:1rem;border-radius:12px;border:1px solid rgba(27,58,107,.12);background:repeating-linear-gradient(transparent,transparent 27px,rgba(155,176,208,.22) 27px,rgba(155,176,208,.22) 28px),#fbfcfe;white-space:pre-wrap;word-break:break-word;font-size:1.05rem;line-height:1.75;overflow:auto}.result-text:empty:before{content:attr(data-placeholder);color:var(--ink-soft)}.lines{display:grid;gap:.45rem;max-height:220px;overflow:auto}.line-item{display:grid;grid-template-columns:auto 1fr auto;gap:.55rem;align-items:start;padding:.55rem .65rem;border-radius:10px;background:var(--paper);border:1px solid transparent;cursor:pointer;text-align:left;font:inherit;color:inherit}.line-item:hover,.line-item.is-active{border-color:#c23b2259;background:#c23b220f}.line-idx{font-family:var(--font-ui);font-weight:700;font-variant-numeric:tabular-nums;color:var(--stamp);min-width:1.6rem}.line-conf{font-variant-numeric:tabular-nums;color:var(--ink-soft);font-size:.85rem}.footer-note{margin-top:1.25rem;color:var(--ink-soft);font-size:.9rem;text-align:center}.footer-note a{color:var(--ink);font-weight:600}.stamp-flash{animation:stamp-in .42s cubic-bezier(.16,1,.3,1) both}@keyframes stamp-in{0%{opacity:0;transform:translateY(8px) scale(.985);filter:blur(2px)}to{opacity:1;transform:none;filter:none}}.toast{position:fixed;left:50%;bottom:1.25rem;transform:translate(-50%);background:var(--ink);color:#fff;padding:.7rem 1rem;border-radius:999px;box-shadow:var(--shadow);z-index:20}