:root{--tool-card-bg:var(--surface);--tool-border:var(--outline);--tool-shadow:var(--shadow-md);}[data-theme="dark"]{--tool-card-bg:var(--surface-alt);--tool-border:var(--outline-variant);}.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:2rem;padding:2rem 0;}.tool-card{background:var(--tool-card-bg);border:1px solid var(--tool-border);border-radius:20px;padding:2rem;transition:var(--transition);text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:1.25rem;position:relative;overflow:hidden;}.tool-card:hover{transform:translateY(-5px);border-color:var(--primary);box-shadow:var(--shadow-lg);}.tool-card i{width:48px;height:48px;padding:10px;background:var(--primary-bg);color:var(--primary);border-radius:12px;}.tool-card h3{margin:0;font-size:1.5rem;}.tool-card p{margin:0;font-size:0.95rem;color:var(--on-surface-variant);line-height:1.5;}.tool-badge{position:absolute;top:1rem;right:1rem;background:var(--secondary-light);color:#fff;font-size:0.65rem;font-weight:800;padding:0.25rem 0.6rem;border-radius:100px;text-transform:uppercase;}.dropzone{border:2px dashed var(--outline);border-radius:16px;padding:4rem 2rem;text-align:center;transition:var(--transition);background:var(--surface-dim);cursor:pointer;margin-bottom:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem;}.dropzone.dragover{border-color:var(--primary);background:var(--primary-bg);}.dropzone-icon{color:var(--primary);width:64px;height:64px;}.tool-container{max-width:1000px;margin:4rem auto;}.controls-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:2.5rem;align-items:start;}@media (max-width:992px){.controls-grid{grid-template-columns:1fr;}}.controls-grid > div{min-width:0;}.preview-container{background:var(--surface-alt);border-radius:12px;padding:1rem;display:flex;align-items:center;justify-content:center;min-height:300px;max-height:600px;overflow:hidden;position:relative;border:1px solid var(--outline);}#sourcePreview,#compressedPreview,#outputCanvas{max-width:100%;max-height:500px;border-radius:8px;box-shadow:var(--shadow-sm);object-fit:contain;}.comparison-slider{position:relative;width:100%;height:400px;overflow:hidden;border-radius:12px;}input[type="range"]{width:100%;height:6px;background:var(--outline);border-radius:5px;outline:none;-webkit-appearance:none;}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:var(--primary);border-radius:50%;cursor:pointer;transition:var(--transition);}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2);}.tool-header{text-align:center;margin-bottom:3rem;}.tool-header h1{font-size:3rem;margin-bottom:1rem;}.tool-header p{font-size:1.2rem;color:var(--on-surface-variant);}