@import "https://fonts.googleapis.com/css2?family=Sarabun:wght@300;400;500;600;700&display=swap";*{box-sizing:border-box;margin:0;padding:0}body{color:#333;background:linear-gradient(135deg,#f0f4f8 0%,#d9e2ec 100%);min-height:100vh;font-family:Sarabun,sans-serif}.app-container{gap:2rem;max-width:1600px;height:100vh;margin:0 auto;padding:2rem;display:flex}.form-panel{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffd9;border-radius:20px;flex-direction:column;flex:1;max-width:500px;padding:3rem;animation:.6s ease-out slideInLeft;display:flex;box-shadow:0 10px 40px #00000014}.title{color:#102a43;margin-bottom:.5rem;font-size:2.2rem;font-weight:700}.subtitle{color:#627d98;margin-bottom:2.5rem;font-size:1.1rem}.form-group{margin-bottom:1.5rem}.form-group label{color:#334e68;margin-bottom:.5rem;font-size:1.05rem;font-weight:600;display:block}.form-group input,.form-group textarea{background:#f8fbfa;border:1px solid #d9e2ec;border-radius:10px;width:100%;padding:1rem;font-family:Sarabun,sans-serif;font-size:1rem;transition:all .3s}.form-group input:focus,.form-group textarea:focus,.template-select:focus{background:#fff;border-color:#3e8ed0;outline:none;box-shadow:0 0 0 3px #3e8ed033}.template-select{color:#102a43;cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233e8ed0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e") right 1rem center/1em no-repeat;border:1px solid #d9e2ec;border-radius:10px;width:100%;padding:1rem;font-family:Sarabun,sans-serif;font-size:1.1rem;font-weight:500;transition:all .3s}.fields-container{max-height:50vh;margin-bottom:20px;padding-right:15px;overflow-y:auto}.fields-container::-webkit-scrollbar{width:6px}.fields-container::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}.fields-container::-webkit-scrollbar-thumb{background:#c1c1c1;border-radius:10px}.fields-container::-webkit-scrollbar-thumb:hover{background:#a8a8a8}.export-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#3e8ed0 0%,#216ba5 100%);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;margin-top:auto;padding:1.2rem;font-family:Sarabun,sans-serif;font-size:1.2rem;font-weight:600;transition:transform .2s,box-shadow .2s;display:flex}.export-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px #216ba54d}.export-btn:active{transform:translateY(0)}.preview-panel{flex:2;justify-content:center;align-items:center;padding:1rem;animation:.6s ease-out slideInRight;display:flex;overflow-y:auto}.a4-document{transform-origin:top;background:#fff;flex-shrink:0;width:210mm;height:297mm;padding:20mm;position:relative;transform:scale(.9);box-shadow:0 15px 50px #00000026}.doc-title{text-align:center;margin-bottom:30px;font-size:28px;font-weight:700}.doc-date{text-align:right;margin-bottom:40px;font-size:16px}.doc-content p{text-indent:40px;color:#000;margin-bottom:20px;font-size:16px;line-height:1.8}.doc-section{font-weight:600;text-indent:0!important;margin-top:30px!important}.doc-content ol{color:#000;margin-bottom:40px;margin-left:40px;font-size:16px;line-height:1.8}.doc-content ol li{margin-bottom:15px}.doc-signatures{color:#000;justify-content:space-between;margin-top:100px;padding:0 30px;display:flex}.signature-box{text-align:center;font-size:16px}.signature-line{border-bottom:1px dashed #333;width:200px;margin-bottom:15px}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}.select-container{max-width:1000px;margin:0 auto;padding:2rem;animation:.5s ease-out fadeIn}.template-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;margin-top:3rem;display:grid}.template-card{text-align:center;cursor:pointer;background:#fff;border:1px solid #e1e8f0;border-radius:16px;padding:2.5rem 2rem;transition:all .3s;box-shadow:0 10px 30px #0000000d}.template-card:hover{border-color:#3e8ed0;transform:translateY(-5px);box-shadow:0 15px 40px #3e8ed026}.template-icon{margin-bottom:1.5rem;font-size:3rem}.template-card h3{color:#102a43;margin-bottom:.5rem;font-size:1.5rem}.template-card p{color:#627d98;margin-bottom:1.5rem;font-size:1rem}.template-card button{color:#3e8ed0;cursor:pointer;background:#f0f4f8;border:none;border-radius:8px;width:100%;padding:.8rem 1.5rem;font-family:inherit;font-size:1rem;font-weight:600;transition:all .2s}.template-card:hover button{color:#fff;background:#3e8ed0}.back-btn{color:#627d98;cursor:pointer;background:0 0;border:none;align-items:center;gap:.5rem;margin-bottom:1rem;padding:0;font-family:inherit;font-size:1.05rem;font-weight:500;transition:color .2s;display:flex}.back-btn:hover{color:#102a43}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (width<=1200px){.a4-document{transform:scale(.7)}}@media (width<=900px){.app-container{flex-direction:column;height:auto}.form-panel{max-width:100%}.a4-document{transform:scale(.6)}}