:root {
  --bg:#f8fafc; --surface:#fff; --surface2:#f1f5f9; --border:#e2e8f0;
  --text:#1e293b; --text2:#64748b; --accent:#d97706; --accent-hover:#b45309;
  --accent-light:rgba(217,119,6,0.08); --green:#16a34a; --green-bg:rgba(22,163,74,0.1);
  --radius:12px; --radius-lg:18px; --shadow:0 4px 24px rgba(0,0,0,0.06);
  --shadow-lg:0 8px 40px rgba(0,0,0,0.1);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Noto Sans',sans-serif;
  --max-width:1100px; --header-h:68px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh;display:flex;flex-direction:column}
h1{font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.5px}
h2{font-size:clamp(1.4rem,2.5vw,1.8rem);font-weight:700}
h3{font-size:1.15rem;font-weight:600}

/* Header */
.site-header{background:var(--surface);border-bottom:1px solid var(--border);height:var(--header-h);position:sticky;top:0;z-index:100;box-shadow:0 1px 4px rgba(0,0,0,.03)}
.header-inner{max-width:var(--max-width);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--text);font-weight:700;font-size:.95em;white-space:nowrap}
.logo .accent-dot{color:var(--accent)}
.logo-icon{width:26px;height:26px;color:var(--accent);flex-shrink:0}
.nav-links{display:flex;gap:4px;list-style:none}
.nav-links a{color:var(--text2);text-decoration:none;padding:8px 14px;border-radius:8px;font-size:.88em;font-weight:500;transition:all .15s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--text);background:var(--surface2)}

/* Lang Switcher */
.lang-switcher{position:relative;display:flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--border);border-radius:8px;cursor:pointer;font-size:.85em;background:var(--surface);user-select:none;flex-shrink:0}
.lang-switcher:hover{border-color:var(--accent)}
.lang-code{font-weight:600;color:var(--text2)}
.lang-arrow{font-size:.7em;color:var(--text2)}
.lang-dropdown{display:none;position:absolute;top:110%;right:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);min-width:180px;z-index:200;max-height:400px;overflow-y:auto}
.lang-dropdown.open{display:block}
.lang-dropdown a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--text);text-decoration:none;font-size:.88em}
.lang-dropdown a:hover{background:var(--surface2)}
.lang-dropdown a.active{background:var(--accent-light);color:var(--accent);font-weight:600}

/* Hamburger */
.menu-toggle{display:none}

/* Hero */
.hero{text-align:center;padding:64px 24px 48px;max-width:800px;margin:0 auto}
.hero-badge{display:inline-block;padding:4px 12px;background:var(--accent-light);color:var(--accent);border-radius:20px;font-size:.82em;font-weight:600;margin-bottom:16px}
.hero h1 span{color:var(--accent)}
.hero-sub{color:var(--text2);font-size:1.05em;max-width:600px;margin:12px auto 24px}

/* Dropzone */
.dropzone{max-width:700px;margin:0 auto;border:2px dashed var(--border);border-radius:var(--radius-lg);padding:48px 24px;text-align:center;background:var(--surface);transition:all .25s;cursor:pointer}
.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:var(--accent-light)}
.dropzone .dz-icon{font-size:3em;display:block;margin-bottom:12px}
.dropzone h3{margin-bottom:6px}
.dropzone p{color:var(--text2);font-size:.9em}
.dropzone .formats{margin-top:12px;font-size:.78em;color:var(--text2)}
.dropzone input[type=file]{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:12px 24px;border:1px solid var(--border);border-radius:10px;font-size:.95em;font-weight:600;cursor:pointer;text-decoration:none;transition:all .2s;font-family:inherit;color:var(--text);background:var(--surface)}
.btn:hover{background:var(--surface2);border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 4px 16px rgba(217,119,6,.2)}
.btn-lg{padding:16px 36px;font-size:1.1em}
.btn-sm{padding:6px 14px;font-size:.85em;border-radius:6px}

