:root{--pri: #4361ee;--sec: #3a0ca3;--ter: #7209b7;--suc: #06d6a0;--dng: #ef476f;--warn: #ff9f1c;--g1: #f1f5f9;--g2: #e2e8f0;--g3: #cbd5e1;--g4: #94a3b8;--g5: #64748b;--dk: #1e293b;--lt: #f8fafc;--tr: all .3s ease;--r1: 8px;--r2: 12px;--r3: 16px;--r4: 20px;--sh1: 0 2px 8px rgba(0, 0, 0, 0.06);--sh2: 0 4px 16px rgba(0, 0, 0, 0.08);--sh3: 0 8px 30px rgba(0, 0, 0, 0.1)}body{font-family:"Inter",sans-serif;background:linear-gradient(160deg, #f0f4ff 0%, #e8eeff 40%, #f5f0ff 100%)}.hero-section{padding:140px 0 100px;background:linear-gradient(135deg, #4361ee 0%, #3a0ca3 50%, #7209b7 100%);color:#fff;position:relative;overflow:hidden}.hero-section::after{content:"";position:absolute;bottom:-2px;left:0;right:0;height:80px;background:var(--lt);clip-path:ellipse(55% 100% at 50% 100%)}.hero-title{font-size:clamp(2.2rem,5vw,3.8rem);font-weight:900;margin-bottom:1.25rem}.hero-desc{font-size:1.15rem;opacity:.92;max-width:560px;margin-bottom:0}.tool-wrapper{margin-top:-40px;position:relative;z-index:10;padding-bottom:2rem}.tool-card{background:#fff;border-radius:20px;padding:2.5rem;box-shadow:0 4px 24px rgba(67,97,238,.08);border:1px solid rgba(67,97,238,.08)}.step-bar{display:flex;justify-content:space-between;margin-bottom:2rem;position:relative}.step-bar::before{content:"";position:absolute;top:20px;left:15%;right:15%;height:3px;background:var(--g2);border-radius:2px;z-index:0}.step-item{text-align:center;position:relative;z-index:1;flex:1}.step-num{width:42px;height:42px;border-radius:50%;background:var(--g2);color:var(--g5);display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:1.1rem;border:3px solid #fff;transition:var(--tr)}.step-item.active .step-num{background:var(--pri);color:#fff;box-shadow:0 0 0 5px rgba(67,97,238,.15);transform:scale(1.1)}.step-item.done .step-num{background:var(--suc);color:#fff}.step-lbl{font-size:.8rem;font-weight:600;color:var(--g5);margin-top:6px;display:block}.step-item.active .step-lbl{color:var(--pri)}.upload-zone{border:2.5px dashed rgba(67,97,238,.3);border-radius:16px;padding:3.5rem 2rem;text-align:center;background:rgba(67,97,238,.03);cursor:pointer;transition:var(--tr);position:relative}.upload-zone:hover{border-color:var(--pri);background:rgba(67,97,238,.07);transform:scale(1.01)}.upload-zone.over{border-color:var(--pri);background:rgba(67,97,238,.08);transform:scale(1.01)}.upload-icon{width:72px;height:72px;background:linear-gradient(135deg, var(--pri), var(--sec));border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.8rem;color:#fff;margin-bottom:1.2rem;box-shadow:0 10px 30px rgba(67,97,238,.25);animation:float 3s ease-in-out infinite}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}.upload-title{font-size:1.35rem;font-weight:700;margin-bottom:8px}.upload-sub{color:var(--g5);font-size:.95rem;margin-bottom:1.5rem}.file-card{background:linear-gradient(135deg, #667eea, #764ba2);color:#fff;border-radius:12px;padding:1.2rem 1.5rem;margin-top:1.5rem;display:none}.file-card.show{display:block;animation:fadeUp .4s ease}@keyframes fadeUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.file-row{display:flex;justify-content:space-between;align-items:center;padding:4px 0}.file-row+.file-row{border-top:1px solid hsla(0,0%,100%,.15)}.stat-box{background:linear-gradient(135deg, var(--pri), var(--sec));color:#fff;border-radius:12px;padding:1.2rem;text-align:center;box-shadow:0 8px 24px rgba(67,97,238,.2)}.stat-box .num{font-size:1.8rem;font-weight:800;line-height:1}.stat-box .lbl{font-size:.8rem;opacity:.85;margin-top:4px}.canvas-box{background:#fff;border-radius:12px;padding:20px;box-shadow:var(--sh1);text-align:center;min-height:350px;display:flex;align-items:center;justify-content:center;border:1px solid var(--g2)}#pdf-canvas{max-width:100%;max-height:480px;border-radius:8px;box-shadow:var(--sh2)}.page-ctrl{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:16px}.pg-btn{width:36px;height:36px;border-radius:50%;background:var(--pri);color:#fff;border:none;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr);font-size:.9rem}.pg-btn:hover{transform:scale(1.1)}.pg-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.thumbs{display:flex;gap:8px;margin-top:16px;overflow-x:auto;padding:8px 0}.thumb{width:68px;height:86px;border:2px solid var(--g2);border-radius:8px;overflow:hidden;cursor:pointer;transition:var(--tr);flex-shrink:0;position:relative}.thumb:hover,.thumb.on{border-color:var(--pri);box-shadow:0 4px 12px rgba(67,97,238,.2)}.thumb.off{opacity:.35;filter:grayscale(1)}.thumb canvas{width:100%;height:100%;background:#fff}.thumb span{position:absolute;bottom:2px;right:2px;background:rgba(0,0,0,.7);color:#fff;font-size:10px;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.preview-wrap{display:none}.preview-wrap.show{display:block;animation:fadeUp .5s ease}.set-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:var(--sh1);border:1px solid var(--g2);margin-bottom:1rem}.set-card .hd{background:linear-gradient(135deg, var(--pri), var(--sec));color:#fff;border-radius:10px 10px 0 0;padding:.8rem 1.2rem;margin:-1.5rem -1.5rem 1.2rem;font-weight:600;font-size:.95rem;display:flex;align-items:center;gap:8px}.set-label{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;margin-bottom:8px}.set-label i{color:var(--pri)}.set-select{width:100%;padding:10px 14px;border:2px solid var(--g3);border-radius:8px;font-size:.9rem;font-weight:500;transition:var(--tr);background:#fff;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%234361ee' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}.set-select:focus{outline:none;border-color:var(--pri);box-shadow:0 0 0 3px rgba(67,97,238,.1)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 36px;border-radius:50px;font-weight:700;font-size:1rem;cursor:pointer;transition:var(--tr);border:none;font-family:inherit}.btn-primary{background:linear-gradient(135deg, var(--pri), var(--sec));color:#fff;box-shadow:0 8px 24px rgba(67,97,238,.3)}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(67,97,238,.4)}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-success{background:linear-gradient(135deg, var(--suc), #059669);color:#fff;box-shadow:0 8px 24px rgba(16,185,129,.3)}.btn-success:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(16,185,129,.4)}.btn-success:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn-outline{background:rgba(0,0,0,0);color:var(--g5);border:2px solid var(--g3);padding:12px 28px}.btn-outline:hover{border-color:var(--pri);color:var(--pri);background:rgba(67,97,238,.04)}.result-box{background:linear-gradient(135deg, var(--suc), #059669);color:#fff;border-radius:16px;padding:2.5rem;text-align:center;box-shadow:0 20px 50px rgba(16,185,129,.25);display:none}.result-box.show{display:block;animation:fadeUp .5s ease}.result-box .btn-dl{background:#fff;color:var(--suc);border:none;padding:16px 40px;border-radius:50px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:var(--tr);display:inline-flex;align-items:center;gap:10px;box-shadow:0 8px 24px rgba(0,0,0,.15)}.result-box .btn-dl:hover{transform:translateY(-2px);box-shadow:0 12px 32px rgba(0,0,0,.2)}.b64-output{width:100%;min-height:120px;max-height:300px;border-radius:12px;border:2px solid hsla(0,0%,100%,.3);background:hsla(0,0%,100%,.1);color:#fff;padding:16px;font-family:"Fira Code","Consolas",monospace;font-size:.85rem;resize:vertical;outline:none;overflow:auto;word-break:break-all}.b64-output:focus{border-color:hsla(0,0%,100%,.6)}.btt{position:fixed;bottom:24px;right:24px;width:48px;height:48px;background:linear-gradient(135deg, var(--pri), var(--sec));color:#fff;border:none;border-radius:50%;display:none;align-items:center;justify-content:center;font-size:1.2rem;cursor:pointer;z-index:999;box-shadow:0 6px 20px rgba(67,97,238,.35);transition:var(--tr)}.btt.on{display:flex}.btt:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(67,97,238,.5)}#floatThemeToggle{position:fixed;top:100px;right:20px;width:48px;height:48px;background:#fff;border:1px solid var(--g2);border-radius:50%;cursor:pointer;z-index:1000;display:flex;align-items:center;justify-content:center;color:var(--dk);font-size:1.2rem;box-shadow:0 4px 16px rgba(0,0,0,.1);transition:all .3s}#floatThemeToggle:hover{background:var(--pri);color:#fff;border-color:var(--pri)}.loading-mask{position:fixed;inset:0;background:hsla(0,0%,100%,.95);display:none;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(8px);flex-direction:column}.loading-mask.on{display:flex}.spinner{width:60px;height:60px;border:6px solid rgba(67,97,238,.1);border-radius:50%;border-top-color:var(--pri);animation:spin .8s linear infinite;margin-bottom:1.5rem}@keyframes spin{to{transform:rotate(360deg)}}.toast{position:fixed;top:90px;right:20px;padding:.9rem 1.4rem;border-radius:8px;color:#fff;font-weight:600;font-size:.9rem;z-index:10000;opacity:0;transform:translateX(100%);transition:var(--tr);max-width:340px;box-shadow:var(--sh2)}.toast.on{opacity:1;transform:translateX(0)}.toast.ok{background:linear-gradient(135deg, var(--suc), #059669)}.toast.err{background:linear-gradient(135deg, var(--dng), #dc2626)}.toast.inf{background:linear-gradient(135deg, var(--pri), var(--sec))}.toast.wrn{background:linear-gradient(135deg, var(--warn), #d97706)}.content-section{padding:40px 0}.content-card{background:#fff;border-radius:20px;padding:40px;margin-bottom:32px;box-shadow:0 4px 24px rgba(67,97,238,.08);border:1px solid rgba(67,97,238,.08)}.content-card h2{font-size:1.5rem;margin-bottom:16px}.content-card h3{font-size:1.2rem;margin:24px 0 12px}.content-card p{color:#475569;margin-bottom:16px;line-height:1.8}.content-card ul{color:#475569;margin-bottom:16px;padding-left:20px}.content-card ul li{margin-bottom:8px}.section-title{font-size:clamp(1.8rem,4vw,2.8rem);font-weight:900;margin-bottom:1rem;position:relative;display:inline-block}.section-title::after{content:"";position:absolute;bottom:-8px;left:0;width:60px;height:4px;background:linear-gradient(135deg, var(--pri), var(--sec));border-radius:2px}.why-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:24px;margin-top:40px}.why-card{background:var(--lt);border-radius:12px;padding:2rem 1.5rem;transition:var(--tr);border:1px solid rgba(0,0,0,0);position:relative;overflow:hidden}.why-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(135deg, var(--pri), var(--sec));transform:scaleX(0);transition:var(--tr);transform-origin:left}.why-card:hover{background:#fff;box-shadow:var(--sh3);border-color:rgba(67,97,238,.1);transform:translateY(-4px)}.why-card:hover::before{transform:scaleX(1)}.why-card h4{font-size:1.1rem;font-weight:700;margin-bottom:8px}.why-card p{color:var(--g5);font-size:.9rem;line-height:1.6;margin:0}.why-icon{width:52px;height:52px;background:linear-gradient(135deg, var(--pri), var(--sec));border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;margin-bottom:1rem}.faq-item{background:#fff;border-radius:12px;margin-bottom:12px;border:1px solid var(--g2);overflow:hidden;transition:var(--tr)}.faq-item:hover{border-color:var(--pri);box-shadow:var(--sh1)}.faq-item.open .faq-q i{transform:rotate(180deg)}.faq-item.open .faq-a{max-height:400px;padding:0 1.5rem 1.2rem}.faq-q{padding:1.2rem 1.5rem;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:1rem;background:none;border:none;width:100%;text-align:left;color:var(--dk);transition:var(--tr);gap:12px;font-family:inherit}.faq-q:hover{background:rgba(67,97,238,.03)}.faq-q i{transition:var(--tr);color:var(--pri);flex-shrink:0}.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease,padding .35s ease;padding:0 1.5rem}.faq-a p{color:var(--g5);font-size:.95rem;line-height:1.7;margin:0}.related-tools h2{font-size:1.5rem;margin-bottom:24px;color:var(--dk)}.related-tools>p{color:var(--g5);margin-bottom:30px}.tools-grid{display:grid;grid-template-columns:repeat(5, 1fr);gap:20px;margin-top:40px}.tool-link{background:#fff;border-radius:12px;padding:1.8rem 1.2rem;text-align:center;border:2px solid var(--g2);transition:var(--tr);display:block;text-decoration:none;color:inherit}.tool-link:hover{border-color:var(--pri);box-shadow:var(--sh3);transform:translateY(-6px);color:var(--pri)}.tool-link:hover .t-icon{transform:rotate(10deg) scale(1.1)}.tool-link .t-icon{width:56px;height:56px;background:linear-gradient(135deg, var(--pri), var(--sec));border-radius:14px;display:inline-flex;align-items:center;justify-content:center;font-size:1.5rem;color:#fff;margin-bottom:1rem;transition:var(--tr)}.tool-link h5{font-size:1rem;font-weight:700;margin-bottom:6px}.tool-link p{color:var(--g5);font-size:.82rem;line-height:1.5;margin:0}.trust-bar{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;padding:20px;margin:16px 0;background:rgba(67,97,238,.03);border-radius:12px;border:1px solid rgba(67,97,238,.1)}.trust-item{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--g5)}.trust-item i{color:var(--pri)}.case-studies h2,.faq-section h2{font-size:1.5rem;margin-bottom:16px}.case-studies>p,.faq-section>p{color:var(--g5);margin-bottom:20px}.case-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:16px;margin:20px 0}.case-card{background:rgba(67,97,238,.03);border:1px solid rgba(67,97,238,.1);border-radius:15px;padding:1.5rem;transition:var(--tr)}.case-card:hover{transform:translateY(-4px);border-color:var(--pri)}.case-card h3{font-size:1rem;margin-bottom:8px}.case-number{background:var(--pri);color:#fff;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;margin-bottom:12px}.case-detail{font-size:.85rem;color:var(--g5);margin-bottom:4px;line-height:1.5}.case-detail strong{color:var(--pri)}.usage-guide{padding:20px 0}.usage-guide h2{font-size:1.5rem;margin-bottom:1.5rem}.step{display:flex;gap:16px;margin-bottom:20px;align-items:flex-start}.step .step-num{width:36px;height:36px;border-radius:50%;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:1rem;border:none;box-shadow:none}.step .step-content{flex:1}.step .step-content h3{font-size:1rem;margin-bottom:4px}.step .step-content p{color:var(--g5);font-size:.9rem;margin:0;line-height:1.6}.article-wrap{max-width:820px;margin:0 auto}.article-wrap h2{font-size:1.6rem;font-weight:800;margin:2rem 0 1rem}.article-wrap h3{font-size:1.25rem;font-weight:700;margin:1.5rem 0 .8rem}.article-wrap p{color:var(--g5);font-size:1.02rem;line-height:1.85;margin-bottom:1rem}.article-wrap ul,.article-wrap ol{color:var(--g5);padding-left:1.5rem;margin-bottom:1rem}.article-wrap li{margin-bottom:6px;font-size:1rem;line-height:1.7}.article-wrap strong{color:var(--dk)}.info-callout{background:linear-gradient(135deg, rgba(67, 97, 238, 0.06), rgba(114, 9, 183, 0.06));border-left:4px solid var(--pri);border-radius:0 8px 8px 0;padding:1.2rem 1.5rem;margin:1.5rem 0}.info-callout h4{font-size:1.05rem;font-weight:700;margin-bottom:6px}.warn-callout{background:rgba(245,158,11,.06);border-left:4px solid var(--warn);border-radius:0 8px 8px 0;padding:1.2rem 1.5rem;margin:1.5rem 0}.warn-callout h4{font-size:1.05rem;font-weight:700;margin-bottom:6px;color:#92400e}#app-content[data-theme=dark]{--bg-body: #0f172a;--bg-card: #1e293b;--bg-card-hover: #334155;--text-primary: #f1f5f9;--text-secondary: #94a3b8;--text-muted: #64748b;--border: #334155;--shadow: 0 4px 24px rgba(0, 0, 0, 0.3);background:var(--bg-body);color:var(--text-primary)}#app-content[data-theme=dark] .tool-card{background:var(--bg-card);border-color:var(--border);box-shadow:var(--shadow)}#app-content[data-theme=dark] .content-card{background:var(--bg-card);border-color:var(--border);box-shadow:var(--shadow)}#app-content[data-theme=dark] .content-card p{color:var(--text-secondary)}#app-content[data-theme=dark] .upload-zone{background:rgba(67,97,238,.06)}#app-content[data-theme=dark] .canvas-box{background:var(--bg-card-hover);border-color:var(--border)}#app-content[data-theme=dark] .set-card{background:var(--bg-card-hover);border-color:var(--border)}#app-content[data-theme=dark] .set-select{background:var(--bg-card);color:var(--text-primary);border-color:var(--border)}#app-content[data-theme=dark] .faq-item{background:var(--bg-card);border-color:var(--border)}#app-content[data-theme=dark] .faq-q{color:var(--text-primary)}#app-content[data-theme=dark] .faq-a p{color:var(--text-secondary)}#app-content[data-theme=dark] .tool-link{background:var(--bg-card);border-color:var(--border)}#app-content[data-theme=dark] .tool-link h5{color:var(--text-primary)}#app-content[data-theme=dark] .tool-link p{color:var(--text-secondary)}#app-content[data-theme=dark] .case-card{background:var(--bg-card-hover);border-color:var(--border)}#app-content[data-theme=dark] .case-detail{color:var(--text-secondary)}#app-content[data-theme=dark] .usage-guide .step-content p{color:var(--text-secondary)}#app-content[data-theme=dark] .trust-bar{background:rgba(67,97,238,.08);border-color:rgba(67,97,238,.15)}#app-content[data-theme=dark] .trust-item{color:var(--text-secondary)}#app-content[data-theme=dark] .privacy-note p{color:var(--text-secondary)}#app-content[data-theme=dark] .related-tools h2,#app-content[data-theme=dark] .content-card h2,#app-content[data-theme=dark] .content-card h3{color:var(--text-primary)}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--g1)}::-webkit-scrollbar-thumb{background:linear-gradient(var(--pri), var(--sec));border-radius:4px}@media(max-width: 768px){.hero-section{padding:120px 0 80px}.tool-card{padding:1.2rem}.step-bar::before{display:none}.step-bar{flex-direction:column;gap:1rem;align-items:center}.upload-zone{padding:2.5rem 1.2rem}.tools-grid{grid-template-columns:repeat(2, 1fr);gap:12px}.tool-link{padding:1.2rem .8rem}.content-card{padding:24px}.case-grid{grid-template-columns:1fr}}@media(max-width: 480px){.hero-section{padding:100px 0 60px}.hero-title{font-size:clamp(1.7rem,8vw,2.4rem)}.hero-desc{font-size:.98rem}.tool-card{padding:1rem;border-radius:16px}.upload-zone{padding:2rem 1rem}.upload-icon{width:60px;height:60px;font-size:1.5rem}.tools-grid{grid-template-columns:repeat(2, 1fr);gap:10px}.btn{width:100%}.stat-box{padding:1rem}.b64-output{min-height:100px}.toast{right:10px;left:10px;text-align:center;max-width:none}.faq-q{padding:1rem 1.1rem}#floatThemeToggle{width:42px;height:42px;right:14px}}@media(prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}