@font-face{font-family:"Kanit";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-regular.woff2)format("woff2")}@font-face{font-family:"Kanit";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/kanit-v17-latin_thai-700.woff2)format("woff2")}:root{--primary:#2563eb;--primary-hover:#1d4ed8;--bg-main:#0f172a;--bg-card:#1e293b;--bg-input:#0b1120;--text-main:#f8fafc;--text-muted:#94a3b8;--border:#475569;--success:#16a34a;--warning:#f59e0b}*{box-sizing:border-box;margin:0;padding:0}body{font-family:"Kanit",sans-serif;background-color:var(--bg-main);color:var(--text-main);line-height:1.6}h1,h2{font-weight:700}a{color:var(--primary);text-decoration:none}.container{max-width:900px;margin:0 auto;padding:20px}header{text-align:center;padding:80px 20px 30px}header h1{font-size:2.2rem;margin-bottom:10px;background:linear-gradient(to right,#60a5fa,#3b82f6);-webkit-background-clip:text;color:transparent}header p{color:var(--text-muted);font-size:1.1rem;max-width:600px;margin:0 auto}svg.icon{width:1.25rem;height:1.25rem;fill:currentColor}.app-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:25px;margin-bottom:40px}@media (max-width:768px){.app-grid{grid-template-columns:1fr}}.card{background:var(--bg-card);border-radius:20px;padding:25px;border:1px solid var(--border);box-shadow:0 10px 30px rgba(0,0,0,.3)}.input-group{margin-bottom:20px}.input-group label,textarea{color:var(--text-main);font-size:1rem}.input-group label{display:block;font-weight:600;margin-bottom:8px}textarea{width:100%;height:120px;padding:15px;border-radius:12px;border:1px solid var(--border);background:var(--bg-input);font-family:"Kanit";resize:none;outline:0;transition:.3s}textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.2)}.color-row{display:flex;gap:15px;margin-bottom:20px}.color-box{flex:1;display:flex;align-items:center;justify-content:space-between;background:var(--bg-input);padding:10px 15px;border-radius:12px;border:1px solid var(--border)}.color-box span{font-size:.9rem;color:var(--text-muted)}input[type=color]{-webkit-appearance:none;border:0;width:32px;height:32px;border-radius:50%;cursor:pointer;padding:0;background:0 0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:2px solid var(--border);border-radius:50%}.input-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.input-header label{font-size:1rem;font-weight:600;color:var(--text-main);margin:0}.input-actions{display:flex;gap:6px}.action-btn-sm{display:flex;align-items:center;gap:4px;padding:4px 10px;border-radius:8px;font-size:.85rem;font-family:"Kanit";font-weight:600;cursor:pointer;transition:.2s;border:0}.action-btn-sm svg{width:.9rem;height:.9rem}.btn-paste{background:rgba(37,99,235,.15);color:#60a5fa;border:1px solid rgba(59,130,246,.3)}.btn-paste:hover{background:#2563eb;color:#fff;border-color:#2563eb}.btn-copy{background:rgba(22,163,74,.15);color:#4ade80;border:1px solid rgba(34,197,94,.3);display:none}.btn-copy:hover{background:#16a34a;color:#fff;border-color:#16a34a}.btn-copy.show{display:flex}.btn-clear{background:rgba(220,38,38,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);display:none}.btn-clear:hover{background:#dc2626;color:#fff;border-color:#dc2626}.btn-clear.show{display:flex}.btn-remove-logo,.btn-upload-logo{padding:12px;font-size:.95rem;font-weight:600;border-radius:10px;cursor:pointer;transition:.3s}.btn-upload-logo{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;background:#1e293b;color:#60a5fa;border:2px dashed #475569}.btn-upload-logo:hover{background:rgba(37,99,235,.1);border-color:#3b82f6;color:#93c5fd}.btn-upload-logo.has-file{border-style:solid;border-color:#16a34a;color:#4ade80}.btn-remove-logo{flex:.3;min-width:60px;background:#7f1d1d;color:#fecaca;border:1px solid #991b1b}.btn-remove-logo:hover{background:#991b1b;color:#fff}.btn-remove-logo,.preview-card,.qr-wrapper{display:flex;align-items:center;justify-content:center}.preview-card{flex-direction:column;text-align:center}.qr-wrapper{background:#fff;padding:15px;border-radius:16px;margin-bottom:20px;box-shadow:0 5px 20px rgba(0,0,0,.5);width:220px;height:220px;position:relative;transition:transform .3s}.qr-wrapper:hover{transform:scale(1.02)}.qr-wrapper svg{width:100%;height:100%;display:block}.qr-placeholder{color:#1e293b;font-size:1rem;font-weight:500;padding:20px;position:absolute;text-align:center}.btn-group{display:flex;gap:10px;width:100%;flex-wrap:wrap}.btn-main,.content-box h2{display:flex;align-items:center}.btn-main{flex:1;min-width:130px;padding:12px;border:0;border-radius:10px;font-family:"Kanit";font-weight:600;font-size:1rem;cursor:pointer;justify-content:center;gap:8px;transition:.3s;color:#fff}.btn-png{background:var(--primary)}.btn-png:hover{background:var(--primary-hover);transform:translateY(-2px)}.btn-svg{background:#f97316;color:#fff}.btn-svg:hover{background:#d97706;transform:translateY(-2px)}.btn-disabled{background-color:#1e293b!important;color:#94a3b8!important;border:1px solid #334155!important;cursor:not-allowed;pointer-events:none;opacity:1;filter:grayscale(1)}article{line-height:1.8;color:var(--text-muted)}.content-box{background:var(--bg-card);padding:30px;border-radius:20px;border:1px solid var(--border);margin-bottom:30px}.content-box h2{font-size:1.5rem;margin-bottom:15px;gap:10px}.content-box .sub-title{font-size:1.2rem;color:var(--text-main);font-weight:700;margin-top:25px;margin-bottom:10px}.content-box h2,.content-box strong{color:var(--text-main)}.step-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin:30px 0}.step-card{background:rgba(255,255,255,.05);padding:25px 20px;border-radius:16px;border:1px solid var(--border);position:relative}#itkb-toast,.step-number{color:#fff;display:flex;align-items:center}.step-number{position:absolute;top:-15px;left:20px;background:#1e40af;width:35px;height:35px;justify-content:center;border-radius:50%;font-weight:700;font-size:1rem;border:3px solid var(--bg-main)}#itkb-toast{position:fixed;bottom:20px;right:20px;background:var(--bg-card);border-left:4px solid var(--success);padding:15px 20px;border-radius:8px;box-shadow:0 5px 15px rgba(0,0,0,.4);gap:10px;transform:translateY(100px);opacity:0;transition:.3s;z-index:9999}#itkb-toast.show{transform:translateY(0);opacity:1}#confetti-canvas{position:fixed;top:0;left:0;width:100vw;height:100vh;pointer-events:none;z-index:9998}.hidden{display:none!important}