:root{--font-display:'Playfair Display',Georgia,serif;--font-body:'DM Sans',sans-serif;--font-mono:'JetBrains Mono',monospace;--radius-sm:8px;--radius-md:14px;--radius-lg:20px;--transition:0.25s cubic-bezier(0.4,0,0.2,1);--max-width:1200px}
[data-theme="light"]{--bg-primary:#FAF9F7;--bg-secondary:#FFFFFF;--bg-tertiary:#F2F0ED;--bg-hover:#EBE9E5;--bg-code:#F5F3F0;--text-primary:#1A1714;--text-secondary:#5C574F;--text-tertiary:#8A857D;--border-primary:#E0DDD8;--border-secondary:#EDEBE7;--accent:#C8552D;--accent-hover:#A84520;--accent-subtle:rgba(200,85,45,0.08);--accent-text:#C8552D;--success:#3D8B37;--success-bg:rgba(61,139,55,0.08);--error:#C0392B;--error-bg:rgba(192,57,43,0.08);--drop-zone-bg:repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(200,85,45,0.03) 8px,rgba(200,85,45,0.03) 16px);--shadow-card:0 1px 4px rgba(0,0,0,0.04),0 4px 20px rgba(0,0,0,0.03);--progress-track:#E8E5E0;--shadow-lg:0 12px 40px rgba(0,0,0,0.12)}
[data-theme="dark"]{--bg-primary:#111110;--bg-secondary:#1A1918;--bg-tertiary:#222120;--bg-hover:#2A2928;--bg-code:#1E1D1C;--text-primary:#ECE9E4;--text-secondary:#A39E96;--text-tertiary:#6E6A63;--border-primary:#333230;--border-secondary:#282726;--accent:#E8733D;--accent-hover:#F08A58;--accent-subtle:rgba(232,115,61,0.1);--accent-text:#E8733D;--success:#5CB85C;--success-bg:rgba(92,184,92,0.1);--error:#E74C3C;--error-bg:rgba(231,76,60,0.1);--drop-zone-bg:repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(232,115,61,0.03) 8px,rgba(232,115,61,0.03) 16px);--shadow-card:0 1px 4px rgba(0,0,0,0.2),0 4px 20px rgba(0,0,0,0.15);--progress-track:#2A2928;--shadow-lg:0 12px 40px rgba(0,0,0,0.3)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-body);background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;transition:background var(--transition),color var(--transition);-webkit-font-smoothing:antialiased}
.skip-link{position:absolute;top:-100px;left:16px;background:var(--accent);color:white;padding:8px 16px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:600;text-decoration:none;z-index:10000;transition:top 0.2s}
.skip-link:focus{top:8px}
.app-container{max-width:var(--max-width);margin:0 auto;padding:0 24px}
.site-header{background:var(--bg-secondary);border-bottom:1px solid var(--border-primary);padding:0 24px;position:sticky;top:0;z-index:100;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text-primary)}
.brand-icon{width:36px;height:36px;background:var(--accent);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:white;flex-shrink:0}
.brand-icon svg{width:20px;height:20px}
.brand h1{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-0.02em;line-height:1.2;display:inline}
.logo-sub{display:inline;font-size:13px;color:var(--text-tertiary);font-weight:400;margin-left:8px}
.header-actions{display:flex;align-items:center;gap:8px}
.privacy-badge{display:flex;align-items:center;gap:6px;padding:6px 12px;background:rgba(52,211,153,0.1);color:#34d399;border-radius:100px;font-size:12px;font-weight:500;letter-spacing:0.01em}
.privacy-dot{width:6px;height:6px;border-radius:50%;background:#34d399;animation:pulse-privacy 2s ease infinite}
@keyframes pulse-privacy{0%,100%{opacity:1}50%{opacity:0.4}}
.theme-toggle{width:40px;height:40px;border-radius:var(--radius-sm);border:1px solid var(--border-primary);background:var(--bg-secondary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition)}
.theme-toggle:hover{background:var(--bg-hover);color:var(--text-primary);border-color:var(--text-tertiary)}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .icon-moon,[data-theme="dark"] .theme-toggle .icon-sun{display:none}
[data-theme="dark"] .theme-toggle .icon-moon{display:block}
[data-theme="light"] .theme-toggle .icon-sun{display:block}
.privacy-strip{display:flex;align-items:center;gap:8px;padding:10px 16px;background:var(--success-bg);border:1px solid rgba(92,184,92,0.15);border-radius:var(--radius-sm);margin-bottom:28px;font-size:0.82rem;color:var(--success);font-weight:500}
.privacy-strip svg{width:16px;height:16px;flex-shrink:0}
.section-label{font-size:0.7rem;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--text-tertiary);margin-bottom:12px}
.upload-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:6px;box-shadow:var(--shadow-card);margin-bottom:24px}
.drop-zone{border:2px dashed var(--border-primary);border-radius:var(--radius-md);padding:52px 32px;text-align:center;cursor:pointer;transition:all var(--transition);background:var(--drop-zone-bg);position:relative}
.drop-zone:hover,.drop-zone.drag-over{border-color:var(--accent);background:var(--accent-subtle)}
.drop-zone.drag-over{transform:scale(1.005)}
.drop-zone-icon{width:56px;height:56px;margin:0 auto 16px;background:var(--accent-subtle);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--accent);transition:all var(--transition)}
.drop-zone:hover .drop-zone-icon{transform:translateY(-2px);background:var(--accent);color:white}
.drop-zone-icon svg{width:26px;height:26px}
.drop-zone h2{font-family:var(--font-body);font-size:1.05rem;font-weight:600;margin-bottom:6px;color:var(--text-primary)}
.drop-zone p{font-size:0.84rem;color:var(--text-tertiary)}
.drop-zone .formats-hint{display:inline-flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:14px}
.format-tag{font-family:var(--font-mono);font-size:0.68rem;font-weight:500;padding:3px 9px;background:var(--bg-tertiary);border-radius:4px;color:var(--text-secondary);letter-spacing:0.02em}
#fileInput{display:none}
.preview-section,.options-section,.convert-section,.progress-section,.result-section{display:none;margin-bottom:24px}
.result-section{margin-bottom:40px}
.preview-section.visible,.options-section.visible,.convert-section.visible,.progress-section.visible,.result-section.visible{display:block;animation:fadeIn 0.35s ease}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.preview-card,.result-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.preview-header,.result-header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--border-secondary);flex-wrap:wrap;gap:10px}
.file-info{display:flex;align-items:center;gap:12px;min-width:0}
.file-icon{width:36px;height:36px;background:var(--accent-subtle);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;color:var(--accent);flex-shrink:0}
.file-icon svg{width:18px;height:18px}
.file-meta{min-width:0}
.file-name{font-weight:600;font-size:0.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:320px}
.file-size{font-size:0.78rem;color:var(--text-tertiary)}
.btn-remove{width:36px;height:36px;border-radius:var(--radius-sm);border:1px solid var(--border-primary);background:var(--bg-tertiary);color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition);flex-shrink:0}
.btn-remove:hover{background:var(--error-bg);border-color:var(--error);color:var(--error)}
.preview-body{padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:180px;max-height:420px;overflow:auto;background:var(--bg-tertiary)}
.preview-body img,.preview-body canvas{max-width:100%;max-height:380px;border-radius:var(--radius-sm);object-fit:contain}
.options-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:20px;box-shadow:var(--shadow-card)}
.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.option-group label{display:block;font-size:0.78rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.05em}
.option-group select{width:100%;padding:10px 14px;border-radius:var(--radius-sm);border:1px solid var(--border-primary);background:var(--bg-tertiary);color:var(--text-primary);font-family:var(--font-body);font-size:0.88rem;cursor:pointer;transition:border-color var(--transition);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A857D' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.option-group select:focus{outline:none;border-color:var(--accent)}
.btn-convert{width:100%;padding:16px 28px;border:none;border-radius:var(--radius-md);background:var(--accent);color:white;font-family:var(--font-body);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:10px}
.btn-convert:hover:not(:disabled){background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 24px rgba(200,85,45,0.25)}
.btn-convert:active:not(:disabled){transform:translateY(0)}
.btn-convert:disabled{opacity:0.5;cursor:not-allowed}
.btn-convert svg{width:20px;height:20px}
.progress-card{background:var(--bg-secondary);border:1px solid var(--border-primary);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-card)}
.progress-label{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;font-size:0.88rem}
.progress-status{font-weight:500;color:var(--text-primary)}
.progress-pct{font-family:var(--font-mono);font-size:0.82rem;color:var(--accent-text);font-weight:500}
.progress-track{height:8px;background:var(--progress-track);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent);border-radius:99px;width:0%;transition:width 0.4s ease}
.progress-sub{margin-top:10px;font-size:0.78rem;color:var(--text-tertiary)}
.result-title{display:flex;align-items:center;gap:10px;font-weight:600;font-size:0.92rem}
.result-title .check-icon{width:24px;height:24px;background:var(--success-bg);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--success)}
.result-title .check-icon svg{width:14px;height:14px}
.result-actions{display:flex;gap:8px}
.btn-action{padding:8px 16px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:0.82rem;font-weight:500;cursor:pointer;transition:all var(--transition);display:flex;align-items:center;gap:6px;border:1px solid var(--border-primary);background:var(--bg-tertiary);color:var(--text-primary)}
.btn-action:hover{background:var(--bg-hover);border-color:var(--text-tertiary)}
.btn-action.primary{background:var(--accent);color:white;border-color:transparent}
.btn-action.primary:hover{background:var(--accent-hover)}
.btn-action svg{width:16px;height:16px}
.result-body{padding:20px;max-height:400px;overflow:auto}
.result-text{font-family:var(--font-mono);font-size:0.84rem;line-height:1.7;white-space:pre-wrap;word-break:break-word;color:var(--text-primary);background:var(--bg-code);padding:20px;border-radius:var(--radius-sm);border:1px solid var(--border-secondary)}
.result-stats{display:flex;gap:20px;padding:14px 20px;border-top:1px solid var(--border-secondary);font-size:0.78rem;color:var(--text-tertiary);flex-wrap:wrap}
.stat-item{display:flex;align-items:center;gap:5px}
.stat-value{font-weight:600;color:var(--text-secondary)}
.toast-container{position:fixed;bottom:24px;right:24px;z-index:1000;display:flex;flex-direction:column;gap:8px}
.toast{padding:14px 20px;border-radius:var(--radius-sm);font-size:0.85rem;font-weight:500;box-shadow:var(--shadow-lg);animation:slideIn 0.35s ease;display:flex;align-items:center;gap:10px;max-width:400px;backdrop-filter:blur(8px)}
.toast svg{width:18px;height:18px;flex-shrink:0}
.toast.error{background:var(--error-bg);border:1px solid var(--error);color:var(--error)}
.toast.success{background:var(--success-bg);border:1px solid var(--success);color:var(--success)}
.toast.info{background:var(--accent-subtle);border:1px solid var(--accent);color:var(--accent-text)}
@keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes slideOut{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(20px)}}
.app-footer{text-align:center;padding:32px 0 40px;font-size:0.78rem;color:var(--text-tertiary);border-top:1px solid var(--border-secondary);margin-top:16px}
.app-footer a{color:var(--accent-text);text-decoration:none}
.app-footer a:hover{text-decoration:underline}
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-primary);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--text-tertiary)}
@media(max-width:640px){.header-inner{height:56px}.brand h1{font-size:18px}.logo-sub{display:none}.privacy-badge span:not(.privacy-dot){display:none}.privacy-badge{padding:8px}.drop-zone{padding:36px 20px}.drop-zone-icon{width:48px;height:48px}.file-name{max-width:160px}.result-actions{width:100%}.btn-action{flex:1;justify-content:center}.toast-container{left:16px;right:16px;bottom:16px}.toast{max-width:100%}}
@media(max-width:560px){.options-grid{grid-template-columns:1fr}}

