#pn-tool-app{color:#334155;background-color:transparent;box-sizing:border-box;width:100%;display:flex;flex-direction:column;align-items:center;margin:0 auto;position:relative;z-index:10}#pn-tool-app .pn-tool-wrapper *,#pn-tool-app .pn-tool-wrapper ::after,#pn-tool-app .pn-tool-wrapper ::before{box-sizing:inherit}#pn-tool-app .pn-tool-header{text-align:center;margin-bottom:24px;width:100%}#pn-tool-app .pn-tool-title{font-size:2rem;font-weight:700;color:#0f172a;margin:0 0 12px}#pn-tool-app .pn-tool-desc{font-size:1.125rem;color:#485161;margin:0 auto;max-width:600px}#pn-tool-app .pn-tool-container{background:#fff;border-radius:16px;box-shadow:0 10px 25px -5px rgba(0,0,0,.05),0 8px 10px -6px rgba(0,0,0,.01);overflow:hidden;transition:max-width .5s cubic-bezier(.4, 0, .2, 1),margin .5s cubic-bezier(.4, 0, .2, 1),min-height .3s;position:relative;width:100%}#pn-tool-app .pn-tool-state-dropzone{max-width:50vw;min-width:320px;margin:20px auto 40px}@media (max-width:1024px){#pn-tool-app .pn-tool-state-dropzone{max-width:80vw;margin-top:20px}}@media (max-width:640px){#pn-tool-app .pn-tool-state-dropzone{max-width:95vw;margin-top:20px}}#pn-tool-app .pn-tool-state-result,#pn-tool-app .pn-tool-state-workspace{max-width:1200px;margin:20px auto 60px;width:95vw}#pn-tool-app .pn-tool-view{display:none;opacity:0;transition:opacity .3s}#pn-tool-app .pn-tool-view.pn-tool-active{display:block;opacity:1}#pn-tool-app .pn-tool-dropzone{border:2px dashed #cbd5e1;border-radius:16px;padding:60px 20px;text-align:center;background:#f8fafc;cursor:pointer;transition:.2s;position:relative}#pn-tool-app .pn-tool-dropzone.pn-tool-dragover,#pn-tool-app .pn-tool-dropzone:hover{border-color:#3b82f6;background:#eff6ff}#pn-tool-app .pn-tool-upload-icon{width:64px;height:64px;color:#94a3b8;margin-bottom:16px;transition:color .2s}#pn-tool-app .pn-tool-dropzone:hover .pn-tool-upload-icon{color:#3b82f6}#pn-tool-app .pn-tool-dropzone-text{font-size:1.25rem;font-weight:600;color:#334155;margin:0 0 8px}#pn-tool-app .pn-tool-dropzone-subtext{font-size:.875rem;color:#64748b;margin:0}#pn-tool-app .pn-tool-file-input{display:none}#pn-tool-app .pn-tool-workspace-layout{display:flex;flex-direction:row;min-height:500px}#pn-tool-app .pn-tool-col-left{flex:1;padding:24px;background:#f8fafc;border-right:1px solid #e2e8f0;display:flex;flex-direction:column}#pn-tool-app .pn-tool-section-title{font-size:1.125rem;font-weight:600;margin:0 0 16px;color:#0f172a;display:flex;align-items:center;justify-content:space-between}#pn-tool-app .pn-tool-file-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px;margin-bottom:24px;flex:1;align-content:start}#pn-tool-app .pn-tool-file-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:8px;position:relative;box-shadow:0 1px 3px rgba(0,0,0,.05);transition:box-shadow .2s}#pn-tool-app .pn-tool-file-card:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1)}#pn-tool-app .pn-tool-file-thumb{width:100%;height:160px;object-fit:cover;border-radius:4px;border:1px solid #f1f5f9;background:#f1f5f9}#pn-tool-app .pn-tool-file-thumb-loading{width:100%;height:160px;display:flex;align-items:center;justify-content:center;background:#f1f5f9;border-radius:4px;font-size:.75rem;color:#94a3b8}#pn-tool-app .pn-tool-file-name{font-size:.75rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:8px 0 0;text-align:center;color:#475569}#pn-tool-app .pn-tool-remove-btn{position:absolute;top:-8px;right:-8px;background:#ef4444;color:#fff;border:none;border-radius:50%;width:24px;height:24px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 4px rgba(0,0,0,.2);padding:0;transition:background .2s,transform .2s}#pn-tool-app .pn-tool-remove-btn:hover{background:#dc2626;transform:scale(1.1)}#pn-tool-app .pn-tool-remove-btn svg{width:14px;height:14px}#pn-tool-app .pn-tool-add-more-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px;background:0 0;border:2px dashed #cbd5e1;color:#475569;border-radius:8px;font-weight:600;cursor:pointer;transition:.2s;font-size:.875rem}#pn-tool-app .pn-tool-add-more-btn:hover{border-color:#3b82f6;color:#3b82f6;background:#eff6ff}#pn-tool-app .pn-tool-col-right{width:380px;padding:24px;display:flex;flex-direction:column;gap:24px}@media (max-width:860px){#pn-tool-app .pn-tool-workspace-layout{flex-direction:column}#pn-tool-app .pn-tool-col-left{border-right:none;border-bottom:1px solid #e2e8f0}#pn-tool-app .pn-tool-col-right{width:100%}}#pn-tool-app .pn-tool-control-group{display:flex;flex-direction:column;gap:8px}#pn-tool-app .pn-tool-label{font-size:.875rem;font-weight:600;color:#334155;margin:0}#pn-tool-app .pn-tool-pos-grid-container{display:flex;justify-content:center;background:#f8fafc;padding:16px;border-radius:8px;border:1px solid #e2e8f0}#pn-tool-app .pn-tool-pos-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:4px;width:140px;height:180px;background:#fff;padding:8px;border:2px solid #cbd5e1;border-radius:4px;box-shadow:0 4px 6px -1px rgba(0,0,0,.05)}#pn-tool-app .pn-tool-pos-cell{background:#e2e8f0;border-radius:2px;cursor:pointer;transition:.2s;position:relative}#pn-tool-app .pn-tool-pos-cell:hover{background:#cbd5e1}#pn-tool-app .pn-tool-pos-cell.pn-tool-pos-active{background:#3b82f6;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}#pn-tool-app .pn-tool-pos-cell::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:8px;height:4px;background:rgba(255,255,255,.7);border-radius:1px;opacity:0}#pn-tool-app .pn-tool-pos-cell.pn-tool-pos-active::after{opacity:1}#pn-tool-app .pn-tool-input,#pn-tool-app .pn-tool-select{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:6px;font-size:.875rem;color:#0f172a;background:#fff;font-family:inherit;outline:0;transition:border-color .2s}#pn-tool-app .pn-tool-input:focus,#pn-tool-app .pn-tool-select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,.1)}#pn-tool-app .pn-tool-custom-format-wrapper{display:none;margin-top:8px}#pn-tool-app .pn-tool-custom-format-wrapper.pn-tool-show{display:block}#pn-tool-app .pn-tool-hint{font-size:.75rem;color:#64748b;margin:4px 0 0}#pn-tool-app .pn-tool-color-wrapper,#pn-tool-app .pn-tool-range-wrapper{display:flex;align-items:center;gap:12px}#pn-tool-app .pn-tool-range{flex:1;cursor:pointer;accent-color:#3b82f6}#pn-tool-app .pn-tool-range-val{font-size:.875rem;font-weight:500;width:32px;text-align:right}#pn-tool-app .pn-tool-color-picker{width:36px;height:36px;padding:0;border:none;border-radius:6px;cursor:pointer;background:0 0}#pn-tool-app .pn-tool-color-picker::-webkit-color-swatch-wrapper{padding:0}#pn-tool-app .pn-tool-color-picker::-webkit-color-swatch{border:1px solid #cbd5e1;border-radius:6px}#pn-tool-app .pn-tool-btn-primary{background:#2563eb;color:#fff;border:none;padding:14px 24px;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s,transform .1s;display:flex;justify-content:center;align-items:center;gap:8px;margin-top:auto;width:100%}#pn-tool-app .pn-tool-btn-primary:hover{background:#1d4ed8}#pn-tool-app .pn-tool-btn-primary:active{transform:translateY(1px)}#pn-tool-app .pn-tool-btn-primary:disabled{background:#94a3b8;cursor:not-allowed;transform:none}#pn-tool-app .pn-tool-loading-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:rgba(255,255,255,.9);backdrop-filter:blur(4px);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:10;opacity:0;pointer-events:none;transition:opacity .3s}#pn-tool-app .pn-tool-loading-overlay.pn-tool-active{opacity:1;pointer-events:all}#pn-tool-app .pn-tool-spinner{width:48px;height:48px;border:4px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:1s linear infinite pn-tool-spin;margin-bottom:16px}@keyframes pn-tool-spin{to{transform:rotate(360deg)}}#pn-tool-app .pn-tool-loading-text{font-size:1.125rem;font-weight:600;color:#1e293b;margin:0}#pn-tool-app .pn-tool-result-content{padding:60px 20px;text-align:center;display:flex;flex-direction:column;align-items:center}#pn-tool-app .pn-tool-success-icon{width:80px;height:80px;color:#10b981;margin-bottom:24px}#pn-tool-app .pn-tool-result-title{font-size:1.5rem;font-weight:700;color:#0f172a;margin:0 0 12px}#pn-tool-app .pn-tool-result-desc{font-size:1rem;color:#64748b;margin:0 0 32px}#pn-tool-app .pn-tool-btn-group{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}#pn-tool-app .pn-tool-btn-secondary{background:#fff;color:#475569;border:1px solid #cbd5e1;padding:12px 24px;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:.2s}#pn-tool-app .pn-tool-btn-secondary:hover{background:#f8fafc;border-color:#94a3b8;color:#0f172a}#pn-tool-app .pn-tool-btn-download{background:#10b981;color:#fff;border:none;padding:12px 24px;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:background .2s;display:flex;align-items:center;gap:8px;text-decoration:none}#pn-tool-app .pn-tool-btn-download:hover{background:#059669}#pn-tool-app #pn-tool-error-msg{display:none;color:#ef4444;background:#fef2f2;padding:12px;border-radius:8px;margin-bottom:16px;font-size:.875rem;text-align:center;border:1px solid #fecaca}