/* File Grid */
.file-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px;margin-bottom:24px}
.file-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:16px;transition:box-shadow .2s}
.file-card:hover{box-shadow:var(--shadow)}
.file-card .fc-preview{width:100%;height:180px;object-fit:contain;background:var(--surface2);border-radius:8px;margin-bottom:12px}
.file-card .fc-name{font-size:.85em;font-weight:600;margin-bottom:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-card .fc-sizes{display:flex;gap:16px;font-size:.82em;color:var(--text2);margin-bottom:8px}
.file-card .fc-saved{color:var(--green);font-weight:600}
.file-card .fc-controls{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.file-card .fc-controls label{font-size:.8em;color:var(--text2)}
.file-card .fc-controls input[type=range]{flex:1;min-width:100px}
.file-card .fc-controls select{padding:4px 8px;border:1px solid var(--border);border-radius:6px;font-size:.82em}

.tool-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0}

/* Sections */
.section{padding:60px 24px}
.section-inner{max-width:var(--max-width);margin:0 auto}

/* SEO Section */
.seo-section h2{font-size:1.8em;margin-bottom:16px}
.seo-section h3{margin:32px 0 10px;font-size:1.3em}
.seo-section p{color:var(--text2);line-height:1.8;margin-bottom:16px}
.feature-list{list-style:none;padding:0}
.feature-list li{padding:8px 0;color:var(--text2);border-bottom:1px solid var(--border)}
.feature-list li::before{content:'✓';color:var(--green);margin-right:10px;font-weight:700}
.cta-box{background:var(--accent-light);border:1px solid var(--accent);border-radius:var(--radius-lg);padding:24px;text-align:center;margin-top:32px;font-weight:600}

/* Privacy Section */
.privacy-section{background:var(--surface);border-top:1px solid var(--border)}

/* Blog */
.blog-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;margin-bottom:16px}
.blog-date{font-size:.8em;color:var(--text2);margin-bottom:8px}

/* Legal Pages */
.legal-page{max-width:800px;margin:0 auto;padding:48px 24px 64px}
.legal-page h1{font-size:2rem;margin-bottom:8px}
.legal-page .last-updated{color:var(--text2);font-size:.9em;margin-bottom:32px}
.legal-page .legal-intro{font-size:1.05em;margin-bottom:32px;color:var(--text2)}
.legal-page section{margin-bottom:28px}
.legal-page section h2{font-size:1.15em;margin-bottom:8px}
.legal-page section p{color:var(--text2);line-height:1.8}

/* Footer */
.site-footer{border-top:1px solid var(--border);padding:28px 24px;text-align:center;background:var(--surface);margin-top:auto}
.footer-inner{max-width:var(--max-width);margin:0 auto}
.site-footer p{color:var(--text2);font-size:.85em}
.footer-legal{margin-top:8px;font-size:.78em}
.footer-legal a{color:var(--text2);text-decoration:none;margin:0 4px}
.footer-legal a:hover{color:var(--accent)}

/* Loading */
.spinner{display:inline-block;width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* Processing overlay */
.processing-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:1000}
.processing-overlay.active{display:flex}
.processing-box{background:var(--surface);padding:32px;border-radius:var(--radius-lg);text-align:center}
.processing-box .spinner{width:32px;height:32px;margin:0 auto 12px;display:block}

/* Tool area hidden state */
.no-files-msg{text-align:center;padding:40px;color:var(--text2)}

@media(max-width:768px){
  .hero{padding:36px 16px 28px}
  .section{padding:36px 16px}
  .header-inner{padding:0 12px}
  .lang-code{display:none}
  .menu-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;padding:8px;cursor:pointer;z-index:110;order:1}
  .menu-toggle span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:all .25s}
  .menu-toggle.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
  .menu-toggle.open span:nth-child(2){opacity:0}
  .menu-toggle.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}
  #mainNav{position:fixed;top:var(--header-h);left:0;right:0;bottom:0;background:var(--surface);padding:24px;display:none;z-index:105;overflow-y:auto}
  #mainNav.open{display:block}
  .nav-links{flex-direction:column;gap:4px}
  .nav-links a{display:block;padding:14px 16px;font-size:1.05em;border-radius:10px}
  .header-inner>.lang-switcher{order:2;margin-left:auto}
  .logo{order:0}
  .file-grid{grid-template-columns:1fr}
  .dropzone{padding:32px 16px}
  .legal-page{padding:24px 16px 40px}
}