/* ===== SITE FOOTER ===== */
.site-footer{
  margin-top:60px;padding:48px 28px 36px;
  border-top:1px solid var(--border-primary);
  background:var(--bg-primary);color:var(--text-secondary);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  font-size:14px;line-height:1.6;
}
.site-footer .footer-inner{max-width:1100px;margin:0 auto}
.site-footer .footer-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;margin-bottom:40px;
}
.site-footer .footer-brand{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.site-footer .footer-brand svg{width:32px;height:32px;color:#a855f7;flex-shrink:0}
.site-footer .footer-brand-name{
  font-size:20px;font-weight:700;
  background:linear-gradient(90deg,#8B5CF6,#EC4899,#3B82F6);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.site-footer .footer-desc{color:var(--text-tertiary);margin-bottom:16px;max-width:360px}
.site-footer .footer-copy{font-size:12px;color:var(--text-tertiary)}
.site-footer h2{font-weight:700;margin-bottom:16px;color:var(--text-primary);font-size:15px}
.site-footer ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.site-footer a{color:var(--text-secondary);text-decoration:underline;text-decoration-color:var(--border-primary);text-underline-offset:2px;transition:color .2s,text-decoration-color .2s}
.site-footer a:hover{color:#a855f7;text-decoration-color:#a855f7}
.site-footer .footer-bottom{
  border-top:1px solid var(--border-primary);
  padding-top:20px;text-align:center;
}
.site-footer .footer-bottom p{color:var(--text-tertiary);font-size:13px}
.site-footer .footer-bottom span{color:#a855f7}

@media(max-width:768px){
  .site-footer .footer-grid{grid-template-columns:1fr;gap:32px}
  .site-footer{padding:36px 16px 28px}
}