.dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:48px 24px;border:2px dashed var(--color-border);border-radius:var(--radius);background:var(--color-surface);cursor:pointer;margin-bottom:24px}.dropzone:hover,.dropzone.dragover{border-color:var(--color-accent);background:var(--color-accent-light)}.dropzone svg{color:var(--color-text-secondary)}.dropzone p{color:var(--color-text-secondary)}.panels{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}@media(max-width:768px){.panels{grid-template-columns:1fr}}.panel{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--color-border);background:var(--color-bg)}.panel-title{font-size:.8125rem;font-weight:600;text-transform:uppercase}.size-label{font-family:var(--font-mono);font-size:.75rem;color:var(--color-text-secondary)}.code-area{width:100%;height:200px;padding:16px;border:none;font-family:var(--font-mono);font-size:.8125rem;resize:vertical}.code-area:focus{outline:none}.actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}.savings{font-weight:600;color:#059669}.btn-download{padding:12px 24px;border:none;border-radius:var(--radius-sm);background:var(--color-accent);color:#fff;font-weight:600;cursor:pointer}.btn-download:hover{background:#1d4ed8}.btn-copy{padding:12px 24px;border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);cursor:pointer}.btn-copy:hover{border-color:var(--color-accent)}