/* Stiker WA v1 - gwntur.com | https://cdn.gwntur.com/sticker-whatsapp/v1/style.css */
#stwaApp{max-width:640px;margin:0 auto;padding:10px 6px 26px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:#1c2333;box-sizing:border-box}
#stwaApp *{box-sizing:border-box}
#stwaApp .stwa-head{text-align:center;margin:6px 0 22px}
#stwaApp .stwa-logo{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:20px;background:linear-gradient(135deg,#0066cc,#00a3ff);box-shadow:0 8px 22px rgba(0,102,204,.35);margin-bottom:12px;color:#fff}
#stwaApp .stwa-logo .stwa-ic svg{width:32px;height:32px;fill:none}
#stwaApp .stwa-title{font-size:26px;font-weight:800;margin:0 0 8px;letter-spacing:-.5px;color:#141a26}
#stwaApp .stwa-title span{color:#0066cc}
#stwaApp .stwa-sub{font-size:14px;color:#6b7280;margin:0 auto;max-width:460px;line-height:1.6}
#stwaApp .stwa-ic{display:inline-flex;vertical-align:-4px;flex-shrink:0}
#stwaApp .stwa-ic svg{display:block;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#stwaApp .stwa-step{margin:0 auto}
/* --- upload --- */
#stwaApp .stwa-drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;min-height:220px;border:2px dashed #bcd6f5;border-radius:18px;background:#f4f8ff;color:#0066cc;cursor:pointer;transition:border-color .2s,background .2s;padding:28px 18px;font-family:inherit}
#stwaApp .stwa-drop:hover,#stwaApp .stwa-drop.stwa-over{border-color:#0066cc;background:#eaf3ff}
#stwaApp .stwa-drop .stwa-ic svg{width:40px;height:40px;stroke-width:1.6}
#stwaApp .stwa-drop-t{font-size:16px;font-weight:700}
#stwaApp .stwa-drop-s{font-size:12.5px;color:#7b8794;font-weight:400;line-height:1.6;max-width:340px}
/* --- editor --- */
#stwaApp .stwa-edwrap{position:relative;width:min(100%,380px);margin:0 auto 16px;border-radius:18px;overflow:hidden;border:1px solid #e3e9f2;background:#fff}
#stwaApp .stwa-ed{display:block;width:100%;height:auto;touch-action:none;cursor:grab;background-image:conic-gradient(#eef1f5 0 25%,#fff 0 50%,#eef1f5 0 75%,#fff 0);background-size:24px 24px}
#stwaApp .stwa-ed:active{cursor:grabbing}
#stwaApp .stwa-ctl{max-width:380px;margin:0 auto 18px}
#stwaApp .stwa-zoom{display:flex;align-items:center;gap:10px;color:#6b7280;margin-bottom:14px}
#stwaApp .stwa-zoom input{flex:1;accent-color:#0066cc;height:28px}
#stwaApp .stwa-toggle{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600;cursor:pointer;user-select:none}
#stwaApp .stwa-toggle input{position:absolute;opacity:0;pointer-events:none}
#stwaApp .stwa-tg{width:44px;height:25px;border-radius:20px;background:#d4dae3;position:relative;transition:background .2s;flex-shrink:0}
#stwaApp .stwa-tg::after{content:"";position:absolute;top:2.5px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:left .2s}
#stwaApp .stwa-toggle input:checked+.stwa-tg{background:#0066cc}
#stwaApp .stwa-toggle input:checked+.stwa-tg::after{left:21px}
#stwaApp .stwa-hint{font-size:12.5px;color:#8a94a3;margin:10px 0 0;line-height:1.6}
/* --- tombol --- */
#stwaApp .stwa-actions{display:flex;flex-direction:column;gap:10px;max-width:380px;margin:0 auto}
#stwaApp .stwa-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:none;border-radius:13px;padding:14px 20px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;transition:transform .15s,box-shadow .15s,opacity .15s;width:100%}
#stwaApp .stwa-btn .stwa-ic svg{width:20px;height:20px}
#stwaApp .stwa-go{background:linear-gradient(135deg,#0066cc,#00a3ff);color:#fff;box-shadow:0 6px 18px rgba(0,102,204,.35)}
#stwaApp .stwa-go:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,102,204,.45)}
#stwaApp .stwa-go:disabled{opacity:.65;cursor:wait;transform:none}
#stwaApp .stwa-ghost{background:#eef2f7;color:#33404f;box-shadow:none}
#stwaApp .stwa-ghost:hover{background:#e2e9f2}
/* --- hasil --- */
#stwaApp .stwa-reswrap{width:min(100%,300px);margin:0 auto 14px;border-radius:18px;overflow:hidden;border:1px solid #e3e9f2;background-image:conic-gradient(#eef1f5 0 25%,#fff 0 50%,#eef1f5 0 75%,#fff 0);background-size:24px 24px}
#stwaApp .stwa-reswrap canvas{display:block;width:100%;height:auto}
#stwaApp .stwa-meta{text-align:center;font-size:13px;color:#6b7280;margin:0 0 18px}
#stwaApp .stwa-meta b{color:#0066cc}
/* --- status / error --- */
#stwaApp .stwa-status{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 10px;font-size:14px;font-weight:600;color:#0066cc}
#stwaApp .stwa-dots{display:inline-flex;gap:5px;align-items:center}
#stwaApp .stwa-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;animation:stwaBlink 1.2s infinite}
#stwaApp .stwa-dots i:nth-child(2){animation-delay:.2s}
#stwaApp .stwa-dots i:nth-child(3){animation-delay:.4s}
@keyframes stwaBlink{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
#stwaApp .stwa-err{display:flex;gap:10px;align-items:flex-start;background:#fff1f2;border:1px solid #ffc9ce;color:#b4232f;padding:13px 15px;border-radius:13px;font-size:13.5px;margin:16px auto 0;max-width:480px;line-height:1.6}
#stwaApp .stwa-err .stwa-ic{flex-shrink:0;margin-top:1px}
#stwaApp .stwa-modal[hidden],#stwaApp .stwa-err[hidden],#stwaApp .stwa-status[hidden]{display:none!important}
#stwaApp .stwa-guide{display:flex;gap:10px;align-items:flex-start;background:rgba(0,102,204,.07);border:1px solid rgba(0,102,204,.22);border-radius:12px;padding:11px 13px;margin:2px 0 12px;font-size:13.5px;line-height:1.55}
#stwaApp .stwa-guide .stwa-ic{flex:0 0 auto;color:#0066cc;margin-top:1px}
#stwaApp .stwa-guide p{margin:0}
#stwaApp .stwa-link{background:none;border:0;padding:0;color:#0066cc;font-weight:700;font-size:13.5px;cursor:pointer;text-decoration:underline;font-family:inherit}
#stwaApp .stwa-modal-sub{margin:0 0 12px;font-size:13.5px;opacity:.78}
#stwaApp.stwa-dark .stwa-guide{background:rgba(0,163,255,.1);border-color:rgba(0,163,255,.3)}
#stwaApp.stwa-dark .stwa-link{color:#4db2ff}
/* --- modal panduan --- */
#stwaApp .stwa-modal{position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(3px)}
#stwaApp .stwa-modalbox{background:#fff;border-radius:20px;max-width:430px;width:100%;padding:26px 24px;box-shadow:0 24px 70px rgba(0,0,0,.28);max-height:88vh;overflow:auto}
#stwaApp .stwa-modalbox h3{margin:0 0 16px;font-size:18px;font-weight:800;color:#141a26;text-align:center}
#stwaApp .stwa-steps{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
#stwaApp .stwa-steps li{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;line-height:1.6;color:#3c4656}
#stwaApp .stwa-steps li>b{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#0066cc,#00a3ff);color:#fff;font-size:13px;font-weight:800;display:inline-flex;align-items:center;justify-content:center}
#stwaApp .stwa-note{font-size:12.5px;color:#6b7280;background:#f4f8ff;border-radius:10px;padding:11px 13px;line-height:1.65;margin:0 0 18px}
/* --- dark mode --- */
#stwaApp.stwa-dark{color:#e8edf5}
#stwaApp.stwa-dark .stwa-title{color:#f2f5fa}
#stwaApp.stwa-dark .stwa-sub{color:#9aa5b5}
#stwaApp.stwa-dark .stwa-drop{background:#152032;border-color:#2b4a73;color:#7fb8f5}
#stwaApp.stwa-dark .stwa-drop:hover,#stwaApp.stwa-dark .stwa-drop.stwa-over{background:#18273c;border-color:#3f7fd1}
#stwaApp.stwa-dark .stwa-drop-s{color:#8fa0b8}
#stwaApp.stwa-dark .stwa-edwrap,#stwaApp.stwa-dark .stwa-reswrap{border-color:#2a3648}
#stwaApp.stwa-dark .stwa-ed{background-image:conic-gradient(#1d2839 0 25%,#141c28 0 50%,#1d2839 0 75%,#141c28 0)}
#stwaApp.stwa-dark .stwa-reswrap{background-image:conic-gradient(#1d2839 0 25%,#141c28 0 50%,#1d2839 0 75%,#141c28 0)}
#stwaApp.stwa-dark .stwa-zoom{color:#9aa5b5}
#stwaApp.stwa-dark .stwa-tg{background:#3a4657}
#stwaApp.stwa-dark .stwa-hint{color:#8fa0b8}
#stwaApp.stwa-dark .stwa-ghost{background:#1d2839;color:#dbe4f0}
#stwaApp.stwa-dark .stwa-ghost:hover{background:#243145}
#stwaApp.stwa-dark .stwa-meta{color:#9aa5b5}
#stwaApp.stwa-dark .stwa-err{background:#3a1d22;border-color:#7a2e38;color:#f3b3bb}
#stwaApp.stwa-dark .stwa-modalbox{background:#1a2434}
#stwaApp.stwa-dark .stwa-modalbox h3{color:#f2f5fa}
#stwaApp.stwa-dark .stwa-steps li{color:#c3ccd9}
#stwaApp.stwa-dark .stwa-note{background:#152032;color:#9aa5b5}
@media(max-width:480px){
#stwaApp .stwa-title{font-size:23px}
#stwaApp .stwa-drop{min-height:190px}
}
/* Stiker WA v10: tips custom */
.stwa-doc-tips{background:rgba(0,102,204,.07);border:1px solid rgba(0,102,204,.22);border-radius:12px;padding:16px 18px;margin:0 0 14px;max-width:680px}
.stwa-doc-tips h3{margin:0 0 8px;font-size:16px;color:#0066cc}
.stwa-doc-tips ul{margin:0;padding-left:20px}
.stwa-doc-tips li{margin:0 0 6px;line-height:1.6}
#stwaApp.stwa-dark~.stwa-doc-tips{background:rgba(0,102,204,.14);border-color:rgba(0,102,204,.35)}