*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}@keyframes spin{to{transform:rotate(360deg)}}:root{--font: "Sarabun", sans-serif;--bg: transparent;--surface: rgba(255,255,255,.07);--surface2: rgba(255,255,255,.04);--border: rgba(255,255,255,.13);--border2: rgba(255,255,255,.2);--text: rgba(255,255,255,.95);--text2: rgba(255,255,255,.58);--text3: rgba(255,255,255,.32);--blue: #a5b4fc;--blue-light: rgba(165,180,252,.15);--blue-mid: rgba(165,180,252,.28);--blue-solid: #6366f1;--green: #86efac;--green-light: rgba(134,239,172,.13);--red: #fca5a5;--red-light: rgba(252,165,165,.12);--amber: #fcd34d;--amber-light: rgba(252,211,77,.12);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-sm: 0 2px 8px rgba(0,0,0,.35);--shadow-md: 0 8px 32px rgba(0,0,0,.45);--glow-blue: 0 0 0 3px rgba(29,78,216,.5);--glow-grn: 0 0 0 3px rgba(134,239,172,.25)}body{font-family:var(--font);color:var(--text);font-size:14px;line-height:1.6;min-height:100vh;background:radial-gradient(ellipse at 20% 20%,rgba(29,78,216,.4) 0%,transparent 55%),radial-gradient(ellipse at 80% 80%,rgba(30,58,138,.45) 0%,transparent 55%),radial-gradient(ellipse at 60% 10%,rgba(37,99,235,.25) 0%,transparent 50%),#060d1f;background-attachment:fixed}#app{max-width:560px;margin:0 auto;padding:28px 16px 80px}.app-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.app-header h1{font-size:22px;font-weight:700;color:#fff;display:flex;align-items:center;gap:9px}.app-header h1 i{background:linear-gradient(135deg,#6366f1,#a855f7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-header .subtitle{font-size:12px;color:var(--text3);margin-top:2px}.steps{display:flex;gap:8px;margin-bottom:24px}.step{flex:1;padding:10px 6px;border-radius:var(--radius-md);border:1.5px solid var(--border);background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);font-size:11px;font-weight:500;color:var(--text3);cursor:pointer;text-align:center;line-height:1.4;transition:all .2s;-webkit-user-select:none;user-select:none}.step i{display:block;font-size:16px;margin-bottom:3px}.step.active{border-color:var(--blue-solid);background:#6366f138;color:var(--blue);box-shadow:0 0 18px #6366f140}.step.done{border-color:#86efac73;background:var(--green-light);color:var(--green)}.section{display:none}.section.active{display:block}.card{background:var(--surface);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px 22px;margin-bottom:14px;box-shadow:var(--shadow-sm);transition:box-shadow .2s}.card:hover{box-shadow:var(--shadow-md)}.card-title{font-size:13px;font-weight:600;color:#fff;margin-bottom:16px;display:flex;align-items:center;gap:8px}.card-title i{font-size:16px;background:linear-gradient(135deg,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}label{display:block;font-size:11px;font-weight:500;color:var(--text2);margin-bottom:5px;letter-spacing:.03em;text-transform:uppercase}input,select,textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:9px 12px;font-size:13px;font-family:var(--font);color:var(--text);background:#ffffff0f;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:border-color .2s,box-shadow .2s;outline:none}input::placeholder,textarea::placeholder{color:var(--text3)}input:focus,select:focus,textarea:focus{border-color:#2563ebe6;box-shadow:var(--glow-blue);background:#1d4ed81a}input[readonly]{background:#ffffff05;color:var(--text3);cursor:default}textarea{resize:vertical;min-height:72px}select{color-scheme:dark}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:12px}.field{margin-bottom:12px}.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border-radius:var(--radius-md);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;border:none;transition:all .2s;letter-spacing:.01em}.btn-primary{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 4px 16px #6366f166}.btn-primary:hover{background:linear-gradient(135deg,#4f46e5,#7c3aed);box-shadow:0 6px 20px #6366f18c;transform:translateY(-1px)}.btn-secondary{background:#ffffff14;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--text);border:1.5px solid var(--border2)}.btn-secondary:hover{background:#ffffff24}.btn-success{background:linear-gradient(135deg,#059669,#10b981);color:#fff;width:100%;justify-content:center;padding:13px;box-shadow:0 4px 16px #10b98159;font-size:14px}.btn-success:hover{box-shadow:0 6px 22px #10b98180;transform:translateY(-1px)}.btn-danger{background:#fca5a514;border:1.5px solid rgba(252,165,165,.35);color:var(--red);border-radius:var(--radius-sm);padding:5px 9px;font-size:12px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font-family:var(--font);transition:all .2s}.btn-danger:hover{background:var(--red-light);border-color:var(--red)}.btn-sm{padding:5px 12px;font-size:12px}.action-bar{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}.upload-box{border:2px dashed rgba(255,255,255,.2);border-radius:var(--radius-md);padding:22px;text-align:center;cursor:pointer;color:var(--text3);font-size:13px;background:#ffffff08;transition:all .2s}.upload-box:hover{border-color:#6366f1a6;color:var(--blue);background:#6366f114;box-shadow:0 0 20px #6366f126}.upload-box.has-file{border-color:#86efac80;border-style:solid;background:var(--green-light);color:var(--green)}.upload-box i{font-size:28px;display:block;margin-bottom:6px}input[type=file]{display:none}.amount-box{background:#ffffff0a;border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 16px;margin-top:4px}.amount-row{display:flex;justify-content:space-between;font-size:13px;color:var(--text2);padding:3px 0}.amount-row.grand{font-size:16px;font-weight:700;color:#fff;padding-top:10px;border-top:1px solid var(--border2);margin-top:6px}.msg{font-size:12px;padding:10px 14px;border-radius:var(--radius-md);margin-top:10px;display:flex;align-items:center;gap:8px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.msg i{font-size:15px;flex-shrink:0}.msg.info{background:var(--blue-light);color:var(--blue);border:1px solid rgba(165,180,252,.28)}.msg.success{background:var(--green-light);color:var(--green);border:1px solid rgba(134,239,172,.28)}.msg.error{background:var(--red-light);color:var(--red);border:1px solid rgba(252,165,165,.28)}.msg.warn{background:var(--amber-light);color:var(--amber);border:1px solid rgba(252,211,77,.28)}.tab-bar{display:flex;border-bottom:1px solid var(--border);margin-bottom:16px;gap:2px}.tab-item{padding:8px 14px;font-size:12px;cursor:pointer;color:var(--text3);border-bottom:2.5px solid transparent;margin-bottom:-1px;font-weight:500;transition:all .2s;display:flex;align-items:center;gap:6px;border-radius:var(--radius-sm) var(--radius-sm) 0 0}.tab-item:hover{color:var(--text2);background:#ffffff0a}.tab-item.active{color:var(--blue);border-bottom-color:var(--blue-solid);background:#6366f114}.tab-content{display:none}.tab-content.active{display:block}.bank-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;background:#ffffff0a;transition:background .2s}.bank-item:hover{background:#ffffff12}.bank-item .bank-name{font-size:13px;font-weight:600;color:#fff}.bank-item .bank-sub{font-size:11px;color:var(--text2);margin-top:1px}.doc-row{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:10px;background:#ffffff0a;transition:all .2s}.doc-row.ok{border-color:#86efac66;background:var(--green-light)}.doc-row i.doc-icon{font-size:20px;flex-shrink:0;color:var(--text3)}.doc-row.ok i.doc-icon{color:var(--green)}.doc-row .doc-label{font-size:13px;font-weight:500;color:#fff}.doc-row .doc-sub{font-size:11px;color:var(--text2)}.doc-row.ok .doc-sub{color:var(--green)}.order-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;font-size:10px;font-weight:700;flex-shrink:0}.order-badge.grey{background:#ffffff1f;color:var(--text3)}.summary-row{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--border)}.summary-row:last-child{border-bottom:none}.summary-row i.summary-icon{font-size:17px;flex-shrink:0}.preview-img{width:100%;max-height:130px;object-fit:contain;border-radius:var(--radius-md);margin-top:10px;border:1px solid var(--border);background:#ffffff0a}.dl-card{display:flex;align-items:center;gap:12px;background:#ffffff0d;border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;margin-bottom:16px}.dl-card .pdf-icon{font-size:28px;color:#f87171;flex-shrink:0}.settings-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-md);border:1px solid var(--border2);background:#ffffff12;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:12px;font-weight:500;color:var(--text2);cursor:pointer;font-family:var(--font);transition:all .2s}.settings-btn:hover{background:#ffffff21;color:#fff}.add-bank-section{border:1px solid var(--border);border-radius:var(--radius-md);padding:14px;margin-top:10px;background:#ffffff08}.add-bank-section h4{font-size:13px;font-weight:600;color:#fff;margin-bottom:12px}.hist-filter{display:flex;gap:8px;align-items:center;margin-bottom:14px;flex-wrap:wrap}.hist-filter input[type=text],.hist-filter input:not([type=month]){flex:1;min-width:160px}.hist-filter input[type=month]{width:140px;flex-shrink:0}.hist-item{border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;margin-bottom:8px;background:#ffffff0a;transition:all .2s}.hist-item:hover{border-color:#6366f173;background:#6366f10f}.hist-meta{display:flex;align-items:center;gap:8px;margin-bottom:4px}.hist-date{font-size:11px;color:var(--text3)}.hist-docno{font-size:10px;background:var(--blue-light);color:var(--blue);padding:1px 6px;border-radius:4px}.hist-company{font-size:13px;font-weight:600;color:#fff}.hist-job{font-size:11px;color:var(--text2);margin-top:2px}.hist-pos{font-size:11px;color:var(--text2);margin-top:1px}.hist-actions{display:flex;gap:6px;align-items:center;margin-top:10px;justify-content:flex-end}.attach-doc-block{margin-bottom:14px}.attach-row{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--radius-md);border:1px solid var(--border);background:#ffffff0a;font-size:12px}.attach-row.ok{border-color:#86efac66;background:var(--green-light)}.attach-upload-link{font-size:11px;color:var(--blue);text-decoration:underline;cursor:pointer;white-space:nowrap;margin-left:4px}.attach-preview{margin-top:8px;border-radius:var(--radius-md);overflow:hidden;border:1px solid var(--border);background:#ffffff08}.attach-preview img{width:100%;max-height:180px;object-fit:contain;display:block;border-radius:var(--radius-md)}.attach-preview-pdf{display:flex;align-items:center;gap:10px;padding:14px 16px;font-size:12px;color:var(--text2)}.email-attach-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius-md);margin-bottom:8px;background:#ffffff0a}.email-attach-item.ok{border-color:#86efac66;background:var(--green-light)}.person-section-title{font-size:13px;font-weight:700;color:var(--text2);margin-bottom:8px;display:flex;align-items:center;gap:6px}.person-section-title .ti{color:var(--blue);font-size:16px}.person-divider{border:none;border-top:1px solid var(--border);margin:20px 0}details{color:var(--text3)}details summary{outline:none}details summary::-webkit-details-marker{color:var(--text3)}details[open] summary{color:var(--text2)}.layout-editor{display:flex;gap:16px;align-items:flex-start}.layout-page-wrap{flex-shrink:0}.layout-page{width:155px;height:219px;background:#fff;border:1.5px solid rgba(99,102,241,.45);border-radius:var(--radius-sm);position:relative;overflow:hidden;box-shadow:0 0 20px #6366f133;-webkit-user-select:none;user-select:none;touch-action:none;flex-shrink:0}.layout-text-hint{position:absolute;left:0;right:0;top:0;height:37%;background:repeating-linear-gradient(180deg,#EFEFEB 0px,#EFEFEB 3px,transparent 3px,transparent 8px);display:flex;align-items:center;justify-content:center;font-size:9px;color:#888;pointer-events:none;border-bottom:1px dashed #ccc}.layout-sig-hint{position:absolute;left:0;right:0;bottom:0;height:6%;background:#f5f5f5;display:flex;align-items:center;justify-content:center;font-size:8px;color:#aaa;pointer-events:none;border-top:1px solid #ddd}.layout-box{position:absolute;border-radius:3px;cursor:grab;display:flex;align-items:center;justify-content:center}.layout-box:active{cursor:grabbing}.layout-box-id{background:#6366f12e;border:2px solid #6366f1}.layout-box-bank{background:#10b98126;border:2px solid #10b981}.lbox-label{position:absolute;top:3px;left:4px;font-size:7px;font-weight:600;pointer-events:none;white-space:nowrap}.layout-box-id .lbox-label{color:#6366f1}.layout-box-bank .lbox-label{color:#10b981}.lbox-resize{position:absolute;bottom:2px;right:2px;width:10px;height:10px;cursor:nwse-resize;border-right:2.5px solid;border-bottom:2.5px solid;opacity:.7}.layout-box-id .lbox-resize{border-color:#6366f1}.layout-box-bank .lbox-resize{border-color:#10b981}.layout-controls{flex:1;min-width:0}.layout-ctrl-group{margin-bottom:14px}.lctrl-title{font-size:12px;font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:5px}.lctrl-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.lctrl-grid .field{margin-bottom:0}.lctrl-grid input{font-size:12px;padding:5px 8px}@media (max-width: 480px){.grid2,.grid3{grid-template-columns:1fr}.steps .step span{display:none}}@media (max-width: 360px){.layout-editor{flex-direction:column}.layout-page{width:100%;height:auto;aspect-ratio:595 / 842}}