:root{--accent: #a78bfa;--accent-press: #9170f5;--accent-soft: rgba(167, 139, 250, .14);--accent-line: rgba(167, 139, 250, .35);--bg: #08080a;--shell: #0e0e11;--surface: #161619;--surface-2: #1c1c20;--raised: #222227;--line: #2a2a30;--line-soft: #202024;--text: #ededf0;--text-2: #c2c2ca;--muted: #9a9aa6;--faint: #76767f;--ok: #34d399;--warn: #fbbf24;--danger: #f87171;--r-sm: 10px;--r: 14px;--r-lg: 20px;--r-xl: 26px;--pad: 16px;--gap: 12px;--tap: 52px;--font: "IBM Plex Sans", "IBM Plex Sans Thai", "Noto Sans Myanmar", "Noto Sans Lao", system-ui, sans-serif;--mono: "IBM Plex Mono", ui-monospace, monospace;--shadow: 0 1px 0 rgba(255,255,255,.03) inset, 0 18px 40px -24px rgba(0,0,0,.9)}html.light{--accent: #6d4fd0;--accent-press: #5d3fc4;--bg: #f4f4f6;--shell: #ffffff;--surface: #ffffff;--surface-2: #f4f4f6;--raised: #ececef;--line: #d7d7de;--line-soft: #e8e8ed;--text: #18181c;--text-2: #3c3c45;--muted: #5f5f6a;--faint: #82828c;--ok: #0f9d6b;--warn: #b9770a;--danger: #d6332f;--shadow: 0 1px 0 rgba(0,0,0,.02) inset, 0 18px 40px -24px rgba(0,0,0,.28)}html.light .btn-primary,html.light .seg-ctrl button.on{color:#fff}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--text);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow:hidden}:lang(my){line-height:1.7}:lang(lo){line-height:1.6}button{font-family:inherit;cursor:pointer;color:inherit}input,select,textarea{font-family:inherit;font-size:16px}::selection{background:var(--accent-soft)}#root{height:100%}.viewport{height:100%;position:relative;display:flex;align-items:stretch;justify-content:center;background:radial-gradient(1200px 600px at 50% -10%,rgba(167,139,250,.06),transparent 60%),var(--bg)}.app{width:100%;max-width:480px;height:100%;background:var(--shell);display:flex;flex-direction:column;position:relative;border-left:1px solid var(--line-soft);border-right:1px solid var(--line-soft);overflow:hidden}@media(min-width:520px){.viewport{padding:0}}.topbar{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:14px var(--pad);border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);position:relative;z-index:5}.topbar .tb-title{font-weight:600;font-size:15px;letter-spacing:-.01em}.topbar .tb-sub{font-size:11.5px;color:var(--muted)}.icon-btn{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border-radius:11px;border:1px solid var(--line);background:var(--surface);color:var(--text-2);transition:background .15s,color .15s,border-color .15s}.icon-btn:hover{background:var(--surface-2);color:var(--text)}.icon-btn:active{transform:scale(.95)}.ptr{position:absolute;top:8px;left:50%;z-index:60;pointer-events:none;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line);box-shadow:0 6px 18px #00000038}.ptr-ring{width:16px;height:16px;border-radius:999px;border:2px solid var(--line);border-top-color:var(--accent)}.ptr-ring.spin{animation:ptr-rot .7s linear infinite}@keyframes ptr-rot{to{transform:rotate(360deg)}}.scroll{flex:1 1 auto;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:var(--pad);scrollbar-width:thin;scrollbar-color:var(--line) transparent}.scroll::-webkit-scrollbar{width:8px}.scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px}.stack{display:flex;flex-direction:column;gap:var(--gap)}.stack-lg{display:flex;flex-direction:column;gap:20px}.h1{font-size:25px;font-weight:600;letter-spacing:-.02em;margin:0;line-height:1.2}.h2{font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0}.eyebrow{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.lead{color:var(--text-2);font-size:14.5px}.muted{color:var(--muted)}.faint{color:var(--faint)}.mono{font-family:var(--mono);font-feature-settings:"tnum"}.num{font-family:var(--mono);font-feature-settings:"tnum";letter-spacing:-.01em}.card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:var(--pad)}.card.flat{background:var(--surface);border-color:var(--line-soft)}.card.pad-lg{padding:20px}.tap-card{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:18px;color:var(--text);transition:border-color .15s,background .15s,transform .1s}.tap-card:hover{border-color:var(--line);background:var(--surface-2)}.tap-card:active{transform:scale(.99)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:var(--tap);padding:0 20px;border-radius:var(--r);border:1px solid transparent;font-size:16px;font-weight:600;letter-spacing:-.01em;transition:background .15s,border-color .15s,transform .08s,opacity .15s;width:100%}.btn:active{transform:scale(.985)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-primary{background:var(--accent);color:#14121f}.btn-primary:hover:not(:disabled){background:var(--accent-press)}.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--line)}.btn-ghost:hover{background:var(--surface-2)}.btn-quiet{background:transparent;color:var(--text-2);border-color:transparent}.btn-quiet:hover{color:var(--text)}.btn-danger{background:transparent;color:var(--danger);border-color:#f871714d}.btn-row{display:flex;gap:10px}.btn-row .btn{width:auto;flex:1}.btn-sm{min-height:40px;padding:0 14px;font-size:14px;border-radius:11px}.field{display:flex;flex-direction:column;gap:7px}.label{font-size:13px;font-weight:600;color:var(--text-2);display:flex;align-items:center;gap:7px}.label .req{color:var(--accent)}.hint{font-size:12px;color:var(--muted)}.control,.select,textarea.control{width:100%;min-height:var(--tap);background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:var(--r);padding:0 15px;outline:none;transition:border-color .15s,background .15s}textarea.control{padding:13px 15px;min-height:80px;line-height:1.5;resize:vertical}.control::placeholder{color:var(--faint)}.select option,.control option{background:var(--surface);color:var(--text)}.select option:disabled{color:var(--faint)}.control:focus,.select:focus,textarea.control:focus{border-color:var(--accent-line);background:var(--surface)}.select{appearance:none;background-image:none;padding-right:42px}.select-wrap{position:relative}.select-wrap:after{content:"";position:absolute;right:16px;top:50%;width:9px;height:9px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-65%) rotate(45deg);pointer-events:none}.picker-ph{color:var(--faint)}.search-box{display:flex;align-items:center;gap:8px;padding:0 12px;min-height:var(--tap);background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:var(--r);transition:border-color .15s,background .15s}.search-box:focus-within{border-color:var(--accent-line);background:var(--surface)}.search-input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--text);font:inherit}.search-input::placeholder{color:var(--faint)}.search-clear{flex:0 0 auto;color:var(--muted);background:transparent;border:0;display:flex;align-items:center;cursor:pointer}.picker-list{display:flex;flex-direction:column;gap:6px;margin-top:12px;max-height:52vh;overflow-y:auto}.row.is-sel{border-color:var(--accent-line);background:var(--accent-soft)}.input-suffix{position:relative}.input-suffix .suffix{position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:13px}.control.big-num{font-family:var(--mono);font-size:22px;font-weight:600;text-align:right;padding-right:56px}.badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;letter-spacing:.02em;padding:4px 10px;border-radius:999px;border:1px solid var(--line);color:var(--text-2);background:var(--surface-2)}.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--muted)}.badge.is-draft{color:var(--text-2)}.badge.is-pending{color:var(--warn);border-color:#fbbf244d;background:#fbbf2414}.badge.is-pending .dot{background:var(--warn)}.badge.is-approved{color:var(--ok);border-color:#34d3994d;background:#34d39914}.badge.is-approved .dot{background:var(--ok)}.badge.is-rejected{color:var(--danger);border-color:#f871714d;background:#f8717114}.badge.is-rejected .dot{background:var(--danger)}.badge.is-submitted{color:var(--ok);border-color:#34d3994d;background:#34d39914}.badge.is-submitted .dot{background:var(--ok)}.pill{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface-2);font-size:13px;color:var(--text-2)}.tile-icon{width:50px;height:50px;flex:0 0 auto;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)}.steps{display:flex;align-items:center;gap:6px}.steps .seg{height:4px;flex:1;border-radius:999px;background:var(--line);overflow:hidden}.steps .seg.done>i{display:block;height:100%;background:var(--accent)}.steps .seg.done{background:var(--accent)}.row{display:flex;align-items:center;gap:12px;padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line-soft);color:var(--text)}.row .grow{flex:1;min-width:0}.row .ix{width:26px;height:26px;flex:0 0 auto;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--raised);color:var(--text-2);font-family:var(--mono)}.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hr{height:1px;background:var(--line-soft);border:0;margin:4px 0}.dl{display:flex;justify-content:space-between;gap:14px;padding:9px 0;font-size:14px}.dl dt{color:var(--muted)}.dl dd{margin:0;text-align:right;color:var(--text)}.action-bar{flex:0 0 auto;padding:14px var(--pad) calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line-soft);background:linear-gradient(0deg,var(--shell),rgba(14,14,17,.85));display:flex;flex-direction:column;gap:10px}.photo-slot{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;border:1.5px dashed var(--line);background:var(--surface-2);display:grid;place-items:center;color:var(--muted)}.photo-slot.filled{border-style:solid;border-color:var(--line)}.photo-slot img{width:100%;height:100%;object-fit:cover;display:block}.photo-slot .meta{position:absolute;left:8px;bottom:8px;font-family:var(--mono);font-size:10.5px;padding:3px 8px;border-radius:7px;background:#08080ac7;color:var(--text-2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.photo-slot .x{position:absolute;right:8px;top:8px;width:30px;height:30px;border-radius:50%;border:0;background:#08080ab3;color:#fff;display:grid;place-items:center;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.photo-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.attach-actions{display:flex;gap:8px;flex-wrap:wrap}.attach-actions .btn{flex:1;min-width:130px}.attach-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}.attach-chip{display:flex;align-items:center;gap:10px;padding:8px;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--surface)}.attach-chip>img,.attach-chip .attach-doc{width:40px;height:40px;flex:0 0 auto;border-radius:9px;object-fit:cover;background:var(--surface-2);display:grid;place-items:center;color:var(--muted)}.attach-x{flex:0 0 auto;width:30px;height:30px;border-radius:50%;border:0;background:var(--surface-2);color:var(--muted);display:grid;place-items:center}.sig-pad{width:100%;height:150px;border-radius:var(--r);background:#f7f7f4;border:1px solid var(--line);touch-action:none;display:block}.sig-stored{height:88px;border-radius:var(--r);border:1px dashed var(--line);display:grid;place-items:center;background:var(--surface-2);font-family:Brush Script MT,Segoe Script,cursive;font-size:30px;color:var(--text)}.sig-stored.signed{border-style:solid;border-color:var(--accent-line);background:var(--accent-soft)}.sheet-bg{position:absolute;inset:0;background:#04040699;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:40;display:flex;align-items:flex-end;justify-content:center;animation:fade .18s ease}.sheet{width:100%;max-width:480px;max-height:92%;overflow-y:auto;background:var(--shell);border-top-left-radius:var(--r-xl);border-top-right-radius:var(--r-xl);border-top:1px solid var(--line);padding:8px var(--pad) calc(20px + env(safe-area-inset-bottom));animation:slideup .26s cubic-bezier(.2,.8,.2,1)}.sheet .grip{width:38px;height:4px;border-radius:999px;background:var(--line);margin:8px auto 14px}.camera-overlay{position:fixed;top:0;left:0;right:0;height:100vh;height:100dvh;z-index:200;background:#000;display:flex;flex-direction:column}.camera-controls{padding:20px 32px calc(28px + env(safe-area-inset-bottom));display:flex;align-items:center;justify-content:space-between;background:#000}@keyframes fade{0%{opacity:0}}@keyframes slideup{0%{transform:translateY(18px);opacity:.6}}.fade-in{animation:fade .22s ease}.slide-in{animation:slidein .26s cubic-bezier(.2,.8,.2,1)}@keyframes slidein{0%{transform:translate(14px);opacity:0}}.seg-ctrl{display:flex;gap:4px;padding:4px;background:var(--surface-2);border:1px solid var(--line);border-radius:13px}.seg-ctrl button{flex:1;min-height:38px;border:0;background:transparent;color:var(--text-2);border-radius:10px;font-weight:600;font-size:13.5px;transition:background .15s,color .15s}.seg-ctrl button.on{background:var(--accent);color:#14121f}.seg-ctrl.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.seg-ctrl.scroll-x::-webkit-scrollbar{display:none}.seg-ctrl.scroll-x button{flex:0 0 auto;white-space:nowrap;padding:0 14px}.lang-list{display:flex;flex-direction:column;gap:6px}.lang-opt{display:flex;align-items:center;justify-content:space-between;padding:15px 16px;border-radius:var(--r);border:1px solid var(--line-soft);background:var(--surface);color:var(--text)}.lang-opt.on{border-color:var(--accent-line);background:var(--accent-soft)}.lang-opt .en{font-size:12px;color:var(--muted)}.center{text-align:center}.between{display:flex;align-items:center;justify-content:space-between;gap:10px}.right{text-align:right}.gap-sm{gap:8px}.wfull{width:100%}.spin{width:38px;height:38px;border-radius:50%;border:3px solid var(--line);border-top-color:var(--accent);animation:rot .7s linear infinite}@keyframes rot{to{transform:rotate(360deg)}}.paper{background:#fff;color:#1a1a1c;border-radius:0;border:1px solid #d8d7d0;padding:22px;font-size:10.5px;line-height:1.4;max-width:560px;margin:0 auto}.paper .num,.paper .mono{font-family:var(--mono);font-feature-settings:"tnum"}.pp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:9px;border-bottom:2px solid #1a1a1c}.pp-title{font-size:14px;font-weight:700;letter-spacing:-.01em;text-wrap:balance}.pp-no{font-size:9.5px;font-weight:600;color:#555;white-space:nowrap}.pp-meta{display:flex;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid #ddd}.pp-co-name{font-weight:700;font-size:11px}.pp-co-line{color:#555;font-size:9px;margin-top:1px;text-wrap:pretty}.pp-date{text-align:right;display:flex;flex-direction:column;gap:1px;white-space:nowrap}.pp-date .pp-k{font-size:8.5px;color:#888;text-transform:uppercase;letter-spacing:.08em}.pp-date .num{font-weight:600}.pp-rows{margin-top:9px}.pp-row{display:grid;gap:5px;align-items:start;padding:4px 0;border-bottom:1px solid #ececec}.pp-row.fgr{grid-template-columns:18px 1fr 54px 62px 56px}.pp-row.opx{grid-template-columns:18px 1fr 62px 40px 64px}.pp-row.simple{grid-template-columns:18px 1fr 88px}.pp-row.pp-row-h{font-size:8px;text-transform:uppercase;letter-spacing:.05em;color:#999;font-weight:600;border-bottom-color:#ccc}.pp-row .r{text-align:right}.pp-row .pp-ix{color:#999}.pp-row .pp-desc{font-weight:600;text-wrap:pretty}.pp-row .pp-desc em{font-weight:400;font-style:normal;color:#777}.pp-totals{margin-top:8px;display:flex;flex-direction:column;gap:3px;align-items:flex-end}.pp-tl{display:flex;justify-content:space-between;gap:24px;min-width:210px;font-size:10px;color:#555}.pp-tl.pp-grand{font-size:12px;font-weight:700;color:#1a1a1c;padding-top:6px;border-top:2px solid #1a1a1c;margin-top:3px}.pp-cert{margin:12px 0 0;padding:9px 11px;background:transparent;border:1px solid #e2e1da;border-radius:6px;font-size:9.5px;line-height:1.5;color:#333;text-wrap:pretty}.pp-sec{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#999;font-weight:700;margin-bottom:7px}.pp-photos{margin-top:12px}.pp-line-photo{display:block;width:150px;height:150px;object-fit:contain;background:#fff;border:1px solid #e2e1da;border-radius:4px;margin-top:6px}.pp-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,150px);gap:12px}.pp-photo-grid figure{margin:0}.pp-photo-grid img{width:150px;height:150px;object-fit:contain;background:#fff;border:1px solid #e2e1da;border-radius:4px;display:block}.pp-photo-grid figcaption{font-size:9px;color:#777;margin-top:4px;text-align:center;max-width:150px}.pp-signs{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap}.pp-sign{flex:1;min-width:88px;text-align:center}.pp-sign-mark{height:38px;display:grid;place-items:center}.pp-sign-mark img{max-height:38px;max-width:100%;mix-blend-mode:multiply}.pp-script{font-family:Brush Script MT,Segoe Script,cursive;font-size:20px;color:#1a1a3a}.pp-sign-empty{color:#bbb;letter-spacing:1px}.pp-sign-line{border-top:1px dotted #999;margin:2px 6px 0}.pp-sign-label{font-size:9px;color:#777;margin-top:5px}.pp-sign-name{font-size:9.5px;font-weight:600;margin-top:1px;text-wrap:pretty}@media print{@page{size:A4;margin:12mm}body{background:#fff}body *{visibility:hidden}.paper,.paper *{visibility:visible}.paper{position:absolute;left:0;top:0;width:100%;background:#fff;border:none;box-shadow:none;border-radius:0;padding:0}.pp-row,.pp-signs,.pp-photo-grid figure,.pp-cert{break-inside:avoid;page-break-inside:avoid}}body.dense{--pad: 13px;--gap: 9px;--tap: 46px}body.comfy{--pad: 20px;--gap: 16px;--tap: 56px}