:root{font-family:'IBM Plex Sans Thai',Tahoma,sans-serif;color:#17252b;background:#f8f6f1;font-size:18px}*{box-sizing:border-box}body{margin:0}header{padding:24px 4%;display:flex;gap:28px;align-items:center;border-bottom:1px solid #ddd7cd;background:#fffdf9}.brand{text-decoration:none;color:inherit;font-size:25px;letter-spacing:4px}.brand span{display:block;font-size:11px;letter-spacing:2px}nav{display:flex;gap:25px;margin-left:auto}nav a,a{color:#0755bd}#connection{font-size:14px}main{max-width:1450px;margin:auto;padding:0 4% 50px}.intro{padding:65px 0 50px;max-width:850px}.eyebrow{font-size:14px;font-weight:600;letter-spacing:1px}h1{font-size:clamp(42px,5vw,72px);line-height:1.2;margin:15px 0 24px;letter-spacing:-1.4px}h1 em{font-style:normal;color:#0755bd}h2{font-size:25px;margin:0 0 15px}p{line-height:1.65}.pills{display:flex;gap:12px;flex-wrap:wrap;font-size:14px}.pills span{border:1px solid #d5d3ce;border-radius:25px;padding:9px 14px}.workspace{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(270px,.8fr);gap:38px;align-items:start}.panel{padding:28px;background:white;border:1px solid #deded8;border-radius:16px;margin-bottom:20px}.section-title{display:flex;align-items:baseline;gap:15px}.section-title>span{font-size:15px;color:#0755bd}.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}label{display:block;font-size:17px;margin:16px 0}input,select,textarea,button{font:inherit}input:not([type=checkbox]),select,textarea{display:block;width:100%;padding:12px;border:1px solid #9ca9ad;border-radius:8px;margin-top:7px;color:inherit;background:white}input[type=file]{font-size:14px;max-width:100%}textarea{resize:vertical}button,.download{display:inline-block;background:#eaf0f5;color:#0755bd;border:1px solid #acbed0;border-radius:9px;padding:12px 19px;cursor:pointer;min-height:46px;font-size:17px;text-decoration:none}button:hover,.download:hover{background:#dbe9fc}.primary{background:#0755bd;color:white;border:0;width:100%;font-size:21px}.primary:hover{background:#064294}button:disabled{opacity:.55;cursor:wait}.hint{font-size:15px;color:#52636a;line-height:1.65}.check{display:flex;align-items:flex-start;gap:10px;line-height:1.6}.check input[type=checkbox]{margin-top:4px;flex-shrink:0;width:24px;height:24px}fieldset{border:0;padding:0;min-width:0}.platforms{display:grid;grid-template-columns:1fr 1fr;gap:0 15px}.platforms label{font-size:16px}.platforms input{margin-right:9px}.upload{padding:24px;background:#f4f7fc;border:1px dashed #88a1c3;border-radius:9px}.assets{display:flex;gap:10px;flex-wrap:wrap}.asset{width:130px;border:2px solid #ddd;border-radius:8px;overflow:hidden;background:white;font-size:12px;position:relative}.asset.selected{border-color:#0755bd;background:#eef4ff}.asset img,.asset video{width:100%;height:90px;object-fit:cover}.asset button{min-height:35px;font-size:12px;border:0;padding:6px;width:100%}.asset p{padding:0 6px;overflow-wrap:anywhere;margin:4px 0}.preview-panel{position:sticky;top:20px;padding:20px}.preview{aspect-ratio:9/16;max-height:590px;max-width:100%;margin:auto;background:#e9e1d4;position:relative;overflow:hidden;border-radius:10px}.preview img,.preview video{width:100%;height:100%;object-fit:contain}.preview-title,.preview-cta{position:absolute;left:8%;right:8%;padding:12px;background:#0755bd;color:#fff;border-radius:4px;text-align:center;overflow-wrap:anywhere;font-size:24px;font-weight:600;pointer-events:none}.preview-title{top:10%}.preview-cta{bottom:12%;font-size:18px;background:#17252b}.mini{border-top:1px solid #ccc;padding-top:20px}.mini p{font-size:15px}#jobs{margin:60px 0}.job{border:1px solid #ccc;border-radius:14px;padding:25px;margin:20px 0;background:white}.job h3{margin:0 0 12px;overflow-wrap:anywhere}.job-actions{display:flex;gap:12px;flex-wrap:wrap}.outputs{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}.outputs video{width:100%;max-height:300px;background:#17252b;border-radius:6px}.outputs p{font-size:14px}.output{min-width:0}.error{color:#962f27;white-space:pre-wrap;overflow-wrap:anywhere;font-size:15px}progress{width:100%;height:12px;accent-color:#0755bd}.notice{background:#fff2d6;border:1px solid #c89d51;padding:24px;border-radius:12px;margin-bottom:25px}#message{margin-top:15px;white-space:pre-wrap}footer{font-size:15px;line-height:1.7;color:#52636a}a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a15c00;outline-offset:3px}[hidden]{display:none!important}@media(max-width:900px){header{flex-wrap:wrap}nav{margin-left:0;font-size:16px}.workspace{grid-template-columns:1fr}.preview-panel{position:static;grid-row:1}.preview{width:270px;max-height:480px}.intro{padding:40px 0 20px}.panel{padding:22px}}@media(max-width:400px){.platforms,.row{grid-template-columns:1fr}main{padding:0 5% 30px}.panel{padding:18px}h1{font-size:40px}header nav{gap:16px}.preview-panel{padding:0 0 20px}h2{font-size:23px}.job{padding:18px}}

/* Lightweight interaction feedback, with keyboard and reduced-motion support. */
button,a,summary,select,input,textarea{-webkit-tap-highlight-color:transparent}
button,.download,:is(.btn,.button),nav a,aside>a,summary{transition:transform 150ms ease,box-shadow 150ms ease,background-color 150ms ease,color 150ms ease}
summary{display:flex;align-items:center;justify-content:space-between;gap:16px;list-style:none;cursor:pointer;padding:16px 0}
summary::-webkit-details-marker{display:none}
summary::marker{content:''}
summary::after{content:'เปิด';font-size:14px;flex-shrink:0;color:inherit;border:1px solid currentColor;border-radius:20px;padding:3px 12px}
details[open]>summary::after{content:'ปิด'}
select{appearance:none;-webkit-appearance:none;background-image:none!important;cursor:pointer;border-bottom-width:3px!important}
:where(button,a,summary,select,input,textarea):focus-visible{outline:3px solid #ae6900;outline-offset:4px}
@media(hover:hover) and (pointer:fine){button:not(:disabled):hover,.download:hover,:is(.btn,.button):hover{transform:translateY(-2px);box-shadow:0 6px 16px #14395024}nav a:hover,aside>a:hover{color:#0755bd;text-decoration:underline;text-underline-offset:6px}summary:hover{color:#0755bd}}
button:not(:disabled):active,.download:active,:is(.btn,.button):active,summary:active{transform:translateY(1px) scale(.985);box-shadow:0 1px 3px #14395020}
button:disabled{transform:none!important;box-shadow:none!important}
@media(prefers-reduced-motion:reduce){button,.download,:is(.btn,.button),nav a,aside>a,summary{transition:none!important;transform:none!important}}

.seller-tools{margin:40px 0}.seller-tools details{border-top:1px solid #deded8}.kit-image-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}.kit-image-results figure{margin:0;min-width:0}.kit-image-results img{width:100%;height:240px;object-fit:contain;background:#f1f3f6}.kit-image-results .download{font-size:15px;margin-top:12px}#kit-background{height:50px;max-width:180px}#tools-message{color:#0755bd;line-height:1.7}nav{flex-wrap:wrap}@media(max-width:600px){.kit-image-results{grid-template-columns:1fr}.kit-image-results img{height:280px}}
.cost-box{padding:18px;margin:18px 0;border:1px solid #d4c5b2;border-radius:12px;background:#fbf8f3}.cost-box strong{font-size:18px}.cost-box p{margin:8px 0}.output button{width:100%;margin-top:10px}.output button[data-approved=true]{background:#e0efe6;color:#245a3c;border-color:#80b195}
.storyboard{margin:20px 0;padding:18px;border:1px solid #d9d2c8;border-radius:12px;background:#fbfaf8}.storyboard h3{margin:0}.shot{display:grid;grid-template-columns:100px minmax(0,1fr);gap:16px;padding:16px 0;border-top:1px solid #ddd6cd}.shot img{width:100px;height:100px;object-fit:contain;background:#fff}.shot strong{overflow-wrap:anywhere}.shot-controls{display:grid;grid-template-columns:minmax(0,1fr) 120px;gap:12px}.shot-controls label{margin:6px 0}.shot .job-actions button{font-size:15px;padding:8px 12px;min-height:38px}@media(max-width:500px){.shot{grid-template-columns:1fr}.shot-controls{grid-template-columns:1fr 110px}}

.reconcile{border:1px solid currentColor;border-radius:12px;padding:12px;margin:10px 0;display:grid;gap:8px}
#jobs-more{margin-top:12px;min-height:44px}
.platforms label{display:flex;align-items:center;gap:9px;min-height:44px}
.platforms input[type=checkbox]{width:24px;height:24px;margin:0;flex-shrink:0}
.narration{border:1px solid rgba(0,0,0,.12);border-radius:14px;padding:14px;margin-top:14px;display:grid;gap:10px}
.narration legend{font-weight:600;padding:0 6px}
.invoice{border-top:1px solid rgba(0,0,0,.1);padding-top:10px;margin-top:10px}
.qr svg{width:200px;height:200px;background:#fff;padding:6px;border-radius:10px}
.ticket{border-top:1px solid rgba(0,0,0,.1);padding-top:10px;margin-top:10px}
.ticket .reply{background:rgba(0,0,0,.04);border-radius:10px;padding:8px 10px}
.faq dt{font-weight:600;margin-top:8px}
.faq dd{margin:2px 0 0}